Tanstack Angular Table Create Table Hook

This skill builds on @tanstack/table-core#core, getting-started, and table-state. Use it for repeated app conventions; keep one-off tables on injectTable.

Setup

import {
  createTableHook,
  rowSortingFeature,
  tableFeatures,
} from '@tanstack/angular-table'

export const {
  injectAppTable,
  createAppColumnHelper,
  injectTableContext,
  injectTableCellContext,
  injectTableHeaderContext,
} = createTableHook({
  features: tableFeatures({ rowSortingFeature }),
})

const helper = createAppColumnHelper<Person>()
const columns = helper.columns([helper.accessor('name', { header: 'Name' })])

export class PeopleTable {
  readonly table = injectAppTable(() => ({ columns, data: this.data() }))
}

Core Patterns

Consume typed DI context in registered components

export class NameCell {
  readonly cell = injectTableCellContext<string, Person>()
  readonly value = computed(() => this.cell().getValue())
}

Use the matching table/header/cell injector instead of threading context props through reusable components.

Distinguish component types from render functions

Register either an Angular component type or a render function. Return component types directly when FlexRender should set context inputs; use flexRenderComponent(Component, options) only for explicit inputs/outputs/injector/bindings/directives.

Common Mistakes

CRITICAL Calling app helpers outside DI

Wrong:

export function make() {
  return injectAppTable(() => options)
}

Correct:

export class PeopleTable {
  readonly table = injectAppTable(() => options())
}

Both app-table construction and returned context injectors require Angular injection context.

Source: packages/angular-table/src/helpers/createTableHook.ts

HIGH Prop drilling registered context

Wrong:

cell: (ctx) => flexRenderComponent(NameCell, { inputs: { cell: ctx.cell } })

Correct:

cell: (ctx) => ctx.cell.NameCell

Registered components can consume the app hook’s typed cell context directly.

Source: docs/framework/angular/guide/composable-tables.md

HIGH Wrapping a function as a component

Wrong:

flexRenderComponent((props) => props.cell.getValue())

Correct:

;(props) => props.cell.getValue()

flexRenderComponent validates an Angular component type; plain render functions are already valid render content.

Source: packages/angular-table/src/flex-render/flexRenderComponent.ts

MEDIUM Abstracting a one-off table

Wrong:

const hook = createTableHook({ features: tableFeatures({}) })

Correct:

readonly table = injectTable(() => ({ features, columns, data: this.data() }))

Use the app hook only when shared defaults, types, or registered components justify it.

Source: docs/framework/angular/guide/composable-tables.md

API Discovery

Inspect node_modules/@tanstack/angular-table/dist/types/ for exact DI and rendering contracts in the bundled public API.