Class: TanStackTableHeader<TFeatures, TData, TValue>

Provides a TanStack Table Header instance in Angular DI.

The header can be injected by:

any descendant of an element using [tanStackTableHeader]="..."
any component instantiated by *flexRender when the render props contains header

Example

html

<th [tanStackTableHeader]="header">
  <app-sort-indicator />
</th>

<th [tanStackTableHeader]="header">
  <app-sort-indicator />
</th>

@Component({
  selector: 'app-sort-indicator',
  template: `
    <button (click)="toggle()">
      {{ header().column.id }}
    </button>
  `,
})
export class SortIndicatorComponent {
  readonly header = injectTableHeaderContext()

  toggle() {
    this.header().column.toggleSorting()
  }
}

@Component({
  selector: 'app-sort-indicator',
  template: `
    <button (click)="toggle()">
      {{ header().column.id }}
    </button>
  `,
})
export class SortIndicatorComponent {
  readonly header = injectTableHeaderContext()

  toggle() {
    this.header().column.toggleSorting()
  }
}

Type Parameters

TFeatures

TFeatures extends TableFeatures

TData

TData extends RowData

TValue

TValue extends CellData

Implements

TanStackTableHeaderContext<TFeatures, TData, TValue>

Constructors

Constructor

new TanStackTableHeader<TFeatures, TData, TValue>(): TanStackTableHeader<TFeatures, TData, TValue>;

new TanStackTableHeader<TFeatures, TData, TValue>(): TanStackTableHeader<TFeatures, TData, TValue>;

Returns

TanStackTableHeader<TFeatures, TData, TValue>

Properties

readonly header: InputSignal<Header<TFeatures, TData, TValue>>;

readonly header: InputSignal<Header<TFeatures, TData, TValue>>;

Defined in: helpers/header.ts:81

The current TanStack Table header.

Provided as a required signal input so DI consumers always read the latest value.

Implementation of

TanStackTableHeaderContext.header