Novelty Palliates Malaise


    0.12.2 • Public • Published

    React Grid

    Data grid for React.

    Build Status Coverage Status


    React Grid is available via npm.

    npm install adazzle-react-grid --save

    Or if you'd like to use bower, it's as easy as:

    bower adazzle-react-grid --save


    React Grid comes in two flavours. A basic uneditable data grid as well as a more advanced datagrid that attempts to provide a rich excel like experience with filtering, sorting, copy/paste, cell drag down, custom editors and formatters.

    To use the basic grid, just include the following files

    <!-- The core React srcrary -->
    <script src=""></script>
    <!-- basic React Grid component -->
    <script src="adazzle-react-grid/dist/ReactGrid.Grid.js"></script>

    or if using CommonJs

    var Grid = require('adazzle-react-grid');

    To use the advanced features, add these files to your page

    <!-- The core React srcrary -->
    <script src=""></script>
    <!-- advanced ReactGrid component -->
    <script src="adazzle-react-grid/dist/ReactGrid.Grid.WithAddons.js"></script>
    <!-- optional collection of editors for React Grid-->
    <script src="adazzle-react-grid/dist/ReactGrid.Grid.Editors.js"></script>
    <!-- optional collection of formatters for React Grid-->
    <script src="adazzle-react-grid/dist/ReactGrid.Grid.Formatters.js"></script>

    or if using CommonJs

    var ExcelGrid = require('adazzle-react-grid/addons');
    var GridEditors = require('adazzle-react-grid/editors');
    var GridFormatters = require('adazzle-react-grid/formatters');

    Building Your Copy of React Grid

    The process to build reactGrid.js is built entirely on top of node.js, using many srcraries you may already be familiar with.


    • You have node installed at v0.10.0+


    run npm install You can then just run gulp this will:

    • compile all the jsx into js
    • wrap up all the examples registered under \examples
    • compile less -> css
    • fire up a server and open a test page


    We use gulp to automate many tasks. Look in gulp/tasks folder to see full list. The important ones to know:

    # Build examples folder, fire up server and open exmaples page 
    # Build reactGrid srcrary in UMD format in dist folder  
    gulp dist
    # Build and run tests in your browser 
    gulp tests-launch 
    # Compile Less and build styles 
    gulp styles
    # Wipe out build directory 
    gulp clean

    Adding examples

    To add any other examples, you just need to:

    1. Add a .js file under the examples folder that returns a react component by module.exports = someNewExample
    2. in examples\index.js register this by adding components.push({id:'Name for your component', module:require('./nameOfYourFile') });

    This will then add a new menu to the examples.html page


    we are using jasmine for tests and these can either be run in a standalone page by running gulp tests-launch *note: you need to run bower install first For automation, we are using karma To run the tests use gulp tests To watch for file changes, use gulp tdd this is a work in progress, and wont watch your files unless you first run gulp tests-build to do our react/browserify transforms


    React Grid is free software created by [Prometheus Research][] and is released under the MIT.



    npm i adazzle-react-grid

    DownloadsWeekly Downloads






    Last publish


    • malonecj