In this tutorial, you will learn how to show dynamic data in a table using jQuery DataTable in React JS applications.
How to Display Data in Table using jQuery DataTable In React Js
Steps to create a table and display dynamic data from the server into it using jQuery dataTable and axios HTTP client:
Step 1 – Create a New React App
In this step, open your cmd and run the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, run the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install and Set Up Axios, Bootstrap
Run the following command on the terminal install Axios and bootstrap libraries into your react app:
npm install bootstrap --save npm install axios --save
Set up 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 – Set up jQuey and DataTable
Run the following command on cmd to install jQuey DataTable libraries into your react app:
npm install --save datatables.net-dt npm install jquery --save
Step 4 – Create Table Component
Create the ListComponent.js DataTable component in the src directory:
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
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 = "demo";
// 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 users");
$rows = array();
while($r = mysqli_fetch_assoc($trp)) {
$rows[] = $r;
}
print json_encode($rows);
?>
Conclusion
That’s it, you have learned how to integrate dataTables and display dynamic data in react application using jQuery, datatable, bootstrap and axios plugin.
