Using npm

Parent Previous Next

The easiest way to get started using the ReactDataGrid is to simply import it from npm.

The grid is broken into 2 libraries. The core library is called flexicious-react-datagrid. A sattelite library, flexicious-react-datagrid-styles contains the styles, themes, as well as popups and datepickers. These are separate for ease of customization. The grid has a need to display popup windows for

It has a need to render a date picker for

Since each customer usually has their own styled popups and date pickers, we have extracted this into a separate library for ease of customization.

So, that said, getting started is as easy as:

npm install --save flexicious-react-datagrid

npm install --save flexicious-react-datagrid-styles

And then in your view:

import { ReactDataGrid, ReactDataGridColumn } from 'flexicious-react-datagrid'

import { CssStyles, ApiStyles } from 'flexicious-react-datagrid-styles'

And finally, in your render method:

return (


     <h1>Hello World!</h1>

     <ReactDataGrid styles={ApiStyles.getThemeStyles('officeblue')} width={"100%"} editable dataProvider={[{ label: "Company A", state: "NJ", rank: "1.11" },

     { label: "Company B", state: "PA", rank: "11.1" },

     { label: "Company C", state: "CT", rank: "-111" },

     { label: "Company D", state: "NY", rank: "2.34" },

     { label: "Company E", state: "NJ", rank: "22.2" }]}>

       <ReactDataGridColumn dataField="label" />

       <ReactDataGridColumn dataField="state" />

       <ReactDataGridColumn dataField="rank" sortNumeric />




The above example can be downloaded from:

Here is a quick video of how to set this up on webpackbin:

Here is the running bin: