0

Buen día, tengo un tabla "https://material-table-core.com/demos/Summaryrow/basic" en reactjs y necesito que todos los valores de la columna de valor_t2 se sumen y me muestre el resultado al final de la tabla. ya la tabla esta sumando los valores de la columna valor_t2 pero necesito que al interactuar con el search predeterminado de la tabla también el valor final tambien se actualice. cuando la tabla carga aparece la suma sin problemas pero cuando interactuó con el buscador que aparece por defecto de la tabla el valor de la suma no cambia y necesito que sea dinamia y sume únicamente lo que hay en la tabla.

//codigo 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;

5
  • El componente es el renderSummaryRow Pero esta dentro de materialTable , como podría hacer el botón para que funcione con un botón
    – Giovanny
    Commented el 6 ago. 2022 a las 17:28
  • tu código contiene varios errores, faltan llaves varias llaves de cierre, por favor edita tu código y sube nuevamente para que sea mas fácil replicar tu ejemplo. Otra cosa es que renderSummaryRow no parece una propiedad existente de material-table por lo que no estoy seguro si funciona, de momento esa propiedad si te muestra información ?
    – Richard
    Commented el 6 ago. 2022 a las 18:23
  • La propiedad renderSummaryRow funciona esta es la documentación material-table-core.com/demos/Summaryrow/basic, el inconveniente que tengo es solo cuando se ejecuta ya que no alcanza a obtener los valores de mi base de datos y queda en 0
    – Giovanny
    Commented el 6 ago. 2022 a las 18:39
  • te envio el link en codebox codesandbox.io/s/amazing-rumple-x6fzwi?file=/src/App.js:0-1837
    – Giovanny
    Commented el 6 ago. 2022 a las 20:31
  • por favor editar y coloca el código, el enlace es muy útil y ayuda mucho para poder replicar el problema. pero también incluye el mismo código en tu pregunta. No todos pueden acceder a sitios externos, y los enlaces se pueden quebrar con el tiempo. por lo menos lo suficiente para replicar o ver el problema. Puedes revisar Cómo preguntar
    – Richard
    Commented el 6 ago. 2022 a las 23:43

1 respuesta 1

1

Problema 1:

cargar el resultado de la suma de los datos en la tabla

Recomiendo que para cargar tu información y evitar solicitudes innecesarias a tu endpoind, recomiendo que uses useEffect

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

Párese ser un problema directo con la renderSummaryRow. Ya que los datos supuestamente cargados no los reconoce, por lo que una solución rápida sería esperar a que termine la solicitud de tu endpoint, una ves cargado los datos ahora si solicitamos mostrar tu tabla ya con datos.

esto lo podemos hacer de la siguiente manera.

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

Problema 2:

Obtener el resultado de la suma de los datos en la tabla al buscar

A falta de información de lo que ya se a intentado, algún ejemplo mínimo de lo que se quiere lograr o incluso saber si da algún error especifico. Esto lo resuelvo a como se me hace la forma mas rápida, por las limitaciones de @material-table

Ya que renderSummaryRow no proporciona la información correcta de los datos que se están mostrando en la tabla usaremos un useState extra.

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

Recomiendo que su primera carga se realicé al obtener la información, que sería en peticionGet, ejemplo:

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

creamos nuestro método que buscara la información que posiblemente este en la tabla y se realizara nuevamente el calculo para mostrar.

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

como no es posible cambiar los datos del todo en @material-table. El total se mostrara en fuera de la tabla o donde sea mas cómodo, en este caso con un h2.

Quedando el código de la siguiente manera

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>
);
10
  • La solución esta casi completa solo hay un inconveniente el valor me lo muestra pero si filtro algo puntual el search de la tabla el valor no esta cambiando.
    – Giovanny
    Commented el 6 ago. 2022 a las 21:59
  • @Giovanny Eso quedaría para otra pregunta, en la cual especifiques todo el problema, ya que se requiere de mas información, del como funciona tu método de búsqueda o como lo usas. De igual manera cambia el titulo de tu pregunta, ya que la respuesta y o pregunta no se relaciona con un button para sumar.
    – Richard
    Commented el 6 ago. 2022 a las 22:07
  • el search que aparece predeterminado de de la tabla, donde un filtra datos ya cargados.
    – Giovanny
    Commented el 6 ago. 2022 a las 23:08
  • @Giovanny Edite mi respuesta para ayudarte con tu problema de búsqueda. La próxima ves considera agregar toda la información posible sobre tu problema, al igual todo lo que ya has intentado y errores, esto ayudara a que recibas respuesta mas rápido o información. Si mi respuesta te ayudo recuerda aceptar la respuesta como correcta.
    – Richard
    Commented el 7 ago. 2022 a las 6:25
  • Richard, cuando agrego "const totalOnSearch = (text: string) => { " no me reconoce text:String dice que es de typescript y yo estoy manejando .js, y en la petición get no esta la ruta donde llamo a mi base de datos.
    – Giovanny
    Commented el 8 ago. 2022 a las 12:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.