Data Tables

A configurable data grid with columns, sorting, pagination, selection, and responsive layouts for list and table views.

Overview

The data table renders rows from an array using column definitions, with built-in sorting, pagination, row selection, empty and loading states, and responsive layout modes. It's the component behind user lists, invoice history, and member tables.

Define columns

interface Column<T> {
  key: string
  header: string
  render: (row: T) => React.ReactNode
  sortable?: boolean
  width?: string
  align?: "left" | "center" | "right"
}

Basic usage

import { DataTable } from "@siteknock/components/data-table"
import { Badge } from "@siteknock/ui/badge"

const columns: Column<User>[] = [
  { key: "name", header: "Name", render: (u) => u.name, sortable: true },
  { key: "email", header: "Email", render: (u) => u.email },
  { key: "role", header: "Role", render: (u) => <Badge>{u.role}</Badge> },
]

<DataTable data={users} columns={columns} data-testid="user-table" />

Features

Pagination

<DataTable
  data={users}
  columns={columns}
  pagination={{ page: 1, pageSize: 10, total: 100, onPageChange: setPage }}
  data-testid="user-table"
/>

Selection

<DataTable
  data={users}
  columns={columns}
  selectable
  onSelectionChange={(ids) => setSelected(ids)}
  data-testid="user-table"
/>

Empty and loading states

<DataTable data={[]} columns={columns} loading data-testid="user-table" />
<DataTable data={[]} columns={columns} emptyState={<p>No items found</p>} data-testid="user-table" />

Layout modes

Mode	Use case
Default	Full-width table for desktop
Compact	Dense data views with reduced row height
Card	Rows render as cards on mobile

Tips

Use custom render functions to put badges, buttons, or dropdown menus in cells.
Add data-testid to interactive elements inside cells.
For filtering, pair the table with a search input and filter the data prop.

Next steps

Forms

Build the search and filter inputs.

Dashboard & Admin

Where tables are most often used.

Was this page helpful?