Data Table

The backbone of every list screen. Sorting (Shift for multi-sort), locale-aware search, column visibility, order, widths and pinning, row selection with a bulk bar that can select all matching rows across pages, pagination, server mode with URL state, inline editing with rollback, virtual rows, a container-width card layout and CSV export — on one serializable ListState shared with Filter bar and Saved views.

Installation

Usage

import { DataTable, type DataTableColumn } from "@vamos-ui/react/data-table";

const columns: DataTableColumn<Contact>[] = [
  { id: "name", header: "Name", accessor: "name" },
  { id: "stage", header: "Stage", accessor: "stage", type: "enum", options: stageOptions },
  { id: "value", header: "Deal value", accessor: "value", type: "currency" },
];

<DataTable caption="Contacts" columns={columns} data={contacts} getRowId={(c) => c.id} selectable bulkActions={actions} />

TanStack Table v9 is isolated inside the component; you write DataTableColumn objects, not TanStack ColumnDefs.

Glass budget: rows, sticky headers and pinned cells are opaque mixes — the only blurred layer is the card (and the floating bulk bar on mobile).

Dates in data are YYYY-MM-DD strings; money is a decimal string. Both are formatted with the locale provider (try tr-TR: ; CSV delimiter, ₺, İ/ı-aware search).

Examples

API