🎉 Exciting News!

For the past 2 years, we've been tirelessly refining Revogrid v4, pushing the boundaries of performance. We are going to release it later this month. In parallel, we've birthed Revosheets, an app wholly powered by Revogrid. Our vision is for Revosheets to champion and sustain Revogrid's growth long-term. As we gear up for the Revogrid v4 release, we invite you to show some love and support for Revosheets on Product Hunt.

Let's make it soar! 🚀

RevoGrid React Adapter

Minimalistic RevoGrid adapter for React.

Key Features

• Millions of cells viewport with a powerful core in-build by default;
• Keayboard support with excel like focus;
• 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;
  • 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.

How to use

With NPM:

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

With Yarn:

yarn add @revolist/react-datagrid;

import React from "react";
import { defineCustomElements } from "@revolist/revogrid/loader"; // webcomponent definition loader 
import { RevoGrid } from "@revolist/react-datagrid";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    // you have to define webcomponent before you can use the wrapper
    defineCustomElements();
    this.state = {
      columns: [{ prop: "name" }],
      source: [{ name: "1" }, { name: "2" }]
    };
  }

  afterEdit({ detail }) {}

  render() {
    return (
      <div>
        <RevoGrid
          theme="compact"
          columns={this.state.columns}
          source={this.state.source}
          onAfterEdit={(e) => this.afterEdit(e)}
        />
      </div>
    );
  }
}

Check Sandbox for real live sample.