DataTable

interface Person {
  id: string;
  name: string;
  role: string;
  age: number;
}

const people: Person[] = [
  { id: "1", name: "Ada Lovelace", role: "Engineer", age: 36 },
  { id: "2", name: "Grace Hopper", role: "Admiral", age: 85 },
  { id: "3", name: "Alan Turing", role: "Mathematician", age: 41 },
  // …
];

const columns: Array<DataTableColumn<Person>> = [
  { key: "name", header: "Name", sortable: true },
  { key: "role", header: "Role", sortable: true },
  { key: "age", header: "Age", sortable: true, align: "end", width: 80 },
];

<DataTable<Person>
  columns={columns}
  data={people}
  rowKey={(row) => row.id}
  defaultSort={{ key: "name", direction: "asc" }}
  pagination={{ pageSize: 4 }}
/>

const [selected, setSelected] = React.useState<string[]>([]);
const [query, setQuery] = React.useState("");

<input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search…" />
<DataTable<Person>
  columns={columns}
  data={people}
  rowKey={(row) => row.id}
  globalFilter={query}
  selection={{ selected, onSelectionChange: setSelected }}
  striped
  size="sm"
/>

<DataTable<Person> columns={columns} data={[]} rowKey={(row) => row.id} loading />
<DataTable<Person>
  columns={columns}
  data={[]}
  rowKey={(row) => row.id}
  empty="No people match your filters."
/>

const PAGE_SIZE_OPTIONS = [3, 5];
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(3);
const [sort, setSort] = React.useState<DataTableSort | null>(null);

// Pretend this is the server: sort + slice the full dataset.
const rows = React.useMemo(() => {
  const all = [...people];
  if (sort) {
    const dir = sort.direction === "asc" ? 1 : -1;
    all.sort((a, b) => {
      const av = a[sort.key as keyof Person];
      const bv = b[sort.key as keyof Person];
      if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
      return String(av).localeCompare(String(bv)) * dir;
    });
  }
  return all.slice(page * pageSize, page * pageSize + pageSize);
}, [page, pageSize, sort]);

<DataTable<Person>
  manual
  columns={columns}
  data={rows}
  rowKey={(row) => row.id}
  sort={sort}
  onSortChange={(next) => { setSort(next); setPage(0); }}
  pagination={{
    pageSize,
    page,
    total: people.length,
    onPageChange: setPage,
    pageSizeOptions: PAGE_SIZE_OPTIONS,
    onPageSizeChange: (size) => { setPageSize(size); setPage(0); },
  }}
/>

const [last, setLast] = React.useState("");

<DataTable<Person>
  columns={columns}
  data={people.slice(0, 4)}
  rowKey={(row) => row.id}
  expandable={{
    render: (row) => (
      <p style={{ margin: 0 }}>
        {row.name} — {row.role}, age {row.age}.
      </p>
    ),
    defaultExpandedKeys: ["1"],
  }}
  onRowClick={(row) => setLast(row.name)}
/>
<p>Last clicked: {last || "none"}</p>

const columns: Array<DataTableColumn<Person>> = [
  { key: "name", header: "Name", filterable: true },
  {
    key: "role",
    header: "Role",
    filterable: true,
    filterType: "select",
    filterOptions: [
      { label: "Engineer", value: "Engineer" },
      { label: "Professor", value: "Professor" },
      { label: "Mathematician", value: "Mathematician" },
    ],
  },
  { key: "age", header: "Age", filterable: true, filterType: "number", align: "end", width: 170 },
];

<DataTable<Person>
  columns={columns}
  data={people}
  rowKey={(row) => row.id}
  defaultFilters={{ age: { op: "between", value: [40, 90] } }}
/>

const [choice, setChoice] = React.useState<string[]>([]);

<DataTable<Person>
  columns={columns}
  data={people.slice(0, 5)}
  rowKey={(row) => row.id}
  selection={{
    mode: "single",
    selected: choice,
    onSelectionChange: setChoice,
    isRowSelectable: (row) => row.age < 100,
  }}
  showColumnMenu
  size="sm"
/>
<p>Selected: {choice.join(", ") || "none"}</p>

const columns: Array<DataTableColumn<Person>> = [
  { key: "name", header: "Name", sortable: true, footer: "Average age" },
  { key: "role", header: "Role", sortable: true },
  {
    key: "age",
    header: "Age",
    sortable: true,
    align: "end",
    width: 80,
    footer: (rows) =>
      rows.length === 0
        ? "—"
        : (rows.reduce((sum, row) => sum + row.age, 0) / rows.length).toFixed(1),
  },
];

const headerGroups: DataTableHeaderGroup[] = [
  { header: "Person", columns: ["name", "role"] },
  { header: "Stats", columns: ["age"] },
];

<DataTable<Person>
  columns={columns}
  data={people}
  rowKey={(row) => row.id}
  headerGroups={headerGroups}
  stickyHeader
  stickyFooter
  style={{ maxBlockSize: 260 }}
/>

const tableRef = React.useRef<DataTableHandle<Person>>(null);

<Button onClick={() => tableRef.current?.exportCsv({ filename: "people.csv" })}>CSV</Button>
<Button onClick={() => tableRef.current?.exportXlsx({
  filename: "people.xlsx",
  sheetName: "People",
  headerFill: "#7c3aed",
  orientation: "landscape",
})}>Excel</Button>
<Button onClick={() => tableRef.current?.exportPdf({
  title: "People report",
  orientation: "landscape",
})}>PDF</Button>

<DataTable<Person> ref={tableRef} columns={columns} data={people} rowKey={(r) => r.id} />

const [rows, setRows] = React.useState(people);

const columns: Array<DataTableColumn<Person>> = [
  {
    key: "name",
    header: "Name",
    editable: true,
    validate: (value) =>
      typeof value === "string" && value.trim() !== "" ? null : "Name is required",
  },
  {
    key: "role",
    header: "Role",
    editable: true,
    filterOptions: [
      { label: "Engineer", value: "Engineer" },
      { label: "Professor", value: "Professor" },
      { label: "Admiral", value: "Admiral" },
    ],
  },
  {
    key: "age",
    header: "Age",
    editable: true,
    filterType: "number",
    align: "end",
    width: 100,
    validate: (value) =>
      typeof value === "number" && value > 0 && value < 130
        ? null
        : "Age must be between 1 and 129",
  },
];

<DataTable<Person>
  columns={columns}
  data={rows}
  rowKey={(row) => row.id}
  editing={{
    onCellCommit: ({ row, columnKey, value }) => {
      const next = { ...row, [columnKey]: value } as Person;
      setRows((prev) => prev.map((r) => (r.id === row.id ? next : r)));
      return next; // return false (or reject) to keep the editor open
    },
  }}
/>

// Single level with an average per group:
<DataTable<Person>
  columns={columns}
  data={people}
  rowKey={(row) => row.id}
  grouping={{
    groupBy: ["role"],
    aggregations: { age: "avg" },
  }}
/>

// Two levels — one nesting level per groupBy entry, plus a custom aggregation:
<DataTable<Employee>
  columns={employeeColumns}
  data={employees}
  rowKey={(row) => row.id}
  grouping={{
    groupBy: ["department", "team"],
    aggregations: {
      salary: "sum",
      name: (rows) => `${rows.length} member(s)`,
    },
    defaultExpandedGroups: ["department=Engineering"],
  }}
/>