How To Integrate Bootstrap Datatable in React

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.