Data-Tables in React.js made easy with MDBReact

#react #javascript #reactnative #datatables

Over the last 3 months, I have been working on a project with React.js .
I'm trying to add DataTables.net into my react project and I failed in all the way I have tried. Finally I came to conclusion that, it's almost impossible to add data-tables into react. Then I discovered a package MDBReact Link to mdbreact which is actually a product of MDBootstrap .
Then It became easy to add datatables into my react project and the main thing is , it is customizable .
In this post, we are going to see how to add data-tables into our existing react project.
First, create new react project using

create-react-app reactDb

Now, go to reactDb Folder,

cd reactDb

Then, Install mdbreact package into our project by using,

npm install --save mdbreact

Now, Import the styles files into your src/index.js file using,

import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

Now all you have to do is to open your App.js . And import mdbreact package with MDBDatatable .
Add the following line in top of your App.js file ,

import React from "react";
import { MDBDataTable } from "mdbreact";

Then Define few values which we needs to show in datatables.
You can define it as const as of now, or you can define the data as state which is changeable when state updated.

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: "Tiger Nixon",
      position: "System Architect",
      office: "Edinburgh",
      age: "61",
      date: "2011/04/25",
      salary: "$320"
    },
    {
      name: "Yuri Berry",
      position: "Chief Marketing Officer (CMO)",
      office: "New York",
      age: "40",
      date: "2009/06/25",
      salary: "$675"
    },
    {
      name: "Caesar Vance",
      position: "Pre-Sales Support",
      office: "New York",
      age: "21",
      date: "2011/12/12",
      salary: "$106"
    },
    {
      name: "Doris Wilder",
      position: "Sales Assistant",
      office: "Sidney",
      age: "23",
      date: "2010/09/20",
      salary: "$85"
    },
    {
      name: "Angelica Ramos",
      position: "Chief Executive Officer (CEO)",
      office: "London",
      age: "47",
      date: "2009/10/09",
      salary: "$1"
    },
    {
      name: "Gavin Joyce",
      position: "Developer",
      office: "Edinburgh",
      age: "42",
      date: "2010/12/22",
      salary: "$92"
    },
    {
      name: "Jennifer Chang",
      position: "Regional Director",
      office: "Singapore",
      age: "28",
      date: "2010/11/14",
      salary: "$357"
    },
    {
      name: "Brenden Wagner",
      position: "Software Engineer",
      office: "San Francisco",
      age: "28",
      date: "2011/06/07",
      salary: "$206"
    },
    {
      name: "Fiona Green",
      position: "Chief Operating Officer (COO)",
      office: "San Francisco",
      age: "48",
      date: "2010/03/11",
      salary: "$850"
    },
    {
      name: "Shou Itou",
      position: "Regional Marketing",
      office: "Tokyo",
      age: "20",
      date: "2011/08/14",
      salary: "$163"
    },
    {
      name: "Michelle House",
      position: "Integration Specialist",
      office: "Sidney",
      age: "37",
      date: "2011/06/02",
      salary: "$95"
    },
    {
      name: "Suki Burks",
      position: "Developer",
      office: "London",
      age: "53",
      date: "2009/10/22",
      salary: "$114"
    },
    {
      name: "Prescott Bartlett",
      position: "Technical Author",
      office: "London",
      age: "27",
      date: "2011/05/07",
      salary: "$145"
    },
    {
      name: "Gavin Cortez",
      position: "Team Leader",
      office: "San Francisco",
      age: "22",
      date: "2008/10/26",
      salary: "$235"
    },

    {
      name: "Hermione Butler",
      position: "Regional Director",
      office: "London",
      age: "47",
      date: "2011/03/21",
      salary: "$356"
    },
    {
      name: "Lael Greer",
      position: "Systems Administrator",
      office: "London",
      age: "21",
      date: "2009/02/27",
      salary: "$103"
    },
    {
      name: "Jonas Alexander",
      position: "Developer",
      office: "San Francisco",
      age: "30",
      date: "2010/07/14",
      salary: "$86"
    },
    {
      name: "Shad Decker",
      position: "Regional Director",
      office: "Edinburgh",
      age: "51",
      date: "2008/11/13",
      salary: "$183"
    },
    {
      name: "Michael Bruce",
      position: "Javascript Developer",
      office: "Singapore",
      age: "29",
      date: "2011/06/27",
      salary: "$183"
    },
    {
      name: "Donna Snider",
      position: "Customer Support",
      office: "New York",
      age: "27",
      date: "2011/01/25",
      salary: "$112"
    }
  ]
};

I just added 20 data into table . Then in your render function , return the MDBDatatable component by using ,

export default function App() {
  return <MDBDataTable striped bordered hover data={data} />;
}

Now you can able to see the datatable with search, pagination, sorting options.
It's easy right?
I have added my codesandbox code Below. You can try it easily.
And don't forget to check other components in mdbreact here.