DataTable - Simple and flexible DataTable component for LiveView

DataTable is a easy to use, simple and flexible Data Table for LiveView.

Code used for the example, under 60 LOC

I have been tweaking this and using it for admin interfaces for various projects for a while now, and I decided to finally get around to polishing it up and publishing it properly. Hope this can be useful for others as well :slight_smile:

Some feature highlights:

  • Filtering - Apply filters at the top. Customize which fields are filterable.
  • Sorting - Click headers to cycle sorting.
  • Expandable rows - Optionally make rows expandable, show more context for the row.
  • Pagination
  • Row selection - Perform custom actions on multiple rows.
  • Pluggable Sources - Data is fetched from the DataTable.Source behaviour, write your own data sources
    • Ecto support - Built in first-class Ecto support implemented as a Source.
  • Persistent navigation - Optionally persist table state to query string
  • Theming - Customize everything to match your application, including markup
    • Tailwind theme - You get a decent Tailwind-based theme out of the box

All of the above is available in an easy to use LiveComponent.

https://hexdocs.pm/data_table/DataTable.html

17 Likes