Cognition

Components

Data Table

Powerful tables and datagrids built using TanStack Table. Use it for sortable, filterable, selectable rows of structured data.

Preview

Status
Amount
Successderek.ho@distyl.ai
$630.44
Successarjun.prakash@distyl.ai
$767.50
Processingd.ho@distyl.ai
$396.84
Successa.prakash@distyl.ai
$475.22
Failedderek.ho@distyl.ai
$275.43
0 of 5 row(s) selected.

Live and interactive — sort by Email, filter, select rows, page. Toggle the theme: the header, row borders, hover, and selected-row tint all remap from Cognition tokens, no dark: classes.

Pattern

A Data Table is columns + data fed to useReactTable, rendered through the Cognition Table primitive with flexRender. Define columns declaratively:

import { type ColumnDef } from "@tanstack/react-table";

type Payment = { id: string; status: string; email: string; amount: number };

const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "email",
    header: ({ column }) => (
      <Button variant="ghost" onClick={() => column.toggleSorting()}>
        Email <ArrowUpDown />
      </Button>
    ),
  },
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => formatCurrency(row.getValue("amount")),
  },
];

Sorting, filtering, row selection, and pagination are TanStack row models you opt into — the markup stays the same.

API

Part
Description
columns
A ColumnDef array defining each column's header, cell, and sorting or selection behavior.
useReactTable
TanStack hook that wires data, columns, and state (sorting, filters, pagination) into a table instance.
flexRender
Renders a column's header or cell definition, whether it is a string or a component.
Table parts
Table / TableHeader / TableBody / TableRow / TableCell primitives that render the instance as markup.

Don't and Do

Don't

Don't reach for MaterialReactTable or the MUI DataGrid for new tables — they pull in MUI, bypass Cognition tokens, and can't theme with the design system. TanStack Table is the canonical stack.

Do
// Headless TanStack + the Cognition Table primitive
const table = useReactTable({ data, columns, ... });
// render <Table> / <TableRow> / <TableCell>
import { useDataTable } from "@/platform/components/DataTable/DataTable";
// (or useReactTable directly for a standalone table)

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  state: { sorting, columnFilters, rowSelection },
  enableRowSelection: true,
});

In platform, prefer useDataTable from @/platform/components/DataTable — it auto-adds the selection column and wires the shared toolbar. Standalone tables can call useReactTable directly.

Built on @tanstack/react-table with the Cognition Table primitive (mirrors fe-distillery components/ui/table.tsx and the platform DataTable pattern). Raw muted / primary utilities are replaced with Cognition tokens.