SVAR Logo
DemosLicensesContact
Get Early Access
 
 
 
 
 
 
 
 
Coming soon...

Advanced Vue DataGrid

Add a high-performing, editable data table to your Vue-based apps. Feature-rich and easy to customize.

Get Early Access
Also available for:

Powerful Vue Data Grid Coming Soon

Native Vue Data Grid Component

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

Discover hierarchical data structures

Effortlessly incorporate and visualize tree-like structure within the table, striking the perfect balance between simplicity and hierarchical view.
SVAR picture

Efficiently handle large datasets

Optimized DataGrid's performance ensures a responsive and smooth user experience even with huge datasets. SVAR Vue DataGrid is one of the fastest in the industry.

rocket

Export table data to Excel/CSV

Effortlessly export data from DataGrid to Excel or CSV. Choose to export the table with the style of one of three available skins or apply your own custom styling.
SVAR picture

Let the grid take space

Dynamic adaptation to available space eliminates the need to manually adjust table size, maximizing the utilization of free space on page.
SVAR picture

Key Features of Upcoming SVAR Vue DataGrid

Effortlessly sort data

SVAR DataGrid allows users to sort content based on words (alphabetically) or numbers (ascending, descending) by clicking on the column header. You can also sort the table data by multiple columns simultaneously.

Adjust columns to your needs

Customize the look of your table by adjusting column widths. The columns also can be collapsed for a compact view and expanded, when needed. You can enable fixed columns that stay in sight during horizontal scrolling.

Edit table data inline

Simplify the data editing process by editing information directly within the table cells. Our Vue DataGrid offers a seamless and efficient editing experience, optimizing your workflow and saving you valuable time.

Enjoy fast-performing data table

SVAR Datagrid ensures optimal performance by dynamically creating and loading table content, even when dealing with huge datasets. Enjoy a responsive Vue table that effortlessly adapts to various data amounts.

Select single or multiple rows

Our Vue DataGrid provides options for selecting either one or multiple rows in the table. Utilize this functionality to compare, analyze chosen data points, recognize patterns, and conduct calculations using the selected data.

Navigate tables efficiently

Effortlessly navigate through the table using keyboard inputs. Keyboard navigation provides quick data entry, especially when dealing with extensive datasets or sophisticated table structures.

UI Concept for the Vue DataGrid

For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Inform when its ready

Sign Up for Early Access

  • Receive a notification as soon as SVAR Vue DataGrid is released!
  • Be the first to try the product and share valuable feedback.
  • We promise, no spam.

Resources

icon

SVAR Blog

Visit blog

icon

Community forum

Visit forum

icon

GitHub repository

Visit github