Data views

The same Northwind Ops purchase orders, shown every way an internal tool needs to show records. The table follows the structure of CollectionList from @buildpad/ui-collections; everything else is stock Mantine composed with the shipped theme, and all of it is interactive.

Data table

Search, a quick status filter, a collapsible filter panel and a column menu up top; select rows to get the bulk bar; the footer carries the count, page size and pagination. Try filtering until nothing matches.

2 selected

Order	Supplier	Owner	Status		Updated
PO-2041 Packaging	Atlas Packaging	DO Daniel Osei	Pending approval	$12,840	Today, 09:42
PO-2040 Freight	Keystone Logistics	PR Priya Raman	Approved	$48,200	Today, 08:15
PO-2039 Facilities	Brightline Electrical	MS Marco Silva	Draft	$3,150	Yesterday
PO-2038 Catering	Meridian Foods	DO Daniel Osei	Shipped	$7,425	26 Oct
PO-2037 Software	Cobalt IT Services	AH Amelia Hart	Approved	$21,600	25 Oct
PO-2036 Office	Harbor Office Supply	HK Hana Kobayashi	Cancelled	$980	24 Oct
PO-2035 Packaging	Atlas Packaging	DO Daniel Osei	Shipped	$15,300	22 Oct
PO-2034 Office	Harbor Office Supply	HK Hana Kobayashi	Approved	$1,240	21 Oct
PO-2033 Freight	Keystone Logistics	PR Priya Raman	Shipped	$36,900	20 Oct
PO-2032 Uniforms	Northgate Workwear	MS Marco Silva	Pending approval	$5,480	19 Oct

1–10 of 128

Per page

Collection tableThe CollectionList structure in stock parts: toolbar, collapsible filter panel, removable filter Pills, a bulk bar on selection, default-size Checkboxes as in VTable, Table highlightOnHover, and a footer with the count, a page-size Select and Pagination. Everything is interactive.

The toolbar overlays, pinned open so you can see them without clicking.

Row actionsMenu on a subtle ActionIcon; destructive items last, after a divider, in color="red".

Status filterSelect clearable with dropdownOpened; the checked option uses the ember check.

Card grid

The same records as cards — for browsing, or when each record has a picture or a lot of status. A view switcher keeps the dense list one click away.

Purchase orders

128 records · sorted by last updated

Cards

List

PO-2041

Pending approval

Atlas Packaging

Packaging

Amount

$12,840

Due 04 Nov

Daniel Osei

PO-2040

Approved

Keystone Logistics

Freight

Amount

$48,200

Due 31 Oct

Priya Raman

PO-2039

Draft

Brightline Electrical

Facilities

Amount

$3,150

Due 12 Nov

Marco Silva

PO-2038

Shipped

Meridian Foods

Catering

Amount

$7,425

Due 28 Oct

Daniel Osei

PO-2037

Approved

Cobalt IT Services

Software

Amount

$21,600

Due 30 Oct

Amelia Hart

PO-2036

Cancelled

Harbor Office Supply

Office

Amount

$980

Due —

Hana Kobayashi

Card gridSimpleGrid cols={3} of Card withBorder (radius --ds-radius-card); a SegmentedControl swaps to a dense list of the same records.

Lists & record summary

A compact list for people and other small collections, and the description list that sits at the top of a record page.

Team

Amelia Hart (Active)

amelia.hart@northwind.io

Administrator

2 min ago

Daniel Osei (Active)

daniel.osei@northwind.io

Editor

18 min ago

Priya Raman (Active)

priya.raman@northwind.io

Approver

1 hour ago

Marco Silva (Invited)

marco.silva@northwind.io

Editor

—

Hana Kobayashi (Active)

hana.k@northwind.io

Viewer

Yesterday

Tom Becker (Suspended)

tom.becker@northwind.io

Viewer

3 weeks ago

Compact listRows of Avatar + Indicator (status dot), name and email, a role Badge and a dimmed timestamp; hairline --ds-divider between rows.

Purchase order

PO-2041

Pending approval

Supplier: Atlas Packaging
Category: Packaging
Amount: $12,840
Due: 04 Nov 2026
Owner: DO
Daniel Osei
Approvers: PR
AH
HK
1 of 3 approved
Reference: NW-7F3A-2041
Last updated: Today, 09:42
Notes: Q4 corrugated cartons for the Leeds and Rotterdam sites. Split delivery agreed — 60% on 04 Nov, remainder on 18 Nov.

Record summaryA two-column <dl>: dimmed xs terms over sm values, with a CopyButton on the reference and an Avatar.Group for approvers.

Stat cards

The KPI row at the top of a dashboard. Trend badges say whether a change is good or bad, not just which way it went.

Open purchase orders

128

+12

vs. last week

Spend this month

$412,380

+4.1%

of $520k budget

Avg. approval time

6.4 h

-1.2 h

faster than target

Overdue deliveries

7

needs attention

Stat cardsInter Tight Title order={2} values; the trend Badge is coloured by meaning, not direction — faster approvals are green, more overdue deliveries are red, volume changes stay neutral gray.

Charts

@mantine/charts is not part of the kit, so these are composed from core parts and tokens — enough for a dashboard’s headline charts without another dependency.

Monthly spend

$412k

79% of $520k budget

$412k

Bar chart (composed)Built from Box-level divs and Tooltip — no chart library ships with the kit. Past months --ds-primary-200, the current month --ds-primary, 4px rounded tops, dashed --ds-divider grid.

Open spend by category

$152,135

Freight

$85,100 56%

Packaging

$28,140 18%

Software

$21,600 14%

Catering

$7,425 5%

Uniforms

$5,480 4%

Facilities

$3,150 2%

Breakdown (Progress)Share of open spend per category as Progress size="sm" in the ember primaryColor; values stay in ink text, never in the bar colour.

Supplier	Orders	Spend (6 mo)	Change
Keystone Logistics	18	$264k	+20%
Atlas Packaging	24	$157k	+41%
Cobalt IT Services	6	$120k	+22%
Meridian Foods	11	$47k	-22%
Brightline Electrical	9	$21k	-25%

Sparklines in a tableA 96×28 SVG polyline stroked with --ds-primary (falling series in --ds-gray-400) and an end dot — trend at a glance next to the numbers it summarises.

Activity & comments

What happened to a record and the conversation about it.

Activity

All

Approvals

Comments

Priya Raman approved PO-2040 · Keystone Logistics

12 min ago

Daniel Osei submitted PO-2041 · Atlas Packaging

1 hour ago

Amelia Hart invited Marco Silva to Procurement

3 hours ago

Hana Kobayashi commented on PO-2038 · Meridian Foods

Yesterday

Activity feedTimeline with an icon per action; active={0} fills the newest bullet in ember, older ones stay outlined. Targets are Anchors in --ds-accent-text.

Comments

Priya Raman

2 hours ago

Freight quote is 6% over the framework rate. Can we ask Keystone to match the Q3 price before I approve?

Daniel Osei

1 hour ago

Asked them this morning — they agreed to $48,200. Line items are updated.

Hana Kobayashi

40 min ago

Delivery window works for the Leeds site. Rotterdam needs a 48h heads-up for dock booking.

Comments threadNested replies indent under the parent avatar; the reply box is a Textarea autosize whose ink Button stays disabled until there is text. Try posting one.

Board

Records grouped by status for teams that work a pipeline. Move a card from its menu.

Draft

PO-2039

Brightline Electrical

12 Nov

$3,150

$3,150 total

Pending approval

PO-2041

Atlas Packaging

Approvals

1 of 3

04 Nov

$12,840

PO-2032

Northgate Workwear

Approvals

1 of 3

06 Nov

$5,480

$18,320 total

Approved

PO-2040

Keystone Logistics

31 Oct

$48,200

PO-2037

Cobalt IT Services

30 Oct

$21,600

PO-2034

Harbor Office Supply

25 Oct

$1,240

$71,040 total

Shipped

PO-2038

Meridian Foods

28 Oct

$7,425

PO-2035

Atlas Packaging

23 Oct

$15,300

PO-2033

Keystone Logistics

21 Oct

$36,900

$59,625 total

Board by statusColumns on --ds-body-bg with a status Badge and count; cards are Paper withBorder shadow="xs". Use a card's menu to move it — an empty column shows a dashed drop target.