Data Table | arctis/ui

Build data grids with TanStack Table and the arctis <Table /> primitives. Add selection, sorting, filtering, visibility, and pagination as needed.

Status		Amount
success	ken99@example.com	$316.00
success	Abe45@example.com	$242.00
processing	Monserrat44@example.com	$837.00
success	Silas22@example.com	$874.00
failed	carmella@example.com	$721.00

0 of 5 row(s) selected.

Rows per page

Page 1 of 1

tsx

1"use client"23import * as React from "react"4import {5  getCoreRowModel,6  getFilteredRowModel,7  getPaginationRowModel,8  getSortedRowModel,9  useReactTable,10  type ColumnFiltersState,11  type SortingState,12  type VisibilityState,13} from "@tanstack/react-table"14import {15  DataTable,16  DataTablePagination,17  DataTableViewOptions,18} from "@/components/ui/data-table"19import { Input } from "@/components/ui/input"20import { columns } from "./columns"21import { payments } from "./payments"2223export function Example() {24  const [sorting, setSorting] = React.useState<SortingState>([])25  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(26    [],27  )28  const [columnVisibility, setColumnVisibility] =29    React.useState<VisibilityState>({})30  const [rowSelection, setRowSelection] = React.useState({})3132  const table = useReactTable({33    data: payments,34    columns,35    onSortingChange: setSorting,36    onColumnFiltersChange: setColumnFilters,37    getCoreRowModel: getCoreRowModel(),38    getPaginationRowModel: getPaginationRowModel(),39    getSortedRowModel: getSortedRowModel(),40    getFilteredRowModel: getFilteredRowModel(),41    onColumnVisibilityChange: setColumnVisibility,42    onRowSelectionChange: setRowSelection,43    state: {44      sorting,45      columnFilters,46      columnVisibility,47      rowSelection,48    },49  })5051  return (52    <div className="w-full space-y-4">53      <div className="flex w-full items-center justify-between gap-2">54        <Input55          placeholder="Filter emails..."56          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}57          onChange={(event) =>58            table.getColumn("email")?.setFilterValue(event.target.value)59          }60          className="w-auto max-w-sm"61        />62        <DataTableViewOptions table={table} />63      </div>64      <DataTable columns={columns} table={table} />65      <DataTablePagination table={table} />66    </div>67  )68}

Introduction

Tables rarely need the same columns, filters, or data source. Instead of working around a rigid component, compose the table you need with TanStack Table and <Table />.

Start with column definitions, then add selection, sorting, filtering, visibility, pagination, and row actions. The reusable pieces live in @arctis-sh/ui/data-table.

Installation

npx @arctis-sh/@arctis-sh/ui@latest add data-table

This adds Table, Button, Dropdown Menu, Native Select, Checkbox, and Input, then installs the @tanstack/react-table peer.

Usage

1"use client"23import {4  getCoreRowModel,5  useReactTable,6} from "@tanstack/react-table"7import { DataTable } from "@/components/ui/data-table"

1const table = useReactTable({2  data,3  columns,4  getCoreRowModel: getCoreRowModel(),5})67return <DataTable columns={columns} table={table} />

Composition

div
├── Input
├── DataTableViewOptions
├── DataTable
│   └── Table
│       ├── TableHeader
│       │   └── TableRow
│       │       └── TableHead
│       └── TableBody
│           └── TableRow
│               └── TableCell
└── DataTablePagination

Prerequisites

The examples below use these payment rows:

1type Payment = {2  id: string3  amount: number4  status: "pending" | "processing" | "success" | "failed"5  email: string6}78const payments: Payment[] = [9  {10    id: "pay_8k2n1q",11    amount: 316,12    status: "success",13    email: "mina@example.com",14  },15  // ...16]

Column definitions

Column definitions control structure, formatting, sorting, and filtering.

1"use client"23import type { ColumnDef } from "@tanstack/react-table"4import type { Payment } from "./payments"56export const columns: ColumnDef<Payment>[] = [7  {8    accessorKey: "status",9    header: "Status",10  },11  {12    accessorKey: "email",13    header: "Email",14  },15  {16    accessorKey: "amount",17    header: () => <div className="text-right">Amount</div>,18    cell: ({ row }) => {19      const amount = Number.parseFloat(row.getValue("amount"))20      const formatted = new Intl.NumberFormat("en-US", {21        style: "currency",22        currency: "USD",23      }).format(amount)2425      return <div className="text-right font-medium">{formatted}</div>26    },27  },28]

Row actions

Add an actions column with a Dropdown Menu.

1{2  id: "actions",3  enableHiding: false,4  cell: ({ row }) => {5    const payment = row.original67    return (8      <DropdownMenu>9        <DropdownMenuTrigger10          className={buttonVariants({ variant: "ghost", size: "icon-sm" })}11          aria-label="Open menu"12        >13          <span className="sr-only">Open menu</span>14          {/* icon */}15        </DropdownMenuTrigger>16        <DropdownMenuContent align="end">17          <DropdownMenuLabel>Actions</DropdownMenuLabel>18          <DropdownMenuItem19            onClick={() => navigator.clipboard.writeText(payment.id)}20          >21            Copy payment ID22          </DropdownMenuItem>23          <DropdownMenuSeparator />24          <DropdownMenuItem>View customer</DropdownMenuItem>25          <DropdownMenuItem>View payment details</DropdownMenuItem>26        </DropdownMenuContent>27      </DropdownMenu>28    )29  },30}

Pagination

Enable TanStack pagination, then render DataTablePagination.

1const table = useReactTable({2  data,3  columns,4  getCoreRowModel: getCoreRowModel(),5  getPaginationRowModel: getPaginationRowModel(),6})

1<DataTable columns={columns} table={table} />2<DataTablePagination table={table} />

Sorting

Track sorting state and use DataTableColumnHeader for a sortable header.

1const [sorting, setSorting] = React.useState<SortingState>([])23const table = useReactTable({4  data,5  columns,6  onSortingChange: setSorting,7  getCoreRowModel: getCoreRowModel(),8  getSortedRowModel: getSortedRowModel(),9  state: { sorting },10})

1{2  accessorKey: "email",3  header: ({ column }) => (4    <DataTableColumnHeader column={column} title="Email" />5  ),6}

Filtering

Filter a column with a controlled Input.

1const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])23const table = useReactTable({4  data,5  columns,6  onColumnFiltersChange: setColumnFilters,7  getFilteredRowModel: getFilteredRowModel(),8  getCoreRowModel: getCoreRowModel(),9  state: { columnFilters },10})

1<Input2  placeholder="Filter emails..."3  value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}4  onChange={(event) =>5    table.getColumn("email")?.setFilterValue(event.target.value)6  }7  className="w-auto max-w-sm"8/>

Visibility

Toggle columns with DataTableViewOptions. Hidden columns keep their width so the layout does not jump.

1const [columnVisibility, setColumnVisibility] =2  React.useState<VisibilityState>({})34const table = useReactTable({5  data,6  columns,7  onColumnVisibilityChange: setColumnVisibility,8  getCoreRowModel: getCoreRowModel(),9  state: { columnVisibility },10})

1<div className="flex w-full items-center justify-between gap-2">2  <Input className="w-auto max-w-sm" placeholder="Filter emails..." />3  <DataTableViewOptions table={table} />4</div>

Row Selection

Add a select column with Checkbox, then track rowSelection.

1{2  id: "select",3  header: ({ table }) => (4    <Checkbox5      checked={6        table.getIsAllPageRowsSelected() ||7        (table.getIsSomePageRowsSelected() && "indeterminate")8      }9      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}10      aria-label="Select all"11    />12  ),13  cell: ({ row }) => (14    <Checkbox15      checked={row.getIsSelected()}16      onCheckedChange={(value) => row.toggleSelected(!!value)}17      aria-label="Select row"18    />19  ),20  enableSorting: false,21  enableHiding: false,22}

1const [rowSelection, setRowSelection] = React.useState({})23const table = useReactTable({4  data,5  columns,6  onRowSelectionChange: setRowSelection,7  getCoreRowModel: getCoreRowModel(),8  state: { rowSelection },9})

DataTablePagination shows the number of selected rows.

API Reference

DataTable

Renders the bordered table from a TanStack table instance. Hidden columns stay in the layout at zero opacity so siblings do not shift.

Prop	Type	Default
columns	ColumnDef<TData, TValue>[]	—
table	Table<TData>	—
emptyMessage	string	"No results."
className	string	—

1<DataTable columns={columns} table={table} />

DataTableColumnHeader

Sortable, hideable column header. Renders plain text when the column cannot sort.

Prop	Type	Default
column	Column<TData, TValue>	—
title	string	—
className	string	—

1<DataTableColumnHeader column={column} title="Email" />

DataTablePagination

Provides page size, current page, first / previous / next / last navigation, and the selected row count.

Prop	Type	Default
table	Table<TData>	—
className	string	—

1<DataTablePagination table={table} />

DataTableViewOptions

Dropdown for toggling hideable columns. Its height and surface match Input.

Prop	Type	Default
table	Table<TData>	—
className	string	—

1<DataTableViewOptions table={table} />

TanStack Table

DataTable is a thin layout layer. Sorting, filtering, pagination, and selection come from TanStack Table. Its documentation covers the full headless API, including useReactTable, row models, and column helpers.