Home Reactjs How to Integrate datatables with react js?

How to Integrate datatables with react js?

by therichpost
0 comment

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:


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:


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",

class Hello extends React.Component{
    return (
      height={rows.length * 50}
      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" />

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

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


You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.