How To Integrate Bootstrap Datatable In ReactJs

In this article, we will learn how to integrate bootstrap datatable in react.

-Let’s build a React application and integrate the bootstrap data table into it.

–First of all, we have create react application.

–Then create an App.js file inside the src directory.

-After creating the App.js application, Install the required module using the below command

npm i react-bootstrap-table-next

-Write the below code in your file:

import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
function App() {

  const columns = [
    {
      dataField: 'id',
      text: 'Id'
    },,
    {
      dataField: 'firstname',
      text: 'FirstName'
    },
    {
      dataField: 'lastname',
      text: 'LastName'
    },
    {
      dataField: 'status',
      text: 'Status'
    },
  ];

  let data =[
    {
      id:1,
      firstname:"test1",
      lastname:"aaa",
      status:"Active"
    },
    {
      id:2,
      firstname:"test2",
      lastname:"bbbb",
      status:"InActive"
    },
    {
      id:3,
      firstname:"test3",
      lastname:"ddd",
      status:"Active"
    },

  ]
  return (
    <div>
      <BootstrapTable keyField='id' data={data} columns={columns} />
    </div>
  )
}

export default App

output:

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories