Vue Table

The @tanstack/vue-table adapter wraps @tanstack/table-core with Vue-specific reactivity, rendering helpers, and types. It installs the Vue coreReativityFeature for you, so table atoms can participate in Vue refs, computed values, and watchers.

TanStack Table v9 is explicit about what a table uses. Register features with features, and register client-side row model factories with rowModels. The core row model is included by default, so a basic table can use rowModels: {}.

Creating a Table

Use useTable to create a Vue table instance. Table options can include Vue refs or computed values, including reactive data.

import { ref } from 'vue'
import { tableFeatures, useTable, type ColumnDef } from '@tanstack/vue-table'

type Person = {
  firstName: string
  lastName: string
  age: number
}

const features = tableFeatures({})

const data = ref<Person[]>([])

const columns: Array<ColumnDef<typeof features, Person>> = [
  {
    accessorKey: 'firstName',
    header: 'First name',
    cell: (info) => info.getValue(),
  },
]

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

import { ref } from 'vue'
import { tableFeatures, useTable, type ColumnDef } from '@tanstack/vue-table'

type Person = {
  firstName: string
  lastName: string
  age: number
}

const features = tableFeatures({})

const data = ref<Person[]>([])

const columns: Array<ColumnDef<typeof features, Person>> = [
  {
    accessorKey: 'firstName',
    header: 'First name',
    cell: (info) => info.getValue(),
  },
]

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

For feature-specific row models, register the feature and put the row model factory under rowModels.

import {
  createPaginatedRowModel,
  createSortedRowModel,
  rowPaginationFeature,
  rowSortingFeature,
  sortFns,
  tableFeatures,
} from '@tanstack/vue-table'

const features = tableFeatures({
  rowPaginationFeature,
  rowSortingFeature,
})

const tableOptions = {
  features,
  rowModels: {
    paginatedRowModel: createPaginatedRowModel(),
    sortedRowModel: createSortedRowModel(sortFns),
  },
}

import {
  createPaginatedRowModel,
  createSortedRowModel,
  rowPaginationFeature,
  rowSortingFeature,
  sortFns,
  tableFeatures,
} from '@tanstack/vue-table'

const features = tableFeatures({
  rowPaginationFeature,
  rowSortingFeature,
})

const tableOptions = {
  features,
  rowModels: {
    paginatedRowModel: createPaginatedRowModel(),
    sortedRowModel: createSortedRowModel(sortFns),
  },
}

Table State

Table state is managed with TanStack Store atoms in v9. For most tables, you do not need to manage table state yourself: set initialState when you need starting values, and use feature APIs like table.nextPage(), table.setSorting(...), and row.toggleSelected() instead of mutating state directly.

Use atoms when your app should own one state slice with TanStack Store. Use state with the matching on[State]Change option for simple Vue state integration or migration paths. Selected table state is available on table.state when you pass a selector to useTable.

import { createAtom } from '@tanstack/vue-store'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/vue-table'

const features = tableFeatures({
  rowPaginationFeature,
})

const paginationAtom = createAtom<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
})

const table = useTable({
  features,
  rowModels: {},
  columns,
  data,
  atoms: {
    pagination: paginationAtom,
  },
})

import { createAtom } from '@tanstack/vue-store'
import {
  rowPaginationFeature,
  tableFeatures,
  useTable,
  type PaginationState,
} from '@tanstack/vue-table'

const features = tableFeatures({
  rowPaginationFeature,
})

const paginationAtom = createAtom<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
})

const table = useTable({
  features,
  rowModels: {},
  columns,
  data,
  atoms: {
    pagination: paginationAtom,
  },
})

See the Table State Guide for selectors, external atoms, and state ownership patterns.

Rendering Headers, Cells, and Footers

Use FlexRender to render column header, cell, and footer definitions. It handles plain values and Vue components.

vue

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

<template>
  <tbody>
    <tr v-for="row in table.getRowModel().rows" :key="row.id">
      <td v-for="cell in row.getVisibleCells()" :key="cell.id">
        <FlexRender :cell="cell" />
      </td>
    </tr>
  </tbody>
</template>

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

<template>
  <tbody>
    <tr v-for="row in table.getRowModel().rows" :key="row.id">
      <td v-for="cell in row.getVisibleCells()" :key="cell.id">
        <FlexRender :cell="cell" />
      </td>
    </tr>
  </tbody>
</template>

createTableHook

createTableHook creates an app-specific table hook. Use it when multiple tables should share features, rowModels, default options, column helpers, and component conventions.

import { createTableHook, tableFeatures } from '@tanstack/vue-table'

const { useAppTable, createAppColumnHelper } = createTableHook({
  features: tableFeatures({}),
  rowModels: {},
})

const columnHelper = createAppColumnHelper<Person>()

const table = useAppTable({
  columns,
  data,
})

import { createTableHook, tableFeatures } from '@tanstack/vue-table'

const { useAppTable, createAppColumnHelper } = createTableHook({
  features: tableFeatures({}),
  rowModels: {},
})

const columnHelper = createAppColumnHelper<Person>()

const table = useAppTable({
  columns,
  data,
})

See the Composable Tables example for the full pattern.

API Reference

See the Vue API Reference.

Creating a Table#

Table State#

Rendering Headers, Cells, and Footers#

createTableHook#

API Reference#

Creating a Table

Table State

Rendering Headers, Cells, and Footers

createTableHook

API Reference