QDatatable

const rows = [
  { id: "INV001", status: "Paid", method: "Card", amount: "$250.00" },
  { id: "INV002", status: "Pending", method: "Transfer", amount: "$150.00" },
  { id: "INV003", status: "Unpaid", method: "Card", amount: "$350.00" },
];

<QDatatable
  columns={[
    { id: "id", header: "Invoice", accessor: "id", sortable: true },
    { id: "status", header: "Status", accessor: "status", sortable: true },
    { id: "method", header: "Method", accessor: "method" },
    { id: "amount", header: "Amount", accessor: "amount", align: "right" },
  ]}
  data={rows}
  rowKey="id"
  search
  pageSize={5}
/>

Railbase's schema-driven data table — search, sort, paginate, select, and export over a collection.

Installation

railbase ui add QDatatable

Usage

import { QDatatable, type ColumnDef } from "@/lib/ui/QDatatable.ui";

const columns: ColumnDef<Row>[] = [
  { id: "name", header: "Name", accessor: "name" },
  { id: "email", header: "Email", accessor: "email" },
];

// client mode — pass rows in via `data`; sort/filter/paginate happen in memory
<QDatatable columns={columns} data={rows} rowKey="id" search exportable />

The only required prop is columns (a ColumnDef<T>[]). Supply rows one of two ways — they are mutually exclusive:

• Client mode — data={rows}: sorting, filtering and pagination run in memory.
• Server mode — fetch={(params, signal) => Promise<QueryResult<T>>}: the table calls your fetcher on every query change (use deps to refetch on external filter state). This is the path for collections larger than ~1k rows.

Sorting and pagination are the component's own internal state — configure their starting point with initialSort, pageSize and pageSizes rather than driving them from the caller. Other common props: search, exportable, selectable (+ onSelectionChange/bulkBar), rowActions, primaryAction.