The smallest list composition: a surface for the state scope and the list itself — no table involved. Fields render stacked in column order with labels resolved from the column defs.
Minimal example
<!-- Minimal composition: the surface provides the state scope, the list renders. -->
<nat-table-surface>
<nat-list [columns]="columns" [data]="rows" accessibleName="Orders" />
</nat-table-surface>// component.ts — columns are the same TanStack ColumnDefs the table uses;
// field labels come from meta.label (falling back to a string header).
protected readonly rows = orderRows;
protected readonly columns: ColumnDef<Order, unknown>[] = [
{ accessorKey: 'id', header: 'Order', meta: { label: 'Order' } },
{ accessorKey: 'customer', header: 'Customer', meta: { label: 'Customer' } }
// ...
];Showing 8 items across 9 visible fields.
- Order
ORD-10000 Customer Summit CrestCompany Summit Crest LogisticsChannel OnlineRegion WestStatusReady Items 5Updated Jun 1Total $1,500 - Order
ORD-10001 Customer Beacon TechCompany Beacon Tech LabsChannel RetailRegion MidwestStatusReview Items 12Updated Jun 2Total $5,400 - Order
ORD-10002 Customer Horizon VenturesCompany Horizon Ventures GroupChannel WholesaleRegion NortheastStatusQueued Items 19Updated Jun 3Total $11,400 - Order
ORD-10003 Customer Vanguard SystemsCompany Vanguard Systems CorpChannel OnlineRegion SouthStatusReady Items 26Updated Jun 4Total $19,500 - Order
ORD-10004 Customer Zenith LogisticsCompany Zenith Logistics ServicesChannel RetailRegion WestStatusReview Items 33Updated Jun 5Total $29,700 - Order
ORD-10005 Customer Quantum EnergyCompany Quantum Energy GroupChannel WholesaleRegion MidwestStatusQueued Items 40Updated Jun 6Total $42,000 - Order
ORD-10006 Customer Pacific TradeCompany Pacific Trade & SupplyChannel OnlineRegion NortheastStatusReady Items 47Updated Jun 7Total $56,400 - Order
ORD-10007 Customer Caliber ManufacturingCompany Caliber Manufacturing CoChannel RetailRegion SouthStatusReview Items 9Updated Jun 8Total $12,150