How to Make a DataTable in ReactJS?

DataTable is a jQuery library and it is the easiest way to customize an HTML table. It is a highly flexible tool to enhance the feature in any HTML table. It will give you more advanced interaction control and you can handle it. So, in this tutorial, we will learn DataTable in ReactJS.

Let’s start with first, how to convert HTML table to DataTable with this library and how it looks like?

Table of Contents

1 Emmbed DataTable in HTML

1.1 CDN Links:

2 DataTable in ReactJS

3 Using react-data-table-component NPM package

3.1 Sortable Table Columns

3.2 Expandable Table Rows

4 React Bootstrap Datatables

Emmbed DataTable in HTML

To convert any HTML table into the DataTable, you must have included the CSS and JS files of this library. You can add this into <head> tag. You can download these file from here OR you can add the CDN link into the header.

CDN Links:

https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js

Note: These files are depend upon jQuery JavaScript library, make sure jQuery is also included on your webpage.

So, after adding these files, create a HTML table. The table must be well formatted with HTML tag like:

For header <thead> tag
For single body <tbody> tag
And for footer <tfoot> tag (optional)

Look at the example below:

<!DOCTYPE html>
<html>
<head>
      <title>DataTable</title>
     
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
      <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

      $(document).ready(function() {
          $('#table_id').DataTable();
      } );
</head>
<body>

      <h1>DataTable Example</h1>

      <table id="table_id" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
      </table>
</body>
</html>

So, this was the normal DataTable embed in HTML and enhance the more features. The above code will show you well structured and more amazing tool option for to HTML table. You can control those options like search box, pagination, loading, and sorting, etc. There are more cool feature you can check here and try it on your code.

Let’s start with installing and using in ReactJS now.

DataTable in ReactJS

As we saw above, DataTable is a flexible jQuery library, and how you can use it in an HTML table and enhance the more advanced features.

So now, we will learn how to install and embed DataTable in ReactJS. It is also quite easy. You just need to install the DataTable library through NPM and use it on React Components. NPM is a Node Package Manager. It must have on your machine. If you don’t know how to install it then check here, I explained in the tutorial.

Let’s start installing the DataTable library in your project folder.

Go to your react project folder through CMD (command prompt) OR Git bash. Then run the below commands on this path.

npm install datatables.net (Core Library)
npm install datatables.net-dt (Styling)

After installing the library you need to import on your component page and then you can use it the same as we did above.

var dt = require( 'datatables.net' )();

In the above code, dt is a variable and it hold the databale’s file and we can use this dt variable to HTML table for enhance the more features.

There are more libraries and packages for DataTable to use in React. You can search on google and use it but the following example I’m using best react package for DataTable is react-data-table-component

Using `react-data-table-component` NPM package

This is also a react library package for creating DataTable with cool features. This is a simple but flexible library package. It depend upon a styled-components library. It must be installed in the project folder.

Let’s start with this data table component.

First of all, installed the npm react-data-table-component and styled-components packages.

npm install react-data-table-component styled-components

The above command will install the two packages. And now we can use it in react components. See the example below.

Sortable Table Columns

import DataTable from 'react-data-table-component';

const data = [{ id: 1, title: 'DataTable in ReactJS', year: '2021' } ...];
const columns = [
  {
    name: 'Title',
    selector: 'title',
    sortable: true,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

class MyComponent extends Component {
  render() {
    return (
      <datatable title="YourBlogCoach" columns="{columns}" data="{data}"></datatable>
    )
  }
};

In the above code, first, we imported that package (react-data-table-component). Then we created the dummy data object with key pairs value. Then we created the column field means the header of the table and added the specific control for the specific column field. You can check more about control option here.

After creating column fields, create a class component and return a DataTable as a component and assign the column fields and data row to the table. So it will print the sortable DataTable. You can sort the data rows by both columns (Title and Year).

Expandable Table Rows

In this example, row data will expand and show more details about that specific row. It is also quite easy. You just need to declare the variable with data and add some props in <DataTable /> components.

Look at the code below.

import DataTable from 'react-data-table-component';

const data = [{ id: 1, title: 'DataTable in ReactJS', summary: 'DataTable is cool library for enhance more functionality...' year: '2021', image: 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png' } ...];
const columns = [
  {
    name: 'Title',
    selector: 'title',
    cell: row => <div><div style="{{" fontweight:>{row.title}</div>{row.summary}</div>,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

const ExpandableComponent = ({ data }) => <img src="%7Bdata.image%7D">;

class MyComponent extends Component {
  render() {
    return (
      <datatable title="YourBlogCoach" columns="{columns}" data="{data}" expandablerows expandablerowscomponent="{<ExpandableComponent"></datatable>}
      />
    )
  }
};

So, In the above code, we created a cell into a row and holding the columns info, and then created a component as a constant with all data info. And that component added in the <DataTable /> as a props. It will show you hidden info by clicking on a row.

Note: In some cases, if we don’t have more information to show by clicking on a row. So in this case we have to add another prop expandableRowDisabled={row => row.disabled} in the <DataTable />.

React Bootstrap Datatables

React bootstrap datatable component is also the best package to embed datatable in reactjs. It will allow advanced features like sorting, search, pagination, expandable row, checkbox selection, and row position, etc. There are more features you can check here

To use this package you have to install it in your project. Run the below command to install.

npm install mdbreact

Then you have to import it on react component page.

See the basic example of react bootstrap datatable.

import React from 'react';
import { MDBDataTableV5 } from 'mdbreact';

export default function Basic() {
  const [datatable, setDatatable] = React.useState({
    columns: [
      {
        label: 'Name',
        field: 'name',
        width: 150,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'Name',
        },
      },
      {
        label: 'Position',
        field: 'position',
        width: 270,
      },
      {
        label: 'Office',
        field: 'office',
        width: 200,
      },
      {
        label: 'Age',
        field: 'age',
        sort: 'asc',
        width: 100,
      },
      {
        label: 'Start date',
        field: 'date',
        sort: 'disabled',
        width: 150,
      },
      {
        label: 'Salary',
        field: 'salary',
        sort: 'disabled',
        width: 100,
      },
    ],
    rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: '61',
        date: '2011/04/25',
        salary: '$320',
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: '63',
        date: '2011/07/25',
        salary: '$170',
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: '66',
        date: '2009/01/12',
        salary: '$86',
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: '22',
        date: '2012/03/29',
        salary: '$433',
      },
      {
        name: 'Airi Satou',
        position: 'Accountant',
        office: 'Tokyo',
        age: '33',
        date: '2008/11/28',
        salary: '$162',
      },
    ],
  });

  return <mdbdatatablev5 hover entriesoptions="{[5," entries="{5}" pagesamount="{4}" data="{datatable}"></mdbdatatablev5>;
}

So that’s it.

I hope you understand the tutorial about DataTable in ReactJS and this code work for you. If you still have any doubt or any questions please ask me in the comment, I’ll respond to you ASAP.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to Make a DataTable in ReactJS?

Emmbed DataTable in HTML

CDN Links:

DataTable in ReactJS

Using `react-data-table-component` NPM package

Sortable Table Columns

Expandable Table Rows

React Bootstrap Datatables

More React Tutorials

About Aman Mehra

Leave a Comment Cancel reply

Emmbed DataTable in HTML

CDN Links:

DataTable in ReactJS

Using react-data-table-component NPM package

Sortable Table Columns

Expandable Table Rows

React Bootstrap Datatables

More React Tutorials

Related Posts

How to Check if Element Exists Using jQuery?

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

About Aman Mehra

Leave a Comment Cancel reply

Using `react-data-table-component` NPM package