Powerful Virtual Data Grid Component For Vue – RevoGrid

Description:

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

03/15/2021

  • v3.0.0beta1

03/14/2021

  • v3.0

02/16/2021

  • v2.9.9

02/15/2021

  • vue constructor as structure

02/11/2021

  • issues fix

02/06/2021

  • fixed vue wrapper issue

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

You Might Be Interested In:

Add Comment