mcpField
G
getting-started

getting-started

github.com/tanstackDevelopment28.6k78 installsUpdated 2w ago
Repository

About getting-started

getting-started is a guide skill for building tables with @tanstack/alpine-table and Alpine.js. It covers setup, reactive data and rendering, while pointing to core and feature references for further API details.

Key features

  1. 01Set up the Alpine table adapter
  2. 02Connect reactive data and options
  3. 03Render headers and cells
  4. 04Build controls with Alpine markup
  5. 05Find core and feature API references

Use cases

  1. 01Start a table using Alpine.js
  2. 02Keep table data reactive
  3. 03Render custom headers and cells
  4. 04Look up optional table features

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tanstack/table --skill getting-started

After installing, type/getting-startedin Claude Code to confirm it loaded.

Bundled filesreferences/create-table-hook.md

Details

From the project README

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.

API discovery

Inspect node_modules/@tanstack/alpine-table/dist/index.d.ts, createTable.d.ts, and reactivity.d.ts. Core feature APIs are in node_modules/@tanstack/table-core/dist/features/.

Comments

Markdown supported