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.

Pass loading and the body renders five rows of Skeleton bars whose width matches each column's width prop, falling back to 60% when no width is set. This avoids the layout shift that hits when a real table replaces a spinner. When data is an empty array and loading is false, the body renders a single full-span row with a centered "No results." message — useful for "no rows match this filter" outcomes. Both states are inside the same conditional render in the source: loading first, empty second, data third. To customize the empty state copy, edit styles.empty and the inline "No results." literal in the component file after install.