Summatory React

Question

I have a table where i display values.

I want to add a row that contaisn the totals for each column.

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

And then i display the table as shown in the image.

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

I am totally new to React but i have to do this change.

This is what i have working at the moment and i want to add the totals at the end of each column.

How can i do that? Thank you so much.

Answer 1

Display sums of each column as last row:

Add an additonal total line to your 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;
}

---

Display sums of each row as last column:

Can't you just add a new column for your total:

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

And add a new corresponding total field to the object which is pushed into 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
});

OR maybe this change to your columns is even enough (no extra field needed in filterData):

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