Class: TanStackTableCell<TFeatures, TData, TValue>

Provides a TanStack Table Cell instance in Angular DI.

The cell can be injected by:

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

Examples

Inject from the nearest [tanStackTableCell]:

html

<td [tanStackTableCell]="cell">
  <app-cell-actions />
</td>

<td [tanStackTableCell]="cell">
  <app-cell-actions />
</td>

@Component({
  selector: 'app-cell-actions',
  template: `{{ cell().id }}`,
})
export class CellActionsComponent {
  readonly cell = injectTableCellContext()
}

@Component({
  selector: 'app-cell-actions',
  template: `{{ cell().id }}`,
})
export class CellActionsComponent {
  readonly cell = injectTableCellContext()
}

Inject inside a component rendered via flexRender:

@Component({
  selector: 'app-price-cell',
  template: `{{ cell().getValue() }}`,
})
export class PriceCellComponent {
  readonly cell = injectTableCellContext()
}

@Component({
  selector: 'app-price-cell',
  template: `{{ cell().getValue() }}`,
})
export class PriceCellComponent {
  readonly cell = injectTableCellContext()
}

Type Parameters

TFeatures

TFeatures extends TableFeatures

TData

TData extends RowData

TValue

TValue extends CellData

Implements

TanStackTableCellContext<TFeatures, TData, TValue>

Constructors

Constructor

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

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

Returns

TanStackTableCell<TFeatures, TData, TValue>

Properties

cell

readonly cell: InputSignal<Cell<TFeatures, TData, TValue>>;

readonly cell: InputSignal<Cell<TFeatures, TData, TValue>>;

Defined in: helpers/cell.ts:86

The current TanStack Table cell.

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

Implementation of

TanStackTableCellContext.cell