How to Integrate datatables with react js?

Hello, welcome to therichpost.com. In this post, I will tell you, How to Integrate datatables with react js? Reactjs is a Javascript Library to build user interface.

In my older posts, I told you, how to install reactjs, for this, you can check the below link:

https://therichpost.com/install-reactjs-easy-simple

For integrate datatables is reactjs, I have used fixed-data-table package and you can install this package to your reactjs app with below command:

npm install fixed-data-table

Here is the working image:

datatables-in-reactjs

Here is working and tested code for Integrate datatables with react js and you need to add this into your index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import 'fixed-data-table/dist/fixed-data-table.css';

const rows = [{"id":1,"first_name":"TheRich","last_name":"Post","email":"therichposts@gmail.com",
"country":"India"},
{"id":1,"first_name":"TheRich","last_name":"Post","email":"therichposts@gmail.com",
"country":"India"},
{"id":1,"first_name":"TheRich","last_name":"Post","email":"therichposts@gmail.com",
"country":"India"}
];

class Hello extends React.Component{
  render()
  {
    return (
    
  
    <Table
      height={rows.length * 50}
      width={1150}
      rowsCount={rows.length}
      rowHeight={30}
      headerHeight={30}
      rowGetter={function(rowIndex) {return rows[rowIndex]; }}>
 
      <Column dataKey="id" width={50} label="Id" />
      <Column dataKey="first_name" width={200} label="First Name" />
      <Column  dataKey="last_name" width={200} label="Last Name" />
      <Column  dataKey="email" width={400} label="e-mail" />
      <Column  dataKey="country" width={300} label="Country" />
 
    </Table>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

If you have any query related to this post then please comment below.