Getting Started

Load intent load @tanstack/table-core#core first for the headless model, stable inputs, and column inference.

Setup

import { Component, signal } from '@angular/core'
import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'

type Person = { name: string; age: number }
const features = tableFeatures({})
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'age', header: 'Age' },
]

@Component({
  selector: 'app-table',
  imports: [FlexRender],
  template: `<table>
    <tbody>
      @for (row of table.getRowModel().rows; track row.id) {
        <tr>
          @for (cell of row.getAllCells(); track cell.id) {
            <td>
              <ng-container *flexRenderCell="cell; let value">{{
                value
              }}</ng-container>
            </td>
          }
        </tr>
      }
    </tbody>
  </table>`,
})
export class TableComponent {
  readonly data = signal<Person[]>([{ name: 'Ada', age: 36 }])
  readonly table = injectTable(() => ({ features, columns, data: this.data() }))
}

Construction and rendering

Call injectTable in a component, directive, or service field initializer, or another valid Angular injection context. The adapter binds its cleanup to that context.

Signals read in the options initializer rerun it and call setOptions. Keep features, factories, and columns outside the initializer; return stable data references and derive transformed data with computed outside it.

Import FlexRender for *flexRender, *flexRenderCell, *flexRenderHeader, and *flexRenderFooter. Render values can be primitives, TemplateRef, component types, or flexRenderComponent(...). Use flexRenderComponent for Angular component types; ordinary render functions are already supported directly.

Read for the task