Minimal example

<!-- dataStatus drives the built-in loading, empty, and error list items. -->
<nat-table-surface>
  <nat-list [columns]="columns" [data]="rows()" [dataStatus]="dataStatus()" accessibleName="Orders" />
</nat-table-surface>

// component.ts — the consumer owns fetching, retries, and error handling;
// the list only renders the state you hand it.
protected readonly dataStatus = signal<NatTableDataStatus>(NAT_TABLE_DATA_STATUS.loading);
protected readonly rows = signal<Order[]>([]);

private async load(): Promise<void> {
  this.dataStatus.set(NAT_TABLE_DATA_STATUS.loading);

  try {
    this.rows.set(await this.api.fetchOrders());
    this.dataStatus.set(NAT_TABLE_DATA_STATUS.success);
  } catch {
    this.dataStatus.set(NAT_TABLE_DATA_STATUS.error);
  }
}

/* All three states share one base shape, so shared tokens restyle them
   together and each state keeps its own accent. */
nat-list {
  --nat-table-list-state-justify: center;
  --nat-table-list-state-min-height: 8rem;
  --nat-table-list-state-radius: 12px;
  --nat-table-list-state-background: rgb(0 0 0 / 2%);
  --nat-table-list-error-accent: #d14343;
}