Home Datatable Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data

Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data

by therichpost
15 comments
Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data.

Friends with this post, we will cover with below functionalities. I am making this post because my blog viewers told me many time to make post on React js data table with export buttons.

  1. How to fetch and show api json data in reactjs application?
  2. How to use jquery datatable in reactjs application?
  3. Reactjs datatable with dynamic data.
  4. React js datatable with export buttons.
React js Data Table with Export Buttons
Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data
Reactjs Datatable with Export Buttons Print CSV Copy with Dynamic Data

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials


Friends now I proceed onwards and here is the working code snippet please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactdatatable

cd reactdatatable

npm start // run the project

2. Now we need to run below commands to get bootstrap(for good layout), datatable and axios(to post data request to web api)  modules into our react js app:

npm install datatables.net --save

npm install datatables.net-dt --save

npm install datatables.net-buttons --save

npm install datatables.net-buttons-dt --save

npm install @types/datatables.net-buttons --save-dev

npm install bootstrap --save

npm install axios --save

npm install jquery --save

npm start

3. Now friends, after are done with commands, now please open reactdatatable/src/App.js file and add below code inside it:

import React from 'react';
//Bootstrap and jQuery libraries
import 'bootstrap/dist/css/bootstrap.min.css';
import 'jquery/dist/jquery.min.js';

//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import "datatables.net-buttons/js/dataTables.buttons.js"
import "datatables.net-buttons/js/buttons.colVis.js"
import "datatables.net-buttons/js/buttons.flash.js"
import "datatables.net-buttons/js/buttons.html5.js"
import "datatables.net-buttons/js/buttons.print.js"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import $ from 'jquery'; 

//For API Requests
import axios from 'axios';

class App extends React.Component {

  // State array variable to save and show data
  constructor(props) {
    super(props)
      this.state = {
        data: [],
       
      }}
  componentDidMount() {
       //Get all users details in bootstrap table
        axios.get('https://www.testjsonapi.com/users/').then(res => 
        {
          //Storing users detail in state array object
          this.setState({data: res.data});
        
        }); 
    //initialize datatable
    $(document).ready(function () {
        setTimeout(function(){
        $('#example').DataTable(
            {
                pagingType: 'full_numbers',
                  pageLength: 5,
                  processing: true,
                  dom: 'Bfrtip',
                      buttons: ['copy', 'csv', 'print'
                      ]
            }
        );
        } ,
        1000
        );
    });
 }
  render(){
    //Datatable HTML
  return (
    <div className="MainDiv">
    
          <h3>Therichpost.com</h3>
    
      
      <div className="container p-5">
          
          <table id="example" class="table table-hover table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Job Title</th>
            </tr>
          </thead>
          <tbody>
          {this.state.data.map((result) => {
            return (
             
                 <tr>
                  <td>{result.id}</td>
                  <td>{result.name}</td>
                  <td>{result.email}</td>
                  <td>{result.job_title}</td>
                </tr>
             
            )
          })}
           
            
          </tbody>
        </table>
          
        </div>
      </div>
  );
}
}
export default App;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.

Jassa

Thanks

You may also like

15 comments

raey May 22, 2021 - 7:06 am

Hello I tried to follow this to fetch the data in the firebase but it’s now working, can you give some adivce?

Reply
Ajay Malhotra May 22, 2021 - 7:10 am

Please increase the setTimeout speed 1000 to 2000 and then check.
Thanks

Reply
Karen May 27, 2021 - 5:29 am

Thank you for this.

Reply
Ajay Malhotra May 27, 2021 - 5:35 am

You are welcome.

Reply
Raju Sv May 27, 2021 - 5:41 am

hI ,
in this code not working .its shows like no data availble .

Reply
Ajay Malhotra May 27, 2021 - 5:42 am

Hi can you please check you API or use below trick:
Please increase the setTimeout speed 1000 to 2000 and then check.
Thanks

Reply
Gopi Dua May 27, 2021 - 7:46 pm

Great Post.

Reply
Ajay Malhotra May 29, 2021 - 5:24 am

Thanks.

Reply
akshay December 18, 2021 - 12:46 pm

i need excel button

Reply
amit santosh pawar February 14, 2022 - 12:09 pm

how to change download file name.

Reply
Ajay Malhotra February 14, 2022 - 3:20 pm

You need to set the attribute inside Datatable settings.

Reply
narayana August 31, 2022 - 12:35 pm

well I just want to appreciate your short tutorial, its really helpful, thanks

Reply
therichpost August 31, 2022 - 5:19 pm

Thanks and welcome.

Reply
IAMSLIIT April 12, 2023 - 10:39 am

Thanks

Reply
therichpost April 12, 2023 - 10:43 am

Thanks and welcome.

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.