DataTable

A full-featured table component built on TanStack Table with sorting, filtering, pagination, row selection, and column visibility controls.

Full Example


Alex Chen	alex@example.com	Engineering	Active
Sarah Kim	sarah@example.com	Design	Active
James Wilson	james@example.com	Product	Pending
Maria Garcia	maria@example.com	Engineering	Active
David Park	david@example.com	Marketing	Inactive

0 of 5 row(s) selected.

Page 1 of 1

import { type ColumnDef } from "@tanstack/react-table"
import {
  DataTable,
  DataTableColumnHeader,
  DataTableToolbar,
  DataTableViewOptions,
  createSelectColumn,
} from "@/components/ui/data-table"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"

type Person = {
  name: string
  email: string
  role: string
  status: string
}

const columns: ColumnDef<Person>[] = [
  createSelectColumn<Person>(),
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
  },
  {
    accessorKey: "email",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  },
  {
    accessorKey: "role",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Role" />
    ),
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ row }) => {
      const status = row.getValue("status") as string
      return (
        <Badge
          variant={
            status === "Active"
              ? "default"
              : status === "Pending"
                ? "secondary"
                : "outline"
          }
        >
          {status}
        </Badge>
      )
    },
  },
]

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

Direction

Column order follows the columns prop, which means in RTL the first column still renders at the start (now visually on the right) and the last column at the end. If your data is semantically ordered — e.g., timestamp then description — you may want to reverse column definitions for RTL users so the reading flow stays natural. Sort indicators and header chevrons flip automatically via logical CSS properties.

API Reference

DataTable

Prop	Type	Default	Description
`columns` required	`ColumnDef<TData, TValue>[]`	—	TanStack Table column definitions that configure headers, cells, sorting, and filtering.
`data` required	`TData[]`	—	Array of row objects to render in the table.
`toolbar`	`React.ReactNode`	—	Optional toolbar element rendered above the table, typically containing search inputs and view options.
`className`	`string`	—	Additional CSS classes applied to the outer wrapper.

DataTableColumnHeader

Prop	Type	Default	Description
`column` required	`Column<TData, TValue>`	—	TanStack Table column instance used to read and toggle sort state.
`title` required	`string`	—	Display text for the column header.

createSelectColumn

Prop	Type	Default	Description
`Return`	`ColumnDef<TData>`	—	Returns a checkbox selection column definition. Add it as the first entry in your columns array to enable row selection.

Accessibility

Always provide an accessible label for the table, either via the toolbar prop (which typically contains context identifying what the table holds) or by wrapping the DataTable in a landmark with aria-label.

Sortable columns use DataTableColumnHeader, which renders as a button with aria-sort reflecting the current sort state, so screen reader users know which column is sorted and in which direction.

Row selection (via createSelectColumn) uses Checkbox, which is keyboard-accessible and screen-reader-friendly out of the box.