Component · C-038

DataTable

A data table on TanStack Table with sorting, selection and pagination in client state. It keeps the identity of data, accepts custom-rendered columns and can virtualize thousands of rows without changing the table semantics.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/data-table.json

Requirements

• @tanstack/react-table: The component imports useReactTable, getCoreRowModel, getSortedRowModel and getPaginationRowModel. The registry item declares the npm dependency; install it before copying the file.
• Client state: sort, selection and pagination: sorting, rowSelection and the page live in local state. Keep the identity of data across renders: a fresh copy resets pagination.

Accessibility

• Sortable headers are real buttons and expose aria-sort as ascending, descending or none.
• Selection uses a per-row checkbox with aria-label and announces the count in an aria-live region.
• The virtualized table keeps aria-rowcount and aria-rowindex, and its container is focusable.
• Numbers are right-aligned and use tabular-nums.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown