DataTable

Generic typed data table built on TanStack React Table. Supports pagination, sorting, expansion, row selection and custom column renderers.

import { DataTable } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`data`	Required	`I[]`	—	The data to be shown in the table. See https://tanstack.com/table/v8/docs/guide/data
`columns`	Required	`ColumnDef<I, any>[]`	—	The column configuration table. See https://tanstack.com/table/v8/docs/guide/column-defs
`fullWidth`	Optional	`boolean \| undefined`	`true`	Is table full width
`enableRowSelection`	Optional	`boolean \| ((row: Row<I>) => boolean) \| undefined`	`false`	Show a checkbox column and enables selection
`enableMultiRowSelection`	Optional	`boolean \| undefined`	`true`	Enables selection of multiple rows
`selections`	Optional	`RowSelectionState \| undefined`	`undefined`	Specify the selected rows. If `undefined`, the selections are managed internally Object with the key of row ID and a boolean specifying if the row is selected. The default row ID is the index. This can be changed using `getRowId` prop
`onSelectionsChange`	Optional	`((selections: RowSelectionState) => void) \| undefined`	—	Callback to be called when the row are selected / unselected
`enablePagination`	Optional	`boolean \| undefined`	`true`	Show pagination
`bordered`	Optional	`boolean \| undefined`	`false`	Add borders to all cells
`pagination`	Optional	`PaginationState \| undefined`	`undefined`	Specify the pagination params. Object of shape { pageIndex: number, pageSize: number }. If `undefined` then the pagination is managed internally.
`onPaginationChange`	Optional	`((pagination: PaginationState) => void) \| undefined`	—	Callback to be called when the pagination params change
`sorting`	Optional	`SortingState \| undefined`	`undefined`	Specify the sorting params. If `undefined` then the sorting is managed internally.
`defaultSorting`	Optional	`SortingState \| undefined`	`[]`	Default sorting applied when the table is first mounted (uncontrolled mode). Ignored when `sorting` is provided.
`onSortingChange`	Optional	`((sorting: SortingState) => void) \| undefined`	—	Callback to be called when the sorting changes
`wrapperClassName`	Optional	`string \| undefined`	—	Classname of the wrapper element
`contentClassName`	Optional	`string \| undefined`	—	Classname of the content element
`tableClassName`	Optional	`string \| undefined`	—	Classname of the table element
`loading`	Optional	`boolean \| undefined`	`false`	Show a loading indicator overlay
`enableRowExpansion`	Optional	`boolean \| undefined`	`false`	Show a columns with a button which can expand the row
`canRowExpand`	Optional	`((row: Row<I>) => boolean) \| undefined`	`false`	Callback to check if a row can be expanded
`expandedRows`	Optional	`ExpandedState \| undefined`	—	Specify the expanded rows If `undefined`, the expansions are managed internally Object with the key of row ID and a boolean specifying if the row is selected. The default row ID is the index. This can be changed using `getRowId` prop
`onExpandedRowsChange`	Optional	`((expandedRows: ExpandedState) => void) \| undefined`	—	Callback to be called when the rows are expanded or collapsed
`renderExpandedContent`	Optional	`((row: Row<I>) => React.ReactNode) \| undefined`	—	Render the content of the expanded row. Required when `enableRowExpansion` is `true`
`getRowId`	Optional	`((row: I, index: number, parent?: Row<I> \| undefined) => string) \| undefined`	—	Get the row ID for a row. If not specified index is the default row ID.

Usage

Sortable, paginated, optionally selectable / expandable table built on TanStack React Table. Controlled and uncontrolled modes for each piece of state.

Props (subset)

Prop	Type	Required	Default	Description
`data`	`I[]`	yes	—	Rows.
`columns`	`DataTableColumnDef<I>[]`	yes	—	TanStack column defs.
`fullWidth`	`boolean`	no	`true`	Stretch to container width.
`enableRowSelection`	`boolean \| ((row) => boolean)`	no	`false`	Checkbox column.
`enableMultiRowSelection`	`boolean`	no	`true`	Allow multi-select.
`selections`	`DataTableRowSelectionState`	no	—	Controlled row-selection state.
`onSelectionsChange`	`(s: DataTableRowSelectionState) => void`	no	—	Setter.
`enablePagination`	`boolean`	no	`true`	Show pagination footer.
`pagination`	`DataTablePaginationState`	no	—	Controlled pagination.
`sorting`	`DataTableSortingState`	no	—	Controlled sorting.
`bordered`	`boolean`	no	`false`	Add cell borders.
`loading`	`boolean`	no	`false`	Show loading overlay.
`enableRowExpansion`	`boolean`	no	`false`	Show row expansion column.
`renderExpandedContent`	`(row) => ReactNode`	no	—	Required when row expansion is enabled.
`getRowId`	`(row, index, parent?) => string`	no	index	Stable row ID source.

See data-table.tsx for the full list (16 props).

Column `meta`

Field	Applied by `DataTable`	Description
`align`	yes	`left` \| `center` \| `right` on cells

Data contracts

DataTableColumnDef, DataTableRow, DataTableSortingState, DataTablePaginationState, DataTableRowSelectionState, DataTableExpandedState are re-exported from @tetherto/mdk-react-devkit.

Example

/** * Runnable example for DataTable. */import type { DataTableColumnDef } from '@tetherto/mdk-react-devkit'import { DataTable } from '@tetherto/mdk-react-devkit'type Miner = {  id: string  status: 'online' | 'warning' | 'offline'  hashrate: number  power_w: number}const data: Miner[] = [  { id: 'miner-01', status: 'online', hashrate: 102.4, power_w: 3200 },  { id: 'miner-02', status: 'warning', hashrate: 95.1, power_w: 3450 },  { id: 'miner-03', status: 'offline', hashrate: 0, power_w: 0 },]const columns: DataTableColumnDef<Miner, unknown>[] = [  { accessorKey: 'id', header: 'Miner' },  { accessorKey: 'status', header: 'Status' },  { accessorKey: 'hashrate', header: 'Hashrate (TH/s)' },  { accessorKey: 'power_w', header: 'Power (W)' },]export const DataTableExample = () => {  return <DataTable<Miner> data={data} columns={columns} getRowId={(row) => row.id} />}