Data table

A column's type sets its cell, its alignment, its sort, its filter conditions and its editor, with no render function: text, status, person, currency and number, progress, date, tags, checkbox and link. Format carries the locale, the currency and the date style, and a render function still wins over the type.

Drag a header's edge to resize it, or double-click it to fit. Drag a header to move it. Each header's menu sorts, pins, moves, hides and filters, and Alt+Down opens it from the keyboard. Account is pinned to the start, so the rest scroll under it.

An editable column opens the editor its type brings. Double-click a cell, or focus it and press Enter or start typing; Enter saves and moves down, Tab saves and moves on, Escape cancels. Row editing opens a whole row with Save and Cancel. A checkbox stays live and saves as it is ticked.

Grouped by stage, in the stage's own order. Each group row carries its count and each column's aggregate, its chevron folds it and its checkbox selects the group. The footer's cells each pick a calculation over every matching row.

renderDetail adds a chevron column, and an opened row shows its details beneath it, across the table, rendered only once opened.

Press Describe in the bar and type what you want to see. The row turns into a composer, your handler turns the sentence into a whole view, and a toast reports the change with an Undo. The library calls no model; this demo's handler is a stand-in you can try for free. The merchant sales template runs it on a real model.

A view is the table's setup as one object: sorts, filters, search, columns, grouping and density. Pick a tab and the table takes its setup; change anything and the tab shows a dot, and its menu saves, resets, renames or deletes it.

A view can also hold a list on a text column, which no filter menu offers: an id that is any of the rows a reader ticked, or the ten customers a model picked. It is how a host shows these rows, and how the merchant sales template turns the table to the orders a confirmed change touched. Its chip opens to the values it holds, each one a tick that can be let go and taken back.

Past two hundred unpaged rows the table draws only the rows in view, so five thousand scroll, sort and filter as quickly as ten. With hasMore it asks for the next batch as the end comes into view.

Narrower than a phone, measured on the table itself, Scroll keeps the rows and pins the row header while the rest scroll sideways, and Stack draws each row as a card.

In manual mode the table leaves sorting, filtering, search and paging to your server: it reports what the reader asks for and shows the page it is given, with rowCount driving the pager. A refetch keeps the rows on screen, dimmed under a thin line.

While the first rows are on their way, loading draws skeleton rows under the real header, each a text line tall, so the rows that replace them do not jump.

An error with nothing on screen takes the table's body, with Try again calling onRetry. A failed fetch over rows already shown keeps them, with the error in a banner above.

No rows renders the bordered empty state instead of a bare table. Replace it through emptyState, or its words through emptyStateLabels.