29 September 2016

Showing Data in Tabular Format Using Fixed Data Table in ReactJS or React.js

Hi All,

In this post I am going to talk about Fixed Data Table (FixedDataTable ) component given by reactJS.

what is Fixed Data Table (FixedDataTable ) ?

FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

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 the steps required for this we will see in this post.

So to use Fixed Data Table in your ReactJS project you need to import the required extension in your project. To get all the extension you need to run the following command

npm install fixed-data-table --save

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css"></script>


 <link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.css" rel="stylesheet">


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 src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.css" rel="stylesheet">
</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 {Table, Column, Cell} from 'fixed-data-table'; 

So your index.jsx code should look like this :

import React from "react";
import ReactDOM from "react-dom";
import {Table, Column, Cell} from 'fixed-data-table';


var DepartmentGridTable = React.createClass({
 getInitialState: function() {
    return {departments: []};
  },
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: function(){
 var rows = this.state.departments;
 console.log(rows);
        return <Table
      height={rows.length * 20}
      width={400}
      rowsCount={rows.length}
      rowHeight={30}
      headerHeight={30}
      rowGetter={function(rowIndex) {return rows[rowIndex]; }}>
     
      <Column dataKey="departmentId" width={200} label="Department Id" />
      <Column dataKey="departmentName" width={200} label="Department Name" />

    </Table>;
     }

 });


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:


 <Table
      height={rows.length * 20}
      width={400}
      rowsCount={rows.length}
      rowHeight={30}
      headerHeight={30}
      rowGetter={function(rowIndex) {return rows[rowIndex]; }}>
     
      <Column dataKey="departmentId" width={200} label="Department Id" />
      <Column dataKey="departmentName" width={200} label="Department Name" />

    </Table>


 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  :)

0 on: "Showing Data in Tabular Format Using Fixed Data Table in ReactJS or React.js"