Home / Questions / 550404
Accepted
Giovanny
Asked: 2022-08-07 06:56:44 +0800 CST 2022-08-07 06:56:44 +0800 CST

dynamic sum of all values ​​of a column - reactjs

  • 772

Good morning, I have a table "https://material-table-core.com/demos/Summaryrow/basic" in reactjs and I need all the values ​​of the value_t2 column to be added and show me the result at the end of the table . The table is already adding the values ​​of the column value_t2 but I need that when interacting with the default search of the table, the final value is also updated. When the table loads, the sum appears without problems, but when it interacted with the search engine that appears by default for the table, the value of the sum does not change and I need it to be dynamic and add only what is in the table.

//code https://codesandbox.io/s/amazing-rumple-x6fzwi?file=/src/App.js

import React, { useState, useEffect } from "react";
import MaterialTable from "@material-table/core";

import axios from "axios";

function App() {
  const [data, setData] = useState([]);

  const peticionGet = async () => {
    await axios
      .get(
        `https://parqueoenvia.co/apiParqueoenvia/operadores/arqueo_cargar.php?id_operador=59`
      )
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    const interval = setInterval(() => {
      peticionGet();
    }, 3000);

    return () => setInterval(interval);
  }, []);

  const columnas = [
    {
      title: "FECHA",
      field: "fecha_hora"
    },

    {
      title: "age",
      field: "valor_t2"
    }
  ];

  return (
    <div id="content" className="app-content">
      <div className="panel-body">
        {data.length === 0 ? (
          <p>cargando...</p>
        ) : (
          <MaterialTable
            columns={columnas}
            data={data}
            // title={ }
            // backIconButtonText='Página anterior'
            pagination
            fixedHeader
            renderSummaryRow={({ column, data }) =>
              column.field === "valor_t2"
                ? {
                    value: data.reduce(
                      (agg, row) => agg + Number(row.valor_t2),
                      0
                    ),
                    style: { background: "red" }
                  }
                : undefined
            }
            actions={[]}
            options={{
              actionsColumnIndex: -1,
              actionsCellStyle: {},

              body: {
                emptyDataSourceMessage: "No hay registros que mostrar"
              }
            }}
          />
        )}
      </div>
    </div>
  );
}

export default App;

reactjs

1 Answers

  1. Best Answer

    Problem 1:

    load the result of the sum of the data in the table

    I recommend that to load your information and avoid unnecessary requests to your endpoint, I recommend that you useuseEffect

    useEffect(() => {
  peticionGet();
}, []);

    It seems to be a direct problem with the renderSummaryRow. Since the supposedly loaded data does not recognize them, so a quick solution would be to wait for the endpoint request to finish, once the data is loaded now if we request to show your table already with data.

    We can do this in the following way.

    {
  data.length === 0 
    ? <p>cargando...</p>
    : <MaterialTable 
    ...
    />
}

    Problem 2:

    Get the result of the sum of the data in the table when searching

    In the absence of information on what has already been tried, some minimal example of what you want to achieve or even know if it gives a specific error. I solve this as I do the fastest way, due to the limitations of@material-table

    Since it renderSummaryRowdoes not provide the correct information for the data being displayed in the table, we will use an useStateextra.

    const [total, setTotal] = useState(0);

    I recommend that your first load be done when you get the information, which would be in peticionGet, example:

    const peticionGet = async () => {
  await axios
    .get(
      `https://parqueoenvia.co/apiParqueoenvia/operadores/arqueo_cargar.php?id_operador=59`
    )
    .then((response) => {
      const encontrado = response.data.map(value =>parseFloat(value.valor_t2));
      if (encontrado.length > 0) {
        const totalEncontrado = encontrado.reduce((prev,current)=>prev+current);
        setTotal(totalEncontrado);
      }
      setData(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
};

    We create our method that will look for the information that is possibly in the table and the calculation will be made again to show.

    const totalOnSearch = (text) => {
  if (text.length === 0) {
    const encontrado = data.map(value =>parseFloat(value.valor_t2));
    if (encontrado.length > 0) {
      const totalEncontrado = encontrado.reduce((prev,current)=>prev+current);
      setTotal(totalEncontrado);
    }
    return;
  }

  const encontrado = data.filter(value => value.fecha_hora.includes(text)).map(value =>parseFloat(value.valor_t2));
  if (encontrado.length > 0) {
    const totalEncontrado = encontrado.reduce((prev,current)=>prev+current);
    setTotal(totalEncontrado);
  }else{
    setTotal(0);
  }
};

    since it is not possible to change the data at all in @material-table. The total will be displayed outside the table or where it is more comfortable, in this case with a h2.

    Leaving the code as follows

    return (
  <div id="content" className="app-content">
    <div className="panel-body">
      {data.length === 0 ? (
        <p>cargando...</p>
      ) : (
        <MaterialTable
          onSearchChange={totalOnSearch}
          ...
      )}
    </div>
    <h2>total: {total}</h2>
  </div>
);
    • 1