MUI-Datatable：如何显示整列的总和？

Question

我有Total Amount这一栏，如何显示totalAmount？

根据我的研究，我可以使用 onTableChange。它目前正确的做法是显示所有数据。这是 console.log("handleTableChange: ", JSON.stringify(tableState.data));

tableStateData = [
  {
    index: 0,
    data: [
      "0q0QY5j46rpd2Cqk3Tyo",
      "Anna",
      "US",
      [
        {
          color: "Black",
          size: "500",
          quantity: 2,
          id: "aRLMZkiSU7T0lcsPCSsV",
          cat: "ML",
          name: "Tumbler",
          price: 200
        }
      ],
      400
    ]
  },
  {
    index: 1,
    data: [
      "8NhUUD690QXCol41IVB1",
      "Anna",
      "US",
      [
        {
          size: "500",
          color: "Green",
          id: "aRLMZkiSU7T0lcsPCSsV",
          price: 200,
          name: "Tumbler",
          quantity: 2,
          cat: "ML"
        },
        {
          id: "aRLMZkiSU7T0lcsPCSsV",
          name: "Tumbler",
          color: "Black",
          cat: "ML",
          size: "500",
          quantity: 1,
          price: 200
        },
        {
          price: 200,
          color: "Pink",
          quantity: 1,
          id: "aRLMZkiSU7T0lcsPCSsV",
          size: "500",
          name: "Tumbler",
          cat: "ML"
        },
        {
          size: "XL",
          color: "Pink",
          id: "hdrezmDjPXcBVfYkusie",
          quantity: 1,
          name: "Shirt",
          price: 500,
          cat: "L-XXL"
        },
        {
          size: "XL",
          color: "Green",
          cat: "L-XXL",
          id: "hdrezmDjPXcBVfYkusie",
          name: "Shirt",
          quantity: 1,
          price: 500
        }
      ],
      1800
    ]
  },
  {
    index: 2,
    data: [
      "JHof5tGxvV3WXDCgcbxG",
      "Anna",
      "US",
      [
        {
          color: "Blue",
          price: 300,
          size: "L",
          quantity: 2,
          name: "Shirt",
          id: "uTHIR6OQFRuqP9Drft0e",
          cat: "S-L"
        },
        {
          size: "L",
          color: "Black",
          name: "Shirt",
          price: 300,
          cat: "S-L",
          quantity: 3,
          id: "uTHIR6OQFRuqP9Drft0e"
        }
      ],
      1500
    ]
  }
];

不过，我不确定如何显示所有 totalAmount 的总和，这里数据中的 totalAmount 是 400、1800, 和 1500.

如有任何帮助，我们将不胜感激。谢谢。

codesandbox: https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/data.js

export default function App() {
  console.log(data);
  const columns = [
    {
      name: "totalAmount",
      label: "Total Amount",
      options: {
        filter: true,
        sort: true
      }
    }
  ];
  const options = {
    filter: true,
    selectableRows: "none",
    responsive: "scrollMaxHeight",
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(rowData);
      return (
        <tr>
          <td colSpan={4}>
            <TableContainer>
              <Table style={{ margin: "0 auto" }}>
                <TableHead>
                  <TableCell align="right">Name</TableCell>
                  <TableCell align="right">Color</TableCell>
                </TableHead>
                <TableBody>
                  {rowData[3].map((row) => {
                    console.log(row);
                    return (
                      <TableRow key={row.id}>
                        <TableCell component="th" scope="row" align="right">
                          {row.name}
                        </TableCell>
                        <TableCell align="right">{row.color}</TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          </td>
        </tr>
      );
    }
  };
  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        {" "}
        <MUIDataTable
          title={"Reports"}
          options={options}
          columns={columns}
          data={data}
        />
      </ThemeProvider>
    </div>
  );
}

Answer 1

您需要通过在选项对象中设置 customFooter 来创建自定义页脚。

然后，您需要将总金额存储在状态中并在每次 table 状态更改时更新它（为此您可以使用 onTableChange prop）并在 [=19] 中呈现该值=]页脚。

我创建了一个完整的解决方案here

MUI-Datatable：如何显示整列的总和？

MUI-Datatable: How can I display the sum of the entire column?

javascript

reactjs

material-ui

mui-datatable