JSPM

Powerful data grid component built on top of RevoGrid.

Millions of cells and thousands columns easy and efficiently.

Demo and API • Key Features • How To Use • Docs • License

Key Features

• Millions of cells virtual viewport scroll with a powerful core is in-build by default;
• Keayboard support;
• Super light initial starter . Can be imported with polifill or as module for modern browsers;
• Intelligent Virtual DOM and smart row recombination in order to achieve less redraws;
• Sorting: multiple options, can be customized per column and advanced with events;
• Filtering: predefined system filters and a way to define you own;
• Export to file;
• Column and Row custom sizes;
• Column resizing;
• Column auto-size support (content related column size feature);
• Pinned columns (columns are always on the left or on the right of the screen);
• Pinned row (rows are always at the top or at the bottom);
• Column grouping;
• Cell editing;
• Custom header renderer;
• Custom cell renderer templates (build your own cell view);
• Custom cell editor (apply your own editors and cell types);
• Custom cell properties;
• Column types (select, string, number, date, custom);
• Drag and drop rows;
• Range selection;
• Range edit;
• Theme packages:
  • Excel like
  • 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;
• Hundred small customizations and improvements RevoGrid.

Overview

The RevoGrid component helps represent a huge amount of data in a form of data table "excel like" or as list.

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

How to use

With NPM:

npm i @revolist/vue-datagrid --save;

With Yarn:

yarn add @revolist/vue-datagrid;

Sandbox

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

<script>
import VGrid from "@revolist/vue-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "First",
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Contributing

If you have any idea, feel free to open an issue to discuss a new feature and submit your changes back to me.

License

MIT