Command Menu

Search documentation, components, and switch theme.

Fragments

Data Table

A data table built on TanStack Table with sorting, filtering, pagination, and column visibility.

Formance
Docs

Installation#

npx shadcn@latest add @formance/data-table

Install the following dependencies:

npm install @tanstack/react-table

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  DataTable,
  DataTableColumnHeader,
  DataTableRowActions,
  DataTableSkeleton,
} from '@/components/ui/data-table'
<DataTable
  columns={columns}
  data={data}
  searchConfig={[{ placeholder: 'Filter emails...', columnKey: 'email' }]}
/>

Compound Components

Compose the pieces you need:

<DataTable />Main table component with toolbar and pagination.
<DataTableColumnHeader />Sortable column header with dropdown sort controls.
<DataTablePagination />Pagination controls with page size selector.
<DataTableToolbar />Toolbar with search, faceted filters, and view options.
<DataTableViewOptions />Column visibility toggle dropdown.
<DataTableFacetedFilter />Faceted filter popover for column filtering.
<DataTableRowActions />Row-level action dropdown menu.
<DataTableSkeleton />Loading skeleton placeholder for the data table.