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:

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