Minimal example

<!-- One surface, one state — a different column config per renderer. -->
<nat-table-surface [enableSorting]="true" [(state)]="state">
  @if (view() === 'table') {
    <nat-table [columns]="tableColumns" [data]="rows" accessibleName="Orders" />
  } @else {
    <nat-list [columns]="listColumns" [data]="rows" accessibleName="Orders" />
  }
</nat-table-surface>

// component.ts — the list gets a condensed config with the same column ids,
// so shared state (sorting on a shared column) keeps applying. Moving the
// visible label to meta.hiddenHeaderLabel removes the field labels from the
// list only (they stay screen-reader-only); the table keeps its headers.
protected readonly tableColumns = orderColumns;
protected readonly listColumns = orderColumns
  .filter((column) => ['id', 'customer', 'status', 'total'].includes(column.accessorKey))
  .map((column) => ({
    ...column,
    meta: { ...column.meta, label: undefined, hiddenHeaderLabel: column.meta?.label }
  }));