in this post, I will let you know how to integrate Datatable in react application. We’ll create a listing of data and edit, delete and view action buttons.
jQuery DataTables is a very popular JavaScript library to convert simple HTML tables into the feature-rich grids.jQuery will help to get records from the database.
React Bootstrap Datatable Sample Example
Let’s create react app and integrate the bootstrap data table with this project.
create React app
We’ll use Create-React-App (CRA) for the scaffolding of our react example application. if you don’t have it installed already in your system and initialize a new project using the “create-react-app” command.
npx create-react-app datatable-example
move to the directory:
cd datatable-example
install dependencies
npm install react-data-table-component npm install styled-components npm install axios npm install react-bootstrap
Create Data Service
Now, we’ll create service file dummy.js
under src/api/
folder. We’ll create client from third party API.
//src/api/dummy.js import axios from 'axios'; export default axios.create({ baseURL: 'https://reqres.in/api', headers: { }, });
Integrate with react app
Let’s import the client and all dependencies at the top of the file. I have also imported the bootstrap CSS file.
import React,{ useState, useMemo, useEffect } from 'react'; import DataTable from 'react-data-table-component'; import dummy from './api/dummy' import 'bootstrap/dist/css/bootstrap.min.css'; function App() { const [selectedRows, setSelectedRows] = useState([]); const [res, setRes] = useState([]); const handleChange = value => { setSelectedRows(value); } const editRow = event => { console.log(event.target.id); }; const deleteRow = event => { console.log(event.target.id); }; const viewRow = event => { console.log(event.target.id); } const columns = useMemo( () => [ { name: 'Name', selector: row => row.name, sortable: true, grow: 2, }, { name: 'Type', selector: row => row.year, sortable: true, }, { name: 'Color', selector: row => row.color, sortable: true, right: true, }, { name:"Action", cell: (row) => <div className="btn-group" role="group" aria-label="Basic example"> <button type="button" id={row.id} onClick={editRow} className="btn btn-primary">Edit</button> <button type="button" id={row.id} onClick={viewRow} className="btn btn-warning">View</button> <button type="button" id={row.id} onClick={deleteRow} className="btn btn-danger">Delete</button> </div>, ignoreRowClick: true, allowOverflow: true, selector: false }, ],[], ); const fetchData = () => { return dummy.get('/list').then(result => { const res = result.data.data; console.log(res); setRes(res); }); } useEffect(() => { fetchData(); //console.log('state', selectedRows); }, []); return ( <div className="App"> <DataTable title="List" data={res} columns={columns} theme="dark" selectableRows pagination onSelectedRowsChange={handleChange} /> </div> ); } export default App;
We have created fetchData()
method that will fetch data from API and store it into the state variable. This method will call into useEffect
hooks.
We have also integrated action buttons(edit, delete and view), Also attached events for that and defined them.