Examples

Each page is a standalone Elm program built on alexbruf/elm-table and ports the TanStack Table example of the same name. Open the Source tab on any page for the full module.

Basic Examples

BasicThe smallest possible table: four rows, six columns, no state.
Basic (External State)The table state lives in your model and you can inspect, reset, and replace it.
Basic (Dynamic Columns)Columns built at runtime from the data's own keys.
Header GroupsNested column groups rendered as multi-row headers and footers.

Feature Examples

Kitchen Sink (All Features)Every feature on one table: sorting, filtering, grouping, expanding, selection, pinning, visibility, ordering, sizing, pagination.
Cell SelectionRectangular cell ranges with click, shift-click, ctrl-click, and keyboard movement.
Cell SpanningMerge adjacent cells with row and column spans.
Column FiltersPer-column text and range filters plus a global filter.
Column Filters (Faceted)Filter inputs driven by faceted unique values and min/max.
Bucketed Faceted FiltersFaceted values grouped into buckets for numeric and date columns.
Fuzzy Search FiltersA custom fuzzy filter function with match ranking.
Column OrderingReorder columns through state.
Column Ordering (DnD)Drag headers to reorder columns using HTML5 drag events.
Column PinningPin columns to the left or right edge.
Column Pinning (Split)Pinned regions rendered as three separate tables.
Sticky Column PinningPinned columns stay put with position: sticky while the rest scroll.
Column SizingColumn widths from state with min and max clamping.
Column ResizingDrag a header edge to resize a column, with onChange and onEnd modes and left-to-right or right-to-left direction.
Performant Column ResizingResize with the body rendered from CSS variables so only the header re-renders while dragging.
Column VisibilityShow and hide columns with checkboxes.
ExpandingNested sub-rows with expand and collapse.
Expanding Sub ComponentsExpand a row to reveal arbitrary content instead of sub-rows.
GroupingGroup rows by one or more columns.
AggregationAggregated values on group rows and in footers.
Grouped AggregationNested groups with merged aggregates at every level.
PaginationClient-side pages with page size, page jump, and counts.
Row DnDDrag rows to reorder the underlying data using HTML5 drag events.
Row PinningPin rows to the top or bottom of the table.
Row SelectionCheckbox selection with all, some, and per-row state.
SortingClick and shift-click headers for single and multi-column sorting.

Specialized Examples

Virtualized Rows50,000 sorted and filtered rows rendered through an Elm virtual list.
Virtualized ColumnsWide tables: only the columns in view are rendered.
Infinite ScrollingPages of rows fetched as you scroll, appended to the data and re-run through the pipeline.
Realtime TradingPrices updating on a timer while sorting and filtering stay live.