Configuration properties for the DataTable component.
The DataTable component is the main component that orchestrates header, body, footer, pagination, and toolbar. It accepts a comprehensive set of configuration properties to customize behavior and appearance.
import { DataTable } from '@workspace/data-table';<DataTable
tableId="users"
mode="client"
data={users}
columns={columns}
/>string<DataTable tableId="orders" {...} />'client' | 'server''client'<DataTable mode="client" data={data} {...} />
<DataTable mode="server" fetchFn={fetchData} {...} />DataTableColumnDef<TData>[]const columns: DataTableColumnDef<User>[] = [
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'email', header: 'Email' },
];TData[]<DataTable mode="client" data={users} {...} />ServerFetchFunction<TData>DataTableColumnTypes<TData>DataTableColumnDefaults<TData>booleanfalsebooleanfalseDataTablePaginationConfignumberbooleantrue'onChange' | 'onEnd''onChange'booleantruenumberbooleanfalse(row: TData) => booleannumber(row: TData) => stringNew in v5.1
booleanfalse(row: Row<TData>) => ReactNode(row: Row<TData>) => boolean'cell' | 'row'(payload: EditingCommitPayload<TData>) => Promise<void>booleanfalsenumber1000numberbooleanfalse(row: TData, columnId: string) => voidNew in v5.1
DataTableExportOptionsDataTableSettings<TData>DataTableToolbarConfig<TData>DataTableHeaderMenuConfigDataTableRowMenuConfig<TData>stringstringstring(row: TData) => voidContextMenuBuilder<TData>any<DataTable
mode="server"
fetchFn={async (params) => {
const response = await api.getUsers(params);
return {
data: response.data,
totalCount: response.total,
};
}}
{...}
/>const columnTypes = {
currency: {
size: 120,
meta: {
cellAlign: 'right',
valueFormatter: (value) => `$${value.toFixed(2)}`,
},
},
};
<DataTable columnTypes={columnTypes} {...} /><DataTable
columnDefaults={{
size: 150,
enableSorting: true,
enableHiding: true,
}}
{...}
/><DataTable enablePersistence tableId="users" {...} /><DataTable enableUrlSync tableId="users" {...} /><DataTable
pagination={{
enabled: true,
position: 'bottom',
pageSizeOptions: [10, 20, 50, 100],
}}
{...}
/><DataTable initialPageSize={25} {...} /><DataTable enableColumnResizing={true} {...} /><DataTable columnResizeMode="onEnd" {...} /><DataTable enableColumnPinning={true} {...} /><DataTable minTableWidth={800} {...} /><DataTable enableRowPinning={true} {...} /><DataTable
isRowPinnable={(row) => row.priority === 'high'}
{...}
/><DataTable maxPinnedRows={5} {...} /><DataTable
getRowId={(row) => row.customId}
{...}
/><DataTable enableExpanding={true} {...} /><DataTable
renderDetailPanel={(row) => (
<OrderDetails order={row.original} />
)}
{...}
/><DataTable
getRowCanExpand={(row) => row.original.hasDetails}
{...}
/><DataTable editMode="cell" {...} /><DataTable
onDataCommit={async (payload) => {
await updateData(payload.newData);
}}
{...}
/><DataTable enableVirtualization={true} {...} /><DataTable virtualizationThreshold={500} {...} /><DataTable virtualContainerHeight={600} {...} /><DataTable enableKeyboardNavigation={true} {...} /><DataTable
onCellActivate={(row, columnId) => {
console.log('Cell activated:', row, columnId);
}}
{...}
/><DataTable
export={{
enabled: true,
formats: ['xlsx', 'csv'],
filename: 'data-export',
}}
{...}
/><DataTable
settings={{
stripedRows: true,
rowHeight: 48,
headerHeight: 52,
footer: { className: 'font-bold' },
}}
{...}
/><DataTable
toolbar={{
search: { placeholder: 'Search...', debounceMs: 300 },
actions: (table) => <ExportButton table={table} />,
}}
{...}
/><DataTable
headerMenu={{
enabled: true,
features: { sort: true, filter: true, hide: true },
}}
{...}
/><DataTable
rowMenu={{
enabled: true,
features: { copy: true, pin: true },
}}
{...}
/><DataTable title="User list table" {...} /><DataTable description="Table showing all registered users" {...} /><DataTable className="custom-grid" {...} /><DataTable
onRowClick={(row) => router.push(`/users/${row.id}`)}
{...}
/><DataTable
contextMenu={(row) => [
{ label: 'Edit', action: () => edit(row), icon: Pencil },
'separator',
{ label: 'Delete', action: () => del(row), variant: 'destructive' },
]}
{...}
/><DataTable
meta={{ userId: currentUser.id }}
{...}
/><DataTable
tableId="orders"
mode="client"
data={orders}
columns={columns}
columnTypes={columnTypes}
columnDefaults={{
size: 150,
enableSorting: true,
}}
enablePersistence
enableUrlSync
enableKeyboardNavigation
enableRowPinning
enableExpanding
renderDetailPanel={(row) => <OrderDetails order={row.original} />}
editMode="cell"
onDataCommit={handleCommit}
export={{
enabled: true,
formats: ['xlsx', 'csv'],
filename: 'orders-export',
}}
settings={{
stripedRows: true,
rowHeight: 48,
footer: { className: 'bg-muted font-bold' },
}}
toolbar={{
search: { placeholder: 'Search...', debounceMs: 300 },
actions: (table) => <ExportButton table={table} />,
}}
rowMenu={{
enabled: true,
features: { copy: true, pin: true },
}}
pagination={{
enabled: true,
position: 'bottom',
pageSizeOptions: [10, 20, 50],
}}
onRowClick={(row) => router.push(`/orders/${row.id}`)}
/>