DataTable

Pass columns and data. DataTable uses TanStack table-core for row models and renders semantic table markup.

import { DataTable } from '@manti-ui/react';
import type { DataTableColumn } from '@manti-ui/react';

interface Member {
  name: string;
  role: string;
  location: string;
}

const data: Member[] = [
  { name: 'Ada Lovelace', role: 'Engineer', location: 'London' },
  { name: 'Alan Turing', role: 'Researcher', location: 'Manchester' },
  { name: 'Grace Hopper', role: 'Architect', location: 'New York' },
];

const columns: DataTableColumn<Member>[] = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'role', header: 'Role' },
  { accessorKey: 'location', header: 'Location' },
];

export default function DataTableBasic() {
  return <DataTable columns={columns} data={data} />;
}

Columns and sorting

Columns use the re-exported DataTableColumn<TData> type. Use accessorKey for plain values, cell for custom rendering, and meta.align for alignment.

Set sortable to add accessible sort buttons.

Entity stores and row props

Use getRowProps, getCellProps, and getRowId for native, ARIA, and data attributes. When each row must resolve a live entity reference with hooks, pass rowComponent. It is a real React component boundary, unlike a render callback, so hooks remain valid. Spread rowProps onto its semantic <tr> and render children for the generated cells.

Filtering, pagination, and selection

Enable filterable, paginated, or selectable independently or together.

Sizes

API

Styling

Anatomy

Tokens

Last updated 13 September 2026