Data Table

Preview

Installation

npx shadcn@latest add @cubby-ui/data-table

Usage

import {
	type ColumnDef,
	DataTable,
	DataTableContent,
	DataTableHeader,
	DataTableBody,
} from "@/components/ui/cubby-ui/data-table"

<DataTable>
  <DataTableContent>
    <DataTableHeader />
    <DataTableBody />
  </DataTableContent>
</DataTable>

Architecture

DataTable uses a composition-based architecture. The root DataTable component provides context to child components, allowing you to compose the exact table structure you need.

<DataTable columns={columns} data={data} enableSorting>
  <DataTableToolbar>
    <DataTableSearch />
    <DataTableColumnToggle />
  </DataTableToolbar>
  <DataTableContent>
    <DataTableHeader enableSorting />
    <DataTableBody emptyState="No results found." />
  </DataTableContent>
</DataTable>

Examples

Sorting

Enable column sorting with the enableSorting prop on DataTable, then pass enableSorting to DataTableHeader to render sort controls. Columns with string headers automatically render clickable sort buttons with direction indicators.

Row Selection

Enable row selection with the enableRowSelection prop. Checkboxes are automatically added as the first column. Control selection state with rowSelection and onRowSelectionChange.

Toolbar

Add a toolbar with search and column toggles by composing DataTableToolbar with DataTableSearch and DataTableColumnToggle. Enable enableFiltering on DataTable for search to work. This example also demonstrates sorting and row selection.

Striped

Use the striped prop on DataTableContent for alternating row backgrounds.

Column Definitions

Define columns using the ColumnDef type from TanStack Table. Each column can have:

• accessorKey - The key to access data from the row
• header - Header content (string or render function)
• cell - Cell content render function
• enableSorting - Whether the column is sortable (default: true when enableSorting prop is set)

When enableSorting is enabled, columns with string headers automatically render a sortable button with direction indicators. Use meta.align to control header alignment, or a render function for fully custom headers.

import { type ColumnDef } from "@/registry/default/data-table/data-table"
 
const columns: ColumnDef<YourDataType>[] = [
  {
    accessorKey: "name",
    header: "Name", // Auto-renders with sort UI when enableSorting is true
  },
  {
    accessorKey: "amount",
    header: "Amount",
    meta: { align: "right" as const }, // Right-align the header
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))
      return <div className="text-right">${amount.toFixed(2)}</div>
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    enableSorting: false, // Disable sorting for this column
  },
]

API Reference

DataTable

Root component that creates the TanStack Table instance and provides context to children.

DataTableToolbar

Container for toolbar controls. Renders above the table content with visual connection to the header.

DataTableSearch

Search input that filters across all columns using the global filter.

DataTableColumnToggle

Dropdown button that allows users to show/hide columns.

This component has no configurable props. It automatically reads column visibility state from the DataTable context.

DataTableContent

Wrapper for the table that applies styling props. Accepts all Table component props.

DataTableHeader

Renders the table header with optional sort controls.

DataTableBody

Renders the table body with support for empty state.

DataTablePagination

Pagination controls with previous/next buttons and selection count.

DataTableToolbarSeparator

Visual separator for toolbar items. No configurable props.