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:
