Live Data Table

Live Data Table component with virtual scrolling for handling huge datasets efficiently. Supports PubSub updates, sorting, filtering, and row selection.

Basic Usage

Company

Owner

Status

Progress

Last Updated


columns = [
  %{key: "id", label: "ID", sortable: true},
  %{key: "name", label: "Name", sortable: true},
  %{key: "email", label: "Email", sortable: true}
]

<.live_data_table
  id="users-table"
  rows={@users}
  columns={@columns}
  row_height={50}
  visible_rows={10}
/>

With Row Selection


<.live_data_table
  id="users-table"
  rows={@users}
  columns={@columns}
  enable_selection={true}
  selected_rows={@selected_rows}
/>

Features

Virtual scrolling for huge datasets (10,000+ rows)
Column sorting (ascending/descending)
Real-time filtering/search
Row selection (single or multiple)
PubSub integration for live updates
Customizable row and column rendering
Responsive and accessible

Event Handlers

The component dispatches the following events to your LiveView:

filter-table - When filter value changes
sort-column - When column header is clicked
toggle-row-selection - When row checkbox is toggled
select-all-rows - When header checkbox is clicked