Lightning Fast Rendering

Combines the performance power of React as well as partial rendering techniques in order to smoothly scroll though hundreds of thousands of rows.

Rich Editing and Formatting

View and edit cells using a wide range of formatters and editors. If these don't suit your needs, you can easily create and plugin your own

Configurable & Customizable

Quickly configure and customise features such as grid and column properties, row and cell renderers. As the Grid is a React component it is easy to extend and add custom functionality.

Packed full of Excel Features

Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing, sorting, filtering and many more features on the way.

Check out these examples

Quick Start

Installation

Using Common JS

React Data Grid is available in the npm repository. You can install it from the command line using the following commands

npm install react --save

npm install react-data-grid --save

Once downloaded, require both React and React Data Grid and you should be good to go

import React from 'react'; 
import ReactDataGrid from 'react-data-grid';

If you want to use extra features such as built in editors, formatters, toolbars and other plugins, you need to require the addons module as well

import ReactDataGridPlugins from 'react-data-grid/addons';

Using Distribution Scripts

If you prefer not to use a module system, you can reference the distribution scripts directly in your html pages. First you need to download the scripts. This can be done in 3 ways, either download directly from github source, using npm as above

<script src="//fb.me/react-0.14.6.js"></script>
<script type="text/javascript" src="react-data-grid/dist/react-data-grid.js"></script>
And include react-data-grid.ui-plugins.js to use advanced features. Plugins will be availble on the ReactDataGridPlugins namespace
<script type="text/javascript" src="react-data-grid/dist/react-data-grid.ui-plugins.js"></script>"