Data table

npx shadcn@latest add "@assistant-ui/elements-data-table"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-data-table"

DataTable turns a { columns, rows } result into an accessible comparison with locale-aware values, sorting, and a card view when its container gets narrow. The data source decides the columns, while the element owns the format, order, and responsive presentation.

Getting started

"use client";

import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
import { DataTable, type DataTableColumn, type DataTableRow } from "@/components/assistant-ui/elements/data-table";

type CompareModelsResult = {
  columns: readonly DataTableColumn[];
  rows: readonly DataTableRow[];
};

export const CompareModelsToolUI: ToolCallMessagePartComponent<
  { models: string[] },
  CompareModelsResult
> = ({ result }) =>
  result ? (
    <DataTable
      columns={result.columns}
      rows={result.rows}
      rowKey="id"
      caption="Model comparison"
    />
  ) : null;

import { defineToolkit } from "@assistant-ui/react";
import { z } from "zod";
import { CompareModelsToolUI } from "@/components/assistant-ui/elements/compare-models-tool-ui";

export const toolkit = defineToolkit({
  compare_models: {
    type: "backend",
    parameters: z.object({ models: z.array(z.string()) }),
    render: CompareModelsToolUI,
  },
});

"use client";

import { useState } from "react";
import { DataTable, type DataTableColumn, type DataTableSort } from "@/components/assistant-ui/elements/data-table";

const columns = [
  { key: "name", label: "Model", priority: "primary" },
  { key: "context", label: "Context", format: { kind: "number", compact: true } },
  { key: "input", label: "Input", format: { kind: "currency", currency: "USD" } },
] as const satisfies readonly DataTableColumn[];

const rows = [
  { id: "sonnet", name: "Sonnet 4.5", context: 200_000, input: 3 },
  { id: "gpt", name: "GPT-5", context: 400_000, input: 5 },
];

export function ModelComparison() {
  const [sort, setSort] = useState<DataTableSort | null>({
    key: "context",
    direction: "desc",
  });

  return <DataTable columns={columns} rows={rows} rowKey="id" sort={sort} onSortChange={setSort} caption="Model comparison" />;
}

Anatomy

<div data-slot="data-table">
  <table>{/* column headers and sortable rows */}</table>
  <div role="list">{/* compact cards for narrow containers */}</div>
</div>

The root is a container. At @md the semantic table is visible; below it, each row becomes a card with the primary column as its title and the remaining fields in a definition list. Both layouts are rendered so CSS can choose without changing the data or its sort order.

The table has one hairline below its headers. Rows use a quiet hover fill instead of dividers. A supplied caption is visually hidden and gives the table a screen-reader name. Each sortable header cycles ascending, descending, then unsorted, and announces the new order in a polite live region. Only the sorted header carries aria-sort, and each sort button is named after its column, such as Sort by Latency.

Examples

Format values

format uses Intl with locale, which defaults to "en-US". Numeric formats end-align automatically. Empty values show muted none and sort last.

<DataTable
  locale="en-GB"
  relativeTo={Date.parse("2026-09-26T12:00:00Z")}
  columns={[
    { key: "revenue", label: "Revenue", format: { kind: "currency", currency: "GBP", compact: true } },
    { key: "conversion", label: "Conversion", format: { kind: "percent", decimals: 1 } },
    { key: "change", label: "Change", format: { kind: "delta", decimals: 1, unit: "%" } },
    { key: "updated", label: "Updated", format: { kind: "date", style: "relative" } },
    { key: "status", label: "Status", format: { kind: "badge", tones: { live: "success", review: "warning" } } },
    { key: "tags", label: "Tags", format: { kind: "list", max: 2 } },
  ]}
  rows={report.rows}
/>

Use basis: "unit" when a percentage arrives as 12 rather than 0.12. A link format reads its href from the cell or hrefKey, and only links allowed by safeHref become anchors. External links open with noopener noreferrer.

When relativeTo is absent, relative dates appear as absolute dates in UTC during server rendering and hydration. After mount, they switch to relative text using the client's clock. Pass relativeTo when a shared reference time matters. Date strings must name a real calendar date; impossible values stay as their raw text.

Own the sorting

Without sort, DataTable keeps the current sort internally. Pass sort and onSortChange to control it. null means the source row order. Numbers, booleans, ISO dates, lists, and strings each get an appropriate comparison. Empty values stay at the end in either direction.

<DataTable columns={columns} rows={rows} sort={sort} onSortChange={setSort} />

Fit a narrow container

Set one column to priority: "primary" to make it the card title. If no column is primary, the first column is used. Secondary values become dt and dd pairs, preserving labels when the headers are hidden.

<DataTable
  columns={[
    { key: "name", label: "Name", priority: "primary" },
    { key: "latency", label: "Latency", format: { kind: "number", unit: "ms" } },
    { key: "owner", label: "Owner" },
  ]}
  rows={rows}
/>

API reference

Runtime DataTable

Standalone DataTable

Runtime DataTableColumn

Standalone DataTableColumn

Runtime DataTableFormat

Standalone DataTableFormat