总结反应

Question

我有一张表，我在那里显示值。

我想要添加一个行，它是每个列的总数。

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>;
};

然后，如图像中所示，显示表。

/**
 * filterProcessData
 */
function filterProcessData() {
  /** @const filterData Array */
  const filterData = [];

  // Filter water foot print
  waterFootprintEvolution.forEach((item) => {
    // If specific process was selected then filter the others
    if (processSelected != "all" && processSelected.id != item.id) {
      return true;
    }

    // Attach data
    // @todo Modify data for the selected seasons
    filterData.push({
      process: item.name,
      season1: item.data[2].total,
      season2: item.data[1].total,
      season3: item.data[0].total,
    });
  });

  return filterData;
}

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

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

​

我怎么能这么做？非常感谢。

Answer 1

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

在您的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;
}

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

你就不能为你的total添加一个新列吗？

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

并向被推入filterData的对象中添加一个新的相应的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
});

或者，对列的更改甚至已经足够了(filterData中不需要额外的字段)：

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