resource-table

Table for any Quickback resource or view — cursor pagination, server search, sort, column picker, realtime refresh — with columns from the schema registry.

npx shadcn add @quickback/resource-table

import { ResourceTable } from "@/components/resource-table"

<ResourceTable
  table="jobs"
  onRowClick={(row) => navigate(`/jobs/${row.id}`)}
  rowActions={(row) => <CloseJobButton id={String(row.id)} />}
/>

Props

Prop	Type	Default	Description
`table`	`string`	required	Schema-registry table name.
`view`	`string`	—	Read through a named view. Omit it to read the collection route, which serves `read.defaultView` when the table sets one.
`columns`	`string[]`	every non-system column	Columns visible at first. Users toggle the rest from the column menu.
`pageSize`	`number`	`25`	Sent as `limit`. The server caps it at the table's `maxPageSize`.
`onRowClick`	`(row) => void`	—	Makes rows clickable.
`rowActions`	`(row) => ReactNode`	—	Renders a trailing cell per row, e.g. edit or action buttons.
`live`	`boolean`	`true`	Refetch on realtime change frames for this table (see Realtime). Has no effect without a realtime source.
`className`	`string`	—

Behavior

Columns come from the view's declared fields when it has them, else from the schema. The primary key, the tenant scope, and audit bookkeeping (createdBy, modifiedAt, modifiedBy, deletedAt, deletedBy) start hidden.
Pagination uses the keyset cursor (startingAfter / endingBefore). It falls back to offset when the server returns no cursor, for example when sorting on a masked column.
Search is debounced and sent as ?search=. The box is hidden when the view's query.searchable is empty, since the server would answer 400.
Sorting is by column header, sent as ?sort=. The first load uses the table's defaultSort.
States. Loading, empty (No records yet, or No records match "…"), and error with a retry button. The error shows the problem's detail.
Masked fields render exactly what the API returns ([REDACTED], ***-**-1234). The table can't see past masking.

Props

Behavior

On this page