Home > ReactJS > How to Make a DataTable in ReactJS?

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?

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

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.

Then you have to import it on react component page.

See the basic example of react bootstrap 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! 🙂

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment