29 September 2016

Showing Data in Tabular Format Using React Data Grid in ReactJS or React.js

Hi All,

In this post I am going to talk about React Data Grid (ReactDataGrid) component given by reactJS.

what is React Data Grid (ReactDataGrid) ?

ReactDataGrid is a React component for building and presenting data in a flexible, powerful way. It has following features:




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

b.  SupportsView 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.
c.  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.
d.  Full keyboard navigation, cell copy & paste, cell drag down, frozen columns, column resizing,
     sorting, filtering and many more features on the way.

So if you want to show your data in a tabular format using ReactJS then you have three option :

1. Showing the data using normal table
2. Using  Fixed Data Table
3. Using React Data Grid (ReactDataGrid)

 If you want to show your data using normal table you can see the following post and get it done easily :

http://www.code4fusion.com/2016/09/load-data-from-database-using-rest.html

If you want to show your data in the tabular format using Fixed Data Table then you can follow the following link:

http://www.code4fusion.com/2016/09/showing-data-in-tabular-format-using.html

In this post we will see how we can show the data using the ReactDataGrid react component. To work with ReactDataGrid, you need to first import all the required extension of the ReactDataGrid.

To import ReactDataGrid extension in your application you have to run the following command:

npm install react-data-grid --save

once the above command executed successfully you have to include the following in you index.html file.

     <script type="text/javascript" src="node_modules/react-data-grid/dist/react-data-grid.js">
     </script>  

 
    <link rel="stylesheet" href="node_modules/react-data-grid/dist/react-data-grid.css"> 


    <script src="node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js"></script>

    <script src="node_modules/react-data-grid/dist/react-data-grid.js"></script>


Now you can use the fixed data table in your application.

 So at this point your index.html code should look like this : 


<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 <script type="text/javascript" src="node_modules/react-data-grid/dist/react-data-grid.js"></script>   
    <link rel="stylesheet" href="node_modules/react-data-grid/dist/react-data-grid.css">
    <script src="node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js"></script>
<script src="node_modules/react-data-grid/dist/react-data-grid.js"></script>
</head>
<body>
  <div id="container"></div>
  <script src="output/myCode.js"></script>
</body>
</html>


And now you need to import the fixed-data-table in your code by adding following lines of code:

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


So your index.jsx code should look like this :

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';


   
   
var DepartmentGridTable = React.createClass({
 getInitialState: function() {
    return {departments: []};
  },
    submitForm: function(event) {   
   var dept = {"departmentId": this.refs.departmentId.value,"departmentName" :this.refs.departmentName.value};
   this.setState({departments:this.state.departments.concat([dept])});
   console.log(this.state.departments);
        $.ajax({
                 type: "POST",
                 url: this.props.dataUrl+"add",
                 data: JSON.stringify(dept),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 processData: true,
                 success: function (data, status, jqXHR) {
               
                 alert("New department added successfully");
                 },
                 error: function (xhr) {
                     alert(xhr.responseText);
                 }
             });            
  },
componentDidMount: function() {
     $.ajax({
      url: this.props.dataUrl,
      dataType: 'json',
      success: function(data) {
        this.setState({departments: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.dataUrl, status, err.toString());
      }.bind(this)
    });
  },
 
render() {
var rows = this.state.departments;
var deptArray=[];
var arrayLength = rows.length;
for (var i = 0; i < arrayLength; i++) {
deptArray.push(
{                     
                        "id" : i,
                        departmentId: rows[i].departmentId,
                        departmentName:  rows[i].departmentName
                    });

}


var rowGetter = function(i) {
      return deptArray[ i ];
    };
var columns = [
      {
        key: 'id',
        name: 'Serial Number'
      },
      {
        key: 'departmentId',
        name: 'Department ID'
      },
      {
        key: 'departmentName',
        name: 'Department Name'
      }
    ]
    return (
   
      <ReactDataGrid
        columns={columns}
        rowGetter={rowGetter}
        rowsCount={deptArray.length}
        minHeight={500}
      />
    );
    }   

 });


ReactDOM.render(
 <DepartmentGridTable dataUrl ="http://localhost:9001/TestRestEasy/rest/departments/"/>,
  document.querySelector("#container")
);


 

 As you can see in the above code for rendering table we have used following lines of code:

  <ReactDataGrid
        columns={columns}
        rowGetter={rowGetter}
        rowsCount={deptArray.length}
        minHeight={500}
      />


Unlike conventional table where we need to write all the tags related to table here we don't need to do anything like that.

All the table structure is built automatically for you.

So when you run you page you can see the following screen :



Happy Coding :)

1 on: "Showing Data in Tabular Format Using React Data Grid in ReactJS or React.js"
  1. Hi, Very informative Article.There is so much information about the ReactJS in this post. keep it up and thanks for the great content. Bookmarked your site.
    ReactJS Online Training in Hyderabad

    ReplyDelete