Responsive React Table With Mui-datatables With Footer

In this article we will see how to create responsive data table in react applications using mui-datatables npm package with custom footer.

First install the npm package for mui-datatables using the below command
npm install mui-datatables — save
You can read the complete documentation for mui-datatables on
https://www.npmjs.com/package/mui-datatables

I will take you through the process with one example

You can directly get the code for the abv example in the below sandbox link.
https://codesandbox.io/s/mui-datatable-custom-footer-rfu9zk

Step 1:
Write the columns you need for your table. Columns is an array of objects containing the name, label and additional options for that particular column.

const columns = [
 { name: "firstName", label: "First Name" },
 { name: "english", lable: "English" },
 { name: "maths", label: "Maths" },
 { name: "science", label: "Science" }
];

Step 2:
Get the data that you want to display in your table. Data is also an array of objects with keys as columns name.

const tableData = [
 { firstName: "Ganesh", english: 70, maths: 90, science: 100 },
 { firstName: "Patil", english: 90, maths: 95, science: 100 },
 { firstName: "Michael", english: 100, maths: 100, science: 100 },
 { firstName: "Dwight", english: 60, maths: 80, science: 90 },
];

Step 3:
At the top of your code, import the datatables using
import MUIDataTable from “mui-datatables”;
Use the imported components and give the title, data, columns and options as props to the components.

<MUIDataTable
  title="Custom Footer Table"
  data={tableData}
  columns={columns}
  options={options}
/>

Adding Custom Footer Responsive with Columns

After creating the table using the basic settings, if we further want to customize the table, we can use the options prop provided by mui-datatables to add additional setting to our table.
In this example I'll be adding a custom Total footer at the bottom of the table which is responsive wrt the table columns.

For adding custom footer, the package provides two different options.
customFooter , customTableBodyFooterRender

For creating a footer which is responsive wrt columns, we have to use the later option.
customTableBodyFooterRender takes (args) as parameter and callback function which return the footer.
args => data, count, columns, selectedRows, selectableRows.

customTableBodyFooterRender: (opts) => {
const startIndex = page * rowsPerPage;
const endIndex = (page + 1) * rowsPerPage;
let sumEnglish = opts.data.slice(startIndex, endIndex).reduce((accu, item) => {return accu + item.data[1];}, 0);
let sumMaths = opts.data?.slice(startIndex, endIndex)?.reduce((accu, item) => {return accu + item.data[2];}, 0);
let sumScience = opts.data.slice(startIndex, endIndex).reduce((accu, item) => {return accu + item.data[3];}, 0);
return (
<>
 {tableData.length > 0 && (
  <TableFooter className={classes.footerCell}>
   <TableRow>
    {opts.columns.map((col, index) => {
     if (col.display === "true") {
     if (col.name === "firstName") {
      return (
       <TableCell key={index} className={classes.footerCell}>
         Total
       </TableCell>
      );
     }
     else if (col.name === "english") {
       return (
        <TableCell key={index} className={classes.footerCell}>
          {sumEnglish}
        </TableCell>
       );
     }
     else if (col.name === "maths") {
       return (
         <TableCell key={index} className={classes.footerCell}>
          {sumMaths}
         </TableCell>
       );
     }
     else if (col.name === "science") {
       return (
         <TableCell key={index} className={classes.footerCell}>
          {sumScience}
         </TableCell>
       );
     }
    }
   })}
  </TableRow>
 </TableFooter>
 )}
</>
);
}

In the above code you can see two const startIndex, endIndex.
When the data gets bigger mui-datatable provides pagination at the bottom of the table with option to change the Rows per page & Page.

To keep the Total footer consistent with the number of rows and page number, we need to keep track of the rows per page & page number options. To do so, we have to create two states for rowsPerPage, page.

const [rowsPerPage, setRowsPerPage] = useState(10);
const [page, setPage] = useState(0);

These states will change when any of the option changes. To capture these change, mui-datatables provide two options given below:

onChangeRowsPerPage(numberOfRows) {
  setRowsPerPage(numberOfRows);
},
onChangePage(page) {
  setPage(page);
},

You can directly get the code in the below sandbox link.
https://codesandbox.io/s/mui-datatable-custom-footer-rfu9zk

Thanks for reading the article

THE END