Introducing a Fast, Flexible Data Grid for Vue 3

Discover SVAR Vue DataGrid for Vue 3

For developers working with Vue, managing data grids can often become a complex task. Many existing solutions, while functional for demos, fall short when real-world data and user interactions are introduced. SVAR Vue DataGrid addresses these challenges by offering a robust, fully Vue 3-native component, optimized for heavy data scenarios.

Key Features

• Vue-native Architecture: Built entirely with Vue 3, offering a developer-friendly API.
• High Performance: Efficient handling of large datasets using virtualization for both rows and columns.
• Accessibility: Compliant with WAI-ARIA standards, providing full keyboard navigation.
• Advanced Data Management: Supports sorting, filtering, and in-cell editing with built-in and customizable editors.
• Flexible Configuration: Easily adjust columns and rows, with light and dark themes customizable via CSS.
• Responsive Design: Adapts seamlessly to various screen sizes.
• Export Capabilities: Includes support for exporting to CSV and print.

Getting Started

To integrate SVAR Vue DataGrid into your project, install it via npm:

npm install @svar-ui/vue-grid

A basic implementation involves just a few lines of code:

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

Wrap the grid component in <Willow> or <WillowDark> to apply a themed style effortlessly.

Comprehensive Features

The SVAR Vue DataGrid sets itself apart by handling the complexities often missing in other solutions. With features like multi-column sorting, advanced filtering options, and sophisticated data editing capabilities, it covers the full spectrum of grid functionalities.

• Sorting & Filtering: Offers customizable multi-column sorting and inline header filters, with advanced filtering through SVAR Vue Filter for complex queries.
• Data Editing: Includes built-in and custom cell editors, complete with undo/redo functionalities.
• Layout Versatility: Features such as column grouping, drag-and-drop reordering, and context menus enhance user interaction.

Optimized for Large Datasets

The component excels in handling extensive datasets through virtual scrolling and dynamic data loading, minimizing initial load times and maintaining performance. Utilize dynamic loading to fetch data in batches, optimizing server-side interactions:

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

Embrace Vue-native Flexibility

SVAR Vue DataGrid leverages the full potential of Vue's reactivity, allowing customization and integration of custom Vue components as needed. This ensures developers can tailor the grid to their specific project requirements.

Get Started Today

SVAR Vue DataGrid presents a free, high-performance solution for Vue applications. Explore the features with live demos and a detailed getting started guide to simplify your development workflow. Join the community for feedback and feature requests on our forum.