Original Post : react bootstrap table
MDBDataTable is a React Bootstrap Table component one needs to install it using the following command and pass data for table and pagination.
How to install
npm install mdbreact --save
Link where one find npm package
https://www.npmjs.com/package/mdbreact
React Bootstrap Table (Code Example)
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { MDBDataTable } from "mdbreact";
const data = {
columns: [
{
label: "Name",
field: "name",
sort: "asc",
width: 150,
},
{
label: "Position",
field: "position",
sort: "asc",
width: 270,
},
{
label: "Office",
field: "office",
sort: "asc",
width: 200,
},
{
label: "Age",
field: "age",
sort: "asc",
width: 100,
},
{
label: "Start date",
field: "date",
sort: "asc",
width: 150,
},
{
label: "Salary",
field: "salary",
sort: "asc",
width: 100,
},
],
rows: [
{
name: "Nix",
position: "Architect",
office: "New City",
age: "34",
date: "2011/04/25",
salary: "$220",
},
{
name: "Wix",
position: "Accountant",
office: "Tokyo",
age: "63",
date: "2011/07/25",
salary: "$170",
},
],
};
export default function App() {
return (
<div className="App">
<MDBDataTable striped bordered small data={data} />
</div>
);
}
Top comments (0)