React Data Table Component Examples

The starting point is the smallest invocation that renders. Pass an array of row data, an array of column definitions, and the property name on each row that uniquely identifies it. The column shape is { id, header } at minimum — the id matches a key on the row, and the header is the visible label. Every other column knob (cell, align, width, sortable) is optional and additive. The component handles the rest: it renders the Table primitive internally with proper Table.Header, Table.Row, and Table.Cell markup. No state, no hook wiring, no toolbar. This is the form most list views start with before they grow features.

Add sortable to the root and every column gets a clickable header with an arrow indicator. The internal useMemo re-sorts the data array on the active column id, comparing numbers with subtraction and everything else via String(...).localeCompare(...). Click the same header twice to flip direction; click a third time to clear the sort. To override sortability per column, set sortable: true or sortable: false on a specific column definition — the column-level value wins over the root flag. The onSortChange callback fires with { id, direction } whenever the active sort changes, which is what you wire to a server-side fetch when the table is paginated by the API. The icons come from lucide-react: ArrowUp and ArrowDown for active columns, ArrowUpDown when neutral.

Pass selectable and a leading checkbox column appears. The header checkbox tracks the visible row keys: when none are selected it shows unchecked, when all are selected it shows checked, and when some are selected it shows indeterminate via a small useEffect that flips ref.current.indeterminate. The onSelectionChange callback receives a Set<string> of selected row keys, where each key is the value at row[rowKey] coerced to a string. Selected rows pick up the bg-primary/5 highlight from the styles object. Use the count to drive bulk-action toolbars or to gate destructive actions until at least one row is selected. The underlying primitive is the same Checkbox the rest of Drivn uses, so its keyboard and focus behavior is consistent across forms and tables.

The toolbar prop accepts any React node and renders it above the table inside the same space-y-4 container. The most common toolbar is a search Input that filters the rows in your component before they reach data. Drivn does not own the filter — you do. That keeps the data lifecycle explicit: filter your array, pass the result, and the component renders what you give it. Pair the input with useState<string> on the search term and a users.filter(...) call against whichever fields you want to search. For server-side filtering, debounce the input and call your API on change, then set the response as data.

The cell property on a column definition is a function that receives the column value and the full row, and returns a React node. Use it for status pills, formatted dates, currency, avatars, or action icons. The default renderer coerces the value to a string via String(value ?? "") so missing values render as empty rather than as undefined. For status columns the canonical pattern is a Badge whose variant is mapped from the value — default for healthy, secondary for pending, destructive for failed. Because the cell function gets the full row, you can compose multiple fields in one cell — for example, an avatar plus a name in the user column.

Pagination is a sub-component on the same import — DataTable.Pagination — exposed via Object.assign(DataTableRoot, { Pagination: DataTablePagination }). Render it inside the footer prop with page, pageCount, and onPageChange. The label reads Page x of y, and the Pagination primitive supplies the Previous and Next controls, which set aria-disabled when the boundaries hit. Page state lives in your component, which means client-side and server-side pagination use the same JSX — only the source of data changes. For client-side pagination, slice the array; for server-side, fetch a page and set it as data while updating pageCount from the response total.

Two states matter before the rows arrive. With loading set, the body renders Array.from({ length: 5 }) placeholder rows — one Skeleton bar per column, each sized by style={{ width: col.width ?? '60%' }} so the bars line up with the columns they stand in for and nothing jumps when real data lands. Only columns are mapped in this branch, so the selection cell is skipped while loading. When loading is false and data is empty, the table renders one row whose cell spans columns.length + (selectable ? 1 : 0) and centers "No results." through styles.empty — the right outcome for "no rows match this filter" as well as a genuinely empty collection. In the source the three cases are one ternary chain: loading, then empty, then rows. Both branches are literals in your copy of the file, so changing the placeholder count or the empty-state copy is a one-line edit rather than a config option you hope exists.