React DataTables | Dynamic Data in React DataTable

React js datatable example; In this tutorial, i will completely guide you on how to integrate dataTables a in react application using jQuery, datatable, bootstrap 4 and axios plugin and show dynamic data on tables.

The DataTable component for ReactJS represents a lightweight Table widget built to easily replace your HTML Tables.

In this react datatables example tutorial; i will create list and show dynamic data from server in react js app.

How to Display Dynamic Data using NPM 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 – Import List Component in App.js
  • Step 6 – Create getList.php File

Step 1 – Create New React App

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

Execute the following command on terminal install Axios and bootstrap 4 libraries into your react app:

npm install bootstrap --save

npm install axios --save

Import 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

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

Open 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 – Import Component in App.js

Import 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

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 Tutorials

Leave a Comment