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

screenshot922×419 14.6 KB

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

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.