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

Comments

Post a Comment

Popular posts from this blog

Setting up the environment for Angular2 and Hello World Example in Angular2

Image
Hi All, In this post I am going you to show you how you can set up the environment for Angular2. You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers: 1. lite-server (static server) 2. Weblogic Server 10.3 Lets do the setup for lite server.  First of all go to any directory in your computer and create a folder in that directory with name "angular2-example". You can do it by the command line also by typing the following command. mkdir  angular2-example Now once the directory is created you need to create three files. 1. tsconfig.json 2. typings.json 3. package.json 1.  tsconfig.json This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation. The content of this file will be as follows: {   "compilerOptions": {     "target": "es6",     "modu...
Read more

Showing number of rows or row count on top and bottom of table in ADF.

Image
Hi Friends, We will see today how to show the page count on top and bottom of table in ADF. I am assuming that you all know how to create the table to show data from view object in ADF. Assume you have a table which contains the information of employees from employees table of HR schema. Now surround this table with a panel collection. Now your panel collection has some facet with name "statusbar", "toolbar" etc. Right click on facet "toolbar" and select "insert after f : facet toolbar and then "Facet Secondary Toolbar" as shown below in image. Now on facet "statusbar" and "secondaryToolbar" put toolbar component from component pallet. Then put a output text inside each toolbar as follows:  <f:facet name="secondaryToolbar">             <af:toolbar id="t3" stretchId="s2">               <af:spacer width="10" height="10" id="s2...
Read more

Build a Simple ReactJS application using react-cli

Image
Hi All, In this blog we will see how we can create a sample application using react-cli.  It is a command line interface tool that seeks to automate some tasks when working on a React.js project. To starts with you have to install it globally by running following command: npm install -g react-cli The you have to run the following command in command window: npm install -g create-react-app  Now once it is installed you can create any directory where you want to create you sample ReactJS application. I have created a folder with name "TestApp" in my local drive. Now you have to run the following command to create the sample application. create-react-app testapp  While it is creating application and downloading all the artifacts related to this you can see the following things in command line as shown below: So it will create a ReactJS application with name "testapp" under folder "TestApp" as you can see in the above screenshot. On...
Read more