Introducing LiveTable - Interactive Tables for Phoenix LiveView
Hello Elixir community!
I’m excited to announce the release of LiveTable, a comprehensive table component library built specifically for Phoenix LiveView applications. LiveTable aims to simplify the implementation of complex, interactive data tables while maintaining the real-time capabilities that make LiveView great.
Key Features
Rich Filtering System
Text search across multiple fields
Range filters for numbers, dates, and datetimes
Boolean filters with custom conditions
Select filters with static and dynamic options
Multi-column filtering support
Smart Sorting
Multi-column sorting with shift-click support
Sortable associated fields
Customizable sort directions
Export Capabilities
Background processing with Oban
CSV exports using NimbleCSV
PDF exports using Typst
Real-time Updates
Instant filter feedback
Seamless LiveView integration
Flexible Pagination
Configurable page sizes
Dynamic page navigation
Efficient database querying
Getting Started
Add to your dependencies:
def deps do
[
{:live_table, "~> 0.2.0"}
]
end
Check out our GitHub Repository for complete documentation and examples.
Why LiveTable?
We built LiveTable to address the common need for interactive data tables in Phoenix applications. It provides a robust, out-of-the-box solution that’s both powerful and easy to implement. Whether you’re building an admin panel or a data-heavy user interface, LiveTable handles the complexity while you focus on your application logic.
Demo Application
A live demonstration of LiveTable’s capabilities is available at livetable.gurujada.com. The demo showcases LiveTable’s performance and scalability by managing 1 Million rows with:
Real-time filtering
Multi-column sorting
CSV and PDF export capabilities
The demo application’s source code is hosted at Git Link for reference and learning purposes.
An advanced demo app to showcase livetable’s flexibility giving you complete control over the table, fields and queries is located at JOSAA App.
Josaa is the unified seat allocation board for engineering colleges in India. Students often struggle with choosing the right branch in the right college. This demo app helps to alleviate their problems by filtering colleges based on the student’s rank. All the datatables, card views in this app are powered by LiveTable.
We decided to pivot completely and give full control back to you, the developer:
Query Freedom
Define ANY Ecto query you want
Add filters to your custom queries
Full control over joins, conditions, and data transformation
Custom UI Mode
Completely replace our UI components with your own
Card mode with custom layouts and styling
Custom headers, content, and pagination components
Perfect for design systems and branded interfaces
Streams vs Assigns Choice
Use Phoenix streams for optimal performance
Or stick with traditional assigns if that fits your architecture
Seamless switching between modes
Transformers - The Game Changer
This is the most powerful feature we’ve added:
Complete query control with any input/DOM element
Custom sort orders via select menus
Complex filtering logic that was impossible before
Stateful filters that remember context across requests
URL State Persistence
The icing on the cake - URL remembers everything:
Filter states persist across page refreshes
Shareable URLs with exact table state
Bookmarkable filtered views
Works with all new features seamlessly
Real-World Success
We’re using this in production for an advanced college counselling platform with:
Complex rank calculations based on institution types
Multiple transformers working together
Custom header with integrated filtering UI
Card mode with rich college information display
This app serves as an advanced demo of LiveTable.
Check it out at Josaa App
Git Repo of Josaa App- Git Link
What This Means for You
Simple tables: Still incredibly easy with schema: parameter
Complex applications: Now possible with complete flexibility
Custom designs: Full UI control without fighting the framework
Business logic: Implement any filtering/sorting logic you need
The documentation has been completely rewritten with real-world examples, comprehensive API reference, and step-by-step guides.
The demo application has been moved to https://livetable.gurujada.com
v0.3 will be released on hex shortly. Check it out on git right now!
Excited to see what you all build with this!
What complex table requirements are you struggling with? We’d love to hear how these new features might help! Or any new feature requests!
Hello Elixir community—
Excited to announce the release of LiveTable v0.3.0, with several game-changing new features including Transformers,Custom Queries & Card Mode.
Owing to the opinionated nature of open-source frameworks these days, we have made a conscious decision to move away from Daisy UI, and instead, use Sutra UI - a shadcn inspired UI framework written in Pure Phoenix with accessibility in mind.
Alternatively, if there are any daisy users, they can opt to use our custom_ components to mimic those in table_component.ex and use our functionality without any of our UI.
Try out LiveTable today- {:live_table, "~> 0.4.0"}
Looking forward to seeing what you build with Livetable!
Congrats on the release! I tried to upgrade from 0.3.1, but it seems Sutra UI needs to be properly installed which involves a lot of setup and is incompatible with the default Phoenix components.
It seems to require more maintenance now, so could you share how you expect other devs to integrate LiveTable in their project?
LiveTable requires Sutra as its dependency.
Devs have 2 options to use Livetable-
Use the default LiveTable UI: Add sutra, remove core_components.ex, follow instructions in Sutra setup - and use LiveTable with Sutra. This is the recommended approach.
Dump LiveTable’s UI, use your own: You can dump out the UI, and define your own components to mimic those of LiveTable - and pass them using the custom_component method. Most suited for devs with other css/styling frameworks.
Either way, you get all features right out of the box. Exports, URL params etc.
You can use Sutra’s installer task to get set up & running quickly.
First off, congrats on the library @virinchi_cv I’m really excited to start using it.
My project currently runs on DaisyUI. I noticed in previous comments you mentioned it’s possible to use live_table without sutra_ui, but currently, sutra_ui is listed as a hard dependency in mix.exs. This means it gets installed and compiled even if we don’t intend to use it.
Would it be possible to mark sutra_ui as optional: true in the next release? Or perhaps provide a small guide/snippet on how to configure live_table (v0.4.0) to use a custom renderer (like DaisyUI) without pulling the Sutra dependency?
Sure- will make Sutra UI optional in the next release.
There isn’t an explicit guide on how to dump the entire UI - will add it in the next release. Its described for just the header in the docs. You can read more from the custom header docs.
But the process is pretty straightforward.
Taking a look at table_component.ex, its pretty easy to understand how it works. Just define each one - header, footer, content as custom_ and pass it via table_options.
You can use Daisy or virtually any styling in the custom_components.
Query Freedom
LiveTable v0.3.0 is out!
