ShowcaseDocs and examples

A paginated list: the library's pagination companion resolves the list as its controller, registers pagination on the shared engine, and pages the rows — no list-specific wiring.

Minimal example

<!-- The pagination companion resolves the list as its controller and pages it. -->
<nat-table-surface [(state)]="state">
  <nat-list [columns]="columns" [data]="rows" accessibleName="Orders" />

  <nat-table-pagination [pageSizeOptions]="[5, 10, 20]" />
</nat-table-surface>
// component.ts — nothing list-specific: mounting the pagination control
// registers pagination on the surface, and the engine pages the rows.
protected readonly state = signal<Partial<NatTableUserState>>({});

Showing 10 items across 9 visible fields. Page 1 of 5.

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

Page 1 of 5