Powerful Virtual Data Grid Component For Vue – RevoGrid

Description:

RevoGrid is a powerful, reactive, performant, spreadsheet-like data grid component for Vue.js 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:

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