Railbase
GPTClaude

QDatatable

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

Updated

Client-side table
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

Note

railbase ui add also copies the badge, button, chart, checkbox, dropdown-menu, input, select, skeleton, sonner, table components — they ship alongside this component automatically.

Usage

import { QDatatable } from "@/lib/ui/QDatatable";

<QDatatable
  rows={rows}
  columns={columns}
  onSort={handleSort}
  page={page}
  onPageChange={setPage}
/>
← PreviousProgressNext →QEditableForm