ShowcaseDocs and examples

Row selection runs on the same engine slice as the table's: enable it on the list and add the withNatTableSelectionColumn companion. The generated checkbox is plain DOM, so it renders inside list items unchanged, and selected items expose data-selected for styling.

Minimal example

<!-- 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-table-list-item-background-selected: color-mix(in srgb, currentcolor 8%, transparent); }

0 selected

Showing 8 items across 10 visible fields.

  • 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