getting-started

name	getting-started
description	Create an Alpine TanStack Table v9 table with createTable, explicit tableFeatures, Alpine.reactive data getters, x-for rendering, and FlexRender through x-html. Load for first-table setup, reactive options, or when nested Alpine directives rendered by x-html do not initialize.
metadata	{"type":"framework","library":"@tanstack/alpine-table","framework":"alpine","library_version":"9.2.4"}
requires	["@tanstack/table-core#core","@tanstack/table-core#table-features"]
sources	["TanStack/table:docs/framework/alpine/guide/table-state.md","TanStack/table:examples/alpine/basic-create-table","TanStack/table:packages/alpine-table/src/index.ts"]

This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features.

Setup

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

  = { : ; :  }
 features = ({})
 : << features, >> = [
  { : , :  },
]

.(,  {
   local = .({
    : [{ : , :  }]  <>,
  })
   table = ({
    features,
    columns,
     () {
       local.
    },
    :  row.,
  })

   { table,  }
})

. = 
.()