Migrate from Vuetify v-data-table to Simple Table for Vue
A practical migration guide from Vuetify's v-data-table to Simple Table for Vue. Drop the Vuetify runtime when all you need is a focused, virtualized data grid.
Vuetify is a complete Material Design system, and v-data-table is a fine general-purpose grid inside that system. The trade-off: you ship the Vuetify runtime, theme, icons, and Sass even when you only want a single grid.
Simple Table for Vue is an MIT-licensed Vue 3 data grid in @simple-table/vue. It works in Composition API + <script setup>, Nuxt 3 / Nuxt 4, and any Vite-based Vue app—with virtualization, pinning, grouping, and editing built in.
This guide walks you through replacing v-data-table with Simple Table while keeping your Vuetify forms and dialogs in place if you still want them.
Why migrate
- You don't want the full Vuetify runtime just for a data grid.
- You need real virtualization for 100k+ rows—v-data-table's virtual rendering is workable but not its strength.
- You want column pinning, grouping with aggregations, and inline editing as built-in primitives.
- You also build React/Angular/Svelte/Solid surfaces and want one shared engine.
Prerequisites
- Vue 3.4+ and Vite or Nuxt 3 / Nuxt 4.
- Simple Table for Vue installed: npm install @simple-table/vue.
- TypeScript optional but recommended.
Install
npm install @simple-table/vueAPI mapping cheat sheet
| Vuetify v-data-table | Simple Table for Vue | Notes |
|---|---|---|
:headers | :default-headers | title → label; key → accessor. |
:items | :rows | See the Simple Table docs for the row shape. |
items-per-page + pagination | Built-in pagination + virtualization | Decide between paginated and virtualized rendering. |
v-slot:item.<key> | HeaderObject.cellRenderer | Pass a Vue component as the cell renderer. |
fixed-header / fixed-footer | Built-in | Headers and pinned columns are sticky by default. |
loading + loading-text | isLoading prop | Show a built-in loading state. |
Sort-by + sort-desc | HeaderObject.sortDirection | Initial sort lives on the header definition. |
Step-by-step migration
Install Simple Table for Vue
Add @simple-table/vue and its stylesheet. Keep Vuetify if other components still need it.
npm install @simple-table/vue // main.ts import "@simple-table/vue/styles.css";Translate headers
Convert Vuetify headers into Simple Table HeaderObjects. Keep widths explicit so the layout matches.
Reshape your rows
Each row needs a stable id. Adapt your items to the row shape documented in the Simple Table docs.
Convert v-slot templates to renderers
Each v-slot:item.<key> template becomes a Vue component referenced via HeaderObject.cellRenderer.
Adopt advanced features
Turn on column pinning, row grouping with aggregations, and inline editing—no extra plugins to register.
Gotchas
- Removing Vuetify entirely
- Only remove Vuetify when no other component uses it. Many teams keep Vuetify for forms and overlays while migrating just the grid.
- Density and theming
- v-data-table uses density='compact'. Mirror it with CSS variables on Simple Table to control row height.
FAQ
- Will Simple Table feel idiomatic in Nuxt 3?
- Yes. @simple-table/vue is a Vue 3 component and ships ESM, so it works with Nuxt 3 and Nuxt 4 out of the box.
- Can I keep Vuetify for the rest of the app?
- Absolutely. Many teams swap only v-data-table while keeping Vuetify for forms and dialogs.