PrimeVue DataTableSimple Table for Vue

Migrate from PrimeVue DataTable to Simple Table for Vue

A practical migration guide from PrimeVue DataTable to Simple Table for Vue. Trim the PrimeVue runtime, theme, and PrimeIcons when all you need is a focused data grid.

PrimeVue DataTable is a feature-rich grid for teams already on PrimeVue. The cost is that you carry the PrimeVue runtime, a theme (Aura, Lara, or Material), and PrimeIcons even when you only want a single table.

Simple Table for Vue is an MIT-licensed Vue 3 data grid that runs in Composition API + <script setup>, Nuxt 3, and Nuxt 4 with no design-system dependencies. It ships virtualization, pinning, grouping, and editing in the box.

This guide shows how to swap PrimeVue DataTable for @simple-table/vue without removing the rest of your PrimeVue components.

Why migrate

  • Drop the PrimeVue runtime + theme + PrimeIcons cost when DataTable is your only PrimeVue component.
  • Get real virtualization for 100k+ rows without virtualScrollerOptions wiring.
  • Use grouping with aggregations + inline editing without slot gymnastics.
  • Same engine across React/Angular/Svelte/Solid/Vanilla if your stack expands.

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/vue

API mapping cheat sheet

PrimeVue DataTableSimple Table for VueNotes
:value:rowsSee the Simple Table docs for the row shape.
<Column field='x' header='Y'>:default-headers entryfield → accessor; header → label.
rowGroupMode='subheader'Built-in row grouping + aggregationsNo manual aggregator wiring needed.
frozenColumnsHeaderObject.pinnedSame concept, declarative on the header.
virtualScrollerOptionsBuilt-in virtualizationSet a height; row + column virtualization auto-engages.
Editor templatesisEditable + cell editor rendererDefine editor renderers per column.
PrimeVue theme + PrimeIcons@simple-table/vue/styles.cssTheme via CSS variables.

Step-by-step migration

  1. Install Simple Table for Vue

    Add @simple-table/vue alongside existing PrimeVue installations. You can keep PrimeVue for forms and dialogs.

    npm install @simple-table/vue

// main.ts
import "@simple-table/vue/styles.css";

  2. Convert Column children to header objects

    Replace <Column field="x" header="Y" /> with HeaderObject entries containing accessor + label + width.

  3. Reshape rows

    Each Simple Table row needs a stable id. See the row shape in the Simple Table docs and adapt your existing items.

  4. Port body templates to cell renderers

    PrimeVue uses #body slots for custom rendering. In Simple Table, pass a Vue component via HeaderObject.cellRenderer.

  5. Adopt grouping + virtualization

    Replace virtualScrollerOptions with a fixed height and turn on row grouping with aggregations declaratively.

Gotchas

Keep PrimeVue if other components rely on it
You don't have to drop PrimeVue entirely. Many teams keep PrimeVue for forms / dialogs and switch only DataTable.
PrimeIcons
If you used PrimeIcons exclusively for the table, you can pull in a different icon set or use the cell renderer to render anything you like.

FAQ

Does Simple Table support Nuxt 3 and Nuxt 4?
Yes—@simple-table/vue is ESM, SSR-friendly, and ships TypeScript types.
What about PrimeVue's TreeTable?
Simple Table supports tree data and expandable rows. Most TreeTable use-cases port over with no functional regressions.

Keep going