How to Make a DataTable in ReactJS?

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?

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:

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.

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.

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

Sortable Table Columns

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.

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 />.

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.

More React Tutorials

Install React-Router and Use it
Inline Style in ReactJS

Stay Safe! Happy Coding! 🙂

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

Exit mobile version