List page

People spend most of their day on this screen. They find records, narrow them down and act on several at once. This page is composed from the same parts as CollectionList: a title and CTA, then the list card with its toolbar, the table and a paging footer. Search, selection, the filter panel and the menus all work.

This is a list page you compose yourself inside AuthenticatedShell, with <CollectionList enableSelection enableFilter bulkActions={…} renderCell={…} />. buildpad add content-routes renders CollectionList inside ContentLayout instead: a collection sidebar and a breadcrumb header, with no app shell. It enables search and selection with an inline Delete bulk action, VTable rows and a “Per page” footer. The filter toggle appears only with enableFilter, and it opens an inline panel, not a drawer. See the CollectionList Storybook. The frames are static compositions of the same Mantine parts with sample data.

Purchase orders

The page adds a title and the ink New order CTA. Inside the card, the toolbar has search, the filter toggle and refresh. Two rows are selected, so the bulk actions appear on the toolbar’s right. Click the filter toggle to open the inline panel. Hover an owner avatar to see the name.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

2 selected

Order	Supplier	Owner	Status	Amount
PO-2041	Atlas Packaging	DO	Pending approval	$12,840
PO-2040	Keystone Logistics	PR	Approved	$48,200
PO-2039	Brightline Electrical	MS	Draft	$3,150
PO-2038	Meridian Foods	DO	Shipped	$7,425
PO-2037	Cobalt IT Services	AH	Approved	$21,600
PO-2036	Harbor Office Supply	HK	Cancelled	$980
PO-2035	Atlas Packaging	DO	Shipped	$15,300
PO-2034	Harbor Office Supply	HK	Approved	$1,240
PO-2033	Keystone Logistics	PR	Shipped	$36,900
PO-2032	Northgate Workwear	MS	Pending approval	$5,480

1–10 of 128 items

Per page

Filters open

The panel opens under the toolbar. It has two rules, an ALL / ANY match toggle and “Add filter”. The toggle turns filled ember with a red count, and the footer says what was filtered out.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

Filters

Match

Order	Supplier	Owner	Status	Amount
PO-2040	Keystone Logistics	PR	Approved	$48,200
PO-2037	Cobalt IT Services	AH	Approved	$21,600
PO-2035	Atlas Packaging	DO	Shipped	$15,300
PO-2033	Keystone Logistics	PR	Shipped	$36,900

4 items (filtered from 128)

Per page

No results

A search that matches nothing keeps the toolbar and table header. VTable shows one dimmed line. Clear the search to bring the rows back.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

	Order	Supplier	Owner	Status	Amount
No results — try adjusting your search or filters

No items

Per page

Loading

On first load the toolbar is ready. VTable shows “Loading items…” over three 48px Skeleton rows, and the footer reads “Loading…”.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

	Order	Supplier	Owner	Status	Amount
Loading items...

Per page

First run

The collection has no records yet. The page renders its own empty state in place of the list, with the ink CTA and a docs link. CollectionList on its own keeps its toolbar and shows “No items in this collection”.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

No purchase orders yet

Raise your first order to send it for approval. Everything your team orders will be listed here.

How approvals work

Load error

If a fetch fails, a red Alert appears under the toolbar. The toolbar stays usable, and Refresh tries again.

Northwind Ops

Purchase orders

Raise, approve and track supplier orders.

Failed to load items

	Order	Supplier	Owner	Status	Amount
No items in this collection

No items

Per page

On a phone

At 390px, CollectionList keeps its columns and the table scrolls sideways. For field staff, your page can render a stacked card list below sm instead.

Purchase orders

Order	Supplier	Owner	Status	Amount
PO-2041	Atlas Packaging	DO	Pending approval	$12,840
PO-2040	Keystone Logistics	PR	Approved	$48,200
PO-2039	Brightline Electrical	MS	Draft	$3,150
PO-2038	Meridian Foods	DO	Shipped	$7,425
PO-2037	Cobalt IT Services	AH	Approved	$21,600
PO-2036	Harbor Office Supply	HK	Cancelled	$980

1–10 of 128 items

Per page

CollectionList as shipped. The toolbar wraps, the table keeps its columns and scrolls sideways, and the footer wraps under the count.

Purchase orders

PO-2041

Pending approval

Atlas Packaging

$12,840

PO-2040

Approved

Keystone Logistics

$48,200

PO-2039

Draft

Brightline Electrical

$3,150

PO-2038

Shipped

Meridian Foods

$7,425

PO-2037

Approved

Cobalt IT Services

$21,600

PO-2036

Cancelled

Harbor Office Supply

$980

1–10 of 128 items

Card list, composed. Below sm your page can render one card per order (number, status, owner, supplier, amount) with the pager underneath.

The list’s overlays pinned open, and the toolbar controls in each state.

Add fieldVTable's header append (enableAddField): a subtle size="sm" ActionIcon opening a Menu of the hidden fields.

Amount

Header context menuRight-click a column header to sort, align or hide it. VTable draws it in its own popup (--mantine-radius-sm, shadow-md). It is shown here as a Menu.

2 selected

Bulk actionsBulkActionsBar sits on the toolbar's right while rows are selected: a light Badge size="lg", then each bulkActions entry as a light compact-sm Button, then a clear button. Approve is this page's action, and Delete passes color="red".

Idle

2 rules

Filter toggleSubtle when idle. With rules applied it turns filled primary and a red Badge circle shows the count.

Per page

Per pageA 72px Select size="xs" with bare numbers, after a dimmed "Per page" label.

Your permissions could not be loaded, so creating, editing and deleting are turned off.

Permissions failedWhen /permissions/me fails, the list still loads but turns off writes. A red Alert explains why and offers a light red Retry.

Built from

App shell: sidebar, glass header and user menu from the CLI’s AuthenticatedShell.
Page headers: a Title, a dimmed description and the ink CTA, which the page adds above the list.
Data views: the CollectionList card. Its toolbar (.collection-list-toolbar), inline filter panel, table and footer copy CollectionList.css. VTable is drawn here with Mantine Table. Its checkboxes use the default sm size, and selected rows get no tint.
Badges for status, through the page’s renderCell. ORDER_STATUS maps each status to gray, yellow, blue, green or red, and the theme resolves those to the neutral, warning, info, success and danger scales. Without renderCell, CollectionList prints the choice label as text.
Avatar for owners, also through renderCell. As in UserAvatar, active users get primary and everyone else gets gray.
Inputs in the filter rules: Selects for the field and operator, a NumberInput for amounts and a TextInput for dates.
Feedback: Skeleton rows while loading, and the red Alert for load and permission errors.

Why the date rule is a text input. FilterPanel gives date fields a TextInput with a YYYY-MM-DD placeholder, not a date picker, so the “Due before” rule looks the same in your app. Record forms use the datetime interface from @buildpad/ui-interfaces, which is built on the @mantine/dates pickers shown on Inputs.

List page

Purchase orders

Purchase orders

Filters open

Purchase orders

No results

Purchase orders

Loading

Purchase orders

First run

Purchase orders

No purchase orders yet

Load error

Purchase orders

On a phone

Purchase orders

Purchase orders

Menus and toolbar states

Built from