0% found this document useful (0 votes)

36 views

How To Make A Datatable in Reactjs

If you are familiar with datatable jquery library and want to make a data table in reactjs the check this file for a guide.

Uploaded by

Aman Mehra

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

36 views

How To Make A Datatable in Reactjs

If you are familiar with datatable jquery library and want to make a data table in reactjs the check this file for a guide.

Uploaded by

Aman Mehra

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 6

Blog Categories  Contact

HOME REACTJS HOW TO MAKE A DATATABLE IN REACTJS?

How to Secure Password Using

bcrypt in PHP?
How to Make a DataTable in ReactJS?
How to Make a DataTable in
HOW TO REACTJS ReactJS?

AMAN MEHRA APRIL 23, 2021 LEAVE A COMMENT How to Inline Style in ReactJS?

Tweet on Twitter Share on Facebook How to Install WordPress Theme

(2021 Edition)?

How to Install WordPress –

Beginners Guide?

DataTable is a jQuery library and it is the easiest way to customize an HTML

table. It is a highly exible tool to enhance the feature in any HTML table. It will
MOST VIEWED POSTS
give you more advanced interaction control and you can handle it. So, in this
tutorial, we will learn DataTable in ReactJS. WooCommerce Remove
Update Cart Button and
Make it Automatically
Let’s start with rst, how to convert HTML table to DataTable with this library Update.
October 5, 2020
and how it looks like?
How to Change Price of

Emmbed DataTable in HTML Speci c Product and

Quantity in Cart?
October 14, 2020
To convert any HTML table into the DataTable, you must have included the CSS
How to Redirect to
and JS les of this library. You can add this into <head> tag. You can
Checkout After Add to
download these le from here OR you can add the CDN link into the header. Cart?
October 16, 2020

CDN Links: How can I Prevent SQL

Injection in PHP?
https://cdn.datatables.net/1.10.24/css/jquery.dataTables.m October 7, 2020

in.css
https://cdn.datatables.net/1.10.24/js/jquery.dataTables.m Upload Multiple Featured
Images in a Post OR Page
in.js
January 4, 2021

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

FOLLOW US
So, after adding these les, create a HTML table. The table must be well Stay updated via social channels
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:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>DataTable</title>
5
6 <script src="https://ajax.googleapis.com/ajax/libs
7 <link rel="stylesheet" type="text/css" href="https
8 <script src="https://cdn.datatables.net/1.10.24/js
9
10 $(document).ready(function() {
11 $('#table_id').DataTable();
12 } );
13 </head>
14 <body data-rsssl=1>
15
16 <h2>DataTable Example</h2>
17
18 <table id="table_id" class="display" style="width
19 <thead>
20 <tr>
21 <th>Name</th>
22 <th>Position</th>
23 <th>Office</th>
24 <th>Age</th>
25 <th>Start date</th>
26 <th>Salary</th>
27 </tr>
28 </thead>
29 <tbody>
30 <tr>
31 <td>Tiger Nixon</td>
32 <td>System Architect</td>
33 <td>Edinburgh</td>
34 <td>61</td>
35 <td>2011/04/25</td>
36 <td>$320,800</td>
37 </tr>
38 <tr>
39 <td>Garrett Winters</td>
40 <td>Accountant</td>
41 <td>Tokyo</td>
42 <td>63</td>
43 <td>2011/07/25</td>
44 <td>$170,750</td>
45 </tr>
46 </tbody>
47 </table>
48 </body>
49 </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 exible 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.

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

In the above code, dt is a variable and it hold the databale’s le 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 exible 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.

1 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

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

2
3 const data = [{ id: 1, title: 'DataTable in ReactJS', ye
4 const columns = [
5 {
6 name: 'Title',
7 selector: 'title',
8 sortable: true,
9 },
10 {
11 name: 'Year',
12 selector: 'year',
13 sortable: true,
14 right: true,
15 },
16 ];
17
18 class MyComponent extends Component {
19 render() {
20 return (
21 <DataTable
22 title="YourBlogCoach"
23 columns={columns}
24 data={data}
25 />
26 )
27 }
28 };

In the above code, rst, we imported that package (react-data-table-component).

Then we created the dummy data object with key pairs value. Then we created
the column eld means the header of the table and added the speci c control
for the speci c column eld. You can check more about control option here.

After creating column elds, create a class component and return a DataTable
as a component and assign the column elds 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 speci c
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.

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

2
3 const data = [{ id: 1, title: 'DataTable in ReactJS', su
4 const columns = [
5 {
6 name: 'Title',
7 selector: 'title',
8 cell: row => <div><div style={{ fontWeight: 700 }}>
9 },
10 {
11 name: 'Year',
12 selector: 'year',
13 sortable: true,
14 right: true,
15 },
16 ];
17
18 const ExpandableComponent = ({ data }) => <img src={data
19
20 class MyComponent extends Component {
21 render() {
22 return (
23 <DataTable
24 title="YourBlogCoach"
25 columns={columns}
26 data={data}
27 expandableRows
28 expandableRowsComponent={<ExpandableComponent />
29 />
30 )
31 }
32 };

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.

Install React-Router and Use it

Inline Style in ReactJS

Stay Safe! Happy Coding!

BOOTSTRAP DATATABLE INSTALL REACT REACT REACTJS

Tweet on Twitter Share on Facebook

How to Secure Password Using How to Inline Style in ReactJS?

bcrypt in PHP?

How to Install WordPress Theme How to Install WordPress –

(2021 Edition)? Beginners Guide?

How to Add jQuery Script to How to Add Text after OR before Cart
WordPress? Button in WooCommerce?

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 nd solutions to bugs.

Name * Email * Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT

ABOUT QUICK LINKS RECENT POSTS JOIN OUR NEWSLETTER

Your Blog Coach is the best site Blog How to Secure Password Using Name
for nding the solution to any bcrypt in PHP?
WordPress
issue related to coding and learn
How to Make a DataTable in
more cool stuff and tricks. WooCommerce Email
ReactJS?
Contact
How to Inline Style in ReactJS?