Javascript 总结性反应

我有一个显示值的表格

我想添加一行，包含每列的总计

const MyComponent = () => {
  <Grid item container md={6} direction="row">
    <Table
      className="seasonTable"
      toolbar={false}
      columns={[
        {
          field: "process",
          title: "Proceso",
          render: (row) => {
            return row.process;
          },
        },
        {
          field: "current_season",
          title: "Temporada actual (" + seasons[2].name + ")",
          render: (row) => {
            return row.season1;
          },
        },
        {
          field: "previuos_season",
          title: "Temporada anterior (" + seasons[1].name + ")",
          render: (row) => {
            return row.season2;
          },
        },
        {
          field: "two seasons ago",
          title: "Temporada anterior (" + seasons[0].name + ")",
          render: (row) => {
            return row.season3;
          },
        },
      ]}
      data={filterProcessData()}
    ></Table>
  </Grid>;
};

我是全新的反应，但我必须做这个改变

这是我目前正在做的工作，我想在每一列的末尾加上总数

const MyComponent = () => {
  <Grid item container md={6} direction="row">
    <Table
      className="seasonTable"
      toolbar={false}
      columns={[
        {
          field: "process",
          title: "Proceso",
          render: (row) => {
            return row.process;
          },
        },
        {
          field: "current_season",
          title: "Temporada actual (" + seasons[2].name + ")",
          render: (row) => {
            return row.season1;
          },
        },
        {
          field: "previuos_season",
          title: "Temporada anterior (" + seasons[1].name + ")",
          render: (row) => {
            return row.season2;
          },
        },
        {
          field: "two seasons ago",
          title: "Temporada anterior (" + seasons[0].name + ")",
          render: (row) => {
            return row.season3;
          },
        },
      ]}
      data={filterProcessData()}
    ></Table>
  </Grid>;
};

我该怎么做？

---

非常感谢。

将每列的总和显示为最后一行：

将额外的合计行添加到您的

过滤器数据中

：

function filterProcessData() {
    const filterData = [];

    waterFootprintEvolution.forEach((item) => {
        ...
    });

    const total = { process: "Totals", season1: 0, season2: 0, season3: 0 };
    filterData.forEach(row => {
        total.season1 += row.season1;
        total.season2 += row.season2;
        total.season3 += row.season3;
    });
    filterData.push(total);
    return filterData;
}

filterData.push ({
    process: item.name,
    season1: item.data[2].total,
    season2: item.data[1].total,
    season3: item.data[0].total,
    total: item.data[2].total + item.data[1].total + item.data[0].total
});

{
    field: "total",
    title: "Total",
    render: row => {
        return row.season1 + row.season2 + row.season3
    }
}

---

---

将每行的总和显示为最后一列：

您不能为您的

总数添加一个新列吗

：

{
    field: "total",
    title: "Total",
    render: row => {
        return row.total
    }
}

并将一个新的对应的

total

字段添加到推入

filterData

的对象中：

function filterProcessData() {
    const filterData = [];

    waterFootprintEvolution.forEach((item) => {
        ...
    });

    const total = { process: "Totals", season1: 0, season2: 0, season3: 0 };
    filterData.forEach(row => {
        total.season1 += row.season1;
        total.season2 += row.season2;
        total.season3 += row.season3;
    });
    filterData.push(total);
    return filterData;
}

filterData.push ({
    process: item.name,
    season1: item.data[2].total,
    season2: item.data[1].total,
    season3: item.data[0].total,
    total: item.data[2].total + item.data[1].total + item.data[0].total
});

{
    field: "total",
    title: "Total",
    render: row => {
        return row.season1 + row.season2 + row.season3
    }
}

或者，对您的列所做的更改就足够了（在

filterData

中不需要额外的字段）：

---

非常感谢你。使用该选项可以对列进行求和，但我希望显示每列的总和。我已添加代码，以对每列的所有值进行求和，并将它们作为新行添加到

filterData

（我答案的第一个代码块）的末尾。您刚刚救了我的命。主会赏赐你很多孩子，欢迎你。如果答案能解决你的问题，你能接受吗？谢谢