Table with vue template syntax

[moritz-baecker-integra]

Im currently searching for something that i can use with the normal vue template syntax instead of using render functions.

I found this recently:
https://github.com/dacsang97/tanstack-table-vue

But does anybody know something similar? Maybe even another project?
Is there any plan to support something similar with the official tanstack table?

[amasen02]

You do not actually need an external wrapper or render functions (h()) to use Vue template syntax with TanStack Table.

While the documentation examples heavily feature React/JSX style render functions, the official @tanstack/vue-table adapter already natively supports Vue Single File Components (SFCs) and template-driven slot workflows.

Here is how you can use 100% Vue template syntax today with the official package, plus ecosystem solutions:

---

1. The Scoped Slots Pattern (Best Template-First Experience)

The cleanest pattern to avoid render functions entirely is to build a reusable table component that exposes dynamic scoped slots for each column:

<!-- DataTable.vue -->
<script setup lang="ts" generic="TData">
import { FlexRender, type Table } from '@tanstack/vue-table'

defineProps<{
  table: Table<TData>
}>()
</script>

<template>
  <table>
    <thead>
      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
        <th v-for="header in headerGroup.headers" :key="header.id">
          <slot :name="`header-${header.id}`" :header="header">
            <FlexRender
              v-if="!header.isPlaceholder"
              :render="header.column.columnDef.header"
              :props="header.getContext()"
            />
          </slot>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
          <!-- Dynamic scoped slot based on column ID -->
          <slot :name="`cell-${cell.column.id}`" :cell="cell" :row="row" :value="cell.getValue()">
            <FlexRender
              :render="cell.column.columnDef.cell"
              :props="cell.getContext()"
            />
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

How you use it in your views:

Now you can define pure accessor columns without any render functions, and customize any column using regular Vue template syntax:

<!-- UsersView.vue -->
<template>
  <DataTable :table="table">
    <!-- Custom template for status column -->
    <template #cell-status="{ value }">
      <span :class="value === 'active' ? 'text-green-500 font-bold' : 'text-gray-400'">
        ● {{ value.toUpperCase() }}
      </span>
    </template>

    <!-- Custom template for actions column -->
    <template #cell-actions="{ row }">
      <button @click="handleEdit(row.original)">Edit</button>
      <button @click="handleDelete(row.original.id)">Delete</button>
    </template>
  </DataTable>
</template>

---

2. Passing Vue Single File Components (SFCs) directly to cell

FlexRender also natively accepts Vue components. If you have complex cell components (e.g. UserAvatar.vue, StatusBadge.vue), you can write them as standard SFCs:

<!-- StatusBadge.vue -->
<template>
  <span class="badge" :style="{ backgroundColor: color }">{{ label }}</span>
</template>

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

const props = defineProps<{
  // FlexRender passes cell context in the `props` prop
  props: CellContext<User, string>
}>()

const label = computed(() => props.props.getValue())
const color = computed(() => label.value === 'paid' ? 'green' : 'red')
</script>

In your column definition:

import StatusBadge from './StatusBadge.vue'

const columns = [
  columnHelper.accessor('status', {
    header: 'Status',
    cell: () => StatusBadge, // Pass the SFC directly!
  }),
]

---

3. Will TanStack Table add an official template component?

No. TanStack Table is strictly headless by design. The core mission of the project is to provide data structures, algorithms, and state management (sorting, filtering, pagination, pinning) without imposing any markup, CSS, or UI component hierarchy. Shipping an official template component would contradict the headless philosophy.

---

4. Established Ecosystem Projects

If you want ready-made Vue template tables powered by TanStack Table:

1. shadcn-vue Data Table: The official Vue port of shadcn's data table. It uses @tanstack/vue-table under the hood and provides full template-driven components.
2. Nuxt UI (<UTable>): Fully template/slot-driven table component built directly on top of TanStack Table.