Installation

Install with npm

$ npm install --save simple-react-data-grid

Usage

import DataGrid from 'simple-react-data-grid';
<DataGrid data={ArrayOfObjects} metaData={ArrayConfig} styles={'styles')} />	

Example for data and metaData

data = [
  {
    'firstName': 'Roseann',
    'lastName': 'Parker',
    'company': 'Zaggles',
    'employed': 'No',
  },
  {
    'firstName': 'Ford',
    'lastName': 'Knox',
    'company': 'Coriander',
    'employed': 'Yes',
  },
  {
    'firstName': 'Graves',
    'lastName': 'Randolph',
    'company': 'Supremia',
    'employed': 'No',
  },
  {
    'firstName': 'Sears',
    'lastName': 'Jackson',
    'company': 'Netagy',
    'employed': 'No',
  },
  {
    'firstName': 'Bernard',
    'lastName': 'Barrett',
    'company': 'Cubix',
    'employed': 'No',
  },
]

Sample Metadata:

metaData = {
     headerConfig: [
    {
      'label': 'First Name',
      'key': 'firstName',
      'type': 'string',
      'emptyCells': '',
    },
    {
      'label': 'Last Name',
      'key': 'lastName',
      'type': 'string',
      'emptyCells': '',
    },
    {
      'label': 'Company',
      'key': 'company',
      'type': 'string',
      'emptyCells': '',
    },
    {
      'label': 'Employed',
      'key': 'employed',
      'type': 'string',
      'disableFilter': true,
      'emptyCells': '',
    },
    {
      'label': 'Edit Information',
      'key': 'edit',
      'disableFilter': true,
      'excludeFromExport': true,
      'columnCustomComponent': 'checkBox',
    },
  ],
  topDrawer: {
    'pagination': false,
    'globalSearch': true,
    'clearButton': true,
    'exportButton': true,
    'totalRecords': false,
  },
  bottomDrawer: {
    'pagination': true,
    'globalSearch': true,
    'clearButton': false,
    'exportButton': false,
    'totalRecords': true,
  },
  enableRowSelection: true,
  enableAllRowSelection: true,
  recordsPerPage: 25,
  drawerPosition: 'top',
  includeAllInGlobalFilter: false,
  includeGlobalFilter: true,
  exportFileName: `FileName-${new Date()}.csv`, // For Demo
  loaderColor: '#a69fa8',
 }

Props specification:

| props | dataType | Description | | ------| -------- | ---- | | data | Array | The array which contains column information. It contains array of objects of columns.Object represents the information of each row.Object properties| | metaData |Object | metaData object contains information form representation of 'simple-react-data. It is an object|

metaData

| metadata Properties | dataType | Description | |---- | ---- | ----| |headerConfig| Array | It is an array of objects of each column representation information.Objects contains multiple properties listed below| |label|String |It represents the label of a particular column header.| |key | String| It represents the key of that particular column which is used for mapping row data.| |type| String |It represents the type of data to be present in that column. It should be 'string' or 'Number'.| |emptyCells| String |It represents the empty cell value. If data is not available in that particular cell of the column, the default value given for emptyCells will be pre-populated.| |disableFilter| Boolean |Used to disable the filter for a particular column.| |excludeFromExport| Boolean |Will decide if a particular column should be removed from csv or not.| |topDrawer|Object|This object represents the information of which feature will present in the top drawer.| |bottomDrawer|Object|This object represents the information of which feature will present in the bottom drawer.topDrawer and bottomDrawer contains some properties listed below| |enableRowSelection|Boolean|It represents the column header will contain all checked button or not.| |enableAllRowSelection|Boolean|It represents the checkbox column present or not.| |recordsPerPage|Boolean|It represents the number of records per page.| |includeAllInGlobalFilter|Boolean|It represents the column header will contain all checked button or not.| |includeGlobalFilter|Boolean|It represents the grid contained global filter or not.| |exportFileName|String|It will give the name to CVS download file.| |loaderColor|String|It will represent the color of all check loader.| |getSelectedRow|function|It is call back function which is given to grid and this return the selected/checked row data.|

| Options for top & bottom drawer | dataType | Description | | ---- | ----| ----| | pagination |Boolean| It should be boolean & represent pagination is enabled or disabled. | | globalSearch |Boolean| It should be boolean & represent globalSearch is enabled or disabled. | | clearButton |Boolean| It should be boolean & represent clearButton is enabled or disabled. | | exportButton |Boolean| It should be boolean and its functionality is to export the grid data into CSV file, represent exportButton is enabled or disabled. | | totalRecords |Boolean| It should be boolean & represent totalRecords is enabled or disabled. |

Live Demo

A live Demo is hosted on gh-pages.