<!-- The list renders cells through the same *flexRender pipeline as the table. -->
<ng-template #totalTemplate let-context>
  <strong class="total">{{ context.getValue() | currency }}</strong>
</ng-template>

<nat-table-surface>
  <nat-list [columns]="columns()" [data]="rows" accessibleName="Orders" />
</nat-table-surface>

// component.ts — three cell flavors plus a component field label.
private readonly totalTemplate = viewChild<TemplateRef<unknown>>('totalTemplate');

protected readonly columns = computed<ColumnDef<Order, unknown>[]>(() => [
  // 1. Text: return a string (or number) from the cell def.
  { accessorKey: 'customer', header: 'Customer', meta: { label: 'Customer' }, cell: (info) => info.getValue<string>() },

  // 2. Component: flexRenderComponent with typed inputs.
  {
    accessorKey: 'status',
    header: 'Status',
    meta: { label: 'Status' },
    cell: (info) => flexRenderComponent(OrderStatusBadge, { inputs: { status: info.getValue() } })
  },

  // 3. Template: return a TemplateRef; the cell context is the template's $implicit.
  { accessorKey: 'total', header: 'Total', meta: { label: 'Total' }, cell: () => this.totalTemplate() },

  // 4. Component field label: with no meta.label / string header, the list
  //    renders the column's header def as the field label.
  {
    accessorKey: 'channel',
    header: () => flexRenderComponent(FieldLabel, { inputs: { text: 'Channel' } }),
    cell: (info) => info.getValue<string>()
  }
]);