DEV Community

Cover image for Data-Tables in React.js made easy with MDBReact
Farooq khan
Farooq khan

Posted on

Data-Tables in React.js made easy with MDBReact

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
Enter fullscreen mode Exit fullscreen mode

Now, go to reactDb Folder,

cd reactDb
Enter fullscreen mode Exit fullscreen mode

Then, Install mdbreact package into our project by using,

npm install --save mdbreact
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
};
Enter fullscreen mode Exit fullscreen mode

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} />;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
shaliniguptakibbcom profile image
Shalini Gupta

For age column if we use three digit number or more or less then the sorting is not working properly.