Data tables need search, page size, pagination controls, and optional bulk selection. The Table1 Pro block shows the full toolbar pattern — wire state in the parent, not inside Table.
What this pattern covers
Basic Table renders headers and rows. Production admin tables add:
Search filter above the grid
Items-per-page control
Previous / next pagination
Row checkboxes with “select all on page”
Bulk action bar when selection is non-empty
Gold reference: packages/core/ai/examples/blocks/Table1.tsx — canonical implementation for dashboard and settings task bundles.
State you own in the parent
Keep four pieces of state outside the table component:
State
Purpose
`search`
Filter string
`itemsPerPage`
Page size (5, 25, 50, 100)
`currentPage`
1-based page index
`selectedIds`
Set of row identifiers
Derive filtered rows with useMemo, then slice for the current page:Describe in prose: filtered = filterFn ? data.filter(...) : data, then paginated = filtered.slice(start, end). Reset currentPage to 1 when search or page size changes.
Wire onClick on IconButtons to decrement/increment currentPage with bounds checks.
Page size control
SegmentedControl works well for page sizes when options are few:
Place beside pagination or in the toolbar Row. Avoid dropdowns when three options suffice.
Bulk selection bar
When selectedIds.size > 0, swap the heading for an action row:
Describe checkbox columns in prose: Table1 renders a Checkbox in the first column when selectable is true. “Select all” toggles only the current page ids — not the entire filtered dataset unless you explicitly implement that.
