SYS.01 — TanStack Table+

Dense data,still readable.

Sorting, pagination, row selection, visibility controls, and column drag-and-drop on 1,000 generated employee records.

Records: 1,000
Columns: 7
Actions: Sort + select
Layout: Drag headers

SYS.01 / Live buildInteractive

SYS.01 — Anatomy+

One grid, two layers.

The component separates a dataset-agnostic table contract from the interactions people need to work through dense operational data.

What it is

A production-style React DataTable built with TanStack Table. It renders a pageable, sortable grid over 1,000 faker-generated employee records, paginated locally for fast interaction, but the component itself is dataset-agnostic.

Pass it a fetch function, a column configuration, and optional row operations, and it handles the rest. This is the kind of table used in admin panels, ERP modules, and internal business applications: dense, fast, keyboard-friendly, and designed for real batch-selection workflows.

The live build uses the copied DataTable APIs rather than a simplified mock, so the reference logic matches the production component contract.

How it works

A typed column configuration declares each accessor, header, sorting behaviour, and optional custom cell renderer. Column groups can bundle fields under a shared header. TanStack Table owns pagination, sorting, and row-selection state while the fetch function supplies the active page.

Drag each header by its grip to reorder columns, click a header to sort, or hide fields from the Columns menu. The selection summary updates as rows are checked, and a row "view" operation opens a detail sheet through the same operation pipeline exposed to custom actions.

SYS.01 — Integration+

Typed in, operable out.

Define the data contract, connect the page-aware fetch function, and opt into the operations the screen needs.

Usage / reference

TSX

import { DataTable } from '@/components/dataTable/DataTable'
import type { ColumnGroup } from '@/components/dataTable/types'

type User = { id: number; name: string; email: string; status: string; salary: number }

export default function EmployeeTable() {
  const columnsConfig: ColumnGroup<User>[] = [{
    id: 'main',
    columns: [
      { id: 'name', accessorKey: 'name', header: 'Name', enableSorting: true },
      { id: 'email', accessorKey: 'email', header: 'Email', enableSorting: true },
      { id: 'status', accessorKey: 'status', header: 'Status',
        cell: ({ getValue }) => <Badge>{String(getValue())}</Badge> },
      { id: 'salary', accessorKey: 'salary', header: 'Salary',
        cell: ({ getValue }) => `$${(getValue() as number).toLocaleString()}` },
    ]
  }]

  const fetchData = async (params) => {
    // params: { page, pageSize, sorting, filters }
    const rows = await getUsers(params)
    return { rows, rowCount: rows.length }
  }

  return (
    <DataTable
      tag="employees"
      title="Employee Directory"
      fetchData={fetchData}
      columnsConfig={columnsConfig}
      operations={{ view: { component: ViewUser, displayMode: 'sheet', width: 'md' } }}
      enableSelection
      showPagination
    />
  )
}

SYS.01 — Fit+

Repeatable where density matters.

A focused feature set for product surfaces that reuse the same operational grid pattern across many screens.

Features / 06

01Paginated 1,000-row dataset
02Sortable columns across all data types
03Row selection with selected-row summary
04Column visibility picker
05Drag-and-drop column reordering
06Typed column groups and custom cell renderers

When to use

A configurable DataTable pays off when an app repeats the same grid across employee directories, inventory, invoices, and audit logs. Centralising sorting, pagination, and selection keeps those screens consistent and substantially reduces per-screen code.

Built with React, TypeScript, and TanStack Table. The surrounding system continues in the SchemaForm builder playground, where schema-driven forms generate the entry screens that feed grids like this one, and the QueryBuilder playground, which composes the filter payload this table consumes.