'Mui DataTable custom summary footer

Given the follow example: https://codesandbox.io/s/l49mrmvj67 Will it be possible to add a custom footer that will sum the current page Salary column and display it in the footer?

Thanks for the help.

Solution 1:^[1]

For simplicity I put everything in the same component:

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { TableFooter, TableCell, TableRow } from "@material-ui/core";

class App extends React.Component {
  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    let data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, 200000],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
      ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
      ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
      [
        "Addison Navarro",
        "Business Management Analyst",
        "New York",
        50,
        295000
      ],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
      ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
      [
        "Gabby Strickland",
        "Business Process Consultant",
        "Scottsdale",
        26,
        45000
      ],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
    ];

    const options = {
      filter: true,
      selectableRows: true,
      filterType: "dropdown",
      rowsPerPage: 3,
      customFooter: (
        count,
        page,
        rowsPerPage,
        changeRowsPerPage,
        changePage
      ) => {
        const startIndex = page * rowsPerPage;
        const endIndex = (page + 1) * rowsPerPage;
        return (
          <TableFooter>
            <TableRow>
              <TableCell colSpan={6}>
                Total Salery for current page: {sumSalery(startIndex, endIndex)}
              </TableCell>
            </TableRow>
          </TableFooter>
        );
      }
    };

    const sumSalery = (startIndex, endIndex) => {
      return data
        .slice(startIndex, endIndex)
        .map(a => a[4])
        .reduce((total, salery) => (total += salery), 0);
    };

    return (
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

In case of the salery you just need to find the start and end index of the data object that is currently displayed (the current page). Using these two you can simply add up the saleries of the sub array.

If you have any questions let me know.

Solution 2:^[2]

You can use customTableBodyFooterRender in mui datatable options to create custom footer which is responsive with the columns. I have created a table footer for total marks using mui datatable. https://codesandbox.io/s/mui-datatable-custom-footer-rfu9zk Eg: https://i.stack.imgur.com/E8lg8.png

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Klaus
Solution 2	Ganesh Tatkare

'Mui DataTable custom summary footer

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]