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

// component.ts — both renderers consume the same engine state, so sorting and
// pinning survive the swap. The static table keeps native table semantics and
// natural tab order; it has no grid keyboard model.
protected readonly view = signal<'grid' | 'static'>('grid');
// The actions column starts right-pinned; pinning is engine state, so it
// renders sticky in both interaction models.
protected readonly state = signal<Partial<NatTableUserState>>({
  columnPinning: { left: [], right: ['actions'] }
});

// A plain-button actions column renders in both interaction models. (Cells
// built on ngGridCellWidget need the grid context and cannot render in the
// static table.)
const actionsColumn: ColumnDef<Order, unknown> = {
  id: 'actions',
  header: 'Actions',
  enableSorting: false,
  cell: (info) =>
    flexRenderComponent(OrderActionButton, {
      inputs: { orderId: info.row.original.id },
      outputs: { viewOrder: (orderId) => this.onViewOrder(orderId) }
    })
};