Skip to main content
  1. Portfolios/

LiveTable: Real‑Time Data Tables in Elixir

·5 mins· loading · loading · ·
Programming
Ch Virinchi
Author
Ch Virinchi
Elixir programmer, rocket propulsion enthusiast. Web Application developer.
Table of Contents

Most ERPs of the world have begun to show their age. They are monolithic, slow, and difficult to maintain. The world has moved on to real-time data processing, big data, and microservices. But many ERPs still cling to their old ways, making it hard for businesses to adapt to the changing landscape.

I believe that the world is in need of a functinal programming language based ERP, thats fast, scalable, easy to maintain & realtime. And what better language to build it in than Elixir? Levaraging Phoenix LiveView, which has realtime capabilities built right in, we can build an ERP that is fast, scalable, and easy to maintain. I truly believe the future of ERPs lies in realtime data processing & Phoenix LiveView is the perfect tool for that.

Every ERP needs a good data table. For all the existing table components out there, there was something missing. Too much repetetive code, too less customisability, no realtime reponses, no scalability… the list goes on. With this in mind, I set out to build LiveTable - A library for creating realtime datatables for the web, leveraging the power of Phoenix LiveView, with built in sort, filter & export capabilities, offering massive customisability and scalability.

The 1M row Demo

Inspired by 1M checkboxes, we built a demo containing 2 Million rows of data, which can be filtered, sorted, paginated, and exported in realtime. This is a testament to the power of LiveTable and its ability to handle large datasets with ease.

Demo

Try it yourself: The application is live at livetable.gurujada.com - Feel the power of LiveTable with 2 million rows of data, all in realtime.

The Game-Changing Features of LiveTable

1. Custom Queries

Initially, we took it upon ourselves to built the query while the user defines the associations. We soon hit many roadblocks, and realized that it was impossible to do so as we couldn’t handle business logic, nested relations, and many other complexities that arise with building queries in Ecto. We decided to pivot and hand complete control of the query back to the developer. This was a huge design decision shift for LiveTable.

Now, you can define your own DSL or context aware queries with and pass it to LiveTable, which applies sorting, filtering and pagination on top of it. This allows you to build complex queries with ease, while still leveraging the power of LiveTable’s features.

2. Card Mode

We built a card mode for LiveTable, which would show the fetched records as a grid of cards and the developer can point LiveTable to a custom card component. And a custom header that can be used to render any filters using transformers.

Advanced Demo: An advanced demo app to showcase Card-Mode, Transformers and Custom UI mode of LiveTable is live at josaa.gurujada.com
def table_options do
  %{
    mode: :card,
    card_component: &CounsellingWeb.CollegeComponent.college_component/1,
    custom_header: {CustomHeader, :custom_header}
  }
end

Demo

3. Transformers

Building the custom mode for cards, we realized that none of the existing filters allowed full control over the query and using the custom mode made it even more difficult to alter the query from the UI.

So we decided to introduce Transformers - a new way to modify the query for pagination, sort, filter - all from the custom UI defined by the user. This made LiveTable the ultimate library for building realtime tables. You can use the built-in UI, or dump it out and bring your own, all the while filters, sort, pagination remember state from shareable URLs.

def filters do
  [
    rank: Transformer.new("rank", %{
      query_transformer: &rank_filter/2
    }),
    iit: Boolean.new(:class, "iit", %{
      label: "IIT",
      condition: dynamic([c], c.class == :IIT)
    })
  ]
end

def rank_filter(query, %{"value" => rank}) do
  number = String.to_integer(rank)

  query
  |> where(... filter logic here ...)
end

Demo

Due to the dynamic composability of Ecto queries, all these params get rolled into a single efficient query with no additional overhead.

4. Data Export

All good ERPs need to export data. LiveTable has built-in support for exporting data in CSV & PDF formats. You can export all filtered records with a single click. Exports use Oban under the hood to prevent hanging the LiveView process, and the export is automatically downloaded by the browser.

Demo

5. Custom UI Mode

LiveTable’s custom UI mode allows you to build your own UI for the table, while still leveraging all the powerful features of LiveTable. You can use any UI library or framework you like, and LiveTable will handle the data fetching, filtering, sorting, and pagination for you.

6. Sharable URLs

LiveTable’s URLs are designed to be shareable. Table remembers state via the URL, which can be shared to get the same applied filters. This makes it easy to collaborate with others and share your work.

Conclusion

LiveTable reimagines what a data table can do in a modern ERP. It provides blazing-fast, real‑time interactivity on vast datasets—from traditional grids to card‑style displays, full filter and sort control via transformers, CSV/PDF exports, and shareable stateful URLs. It’s a platform that empowers teams to build responsive, maintainable, and scalable UIs with minimal overhead.

If you’ve ever felt held back by monolithic, sluggish ERPs or struggled with repetitive UI code, LiveTable offers a refreshing alternative. Whether you’re managing millions of rows or building highly bespoke interfaces, its flexibility and performance shine through.

Ready to give it a shot? Head over to livetable.gurujada.com for a demo with 2 million rows, or explore the code and docs on Hex.pm

Related

Turning JEE Counselling Chaos into a LiveView Showcase
·5 mins· loading · loading
Programming
Try it yourself: The application is live at josaa.gurujada.com - perfect for students navigating their JEE counselling journey. In May 2024, just like lakhs of students across India, I too finished my JEE examinations and was all set to go to college.
Integrating Sonnet 3.5 with Phoenix LiveView: AI-Powered Web Apps
·5 mins· loading · loading
Programming
In the rapidly evolving backdrop of web development, LLMs have emerged as game-changers, offering unprecedented possibilities for creating dynamic and cutting-edge applications.
Stack
·634 words·3 mins· loading · loading
Programming
The Stack is a special data structure. We use lists to augment it and everything is the same, except for 3 small constraints -