Vuetify is a complete Material Design system for Vue 3, and v-data-table is its general-purpose grid. If your app is already on Vuetify—forms, dialogs, layout—the table 'just works.'
But many Vue teams reach for Vuetify mainly for the data grid and end up shipping Material Design, Vuetify's theming runtime, and Material Design Icons along for the ride. Simple Table for Vue is the focused alternative: an MIT-licensed Vue 3 data grid in @simple-table/vue, runs in Composition API + <script setup>, Nuxt 3, and Nuxt 4 without a design system tax.
This article compares the two head-to-head: bundle, virtualization, grouping, editing, and the migration path if you decide v-data-table no longer fits.
Quick comparison
| Feature | Vuetify v-data-table | Simple Table for Vue |
|---|---|---|
| License | MIT | MIT |
| Bundle size (gzipped) | 200–400+ kB (suite + theme + icons) | ~70 kB |
| Vue 3 + Composition API + <script setup> | Yes | Yes (idiomatic) |
| Nuxt 3 / Nuxt 4 SSR | Yes | Yes |
| Row + column virtualization | Partial (virtual mode) | Yes (built-in) |
| Column pinning (left / right) | Manual / partial | Built-in |
| Row grouping with aggregations | Group by + manual aggregations | Built-in |
| Inline cell editing | v-slot:item.<key> | Built-in |
| Theming | Vuetify theme system (Material) | CSS variables, BYO |
Stay with v-data-table when…
- You use Vuetify widely (forms, dialogs, layout, charts).
- Material Design is the design system across your app.
- Your team is invested in Vuetify slot patterns and Material Design Icons.
- You need Vuetify-specific components (data iterator, expansion panels) tightly integrated with the table.
Switch to Simple Table for Vue when…
- You pulled in Vuetify mainly for v-data-table—you can drop the rest.
- You want true row + column virtualization for 100k+ rows.
- You want column pinning, grouping with aggregations, and inline editing as built-in primitives.
- Bundle size matters—target ~70 kB instead of 200–400+ kB.
- You also build React / Angular / Svelte / Solid surfaces and want a shared engine.
Real-world scenarios
Vuetify-first Material Design app
Vuetify is the design system; data grid should match Material density and tokens natively.
Stay with v-data-table—keep the Material coherence.
Vuetify pulled in mainly for the table
You added Vuetify specifically for v-data-table; the rest of the app is plain Vue + Tailwind.
Switch to Simple Table—you'll save 200–400 kB and simplify your build.
Greenfield Nuxt 3 / Nuxt 4 SaaS
New Nuxt project, lean bundle is non-negotiable.
Pick Simple Table for Vue—idiomatic Composition API, ~70 kB gzipped.
Reporting tool with grouping + aggregations across 100k rows
Need expanded/collapsed groups with sum and avg footers, plus row virtualization.
Switch to Simple Table—grouping with aggregations is built-in alongside virtualization.
Frequently asked questions
- Can I keep Vuetify for the rest of my app?
- Yes. Many teams swap only v-data-table for Simple Table while keeping Vuetify for forms, dialogs, and layout. They coexist fine.
- Does Simple Table support Nuxt SSR?
- Yes. @simple-table/vue ships ESM and works with Nuxt 3 and Nuxt 4 out of the box, including SSR.
- How big is the migration?
- Usually a few hours to a few days. Map Vuetify headers to Simple Table HeaderObjects (title→label, key→accessor), adapt your items to Simple Table's row shape, and convert v-slot:item.<key> templates to cellRenderer Vue components.
- Will I lose Material Design styling?
- Not entirely. Theme Simple Table via CSS variables to match Material density and tokens. The visual outcome can be very close.
The verdict
Vuetify v-data-table is the right call when Vuetify is your design system. If v-data-table is the only Vuetify component you actually use, Simple Table for Vue gives you a focused, smaller, idiomatic Vue 3 data grid for the same MIT cost.
Migrate one screen at a time, keep Vuetify for the rest of the app, and watch your bundle drop by 200–400 kB.