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
- How To Install React App On Windows 10
- React Axios – Make HTTP GET Requests Example
- React Axios – Make HTTP POST Requests Example
- React Get Form Values On Submit Tutorial
- React Tutorial – How To Use Font Awesome 5 in React
- React 17 Axios File Upload Example
- React js Get Multiple Checkbox Value On Submit
- How to Get Current Date and Time in React Apps
- React 17 Hide Show Toggle Tutorial
- React Bootstrap Modal – Implement Bootstrap Modal Ex
- React Image Upload With Preview Tutorial
- React Select Dropdown With Bootstrap Example
- React Custom Email Validation Tutorial
- React Bootstrap Navbar Tutorial Example
- Bootstrap Carousel Slider in React Apps