React Datatables with Dynamic Data Example

React Datatables with Dynamic Data Example

React js datatable example; In this tutorial, you will learn how to integrate dataTables and display dynamic data in react application using jQuery, datatable, bootstrap 4 and axios plugin.

If you want to integrate DataTable in your react app. Want to show any list using end datable. So in this tutorial, you will learn how to integrate a DataTable and show a list with the help of a DataTable.

This example tutorial will create simple list and display dynamic data from server in react js app. And this list contains of users details.

How to Display Data using DataTable In React Js

  • Step 1 – Create New React App
  • Step 2 – Install React-Select and Bootstrap 4
  • Step 3 – Install jQuey and DataTable Library
  • Step 4 – Create List Component
  • Step 5 – Add Component in App.js
  • Step 6 – Create getList.php File

Step 1 – Create New React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios and Bootstrap 4

In this step, execute the following command on terminal install Axios and bootstrap 4 libraries into your react app:

npm install bootstrap --save

npm install axios --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>React js Datatables with Dynamic Data Example</h2>
    </div>
  );
}

export default App;

Step 3 – Install jQuey and DataTable Library

In this step, execute the following command on terminal to jQuey and DataTable libraries into your react app:

npm install --save datatables.net-dt

npm install jquery --save

Step 4 – Create List Component

Now, visit the src directory of your react js app and create a list component named ListComponent.js. And add the following code into it:

import React from 'react';

import './App.css';

//jQuery libraries

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 $ from 'jquery'; 

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

class ListComponent extends 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('http://localhost/getList.php').then(res => 
        {
          //Storing users detail in state array object
          this.setState({data: res.data});
        
        }); 
    //initialize datatable
    $(document).ready(function () {
        setTimeout(function(){
        $('#example').DataTable();
         } ,1000);
    });
 }
  render(){
    //Datatable HTML
  return (
    <div className="MainDiv">
      <div class="jumbotron text-center">
          <h3>LaraTutorials.com</h3>
      </div>
      
      <div className="container">
          
          <table id="example" class="table table-hover table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Email</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
          {this.state.data.map((result) => {
            return (
             
                 <tr>
                  <td>{result.id}</td>
                  <td>{result.email}</td>
                  <td>{result.username}</td>
                </tr>
             
            )
          })}
           
            
          </tbody>
        </table>
          
        </div>
      </div>
  );
 }
}
export default ListComponent;

Step 5 – Add Component in App.js

In this step, you need to add the ListComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import ListComponent from './ListComponent'

function App() {  
    
  return (  
    <div className="App">  
      <ListComponent/>  
    </div>  
  );  
}  

export default App;

Step 6 – Create getList.php File

In this step, create a new file getList.php and add the following code into it:

<?php
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "users";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
    //Getting data query
    $trp = mysqli_query($conn, "SELECT * from userdetails");
    $rows = array();
    while($r = mysqli_fetch_assoc($trp)) {
        $rows[] = $r;
    }
    print json_encode($rows);

?>

Conclusion

React js datatable example; In this tutorial, you have learned how to integrate dataTables and display dynamic data in react application using jQuery, datatable, bootstrap 4 and axios plugin.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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