Examples

With the table atomic components, you compose sorting, selection, filtering and pagination yourself. This example shows one way to do it, using the collection hooks to manage the items and the atomic components to render the table, including its loading, empty and no-match states.

In grid layout, table root renders the table as a CSS grid, and you set the width of each column up front. A column can have a fixed width, share the remaining space with other columns by weight, or grow up to a maximum width, and flexible columns can also have a minimum width. Use this playground to try each kind of column, and switch the container width to see minimum widths make the table scroll horizontally instead of squeezing its columns.

The table atomic components don't virtualize rows themselves, but they expose the properties a virtualization library needs. Table body and table row take a position style for placing rows, and the row count on table root and row index on table row let assistive technologies announce every row, not only the rendered ones. This example connects them to TanStack Virtual to render 10,000 rows in a scroll container with a sticky header. For a table that scrolls with the page, use TanStack's window virtualizer instead.