Tanstack Table Vue Compose With Tanstack Pacer

Compose @tanstack/vue-table with @tanstack/pacer

Dependencies

pnpm add @tanstack/vue-table @tanstack/pacer

Note: there is no @tanstack/vue-pacer adapter at the time of writing — only React, Preact, Solid, and Angular ship dedicated Pacer adapters. Vue users consume the framework-agnostic core (@tanstack/pacer) directly. That's a fine fit: Debouncer and Throttler are plain classes; integration with Vue is just onBeforeUnmount(() => debouncer.cancel()).

Setup — debounced filter input

<!-- DebouncedInput.vue — the v9 replacement for the hand-rolled v8 component -->
<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue'
import { Debouncer } from '@tanstack/pacer'

const props = defineProps<{
  modelValue: string | number
  debounce?: number
}>()
const emit = defineEmits<{ 'update:modelValue': [value: string | number] }>()

// 1) Local state — instant UI updates while the user types.
const local = ref(props.modelValue)

// 2) One Debouncer per component instance. Reset between renders is not needed.
const debouncer = new Debouncer(
  (next: string | number) => emit('update:modelValue', next),
  { wait: props.debounce ?? 300 },
)

// 3) Keep local in sync with external changes (e.g. table.resetColumnFilters()).
watch(
  () => props.modelValue,
  (v) => {
    local.value = v
  },
)

const Event) => {
  const v = (e.target as HTMLInputElement).value
  local.value = v
  debouncer.maybeExecute(v)
}

// 4) Cancel pending work on unmount.
onBeforeUnmount(() => debouncer.cancel())
</script>

<template>
  <input :value="local" @input="onInput" />
</template>

Use it in a column filter:

<DebouncedInput
  :model-value="(column.getFilterValue() ?? '') as string"
  @update:model-value="(v) => column.setFilterValue(v)"
  placeholder="Search…"
  :debounce="300"
/>

Core Patterns

1. Local state + debounced writer = instant input, deferred store write

// ❌ Writes to the table on every keystroke. Row model recomputes per character.
@input="(e) => column.setFilterValue(e.target.value)"

// ✅ Local ref drives the input; Debouncer batches the store write at wait=300.
const local = ref('')
const debouncer = new Debouncer((v) => column.setFilterValue(v), { wait: 300 })
const => {
  local.value = e.target.value
  debouncer.maybeExecute(local.value)
}

2. Debouncer vs Throttler

import { Throttler } from '@tanstack/pacer'

const resizeThrottler = new Throttler(
  (event: ColumnResizeInfoEvent) => /* commit resize */,
  { wait: 16 },
)

3. Throttling column resize via the atoms write path

If you own column resize state externally (via @tanstack/vue-store), throttle the atom write:

import { Throttler } from '@tanstack/pacer'
import { createAtom } from '@tanstack/vue-store'
import type { ColumnResizingState } from '@tanstack/vue-table'

const columnResizingAtom = createAtom<ColumnResizingState>(
  {} as ColumnResizingState,
)
const throttler = new Throttler(
  (next: ColumnResizingState) => columnResizingAtom.set(next),
  { wait: 16 },
)

useTable({
  _features,
  _rowModels: {},
  columns,
  data,
  state: {
    get columnResizing() {
      return columnResizingAtom.get()
    },
  },
  onColumnResizingChange: (u) => {
    const next = typeof u === 'function' ? u(columnResizingAtom.get()) : u
    throttler.maybeExecute(next)
  },
})

For pure local resize state, the same pattern using ref + onColumnResizingChange works.

4. Global filter debounce

<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue'
import { Debouncer } from '@tanstack/pacer'

const props = defineProps<{ table: any }>() // import the typed Table<TFeatures, TData> in real code
const local = ref('')

const debouncer = new Debouncer((v: string) => props.table.setGlobalFilter(v), {
  wait: 250,
})

watch(local, (v) => debouncer.maybeExecute(v))
onBeforeUnmount(() => debouncer.cancel())
</script>

<template>
  <input v-model="local" placeholder="Search all columns…" />
</template>

5. The debounce/throttle function helpers (alternative shape)

If you don't need access to the instance (cancel, flush, etc.), the function helpers are the lowest-overhead form:

import { debounce } from '@tanstack/pacer'

const writeFilter = debounce((v: string) => column.setFilterValue(v), {
  wait: 300,
})
// later: writeFilter(value)

They still register internally for proper cleanup via the Pacer event client; you just don't expose a handle.

Common Mistakes

Writing column.setFilterValue directly on every keystroke (HIGH)

// ❌ Whole filtered row model recomputes per character.
@input="(e) => column.setFilterValue(e.target.value)"

Fine for 100 rows, miserable for 10k+. Debounce the writer.

Hand-rolling setTimeout-based debounce (HIGH)

// ❌ The v8-era DebouncedInput pattern — works, but reinvents what Pacer does correctly.
const t = ref<ReturnType<typeof setTimeout>>()
const setter = (v) => {
  if (t.value) clearTimeout(t.value)
  t.value = setTimeout(() => emit('update:modelValue', v), 300)
}
onBeforeUnmount(() => clearTimeout(t.value))

Pacer handles cancel/flush/maybeExecute/leading edge/trailing edge consistently and integrates with the Pacer Devtools event client.

Importing from @tanstack/vue-pacer (HIGH — Vue-specific)

There is no @tanstack/vue-pacer package. Import from @tanstack/pacer directly.

// ❌
import { useDebouncedCallback } from '@tanstack/vue-pacer'

// ✅
import { Debouncer } from '@tanstack/pacer'

Debouncing the local input state too (MEDIUM)

The user sees stale characters in the input. Local state must be instant; only the table/store write should debounce.

// ❌
const debouncedLocal = new Debouncer((v) => (local.value = v), { wait: 300 })

// ✅ Local instant, store deferred.
local.value = e.target.value
debouncer.maybeExecute(local.value)

Throttling resize at 250ms (MEDIUM)

Too long — drag feels laggy. Use wait: 16 (roughly one animation frame) for resize. 250ms is a filter-input wait.

Forgetting onBeforeUnmount(() => debouncer.cancel()) (MEDIUM)

Pending fires after unmount → call into a stale closure / nonexistent table → console error. Always cancel on unmount.

Hallucinating useDebouncedCallback from React (CRITICAL — top AI tell)

useDebouncedCallback is a React-pacer hook. It doesn't exist in @tanstack/vue-pacer (which doesn't exist either) or in core @tanstack/pacer. Use the Debouncer class or the debounce function helper in Vue.

Hallucinating pre-v9 table APIs in the writer (CRITICAL)

The debounced callback wraps column.setFilterValue, table.setGlobalFilter, columnResizingAtom.set, etc. These are v9 APIs — useVueTable / table.setGlobalFilter on a v8 table would not exist. See tanstack-table/vue/migrate-v8-to-v9.

"Filter API missing" because feature not in _features (CRITICAL — v9-specific)

column.setFilterValue is only available if columnFilteringFeature is registered. table.setGlobalFilter requires globalFilteringFeature. Debouncing a missing API is still a missing API.

Reimplementing per-keystroke filter logic (CRITICAL — #1 AI tell)

// ❌ Filter rows yourself.
const filtered = computed(() =>
  data.value.filter((r) => r.name.includes(local.value)),
)
useTable({ ..., data: filtered })

// ✅ Use the table's filter feature; debounce the writer.
useTable({
  _features: tableFeatures({ columnFilteringFeature, globalFilteringFeature }),
  _rowModels: { filteredRowModel: createFilteredRowModel(filterFns) },
  columns,
  data,
})
// In a filter input:
debouncer.maybeExecute(local.value) // → table.setGlobalFilter(local.value)

See Also

• tanstack-table/vue/compose-with-tanstack-form — debounce filter while editing
• tanstack-table/vue/production-readiness — debounce + tree-shake together
• tanstack-table/table-core/filtering — columnFilteringFeature / globalFilteringFeature
• tanstack-table/table-core/column-layout — column resizing state

Source: TanStack/table — distributed by TomeVault.