What is TanStack Table and how do you create a basic table in Vue?

TanStack Table v8 is a headless table engine handling sorting, filtering, pagination, selection, grouping and virtualisation. It returns a typed table object with methods and state you use in your own markup — it renders nothing itself.

<script setup lang="ts">
import {
  useVueTable, createColumnHelper, getCoreRowModel,
  getSortedRowModel, FlexRender,
} from "@tanstack/vue-table"
import { ref } from "vue"

type Person = { id:number; name:string; age:number }
const data = ref<Person[]>([
  { id:1, name:"Alice", age:30 },
  { id:2, name:"Bob",   age:25 },
])

const ch = createColumnHelper<Person>()
const columns = [
  ch.accessor("name", { header:"Name", enableSorting:true }),
  ch.accessor("age",  { header:"Age",  enableSorting:true }),
]

const table = useVueTable({
  get data(){ return data.value },
  columns,
  getCoreRowModel:   getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
})
</script>
<template>
  <table>
    <thead>
      <tr v-for="hg in table.getHeaderGroups()" :key="hg.id">
        <th v-for="h in hg.headers" :key="h.id"
            @click="h.column.getToggleSortingHandler()?.($event)">
          <FlexRender :render="h.column.columnDef.header" :props="h.getContext()" />
        </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">
          <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
        </td>
      </tr>
    </tbody>
  </table>
</template>