Recipes

Working patterns for common product needs. Each recipe is self-contained — copy into your project and adjust.

Approval workflow →

Bulk-approve or reject requests. Toolbar buttons adapt to the selected rows' status — already-resolved rows are excluded automatically.

Server-side sort, page & filter →

Wire sorting, pagination, and column filters to your own API in a single useEffect.

URL-synced table state →

Sync sort, filters, and pagination to the URL — shareable links, reload-safe, back button works.

Dashboard with drill-down →

Department overview with expandable rows, health-status row tinting, and inline budget-spend bars.

Audit log viewer →

Fixed header, severity row tinting, and multi-field live search — all wired together.

Persist column widths →

Save and restore resizable column widths to localStorage or a back-end API.

Inline row actions →

Per-row ⋮ menu with edit, duplicate, and delete — confirmation modals included.

Live-updating data grid →

Flash-on-change rows for a real-time price grid, using conditionalRowStyles and keyField.

Editable inventory grid →

Spreadsheet-style inline editing with a derived total column and a running grand total.

Grouped rows with aggregates →

Per-group totals and drill-down built from a plain array reduce — no groupBy API needed.

CSV import →

Load a user-uploaded CSV file into the table with FileReader and a small parser.