Are there any simple, lightweight library for data tables for LiveView?

Phoenix Forum Questions / Help
,
1

Are there libraries that offer lightweight and simple enough library table for LiveView which I could plug in relatively easy?

It should have pagination at least. And preferably sorting and search.
It doesn’t have to be rendered on the client side commpletely via js.

6 Likes
2

Updated:

Although not a library, the book Building Table Views with Phoenix LiveView deals with table pagination and sorting.

The relevant source code is freely available in the aforementioned link (though not updated for Phoenix 1.7 and the new streaming functionality).

2 Likes
3

Explorer is for manipulating tabular data.

I guess the thread opener is searching something that displays the table (with pagination, sorting and filtering), so as a LiveView component.

2 Likes
4

Ups, you are absolutely correct. My bad, I did not read the question carefully enough.

1 Like
5

I’m having good experiences with flop and its phoenix addendum flop_phoenix. It has first-class support for filtering, paginating and sorting. The phoenix package has a function component for displaying a table with these features.
There is this thread here.

Keep in mind that pagination and such often involves updating the url, which is a bit of a hassle (at least if you need deep-linking capabilities). Flop helps with that too.

1 Like
6

Exzeitable comes to mind: GitHub - alanvardy/exzeitable: Dynamically updating, searchable, sortable datatables with Phoenix LiveView

7

I don’t understand.

You’ve given a correct answer.

8

The present answer is edited after the comment of @Nefcairon . The initial suggestion was for a different problem. Apologies for the confusion!

9

Unfortunately, the code in Building Table Views with Phoenix LiveView is quite different from those of the latest LiveView 0.8.3, absolutely incompatible.

10

I built a DataTable component which I have personally been using for a lot of projects because it is so useful for admin interfaces.

image
image922×419 14.6 KB

It is a bit rough around the edges, but is really really convenient.

Some of the features include:

  • Filtering
  • Sorting
  • Expandable rows
  • Pagination
  • Row selection with customizable bulk actions
  • Ability to show/hide columns, including defaults
  • Swappable themes (tailwind based theme included by default)
  • Source behaviour to define your own data sources. ecto based source included out of the box.
9 Likes