Blog Categories Contact
HOME REACTJS HOW TO MAKE A DATATABLE IN REACTJS?
RECENT POSTS
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?
CATEGORIES
How To
PHP
ReactJS
WooCommerce
WordPress
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.
More React Tutorials
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
YOU MAY ALSO LIKE
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.
LEAVE A REPLY
Your email address will not be published. Required elds are marked *
Comment
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?
SUBSCRIBE
© 2020 Your Blog Coach Privacy Policy Terms and Conditions Sitemap
