How To Use MDbootstrap Data Table In ReactJS

In this article, we will learn how to use mdboostrap data table in reactjs.

-In react we need to install npm mdbreact.

-first, open the react project and then import the below package.

npm i mdbreact

-then import this package and CSS in your app.js file.

import { MDBDataTable } from 'mdbreact';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

-write the below code for rows and columns data.

const data = {
      columns: [
          {
              label: 'First Name',
              field: 'firstname',
              sort: 'asc',
              width: 150
          },
          {
              label: 'Last Name',
              field: 'lastname',
              sort: 'asc',
              width: 270
          },
          {
              label: 'Mobile No',
              field: 'mobileno',
              width: 200
          },
          {
              label: 'Age',
              field: 'age',
              sort: 'asc',
              width: 100
          },
          {
              label: 'BirthDate',
              field: 'birthdate',
              sort: 'asc',
              width: 150
          },
          {
              label: 'Gender',
              field: 'gender',
              sort: 'asc',
              width: 100
          }
      ],
      rows: [
          {
              firstname: 'siya',
              lastname: 'patel',
              mobileno: '98765445678',
              age: '21',
              birthdate: '2001/04/25',
              gender: 'female'
          },
          {
              firstname: 'riya',
              lastname: 'shah',
              mobileno: '8978675645',
              age: '21',
              birthdate: '2001/01/05',
              gender: 'female'
          },
          {
              firstname: 'mehul',
              lastname: 'verma',
              mobileno: '87687685478',
              age: '22',
              birthdate: '2000/02/15',
              gender: 'male'
          },
          {
              firstname: 'Sonya',
              lastname: 'Frost',
              mobileno: '84563434543',
              age: '20',
              birthdate: '2002/09/23',
              gender: 'female'
          },
          {
              firstname: 'Thor',
              lastname: 'Walton',
              mobileno: '6585685654',
              age: '23',
              birthdate: '1999/02/11',
              gender: 'male'
          },
          {
              firstname: 'kishan',
              lastname: 'Burks',
              mobileno: '768678765',
              age: '23',
              birthdate: '1999/09/10',
              gender: 'male'
          },
          {
              firstname: 'Thor',
              lastname: 'Walton',
              mobileno: '6585685654',
              age: '23',
              birthdate: '1999/02/11',
              gender: 'male'
          },
          {
              firstname: 'kishan',
              lastname: 'Burks',
              mobileno: '768678765',
              age: '23',
              birthdate: '1999/09/10',
              gender: 'male'
          },  {
              firstname: 'Thor',
              lastname: 'Walton',
              mobileno: '6585685654',
              age: '23',
              birthdate: '1999/02/11',
              gender: 'male'
          },
          {
              firstname: 'kishan',
              lastname: 'Burks',
              mobileno: '768678765',
              age: '23',
              birthdate: '1999/09/10',
              gender: 'male'
          },      {
              firstname: 'siya',
              lastname: 'patel',
              mobileno: '98765445678',
              age: '21',
              birthdate: '2001/04/25',
              gender: 'female'
          },
          {
              firstname: 'riya',
              lastname: 'shah',
              mobileno: '8978675645',
              age: '21',
              birthdate: '2001/01/05',
              gender: 'female'
          },
      ]
  };

-after that add the  MDBdatatable

<MDBDataTable
 striped
 bordered
 small
 hover
 data={data}
 />

output: