Row selection | Angular Advanced Table

0 selected

Select order
Order ORD-10000
Customer Summit Crest
Company Summit Crest Logistics
Channel Online
Region West
Status Ready
Items 5
Updated Jun 1
Total $1,500
Select order
Order ORD-10001
Customer Beacon Tech
Company Beacon Tech Labs
Channel Retail
Region Midwest
Status Review
Items 12
Updated Jun 2
Total $5,400
Select order
Order ORD-10002
Customer Horizon Ventures
Company Horizon Ventures Group
Channel Wholesale
Region Northeast
Status Queued
Items 19
Updated Jun 3
Total $11,400
Select order
Order ORD-10003
Customer Vanguard Systems
Company Vanguard Systems Corp
Channel Online
Region South
Status Ready
Items 26
Updated Jun 4
Total $19,500
Select order
Order ORD-10004
Customer Zenith Logistics
Company Zenith Logistics Services
Channel Retail
Region West
Status Review
Items 33
Updated Jun 5
Total $29,700
Select order
Order ORD-10005
Customer Quantum Energy
Company Quantum Energy Group
Channel Wholesale
Region Midwest
Status Queued
Items 40
Updated Jun 6
Total $42,000
Select order
Order ORD-10006
Customer Pacific Trade
Company Pacific Trade & Supply
Channel Online
Region Northeast
Status Ready
Items 47
Updated Jun 7
Total $56,400
Select order
Order ORD-10007
Customer Caliber Manufacturing
Company Caliber Manufacturing Co
Channel Retail
Region South
Status Review
Items 9
Updated Jun 8
Total $12,150

<!-- Same selection engine as the table: enable it, add a selection column. -->
<nat-table-surface [(state)]="state">
  <nat-list
    [columns]="columns"
    [data]="rows"
    [enableRowSelection]="true"
    [selectionMode]="selectionMode()"
    accessibleName="Orders" />
</nat-table-surface>

// component.ts — withNatTableSelectionColumn renders a real checkbox per item.
// Its header is the select-all checkbox, which a list would otherwise repeat as
// the field label, so give the column a screen-reader-only label instead.
protected readonly columns = withNatTableSelectionColumn(orderColumns, { columnId: 'select' }).map((column) =>
  column.id === 'select' ? { ...column, meta: { ...column.meta, hiddenHeaderLabel: 'Select order' } } : column
);

// Selection lives in the shared surface state, so it reads back like any slice.
protected readonly selectedCount = computed(() => Object.values(this.state().rowSelection ?? {}).filter(Boolean).length);

/* Selected items expose data-selected for styling. */
nat-list { --nat-list-item-background-selected: color-mix(in srgb, currentcolor 8%, transparent); }