Getting Started

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

Ember 5.8 or newer requires Embroider or ember-auto-import v2. Prefer .gts or .gjs template-tag components with Glint.

Setup

import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import {
  FlexRenderCell,
  createColumnHelper,
  tableFeatures,
  useTable,
  type Cell,
  type Row,
} from '@tanstack/ember-table'

type Person = { id: string; name: string }

const features = tableFeatures({})
const columnHelper = createColumnHelper<typeof features, Person>()
const columns = columnHelper.columns([
  columnHelper.accessor('name', { header: 'Name' }),
])
const initialData: Person[] = [{ id: '1', name: 'Ada' }]
const getRowId = (row: Person) => row.id

const getAllCells = (
  row: Row<typeof features, Person>,
): Array<Cell<typeof features, Person>> => row.getAllCells()

export default class PeopleTable extends Component {
  @tracked data = initialData

  table = useTable(this, () => ({
    features,
    columns,
    data: this.data,
    getRowId,
  }))

  get rows() {
    return this.table.getRowModel().rows
  }

  <template>
    <table>
      <tbody>
        {{#each this.rows as |row|}}
          <tr>
            {{#each (getAllCells row) as |cell|}}
              <td><FlexRenderCell @cell={{cell}} /></td>
            {{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>
  </template>
}

Construction and rendering

useTable takes an options thunk. Read tracked data inside it, and keep features, atoms, and columns stable. In a component, pass this as the owner to bind external-atom cleanup to the component lifecycle. The one-argument thunk form remains available for standalone tables.