React Data Grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like http://adazzle.github.io/react-data-grid/

Installation

npm install react-data-grid

This library is written with CommonJS modules. If you are using browserify, webpack, or similar, you can consume it like anything else installed from npm.

Overview

ReactDataGrid is an advanced JavaScript spreadsheet component built using React

Exported Modules

ReactDataGrid exposes two possible modules, react-data-grid and react-data-grid/addons.

What's included in each module depends on ReactDataGrid's version you're using.

• 0.X.X

  • You can import react-data-grid or react-data-grid/addons depending if you want to have access to the add-ons or not.
  • react-data-grid/addons contains react-data-grid and that creates a dependency that can be hard to manage.
  • react-data-grid/addons points to react-data-grid-with-addons.js on dist folder.

  • Know Issues:

    • Some external dependencies in react-data-grid/addons don't offer support for older browsers like IE8, if the module is imported globally all the JS will be damaged.

• 1.0.0

  • You can import react-data-grid and react-data-grid/addons depending if you want to use only the basic grid or the add-ons.
  • Both modules are completely independent and can be used separately.
  • react-data-grid/addons points to `react-data-grid.ui-plugins.js`` on dist folder.

Features

• Lightning fast virtual rendering
• Can render hundreds of thousands of rows with no lag
• Keyboard navigation
• Fully editable grid
• Rich cell editors like autocomplete, checkbox and dropdown editors, complete with keyboard navigation
• Custom cell Editors - Easily create your own
• Custom cell Formatters
• Frozen columns
• Resizable columns
• Sorting
• [Filtering] (http://adazzle.github.io/react-data-grid/examples.html#/filterable)
• [Context Menu] (http://adazzle.github.io/react-data-grid/examples.html#/context-menu)
• Copy and Paste values into other cells
• [Multiple cell updates using cell dragdown] (http://adazzle.github.io/react-data-grid/examples.html#/cell-drag-down)
• [Association of events of individual columns] (http://adazzle.github.io/react-data-grid/examples.html#/column-events)

Check out the examples directory to see how simple previously complex UI and workflows are to create.

Contributing

Please see CONTRIBUTING

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT