Add a Powerful Vue Data Grid to Your Apps

Native Vue data grid

Written entirely in Vue with full TypeScript definitions included. SVAR Vue DataGrid leverages Vue's reactivity system for optimal performance with no wrappers, just seamless integration with your existing codebase.

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

    const data = [
        { id: 1, name: "Alice", role: "Developer", status: "Active" },
        { id: 2, name: "Bob", role: "Designer", status: "Away" },
    ];

    const columns = [
        { id: "name", header: "Name", width: 150 },
        { id: "role", header: "Role", width: 120 },
        { id: "status", header: "Status", width: 100 },
    ];
</script>

<template>
    <Willow>
        <Grid :data="data" :columns="columns" />
    </Willow>
</template>

Enterprise-grade features

Unlike many data grid libraries that lock advanced functionality behind a paid plan, SVAR Vue DataGrid includes virtual scrolling, advanced filtering, context menus, and rich select as a cell editor — all under the free MIT license. Tree data support is also included to display hierarchical datasets.

High performance for large datasets

The Vue DataGrid efficiently renders thousands of rows using virtual scrolling and dynamic loading, keeping interactions fast and stable even as data grows. For extremely large datasets, pagination is also available.

See the demo

Data export & print support

Effortlessly export data from the DataGrid to CSV or use print API to generate print-ready views. Configure printing in landscape or portrait layouts, define paper size and ppi for optimal output.

Flexible column sizes

Columns auto-size and adapt to available space or cell content. Support for column pinning, resizing, and hiding ensures your table uses the full viewport effectively.

Try Live Demo

Interact with an example grid right now. Test tree data, sorting, and built-in editors (dropdowns, date pickers) for Status and Due columns. Switch between light and dark themes. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Vue Data Grid Key Features

SVAR Vue DataGrid supports multi-column sorting and flexible filtering. Add built-in filters to column headers or define custom filtering logic via the API. Integrate SVAR Vue Filter for advanced filtering, including AI-powered natural language search

Edit cells directly with built-in editors (text, combo, richselect, datepicker) or plug in your own custom cell components. The grid supports undo/redo for safe editing and an external edit form with SVAR Vue Editor.

You can pin important columns so they stay visible during horizontal scroll. Columns also can be collapsed for a compact view and expanded, when needed. Resize columns or reorder rows easily with drag-and-drop.

Our Vue data grid includes a flexible responsive mode. Configure how the grid behaves across screen sizes by adjusting column visibility, cell sizes, and styling, so users can view table data easily on smartphones and tablets.

Choose between two pre-made themes, beautifully designed for modern apps. If needed, any detail of the look and feel can be customized with CSS variables.

The data grid component includes full keyboard support: navigate with arrow keys, Tab, and shortcuts such as F2 to edit. It also meets WAI-ARIA standards to ensure accessibility and a convenient experience for all users.

Free, Feature-Rich Vue Data Grid

Add a Powerful Vue Data Grid to Your Apps

Native Vue data grid

Enterprise-grade features

High performance for large datasets

Data export & print support

Flexible column sizes

Try Live Demo

Vue Data Grid Key Features

Sorting & filtering

Built-in & custom in-cell editing

Column & row control

Responsive mode

Light & dark themes

Keyboard navigation & accessibility

Professional support

Latest Updates

Resources

How to start guide

Community forum

GitHub repository