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 & 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 so links are shareable and state survives reload and back navigation.
Dashboard 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.
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 actions and confirmation modals.
Live-updating 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 with an array reduce instead of a groupBy API.
CSV import →

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