Data Table

A lightweight, read-only TanStack table for Docyrus data sources with value renderers, row selection, grouping, and optional pagination.

Edit on GitHubEditllms.txt

Client Only

When To Use

Use DataTable when you want the Docyrus field rendering layer and saved-view ergonomics without the heavier editable spreadsheet behavior of DataGrid.

Read-only rendering only
Standard HTML table layout using the shadcn Table primitive
Works with TanStack sorting, grouping, selection, and pagination
Lets app developers compose their own toolbar and surrounding UI freely

DataTable intentionally does not provide editable cells, display mode switching, row-height controls, paste support, or grid-style keyboard navigation.

Usage

import {
  DataTable,
  getDataTableSelectColumn
} from '@docyrus/ui/components/data-table';
import {
  DataGridGroupMenu,
  DataGridSortMenu
} from '@docyrus/ui/components/data-grid';
import {
  getCoreRowModel,
  getExpandedRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  type ColumnDef
} from '@tanstack/react-table';

const columns: Array<ColumnDef<Row>> = [
  getDataTableSelectColumn<Row>({ enableRowNumbers: true }),
  {
    accessorKey: 'name',
    header: 'Company'
  },
  {
    accessorKey: 'status',
    header: 'Status',
    meta: { groupable: true }
  }
];

function MyTable({ data }: { data: Array<Row> }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getPaginationRowModel: getPaginationRowModel()
  });

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <DataGridSortMenu table={table} />
        <DataGridGroupMenu table={table} />
      </div>
      <DataTable table={table} pagination />
    </div>
  );
}

`useDocyrusDataTable`

For Docyrus data-source screens, use the hook to combine field metadata, value renderers, saved views, remote loading, and toolbar controls.

import { DataTable } from '@docyrus/ui/components/data-table';
import { useDocyrusDataTable } from '@docyrus/ui/hooks/use-docyrus-data-table';

function OrganizationsTable() {
  const {
    table,
    tableProps,
    toolbar,
    sidePanel
  } = useDocyrusDataTable({
    client,
    appSlug: 'base',
    dataSourceSlug: 'organization',
    collection,
    users
  });

  return (
    <div className="flex gap-4">
      {sidePanel}
      <div className="min-w-0 flex-1 space-y-3">
        {toolbar}
        <DataTable table={table} {...tableProps} />
      </div>
    </div>
  );
}

Features

getDataTableSelectColumn() supports checkbox selection and optional row numbers in the select column.
Grouped rows render inline with expand/collapse controls and group counts.
Identity values can render in compact UUID mode with tooltip + copy affordance.
useDocyrusDataTable() reuses Docyrus saved views, search, filter, sort, grouping, export, and paging behavior.

API Notes

`DataTable`

Prop	Type	Default	Description
`table`	`Table<TData>`	—	TanStack table instance
`emptyText`	`string`	`'No results.'`	Empty state label
`isLoading`	`boolean`	`false`	Shows loading row state
`pagination`	`boolean`	`false`	Renders the standard pagination footer
`containerClassName`	`string`	—	Wrapper border/container styling
`rowClassName`	`string \| (row) => string`	—	Per-row styling hook

`getDataTableSelectColumn`

Option	Type	Default	Description
`enableRowNumbers`	`boolean`	`false`	Shows row numbers when the row is not selected
`size`	`number`	`44`	Fixed select-column width

`useDocyrusDataTable`

The hook mirrors the lightweight table workflow:

returns table, tableProps, toolbar, sidePanel, items, resolvedListParams, pagingMode, and reload
supports mapColumn, extraColumns, actionsColumn, showSelectColumn, enableRowNumbers, and toolbar content slots
stays read-only by design

Data Table

On this page