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 (

   <div>

     <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 />

     </ReactDataGrid>

   </div>

 );


The above example can be downloaded from:

https://github.com/flexicious/react-datagrid-getting-started



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

https://www.youtube.com/watch?v=sO3o0zG93fM


Here is the running bin:

https://www.webpackbin.com/bins/-Kj9JhCTXC3CghFUfRtQ