Mui DataTable 自定义摘要页脚

Question

给出以下示例：https://codesandbox.io/s/l49mrmvj67 是否可以添加一个自定义页脚来汇总当前页面的薪资列并将其显示在页脚中？

感谢您的帮助。

Answer 1

为简单起见，我将所有内容都放在同一个组件中：

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"));

如果是销售，您只需要找到当前显示的数据对象（当前页面）的开始和结束索引。使用这两个你可以简单地添加子数组的销售额。

如果您有任何问题，请告诉我。

Answer 2

您可以在 mui 数据table 选项中使用 customTableBodyFooterRender 来创建响应列的自定义页脚。我使用 mui 数据 table 创建了总分的 table 页脚。 https://codesandbox.io/s/mui-datatable-custom-footer-rfu9zk 例如： https://i.stack.imgur.com/E8lg8.png

Mui DataTable 自定义摘要页脚

Mui DataTable custom summary footer

reactjs

single-page-application

mui-datatable