elm-table

Examples

Every example is a standalone Elm application, compiled and deployed at elm-table-examples.pages.dev. Each one ports the TanStack Table example of the same name, and each page shows the running table above its full Elm source.

The feature guides embed the matching example at the bottom of the page, so you can read the guide and watch the thing it describes in the same place.

Basic Examples

Example What it shows Guide
Basic The smallest possible table: four rows, six columns, no state. Quick Start
Basic (External State) The table state lives in your model and you can inspect, reset, and replace it. Table State
Basic (Dynamic Columns) Columns built at runtime from the data's own keys. Column Definitions
Header Groups Nested column groups rendered as multi-row headers and footers. Header Groups

Feature Examples

Example What it shows Guide
Kitchen Sink (All Features) Every feature on one table: sorting, filtering, grouping, expanding, selection, pinning, visibility, ordering, sizing, pagination. Features
Cell Selection Rectangular cell ranges with click, shift-click, ctrl-click, and keyboard movement. Cell Selection
Cell Spanning Merge adjacent cells with row and column spans. Cell Spanning
Column Filters Per-column text and range filters plus a global filter. Column Filtering
Column Filters (Faceted) Filter inputs driven by faceted unique values and min/max. Faceting
Bucketed Faceted Filters Faceted values grouped into buckets for numeric and date columns. Faceting
Fuzzy Search Filters A custom fuzzy filter function with match ranking. Fuzzy Filtering
Column Ordering Reorder columns through state. Column Ordering
Column Ordering (DnD) Drag headers to reorder columns using HTML5 drag events. Column Ordering
Column Pinning Pin columns to the left or right edge. Column Pinning
Column Pinning (Split) Pinned regions rendered as three separate tables. Column Pinning
Sticky Column Pinning Pinned columns stay put with position: sticky while the rest scroll. Column Pinning
Column Sizing Column widths from state with min and max clamping. Column Sizing
Column Visibility Show and hide columns with checkboxes. Column Visibility
Expanding Nested sub-rows with expand and collapse. Expanding
Expanding Sub Components Expand a row to reveal arbitrary content instead of sub-rows. Expanding
Grouping Group rows by one or more columns. Grouping
Aggregation Aggregated values on group rows and in footers. Aggregation
Grouped Aggregation Nested groups with merged aggregates at every level. Aggregation
Pagination Client-side pages with page size, page jump, and counts. Pagination
Row DnD Drag rows to reorder the underlying data using HTML5 drag events. Rows
Row Pinning Pin rows to the top or bottom of the table. Row Pinning
Row Selection Checkbox selection with all, some, and per-row state. Row Selection
Sorting Click and shift-click headers for single and multi-column sorting. Sorting

Specialized Examples

Example What it shows Guide
Realtime Trading Prices updating on a timer while sorting and filtering stay live. Data

Not ported

Some TanStack examples exist only because of the JavaScript API and have no Elm counterpart.

TanStack example Why not
Basic (useAppTable), Basic (useLegacyTable), Basic (Subscribe), Basic (External Atoms) Four ways to construct a React table instance. There is one way here: build a Config and hold a State.
Composable Tables, Custom Plugin Both extend the table instance. See Features.
Column Resizing, Performant Column Resizing Drag interactions against the DOM. See Column Resizing for the sizing state and how to drive it yourself.
Experimental Web Workers Plugin, Experimental Spreadsheet Experimental TanStack plugins.
With TanStack Virtual (rows, columns, infinite scrolling) See Virtualization.
With TanStack Form, Query, Router Integrations with other JavaScript libraries.
Every component-library example (Shadcn, Material UI, Mantine, Chakra, Hero UI, React Aria) React component libraries. You write the Html here.

Running them yourself

The sources live in examples-site/src/ in the repository. Build the whole set with make examples-site from the repository root, or one at a time with bun run build.ts <slug> inside examples-site/.