Has anybody tried integrating an advanced JavaScript data grid with dynamic data fetch to Live View?

artem

Hi all

The problem
I am into building a data intensive app in LiveView. It is basically a smart analyzer of customer feedback: use AI to parse out opinions and topics, then aggregate, chart, present it visually.

Naturally, a bit part of design is going to be a large data grid for the feedback topics, statements, various metadata (e.g. date or app version) with pagination or ideally even endless scrolling.

This seems to be a quite good fit for live view, some elixir courses even teach you how to build paginated grid in one of the first lessons.. yet it’s still would be a home grown solution.

Looking for a solution
It would be wonderful if I could use some of the advanced JS data grids out there such as AG-Grid or ReactTable. Then you’d be able to get for free a lot of battle-proven magic such as easy column reordering, filtering, UI for endless scrolling or unwrapping rows to details as in screenshot.

In theory if such grids could use some DOM nodes for data LiveView could relatively easily supply that when needed and adjust queries based on callbacks (e.g. when button for sorting is clicked), but that’s theory

Has anybody done it in practice? Is it really possible to connect a JS-native data grid with lots of JS-side magic with a LiveView data supply?

4 comments

#liveview #data

2 1944 4

2023-02-16 06:56:36 UTC

Showing Posts 1 to 4

Show Best Posts
Show All (oldest first)
Show All (newest first)

evadne

You will end up with a parallel system if you try to integrate something that has this sort of stuff implemented in JS.

Post #1

codeanpeace

Off the top of my head, there’s no reason it wouldn’t be possible. LiveView Hooks make all sorts of integrations possible. The question, as always, becomes whether it’s the right thing to do given your unique set of circumstances i.e. requirements, constraints, and tradeoffs.

The LiveView docs are great and especially relevant is the section on DOM Patching & temporary assigns…

A container can be marked with phx-update, allowing the DOM patch operations to avoid updating or removing portions of the LiveView, or to append or prepend the updates rather than replacing the existing contents. This is useful for client-side interop with existing libraries that do their own DOM operations.
…
The “ignore” behaviour is frequently used when you need to integrate with another JS library. Note only the element contents are ignored, its attributes can still be updated.

… as well as the section on JavaScript Interoperability.

There’s also a helpful article written by the author of Real-Time Phoenix @sb8244 React in LiveView: How and Why? that establishes some useful guidelines when working with React within LiveView.

And another potentially useful resource includes phoenix_live_react, a helper library for easily rendering React components within Phoenix LiveViews.

Post #2

sb8244

Author of Real-Time Phoenix

Thanks for the shout-out. As a note I really liked the hybrid react+LiveView approach and would do it again.

I don’t feel any attachment to having a pure LV system. I’d rather pick the thing that’s going to work best for what I want, especially if I don’t need to create it from scratch.

LiveView hooks give you everything you need to mount react, so check out that post to see how I did it.

Post #3