Powerful Virtual Data Grid Component For Vue – RevoGrid

RevoGrid is a powerful, reactive, performant, spreadsheet-like data grid component for Vue.js 3 apps.

Key Features:

  • Virtual scrolling.
  • Data sorting.
  • Data filtering.
  • Import & export.
  • Themeable.
  • Column/Cell manipulation.
  • Drag and drop.
  • Copy/paste from Excel, Google Sheets or any other sheet

Basic Usage:

1. Import and register the component.

import VGrid from "@revolist/vue-datagrid";
export default {
  // ...
  components: {
    VGrid,
  },
  // ...
};

2. Add the grid component to the template.

<template>
  <div id="app">
    <v-grid
      v-if="grid === 1"
      key="1"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>

3. Define your own column & row data.

export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "Name",
        },
        {
          prop: "details",
          name: "Email",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};

Preview:

Powerful Virtual Data Grid Component For Vue - RevoGrid

Changelog:

v3.5.2 (03/24/2023)

  • Update

v3.5.1 (03/23/2023)

  • Bugfixes

v3.5.0 (03/21/2023)

  • Updated version and advance range selection

v3.4.1 (02/20/2023)

  • Updates in plugins and column override

v3.3.1 (01/19/2023)

  • Updated package

v3.3.0 (10/11/2022)

  • Added sorting and other changes

v3.2.17 (09/06/2022)

  • Extended Vite support.
  • Typings included
  • Fixed issue with build from 3.2.0

v3.2.0 (08/11/2022)

  • Update

v3.1.8 (06/16/2022)

  • Minor updates around properties

v3.1.6 (05/11/2022)

  • update

v3.1.5 (04/12/2022)

  • Version updated to load from peers
  • Bugfix

v3.1.0 (03/29/2022)

  • Multi Filtering improvement to current filter plugin

v3.0.98 (10/06/2021)

  • fixed filter problem

v3.0.97 (07/24/2021)

  • Filtering issue and sorting update

v3.0.91 (06/17/2021)

  • improved props to different cases support for vue

v3.0.9 (04/21/2021)

  • Sorting event updated

v3.0.8 (04/11/2021)

  • Filter fix

v3.0.61 (04/11/2021)

  • Stretch by default
  • Edit fix
  • Mobile scrolling improvement

v3.0.53 (04/08/2021)

  • Minor plugin update for stretch

v3.0.51 (04/06/2021)

  • Stretch with scroll support

v3.0.3 (03/29/2021)

  • Focus issue fixed

v3.0.2 (03/26/2021)

  • Removed viewport component, this extra layer was redundant
  • Changed classes to complex names in order to support bootstrap and other libraries
  • All methods migrated to lowercase in order to support the modern approach of event naming. It means events name migration: afterEdit -> afteredit for all events.
  • Added pure esm modules support in order to use the grid in all modern frontend tooling like vitejs, parcel etc, now you can import custom-elements without lazy loading, just keep in mind you are responsible for polifills

Download Details:

Author: revolist

Live Demo: https://revolist.github.io/revogrid/demo/

Download Link: https://github.com/revolist/vue-datagrid/archive/main.zip

Official Website: https://github.com/revolist/vue-datagrid

Install & Download:

# NPM
$ npm i @revolist/vue-datagrid

Add Comment