DEV Community

Cover image for A New Free Data Grid for Vue 3: Fast, Flexible, Feature-Rich
Olga T.
Olga T.

Posted on • Originally published at svar.dev

A New Free Data Grid for Vue 3: Fast, Flexible, Feature-Rich

#webdev #programming #vue

If you've worked with data grids in Vue, you've probably hit the same wall at some point. The grid works fine for the demo, then you add real data, real editing requirements, and real users — and suddenly you're fighting the component instead of building your app.

Or you find a capable pre-made grid component, only to discover it's a JavaScript library wrapped in a Vue adapter, and customization means digging into JS code instead of working with the familiar Vue API.

That's why we built SVAR Vue DataGrid. The component is open-source, written entirely in Vue 3 and optimized for data-heavy scenarios, with fast loading and rendering, data editing, sorting, and filtering features.

SVAR Vue DataGrid - light and dark themes

Here’s a quick overview of what our Vue data grid component is capable of:

  • Vue-native architecture with a logical, developer-friendly API
  • High performance with large datasets (virtualization for rows and columns)
  • Accessibility with WAI-ARIA compliance and full keyboard navigation
  • Sorting, filtering, and in-cell editing (built-in and custom editors)
  • Flexible configuration of columns and rows
  • Light and dark themes easily customizable with CSS
  • Responsive mode adjustable for different screen sizes
  • Export to CSV and print support

You can find SVAR Vue DataGrid on GitHub ⭐

Getting started

Install SVAR Vue DataGrid via npm:

npm install @svar-ui/vue-grid
Enter fullscreen mode Exit fullscreen mode

A basic table with data and columns is just a few lines:

<script setup>
import { Grid, Willow } from "@svar-ui/vue-grid";

const data = [
  { id: 1, city: "Amieshire", firstName: "Ernest", lastName: "Schuppe", email: "Leora13@yahoo.com" },
  { id: 2, city: "Gust", firstName: "Janis", lastName: "Vandervort", email: "Mose_Gerhold51@yahoo.com" },
];

const columns = [
  { id: "id", width: 50 },
  { id: "firstName", header: "First Name", width: 150 },
  { id: "lastName", header: "Last Name", width: 150 },
  { id: "city", header: "City", width: 100 },
  { id: "email", header: "Email" },
];
</script>

<template>
  <Willow>
    <Grid :data="data" :columns="columns" />
  </Willow>
</template>
Enter fullscreen mode Exit fullscreen mode

Wrap the grid in <Willow> (or <WillowDark>) to apply a light or dark theme. That's all it takes to get a working, styled table on the page.

What it handles out of the box

The honest reason most teams end up with complex custom grid code is that they started with a library that covered 80% of their needs — and spent months filling in the other 20%. SVAR Vue DataGrid tries to ship that other 20% by default.

Sorting works across multiple columns with customizable sort logic.

Filtering can be added as inline header filters for quick access, and for more advanced scenarios the data grid integrates with SVAR Vue Filter. The filter component adds an advanced visual query builder with AND/OR logic, syntax-based filtering, and optional natural language search.

Advanced filtering in SVAR Vue DataGrid

Data editing is supported by built-in cell editors (text, combo, datepicker, richselect), custom Vue components as editors, and external form integration via SVAR Vue Editor. There's also an undo/redo feature, which makes editing large datasets more convenient.

Layout-wise, you get column grouping, header spanning, pinned columns, row drag-and-drop reordering, and visibility control. Context menus, cell tooltips, and a toolbar round out the everyday interactions.

Collapsible columns in SVAR Vue DataGrid

Features that grids typically lock behind a paywall: tree data, lazy loading, advanced filtering, context menus, rich select for in-cell editing are included here under MIT.

SVAR Vue DataGrid with context menu

Working with large datasets

Virtual scrolling handles both rows and columns, so rendering stays efficient even with thousands of rows. Dynamic loading lets you fetch data on scroll rather than loading everything upfront — useful when you're working with a large backend dataset and don't want to wait for the full payload on page load.

Here is how you can load data dynamically in batches of 100 rows:

<script setup>
import { Grid } from "@svar-ui/vue-grid";
import { ref } from "vue";
import { getData } from "./common/data";

const { allData, columns } = getData();

const rowCount = ref(allData.length);
const data = ref([]);

function dataProvider(ev) {
  const { row } = ev;
  if (row) {
    data.value = allData.slice(row.start, row.end);
  }
}
</script>

<template>
  <Grid
    :data="data"
    :columns="columns"
    :dynamic="{ rowCount }"
    :@request-data="dataProvider"
  />
</template>
Enter fullscreen mode Exit fullscreen mode

For easy backend integration, SVAR Vue DataGrid offers RestDataProvider, a special helper that handles CRUD operations and updates on the server side for these operations: add/update/delete row and cell update.

Why Vue-native matters

SVAR Vue DataGrid follows Vue's reactivity model. You can drop in your own Vue components as cell editors, use standard Vue patterns for event handling, and customize the grid any way you like.

Each data table is different and SVAR DataGrid gives you full control over the look-and-feel of the table, as well as its layout and features.

Try the data grid

If you are looking for a customizable, free, high-performance data grid for your Vue apps, just give it a try:

If you're building data-driven interfaces in Vue, SVAR Vue DataGrid can save you hours of work. Any feedback or feature requests are welcome on our forum.

Top comments (0)