How do you add client-side sorting and column filtering to a TanStack Table in Vue?

Pass getSortedRowModel() and getFilteredRowModel() to useVueTable. Use controlled refs for state so sort/filter can be persisted to the URL or storage.

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

type Employee = { name:string; department:string; salary:number }
const data=ref<Employee[]>([/*...*/])
const sorting=ref<SortingState>([])
const globalFilter=ref("")

const ch = createColumnHelper<Employee>()
const columns = [
  ch.accessor("name",{header:"Name",enableSorting:true}),
  ch.accessor("department",{header:"Department",enableSorting:true}),
  ch.accessor("salary",{header:"Salary",enableSorting:true}),
]

const table = useVueTable({
  get data(){ return data.value },
  columns,
  state:{
    get sorting(){ return sorting.value },
    get globalFilter(){ return globalFilter.value },
  },
  onSortingChange:      v=>{ sorting.value=typeof v==="function"?v(sorting.value):v },
  onGlobalFilterChange: v=>{ globalFilter.value=v },
  getCoreRowModel:     getCoreRowModel(),
  getSortedRowModel:   getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})
</script>
<template>
  <input v-model="globalFilter" placeholder="Search..." />
</template>