Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋

Overview

RevoGrid

Latest Version on NPM Software License Tree shaking Tree shaking

Powerful data grid component built with StencilJS.

Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.

Demo and APIKey FeaturesHow To UseInstallationDocsLicense

Material grid preview

RevoGrid material theme.

Key Features

  • Millions of cells viewport with a powerful core in-build by default;
  • Keyboard support with excel like focus;
  • Super light initial starter Min size. 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;
    • 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);
  • Pinned/Sticky/Freezed:
    • Columns (define left or right);
    • Rows (define top or bottom);
  • 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);
  • Hundred others small customizations and improvements RevoGrid.

Overview

Framework friendly

The RevoGrid component helps represent a huge amount of data in a form of data table "excel like" or as list. On top of it it provides inbuilt range edit or per cell edit, keyboard support and custom edit and render features. Works in any major framework or with no framework at all.

Chrome Firefox Safari Opera Edge
Latest Latest Latest Latest Latest

Installation

The library published as a scoped NPM package in the NPMJS Revolist account. Check for more info on our demo side.

With NPM:

npm i @revolist/revogrid --save;

With Yarn:

yarn add @revolist/revogrid;

Framework

Basic Usage

Grid works as web component. All you have to do just to place component on the page and access it properties as an element.

Add component to your project with index.html:

<!DOCTYPE html>
<html>
  <head>
    // Import from node modules
    <script src="node_modules/@revolist/revogrid/dist/revo-grid/revo-grid.js"></script>

    // With unpkg
    <script src="https://cdn.jsdelivr.net/npm/@revolist/[email protected]/dist/revo-grid/revo-grid.js"></script>
  </head>
  <body>
    // after you imported file to your project simply define component
    <revo-grid class="grid-component" />
  </body>
</html>

Or import as module:

Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement. Note that in this scenario applyPolyfills is needed if you are targeting Edge or IE11.

<script type="module">
  import { defineCustomElements, applyPolyfills } from 'https://unpkg.com/@revolist/[email protected]/loader/index.es2017.js';
  defineCustomElements();
</script>

Or import with webpack:

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements(); // let browser know new component registered
const grid = document.querySelector('revo-grid');
const columns = [
  {
    prop: 'name',
    name: 'First column',
  },
  {
    prop: 'details',
    name: 'Second column',
    cellTemplate: (createElement, props) => {
      return createElement(
        'div',
        {
          style: {
            backgroundColor: 'red',
          },
          class: {
            'inner-cell': true,
          },
        },
        props.model[props.prop] || '',
      );
    },
  },
];
const items = [
  {
    name: 'New item',
    details: 'Item description',
  },
];

grid.columns = columns;
grid.source = items;

Usage VueJs

<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';
// vue 3 @revolist/vue3-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, or fork RevoGrid and submit your changes back to me.

License

MIT


Issues
  • Vue components inside cell?

    Vue components inside cell?

    How could one use a Vue component inside of a cell?

    For example, I'd like to put an element-ui button in there for edit/delete/etc. I'd need be able to handle the click event. I'd also like to use a datepicker component.

    This does not seem obvious to me using the cell renderer.

    Thanks for all the hard work on this great component!

    enhancement 
    opened by bbbford 24
  • Custom Editors

    Custom Editors

    Do you have any examples on setting up a datepicker or any other custom component as a cell editor?

    enhancement 
    opened by kas84 11
  • Enter data on tab

    Enter data on tab

    Would be great if you could enter data on tab, so that if you want to enter data from left to right, you easily can.

    opened by kas84 10
  • Custom Row Headers

    Custom Row Headers

    As far as I am concern, row headers only display numbers and are not customizable, am I right?

    Let's say in your example here https://revolist.github.io/revogrid/ you want name to be a row header so that's not selectable, is that possible?

    enhancement 
    opened by kas84 8
  • remove table sort

    remove table sort

    Hi, some basic customization features which I think are lacking:

    1. ability to disable edit on columns definition
    2. removing sort after a table has been sorted (third consecutive click could remove the table sort)

    on a separate note: I've noticed the grid is not ignoring keyboard shortcuts when having a cell selected. example: select a cell and do cmd+L to edit the url on the page, notice that the cell value changes.

    I'm happy to try to help you improve this if you can give me some pointers.

    opened by jorgemmsilva 8
  • Use with grid layout ?

    Use with grid layout ?

    Would it be possible to use this with an icon grid layout, ios style ?

    opened by MentalGear 7
  • Import data from excel

    Import data from excel

    enhancement 
    opened by revolist 7
  • support mouse selection range feature

    support mouse selection range feature

    Why was the mouse selection range feature removed in later versions?

    I see that https://github.com/revolist/revogrid/commit/40de4843301082d9fe90b5788c414a76a525069e is the last version that supports mouse selection range (online demo), what is the problem that abandoned this feature?

    Is there any plan to support it in the future?

    opened by SolidZORO 7
  • Could this gird implements have

    Could this gird implements have "sparklines" in cell?

    Hello, thanks a lot for your efforts great project

    Could this gird implements have "sparklines" in cell?

    opened by Slach 5
  • Row headers not working with bootstrap-vue

    Row headers not working with bootstrap-vue

    Describe the issue With :row-headers="true" you can see that row headers are active but the labels on it are not visible. The problem is probably a conflict with boostrap.css.

    To Reproduce Check here https://codesandbox.io/s/quirky-dan-ruyv0?file=/src/App.vue Try to remove line 16: import "bootstrap/dist/css/bootstrap.css"; You should see the labels appearing when deleting the import, but it should not conflict with bootstrap css.

    bug 
    opened by Magenta94 5
  • Improve filter plugin

    Improve filter plugin

    Added a possibility to translate captions, reset filter in one click

    opened by ThisIsRex 0
  • [Feature] Add a filter captions translation/customization/filter row?

    [Feature] Add a filter captions translation/customization/filter row?

    It would be a good idea to allow user to translate filter names, show filter row below column headers and create custom filter popup renderer, like that:

    {
        //...
        filterRenderer: (h, filters, applyFn, cancelFn) {
            return (
                <div... >...</div>
            )
        }
    }
    
    opened by ThisIsRex 0
  • how to Sort  a numeric column  using cellCompare??

    how to Sort a numeric column using cellCompare??

    opened by getmonyinfo 0
  • Some grid data is missing when using multiple grouping levels

    Some grid data is missing when using multiple grouping levels

    Describe the issue When using row grouping with multiple grouping properties, some data will not be rendered.

    To Reproduce See example here: http://jsfiddle.net/9pLb3v47/3/

    Under each "Area" group, I'd expect to see several "Section" groups, each containing multiple rows.

    opened by brianehenry 0
  • Dynamic appended column has wrong size

    Dynamic appended column has wrong size

    Describe the issue Last column dynamic added always fill rest of grid width, even with a size set.

    To Reproduce https://codesandbox.io/s/dynamic-add-column-7fe4u?file=/src/App.js

    opened by sospartan 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Typo on custom range event

    Typo on custom range event

    See src/component.d.ts:

    /**
     * Before range apply. Triggered before range applied. Use e.preventDefault() to prevent range.
     */
    "onBeforeaange"?: (event: CustomEvent<Selection.ChangedRange>) => void;
    

    onBeforeaange >> onBeforerange (or maybe onBeforeRange?)

    documentation 
    opened by franz-josef-kaiser 0
  • Column type select not working when value is number

    Column type select not working when value is number

    Hi @revolist

    Like title, when i used column select type, get source from database with:

    label: text, 
    value: number,
    

    it is OK to add source into select box, but it can not select (commit value) because value is number type.

    I tried convert to string type when get source from database and it working normal. But it not good to use (convert to number again when save data)

    So i notification to you this issue, hope it improve in future version.

    Regards

    bug 
    opened by van-huyen 0
  • Feature: Support RTL

    Feature: Support RTL

    null

    enhancement 
    opened by mhmdAljefri 0
  • Add event listeners with JSX/TSX - Custom content render

    Add event listeners with JSX/TSX - Custom content render

    Hi everyone, I'm using revo-grid with Vue and TSX custom cell content renderer. I tried to add mouse and keyboard events to template elements. However react-style event listeners are not working in TSX. Is there any way to add event listeners to template elements?

    help wanted 
    opened by pvter 1
Releases(v3.0.98)
Owner
Revolist
We are focusing in software development where we can encounter some challenge to get through.
Revolist
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋

Powerful data grid component built with StencilJS. Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Ea

Revolist 1.8k Oct 12, 2021
An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

Denis Raslov 1k Sep 25, 2021
A powerful Bootstrap-like responsive grid system for React.

React Grid System A powerful Bootstrap-like responsive grid system for React. ⚠️ Upgrading to v7 react-grid-system v7 adds a new screen class xxl for

Sealninja 672 Oct 11, 2021
Datagrid is a component that can be used to present data in table.

Datagrid is a component that can be used to present data in table. It supports inline edit, action bar and lot more. Component is highly customizable to meet different use cases.

OpusCapita Solutions 25 Jul 8, 2021
A modular table, based on a CSS grid layout, optimized for customization.

react-grid-table A modular table, based on a CSS grid layout, optimized for customization. Supported features: Async support Sort by column Column res

Nadav Shaar 87 Oct 12, 2021
most easy to use react table

most easy to use react table

Hasan 20 Oct 14, 2021
most easy to use react table

react-flexy-table most easy to use react table install npm install react-flexy-table live demo https://react-flexy-table.netlify.app/ usage its realy

Hasan 21 Oct 5, 2021
Virtual Grid for React

React Virtual Grid Demo High performance virtual grid. This is a low level component for building fast tables. This component does not load any data a

Fulcrum 45 Oct 13, 2021
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

react-data-grid Install npm install react-data-grid react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to sc

Adazzle 4.9k Oct 14, 2021
React components for rendering large scrollable data

af-virtual-scroll Install npm install --save af-virtual-scroll Website https://af-virtual-scroll.vercel.app/ Features All dimensions are calculated au

Alex Fomin 32 Oct 12, 2021
A high-performance React grid component, with rich rendering and first-class TypeScript support.

Glide Data Grid We built Data Grid as the basis for the Glide Data Editor. It's a React component built on top of HTML Canvas. It scales to millions o

Glide 545 Oct 14, 2021
react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. It is full of useful features such as useExcelDownloader, ... etc.

react-xls react-xls is the fastest in-browser excel ( .xls & .xlsx ) parser for React. ?? Features Compatible with both JavaScript and TypeScript ?? U

Bunlong VAN 9 Sep 17, 2021
高性能的 React 表格组件

高性能的 React 表格组件, 在不丢失表格的强大功能的情况下,并且保持高性能

HighPerformance 9 Oct 8, 2021
A simple table library with built in sorting, pagination, selection, expandable rows and customizable styling.

React Data Table Component Demo and Examples Key Features Requirements Installation Logging Issues and Contributions API and Usage Columns column.hide

John Betancur 1.2k Oct 12, 2021
🤸 Configurable grid and layout engine for React

gymnast is a configurable grid for React With gymnast, you can eliminate your layout css or reduce it to just a few lines. Learn how to use gymnast in

gymnast.js 36 Apr 29, 2021
Empower Your Data with the best React Data Grid there is

See the demo | Explore the docs Table of Contents Purpose Problem Solution Installation & Getting Started TypeScript support Features Community Editio

Inovua 197 Oct 12, 2021
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.

Important information We permanently moved this project to the main Handsontable repository at https://github.com/handsontable/handsontable/tree/maste

Handsontable 516 Sep 30, 2021
React Tabulator is based on Tabulator - a JS table library with many advanced features.

react-tabulator React Tabulator is based on Tabulator - a JS table library with many advanced features. Link. Live Demo: Codesandbox Example code: /sr

Duc Ng 307 Aug 3, 2021
React Components for Tabular data.

Declarative React Canvas Grid primitive for Data table, Pivot table and more :boom:

Rows n' Columns 227 Oct 12, 2021