Tables, filters and CSV

React ResourceTable

import { ResourceTable, type ResourceColumn } from '../features/business/ResourceTable';
type Item = { id: string; name: string; amount: number };
const columns: ResourceColumn<Item>[] = [
  { key: 'name', label: 'Name' },
  { key: 'amount', label: 'Amount', render: row => `$${row.amount}` },
];
const rows: Item[] = [{ id: '1', name: 'Example', amount: 120 }];
export default function RecordsPage() {
  return <ResourceTable rows={rows} columns={columns} label="Records" />;
}

Column contract

Use stable unique IDs. render controls presentation; optional value supplies the plain value used by search, filters, sorting and CSV. onArchive receives selected IDs; the parent handles confirmation and persistence. actions is a ReactNode for toolbar content.

Server-side data

These tables filter local arrays. Large datasets need API endpoints for pagination, search and sorting. Send page size and filter state explicitly and return total count plus stable IDs. Export only fields and records the current user is allowed to access.