getting-started

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

Setup

import Alpine from 'alpinejs'
import {
  FlexRender,
  createTable,
  tableFeatures,
  type ColumnDef,
} from '@tanstack/alpine-table'

type Person = { id: string; name: string }
const features = tableFeatures({})
const columns: Array<ColumnDef<typeof features, Person>> = [
  { accessorKey: 'name', header: 'Name' },
]

Alpine.data('peopleTable', () => {
  const local = Alpine.reactive({
    data: [{ id: '1', name: 'Ada' }] as Array<Person>,
  })
  const table = createTable({
    features,
    columns,
    get data() {
      return local.data
    },
    getRowId: (row) => row.id,
  })

  return { table, FlexRender }
})

window.Alpine = Alpine
Alpine.start()

Render real table structure with x-for; use x-html="FlexRender({ header })" or x-html="FlexRender({ cell })" only for renderer output.

Construction and rendering

Wrap changing data in Alpine.reactive and expose it with get data(). The adapter tracks option getters; data: local.data captures a snapshot and does not follow later array replacements. Keep static columns and features outside getters.

The returned table is a reactive proxy. Read Table APIs directly in x-text, x-for, x-if, or bound attributes; no Subscribe component is needed.

Build table structure and interactive controls as real Alpine markup. Use x-html="FlexRender({ header })" or x-html="FlexRender({ cell })" for renderer output. Alpine does not initialize directives inside x-html strings; use templates or Alpine.bind bundles for buttons and inputs.

Read for the task

• When adding or configuring optional features, load intent load @tanstack/table-core#table-features and read only references for the requested behavior.
• For state ownership or reactive reads, read table-state.
• When tables share features, defaults, or reusable UI, read create-table-hook.