Showing 12 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 - Order
ORD-10008 Customer Summit CrestCompany Summit Crest LogisticsChannel WholesaleRegion WestStatusQueued Items 16Updated Jun 9Total $24,000 - Order
ORD-10009 Customer Beacon TechCompany Beacon Tech LabsChannel OnlineRegion MidwestStatusReady Items 23Updated Jun 10Total $37,950 - Order
ORD-10010 Customer Horizon VenturesCompany Horizon Ventures GroupChannel RetailRegion NortheastStatusReview Items 30Updated Jun 11Total $9,000 - Order
ORD-10011 Customer Vanguard SystemsCompany Vanguard Systems CorpChannel WholesaleRegion SouthStatusQueued Items 37Updated Jun 12Total $16,650
<!-- Same surface, same state — the breakpoint picks the renderer. -->
<nat-table-surface [enableSorting]="true" [(state)]="state">
@if (isTableViewport()) {
<nat-table [columns]="columns" [data]="rows" accessibleName="Orders" />
} @else {
<nat-list [columns]="columns" [data]="rows" accessibleName="Orders" />
}
</nat-table-surface>// component.ts — consumer-owned breakpoint: table from 768px up, list below.
protected readonly isTableViewport = toSignal(
inject(BreakpointObserver).observe('(min-width: 768px)').pipe(map((result) => result.matches)),
{ initialValue: true }
);/* Lay out the list items: each field is a grid area named by its column id. */
nat-list {
--nat-list-item-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
--nat-list-item-areas: 'id id status' 'customer owner total';
}