Getting started

Runtime requirements

The next major release requires Node.js 26.13.0 or newer and drops Node.js 24 support. Upgrade application runtimes and CI before updating. Published package versions remain unchanged until the release workflow runs.

Install

pnpm add @querry-kit/nuxt @querry-kit/nuxt-ui @nuxt/ui @iconify-json/tabler

Register Nuxt UI before this module. The controls use Tabler icons by default, so install @iconify-json/tabler in the host application. Components read the host application's querrykit.table.* i18n keys when present and otherwise use English fallback strings.

export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@querry-kit/nuxt-ui'],
  querryKitUi: { autoImports: true },
});

Set autoImports to false when the application registers the components itself. The module never installs, configures, or ships an i18n provider.

Compose a table toolbar

All state remains in the consuming application. Bind only the models needed by the controls you render.

<QTableToolbar
  v-model:search="search"
  v-model:sorting="sorting"
  v-model:filtering="filtering"
  v-model:column-order="columnOrder"
  v-model:invisible-columns="invisibleColumns"
  v-model:column-pinning="columnPinning"
  :sortable-fields="sortableFields"
  :filter-fields="filterFields"
  :column-definitions="columns"
/>

The controls emit immutable replacement values through their v-models. This keeps them independent from a particular table implementation or application store.

Keyboard shortcuts

Pass :shortcuts="false" to an individual component to disable its listener.

Querry Kit table controls do not require a direct TanStack Table peer. Your table renderer (for example Nuxt UI) determines its supported TanStack version.