Minimal example

<!-- Same surface, same state — swap the renderer. -->
<nat-table-surface [enableSorting]="true" [enableReordering]="true" [(state)]="state">
  @if (view() === 'table') {
    <nat-table [columns]="columns" [data]="rows" accessibleName="Orders" />
  } @else {
    <nat-list [columns]="columns" [data]="rows" accessibleName="Orders" />
  }
</nat-table-surface>

// component.ts — the list has no header UI; sort and reorder it by writing the state.
protected readonly view = signal<'table' | 'list'>('table');
protected readonly state = signal<Partial<NatTableUserState>>({});

protected sortByTotal(): void {
  this.state.update((current) => ({ ...current, sorting: [{ id: 'total', desc: true }] }));
}

protected moveField(columnOrder: string[]): void {
  this.state.update((current) => ({ ...current, columnOrder }));
}