Powerful Spreadsheet Data Grid Component For Vue

The RevoGrid component helps represent a huge amount of data in the form of an “excel-like” spreadsheet or as a list. RevoGrid is a powerful, interactive, efficient, spreadsheet-like data grid component for Vue.js 3 applications.

revo grid example, revogrid, svelte data grid, react data grid component, revo grid pagination, vue datagrid, stenciljs data grid, revogrid createelement

Key Features

Millions of cells viewport with a powerful core in-build by default.
Keyboard support with excel like focus.
Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws.
Sorting (multiple options, can be customized per column and advanced with events).
Filtering
- Predefined system filters
- Preserve existing collection
- Custom filters (extend existing system filters with your own set)
Export to file.
Custom sizes per Column and Row.
Column resizing.
Autosize support (Column size based on content).
Grouping:
- Column grouping (Nester headers)
- Row grouping (Nested rows)
Cell editing.
Customizations:
- Header template
- Cell template (build your own cell view)
- Cell editor (apply your own editors and cell types)
- Cell properties (build you own properties around rendered cells)
Column types;
- Text/String (default)
- Number
- Select
- Date
- Custom (take any type as template and create your own extended style)
Drag and drop rows.
Range operations:
- Selection
- Edit
Theme packages:
- Excel like (default)
- Material (compact, dark or light)
Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format).
Easy extenation and support with modern VNode features and tsx support.
Trimmed rows (hide rows on demand).
Plugin system (create your own plugins or extend existing one, it’s transparent and easy).
Automated size calculation.
Hundred others small customizations and improvements RevoGrid.

How to make use of it:

Install and download:

# NPM
$ npm i @revolist/vue-datagrid

1. Import and register the component.

import VGrid from "@revolist/vue-datagrid";

export default {
  // ...
  components: {
    VGrid,
  },
  // ...
};

2. Add the network 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 column and 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,
  },
};

Powerful Virtual Data Grid Component For Vue, vue datagrid Plugin/Github