DataTable

A feature-rich data table pattern with column-based sorting, row selection via checkboxes, loading skeleton placeholders, configurable empty states, and click-through row interactions. Supports striped rows and compact mode.

Import

import { DataTable } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

const columns = [
  { key: 'name', header: 'Name', cell: (row) => row.name, sortable: true },
  { key: 'email', header: 'Email', cell: (row) => row.email },
  { key: 'role', header: 'Role', cell: (row) => <Badge>{row.role}</Badge>, align: 'center' },
];

<DataTable
  data={users}
  columns={columns}
  keyExtractor={(row) => row.id}
  sortColumn={sortCol}
  sortDirection={sortDir}
  onSortChange={(col, dir) => { setSortCol(col); setSortDir(dir); }}
  onRowClick={(row) => router.push(`/users/${row.id}`)}
  emptyState={{ title: 'No users found', description: 'Try adjusting your search filters.' }}
/>

Props

Prop	Type	Default	Description
`data`*	T[]	-	Array of data objects to display as rows.
`columns`*	Column<T>[]	-	Column definitions that control headers and cell rendering.
`keyExtractor`*	(row: T, index: number) => string \| number	-	Function to extract a unique key from each row.
`selectable`	boolean	`false`	Whether to show row selection checkboxes.
`selectedKeys`	Set<string \| number>	-	Set of currently selected row keys.
`onSelectionChange`	(selectedKeys: Set<string \| number>) => void	-	Callback when row selection changes.
`sortColumn`	string	-	Key of the currently sorted column.
`sortDirection`	'asc' \| 'desc' \| null	-	Current sort direction.
`onSortChange`	(column: string, direction: 'asc' \| 'desc' \| null) => void	-	Callback when sort column or direction changes.
`loading`	boolean	`false`	Whether the table is in a loading state. Shows skeleton rows.
`loadingRows`	number	`5`	Number of skeleton rows to display when loading.
`emptyState`	{ title: string; description?: string; icon?: ReactNode; action?: ReactNode }	-	Configuration for the empty state displayed when data is empty.
`onRowClick`	(row: T, index: number) => void	-	Callback when a row is clicked.
`hoverable`	boolean	`true`	Whether rows have a hover highlight effect.
`striped`	boolean	`false`	Whether to use alternating row background colors.
`compact`	boolean	`false`	Whether to use reduced cell padding.
`className`	string	-	Additional CSS classes for the table container.

Column<T>

Property	Type	Description
`key`	`string`	Unique key for the column.
`header`	`ReactNode`	Column header content.
`cell`	`(row: T, index: number) => ReactNode`	Cell renderer function.
`sortable`	`boolean`	Whether the column supports sorting.
`width`	`string`	Column width as a CSS value.
`align`	`'left' \| 'center' \| 'right'`	Text alignment for header and cells.
`className`	`string`	Additional CSS class for the column cells.