Table Features

Overview

DataTable directly owns sorting, column pinning, column resizing, pagination and controlled/uncontrolled table state.

Search, filtering, column visibility, and bulk-action UI are covered on their own pages because they are composed around the table rather than folded into the DataTable API surface.

Sorting

Turn on sorting with enableSorting. By default the table manages its own sorting state. Switch to controlled mode only when that state needs to live somewhere else.

function SortableTable() {
  return (
    <DataTable
      data={data}
      columns={columns}
      enableSorting
      initialSorting={[{ id: "name", desc: false }]}
    />
  );
}

Column Pinning

Turn on pinning with enableColumnPinning to let users stick important columns to the left or right edge of the table.

function PinnableTable() {
  const [columnPinning, setColumnPinning] = useState({
    left: ["name"],
    right: ["status"],
  });

  return (
    <DataTable
      data={data}
      columns={columns}
      enableColumnPinning
      columnPinning={columnPinning}
      onColumnPinningChange={setColumnPinning}
      onColumnPin={(columnId, position) => {
        console.log(columnId, position);
      }}
    />
  );
}

Column Resizing

Turn on resizing with enableColumnResizing to let users adjust column widths with drag handles.

function ResizableTable() {
  return (
    <DataTable
      data={data}
      columns={columns}
      enableColumnResizing
      onColumnResize={(columnId, size) => {
        console.log(columnId, size);
      }}
    />
  );
}

Pagination

Turn on pagination with enablePagination. The default uncontrolled state starts at page 0 with a page size of 10.

function PaginatedTable() {
  return (
    <DataTable
      data={data}
      columns={columns}
      enablePagination
      initialPagination={{
        pageIndex: 0,
        pageSize: 5,
      }}
    />
  );
}

Controlled vs Uncontrolled

Every built-in table feature follows the same pattern:

• pass initial* props for uncontrolled setup
• pass both value and onChange props for controlled state
• keep state outside the table only when another part of your UI needs it

<DataTable
  data={data}
  columns={columns}
  enableSorting
  enableColumnPinning
  sorting={sorting}
  onSortingChange={setSorting}
  columnPinning={columnPinning}
  onColumnPinningChange={setColumnPinning}
/>

Row Interaction and Escape Hatches

Use onRowClick when rows should trigger navigation or open another surface. Use tableOptions only when you need a lower-level TanStack option that Cubitt does not expose directly.

API Reference

Feature Flags

Sorting

Column Pinning

Pagination

Resizing

Other Core Props