DataTable

A powerful data table with sorting, filtering, pagination, and selection.

Install

npx @beaket/ui add data-table

Import

import { Data-table } from "@/components/ui/data-table"

Examples

Features

export const AllFeatures = () => (
  <div className="space-y-8">
    <div>
      <h3 className="mb-2 text-sm font-medium">Basic Table</h3>
      <DataTable columns={columns} data={users.slice(0, 3)} />
    </div>
    <div>
      <h3 className="mb-2 text-sm font-medium">With Search</h3>
      <DataTable
        columns={columns}
        data={users.slice(0, 3)}
        searchable
        searchPlaceholder="Search..."
      />
    </div>
    <div>
      <h3 className="mb-2 text-sm font-medium">With Selection</h3>
      <DataTable columns={columns} data={users.slice(0, 3)} selectable />
    </div>
    <div>
      <h3 className="mb-2 text-sm font-medium">Compact Mode</h3>
      <DataTable columns={columns} data={users.slice(0, 3)} compact />
    </div>
  </div>
);

Props

Name	Type	Default	Description
columns*	ColumnDef<TData, TValue>[]	—	Column definitions using TanStack Table's ColumnDef — see https://tanstack.com/table/latest/docs/guide/column-defs
data*	TData[]	—	Array of data to display
searchable	boolean \| undefined	false	Enable global search/filter functionality
searchPlaceholder	string \| undefined	Search...	Search placeholder text
paginated	boolean \| undefined	false	Enable pagination
pageSize	number \| undefined	10	Number of rows per page
emptyMessage	string \| undefined	No data available	Empty state message
emptyState	ReactNode	—	Custom empty state component
onRowClick	((row: TData) => void) \| undefined	—	Row click handler
enableSorting	boolean \| undefined	true	Enable column sorting (default: true)
enableFiltering	boolean \| undefined	true	Enable column filtering (default: true)
initialColumnVisibility	VisibilityState \| undefined	—	Initial column visibility state
compact	boolean \| undefined	false	Show compact table styling
selectable	boolean \| undefined	false	Enable row selection with checkboxes
onSelectionChange	((selectedRows: TData[]) => void) \| undefined	—	Callback when row selection changes
initialRowSelection	RowSelectionState \| undefined	—	Initial row selection state
getRowClassName	((row: TData) => string) \| undefined	—	Function to generate custom class names for each row based on row data
onRowMouseEnter	((row: TData) => void) \| undefined	—	Callback when mouse enters a row
onRowMouseLeave	((row: TData) => void) \| undefined	—	Callback when mouse leaves a row