DataTable

Feature-rich data table with sorting, per-column filtering, global search, and pagination. Built on TanStack Table.

Name	Department	Role	Salary	Status
Alice Johnson	Engineering	Senior Developer	$120,000	Active
Bob Smith	Design	Lead Designer	$105,000	Active
Carol White	Engineering	Junior Developer	$75,000	On Leave
Dave Brown	Marketing	Marketing Manager	$95,000	Active
Eve Davis	Engineering	DevOps Engineer	$110,000	Active
Frank Miller	Sales	Sales Representative	$70,000	Inactive
Grace Lee	Design	UX Researcher	$90,000	Active
Henry Wilson	Engineering	Senior Developer	$125,000	Active
Ivy Chen	Marketing	Content Writer	$65,000	Active
Jack Taylor	Sales	Account Manager	$85,000	On Leave

<DataTable
  data={employees}
  columns={[
    { accessorKey: 'name', header: 'Name', enableSorting: true },
    { accessorKey: 'department', header: 'Department', enableSorting: true },
    { accessorKey: 'role', header: 'Role', enableSorting: true },
    { accessorKey: 'salary', header: 'Salary', kind: 'number', enableSorting: true, cell: (value) => `$${Number(value).toLocaleString()}` },
    { accessorKey: 'status', header: 'Status', enableSorting: true, cell: (value) => <Tag dense color={statusColor(value)}>{String(value)}</Tag> },
  ]}
  border
/>

Column Configuration

Each column accepts:

Prop	Type	Default	Description
`accessorKey`	`string`	required	Key from the data object
`header`	`string`	required	Column header label
`enableSorting`	`boolean`	`false`	Allow sorting on this column
`enableFiltering`	`boolean`	`false`	Show column filter
`filterType`	`'text' \| 'select'`	`'text'`	Filter input type
`filterOptions`	`string[]`	-	Options for select filter
`cell`	`(value, row) => ReactNode`	-	Custom cell renderer

Props

EnableSearch

Use enableSearch to add a global search input above the table.

Name	Department	Role
Alice Johnson	Engineering	Senior Developer
Bob Smith	Design	Lead Designer
Carol White	Engineering	Junior Developer
Dave Brown	Marketing	Marketing Manager
Eve Davis	Engineering	DevOps Engineer

<DataTable
  data={data}
  columns={columns}
  enableSearch
/>

EnableFiltering

Enable per-column filters with enableFiltering. Use filterType: 'select' with filterOptions for dropdown filters.

Name	Department	Status
Filter Name	Filter Department	Filter Status
Alice Johnson	Engineering	Active
Bob Smith	Design	Active
Carol White	Engineering	On Leave
Dave Brown	Marketing	Active
Eve Davis	Engineering	Active

<DataTable
  data={data}
  columns={[
    { accessorKey: 'name', header: 'Name', enableFiltering: true },
    { accessorKey: 'department', header: 'Department',
      enableFiltering: true, filterType: 'select',
      filterOptions: ['Engineering', 'Design', 'Marketing', 'Sales'] },
    { accessorKey: 'status', header: 'Status',
      enableFiltering: true, filterType: 'select',
      filterOptions: ['Active', 'On Leave', 'Inactive'] },
  ]}
/>

PageSizeOptions

Pagination is built-in. Customize initial page size and available options.

Name	Department	Role
Alice Johnson	Engineering	Senior Developer
Bob Smith	Design	Lead Designer
Carol White	Engineering	Junior Developer
Dave Brown	Marketing	Marketing Manager
Eve Davis	Engineering	DevOps Engineer

<DataTable
  data={data}
  columns={columns}
  pageSize={5}
  pageSizeOptions={[5, 10, 25]}
/>

Table Variants

Supports the same style variants as Table: striped, dense, border, hasHover.

Name	Department	Role
Alice Johnson	Engineering	Senior Developer
Bob Smith	Design	Lead Designer
Carol White	Engineering	Junior Developer
Dave Brown	Marketing	Marketing Manager
Eve Davis	Engineering	DevOps Engineer

<DataTable data={data} columns={columns} dense striped border />

Accessibility

Sortable headers have aria-sort attribute
Sort icons are decorative (aria-hidden)
Filter inputs have hidden labels for screen readers
Pagination uses role="navigation" with aria-label
Page buttons have descriptive aria-label attributes
Empty state is announced within the table

Column Configuration​

Props​

EnableSearch​

EnableFiltering​

PageSizeOptions​

Table Variants​

Accessibility​