Quick start

A minimal table is two pieces: columns (TanStack column defs, typed with DataTableColumnDef) and a call to useDataTable, whose result you hand to <DataTable />.

1. Define columns

   Columns are TanStack column defs, typed with DataTableColumnDef. Give rows a stable id so selection and state survive re-renders.

   tsxCopy

   "use client"
   
   import * as React from "react"
   import {
     DataTable,
     useDataTable,
     type DataTableColumnDef,
   } from "@/components/ui/data-table"
   
   type Person = { id: string; name: string; email: string; age: number }
   
   const data: Person[] = [
     { id: "1", name: "Ada Lovelace", email: "ada@example.com", age: 36 },
     { id: "2", name: "Alan Turing", email: "alan@example.com", age: 41 },
     { id: "3", name: "Grace Hopper", email: "grace@example.com", age: 85 },
   ]
   
   const columns: DataTableColumnDef<Person>[] = [
     { accessorKey: "name", header: "Name" },
     { accessorKey: "email", header: "Email" },
     { accessorKey: "age", header: "Age", meta: { align: "right" } },
   ]
   

2. Create the table

   Inside your component, pass data and columns to useDataTable. Everything else is optional; getRowId gives rows a stable identity and initialState seeds the page size.

3. Render it

   Hand the instance to <DataTable />.

   tsxCopy

   export function PeopleTable() {
     const table = useDataTable({
       data,
       columns,
       getRowId: (row) => row.id,
       initialState: { pagination: { pageSize: 10 } },
     })
   
     return <DataTable table={table} />
   }
   

That already gives you sorting, client pagination, a toolbar with global search, column visibility, and density controls:

Turning features on

Every feature is an option on useDataTable. Flip a flag to enable it — for example, multi-column sorting, per-column filters, and row selection:

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableMultiSort: true,
  initialState: { showColumnFilters: true },
  enableRowSelection: true,
})

Where to go next

• Usage — the options-in / instance-out model and table.dataTable.
• Guides — enable each feature, with live examples.
• API reference — every option and its default.