Mui-dataTables：如何显示整列的总和？

Question

我有总金额，我如何显示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

的总和，并且数据中的总计是

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

来创建自定义页脚。

然后，您需要将总金额存储在状态中，并在每次表状态更改（可以使用

onTableChange

prop）并在表页台上渲染该值。

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