Data table
A table with sorting, search, pagination, row selection and column visibility, each opt-in. Built on TanStack Table v9.
import { DataTable, createDataTableColumnHelper, dataTableFeatures } from "@glob-ui/data-table"Preview
| Ana A. | Design | Admin | 2019 |
| Benito B. | Platform | Editor | 2020 |
| Canción C. | Growth | Viewer | 2021 |
| Dara D. | Support | Admin | 2022 |
| Eli E. | Design | Editor | 2023 |
| Fátima F. | Platform | Viewer | 2024 |
| Gus G. | Growth | Admin | 2025 |
| Hana H. | Support | Editor | 2019 |
| Ivo I. | Design | Viewer | 2020 |
| Jun J. | Platform | Admin | 2021 |
Examples
Row selection and a toolbar
rowSelection adds a checkbox column with select-all (indeterminate when some rows are selected). toolbar puts bulk actions next to the search.
| Invoice | Client | Amount | |
|---|---|---|---|
| INV-1000 | Atlas Studio | $300 | |
| INV-1001 | Northwind | $425 | |
| INV-1002 | Bluebird Labs | $550 | |
| INV-1003 | Atlas Studio | $675 | |
| INV-1004 | Northwind | $800 |
Server data
manual with state, the change handlers and rowCount: the server sorts and pages, and loading shows skeleton rows.
Columns and row actions
columnVisibility adds a Columns menu. A helper.display column can hold row actions.
| Actions | ||||
|---|---|---|---|---|
| Website | Ana | Live | 2026-10-02 | |
| Mobile app | Benito | Review | 2026-10-14 | |
| Docs | Dara | Draft | 2026-11-01 | |
| Billing | Eli | Live | 2026-09-21 |
Client-side vs server-side
By default the table sorts, filters and pages the rows it has. That is right for up to a few thousand rows that arrive once.
For larger data, set manual. The server then does the sorting and paging: pass the current state and the change handlers (onSortingChange, onPaginationChange, onGlobalFilterChange), and the total as rowCount. The table shows data exactly as it is given, so the server's order is kept. The "Server data" example shows the full loop with a fake 400 ms request.
API
Props are generated from the TypeScript types in the package source.
DataTable
Prop
Type
DataTableState
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Sort | The column header is a button. aria-sort on the header says ascending, descending or none. Shift adds a second sort. |
| Search | A search field named "Search". After a search the live region says the result count, for example "12 results". |
| Pages | The live region announces the page, for example "Page 2 of 5". |
| Select | "Select all rows" selects the page and is indeterminate when some rows are selected. Each row has "Select row". |
| Rows | A row click (onRowClick) is for pointers only: give keyboard users a link or button inside a cell. |
ARIA. The table is named by aria-label and is a scroll region when it can be wider than its container. aria-busy is set while loading.
Pagination
Page navigation: previous and next, page links and ellipses. `getPageRange` computes which pages to show.
Dialog
A modal dialog on the native `<dialog>` element. Focus moves in, Escape closes it, and focus returns to the trigger. Build your own modal on the same behaviour with `DialogContentBase`.