CtrlK
BlogDocsLog inGet started
Tessl Logo

getting-started

Create a Vue TanStack Table v9 table with useTable, explicit tableFeatures, stable columns/features, reactive ref or computed data, and Vue FlexRender without destructuring reactive snapshots.

59

Quality

69%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./packages/vue-table/skills/getting-started/SKILL.md
SKILL.md
Quality
Evals
Security

This skill builds on @tanstack/table-core#core and @tanstack/table-core#table-features. Read them first for the headless model and explicit feature registration.

Setup

<script setup lang="ts">
import { ref } from 'vue'
import { FlexRender, tableFeatures, useTable } from '@tanstack/vue-table'

type Person = { name: string; age: number }
const features = tableFeatures({})
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'age', header: 'Age' },
]
const data = ref<Person[]>([{ name: 'Ada', age: 36 }])
const table = useTable({ features, columns, data })
</script>

<template>
  <table>
    <thead>
      <tr v-for="group in table.getHeaderGroups()" :key="group.id">
        <th v-for="header in group.headers" :key="header.id">
          <FlexRender v-if="!header.isPlaceholder" :header="header" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
        <td v-for="cell in row.getAllCells()" :key="cell.id">
          <FlexRender :cell="cell" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

Core Patterns

Preserve Vue option shapes

useTable accepts refs/computed values and unwraps them while watching dependencies. Keep data, controlled state, and other reactive options as refs or computed values; keep static columns/features stable.

Add a client row model explicitly

import {
  createSortedRowModel,
  rowSortingFeature,
  sortFn_alphanumeric,
  tableFeatures,
} from '@tanstack/vue-table'

const features = tableFeatures({
  rowSortingFeature,
  sortedRowModel: createSortedRowModel(),
  sortFns: { alphanumeric: sortFn_alphanumeric },
})

The slot follows its prerequisite feature in the same call. Import individual sortFn_* built-ins and register only the ones your columns reference; the full sortFns registry object still works but bundles every built-in.

Common Mistakes

HIGH Flattening a ref into a snapshot

Wrong:

const table = useTable({ features, columns, data: data.value })

Correct:

const table = useTable({ features, columns, data })

Passing .value captures one array instead of letting the adapter watch the ref.

Source: packages/vue-table/src/useTable.ts

HIGH Using the v8 entrypoint

Wrong:

const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })

Correct:

const table = useTable({ features, columns, data })

V9 uses useTable; core processing is automatic and optional row models live in tableFeatures.

Source: docs/framework/vue/guide/migrating.md

HIGH Assuming headless means prebuilt UI

Wrong:

<TanStackTable :table="table" />

Correct:

<td
  v-for="cell in row.getAllCells()"
  :key="cell.id"
><FlexRender :cell="cell" /></td>

The adapter renders definitions but owns no table component, CSS, or design-system integration.

Source: examples/vue/basic-use-table/src/App.tsx

API Discovery

Inspect node_modules/@tanstack/vue-table/dist/index.d.ts, then useTable.d.ts and FlexRender.d.ts. Inspect core feature APIs in node_modules/@tanstack/table-core/dist/features/<feature>/.

Repository
TanStack/table
Path

packages/vue-table/skills/getting-started/SKILL.md

Commit

9e523bc

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill