Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Admin response table with client-side sort, filter, pagination, and CSV/XLSX export.

With filters, pagination and export

RespondentRoleScoreSubmitted
User 1Developer693/7/2026
User 2Designer893/6/2026
User 3PM643/5/2026
User 4Developer953/4/2026
User 5Designer833/3/2026
1–5 of 12

Props

PropTypeDéfautRequisDescription
rowsResponseRow[]—✓Array of data rows — each must have an id field.
columnsColumnDef[]—✓Column definitions: { id, label, type?, width?, sortable? }.
pagination{ page, pageSize, total }——Pagination state. Shows pagination UI when total > pageSize.
onPageChange(page: number) => void——Called when the user navigates to a different page.
filtersFilterDef[]——Filter definitions — renders a text input per filter above the table.
onExport(format: "csv" | "xlsx") => void——Shows CSV/XLSX export buttons when provided.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  rows={[]}
  columns={[]}
  pagination={...}
  onPageChange={0}
  filters={[]}
  onExport="csv"
/>
rowscolumnspaginationonPageChangefiltersonExport

Usage

tsx
import { ResponseTable } from "@brickslab./ui-web";

<ResponseTable
  rows={responses}
  columns={[
    { id: "name", label: "Name", sortable: true },
    { id: "score", label: "Score", type: "number", sortable: true },
  ]}
  pagination={{ page, pageSize: 20, total: responses.length }}
  onPageChange={setPage}
  onExport={(format) => downloadFile(format)}
/>