1

buen día, tengo una tabla con material-table reactjs y necesito que me formatee los valores que me parecen en la columna valor;

Por ejemplo "5000000" y necesito que aparezca por ejemplo "5.000.000", he intentado de muchas formas pero no lo he logrado, he intentado agregar en las constante de las columna valor formatear el valor pero no lo he logrado, si alguien me puede colaborar y encontrar la solución se los agradecería, envió el código que tengo:

también lo he intentado con la documentación pero no he podido : https://material-table.com/#/

 import React, {useContext,useState,useEffect} from 'react';

    import { AddBox, ArrowDownward } from "@material-ui/icons";
    import MaterialTable from "material-table";

    import axios from 'axios';

    function Moneda () {
      
      const baseUrlAd="https://miweb.com"
      const [data, setData]=useState([]);

      const peticionGet =async() =>{
       await axios.get(baseUrlAd)
        .then(response=>{
         setData(response.data);
        }).catch(error=>{
          console.log(error);
        })

      }

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

    return () => setInterval(interval);

    },[])

      const columnas =[
        {
          title:"ID",
          field: "id",
          
        },
        
        {
          title:"C.EMPRESA",
          field: "cargo"
        },

        {
          title:'SUELDO BASE ($)',
          field: 'valor',
         // format: (field) => field.toLocaleString()  
        //sigue aparciendo el campo field 'valor sin los . "50000" 
    // render: rowData => rowData.valor.toLocaleString('es-MX')
    
//sigue aparciendo el campo field 'valor sin los . "50000"        
// format: (field) => field.valor.toLocaleString('USD')        
        },
      ];
      return (
     
    <div id="content" class="app-content">
    <div class="panel-body">

    <MaterialTable
        columns={columnas}
        data={data}
        title= {<><i class="fas fa-calculator fa-2x"></i></> }
        backIconButtonText='Página anterior'
        pagination
        fixedHeader
        actions={[
          {
            icon : 'calculate',
            tooltip: 'Calcular',
            onClick: (event, framework)=>seleccionarFramework(framework, "Editar")
          },
        
    ]}
    options={{
        actionsColumnIndex: -1,
     actionsCellStyle: {
     },
     headerStyle: { backgroundColor: "#348fe2",  headerStyle: { position: 'sticky'}, boxShadow:"0 0  0 2px rgb(255,255,255)", color: "white", padding: "0.75rem 0.9375rem", fontSize: 10}
    }}
    localization={{
        header:{
        actions: 'ACCIONES'
      },
      body:{ 
        emptyDataSourceMessage:'No hay registros que mostrar',
       },
       pagination: {
         firstAriaLabel: 'Primera página',
         firstTooltip: 'Primera página',
         labelDisplayedRows: '{from}-{to} de {count}',
         labelRowsPerPage: 'Filas por página:',
         labelRowsSelect: 'filas',
         lastAriaLabel: 'Ultima página',
         lastTooltip: 'Ultima página',
         nextAriaLabel: 'Pagina siguiente',
         nextTooltip: 'Pagina siguiente',
         previousAriaLabel: 'Pagina anterior',
         previousTooltip: 'Pagina anterior',
       },
       toolbar: {
         searchPlaceholder: 'Buscar',
         searchTooltip: 'Buscar',
         showColumnsAriaLabel: 'Mostrar columnas',
         showColumnsTitle: 'Mostrar columnas',
       },
    }}
    />
    </div>
    </div>
      )
    }
    }
    export default Moneda

5 respuestas 5

1
+50

Agregue el formato utilizando una expresión regular, realiza cantidades idénticas a como lo pides 5000000 se convierte 5.000.000 puede revisar el código

   import React, { useState, useEffect } from "react";
        
        import axios from "axios";
        
        import MaterialTable, { MTableBodyRow } from "@material-table/core";
        
        function App() {
          //const baseUrlAd = `https://parqueoenvia.co/apiParqueoenvia/operadores/arqueo_cargar.php?id_operador=${global.id}`;
          const [dataNew, setData] = useState([]);
        
          useEffect(() => {
            const peticionGet = async () => {
              await axios
                .get(
                  `https://parqueoenvia.co/apiParqueoenvia/operadores/arqueo_cargar.php?id_operador=59`
                )
                .then(({ data }) => {
                  const d = data.map((d, i) => ({
                    id: i + 1,
                    valor:
                      "$" +
                      d.valor_t2
                        .replace(/\D/g, "")
                        .replace(/([0-9])([0-9]{3})$/, "$1.$2")
                        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".")
                  }));
                  setData(d);
                })
                .catch((error) => {
                  console.log(error);
                });
            };
            peticionGet();
          }, [setData]);
        
          const columns = [
            {
              title: "ID",
              field: "id"
            },
            {
              title: "Valor",
              field: "valor",
              type: "numeric"
            }
          ];
        
          return (
            <div id="content" className="app-content">
              <div className="panel-body">
                <MaterialTable
                  columns={columns}
                  data={dataNew}
                  components={{
                    Row: (props) => <MTableBodyRow id={props.index} {...props} />
                  }}
                  pagination
                  fixedHeader
                  actions={[]}
                  options={{
                    actionsColumnIndex: -1,
                    actionsCellStyle: {},
        
                    body: {
                      emptyDataSourceMessage: "No hay registros que mostrar"
                    }
                  }}
                />
              </div>
            </div>
          );
        }
        
        export default App;
1

Debido a los problemas que tiene material-table para aplicar cambios después de cargar la información, recomiendo que se realice antes de cargar esta información, que sería al hacer la petición en peticionGet().

Para evitar romper la estructura usaremos .map()

const peticionGet = async () => {
  // ...
  const transformeNumber = response.map(value => ({...value, valor: Number(value.valor).toLocaleString('en-US', { minimumFractionDigits: 2 })}));
  setData(transformeNumber);
  // ...
};

El método toLocaleString() retorna una representación localizada del número en forma de texto. Si quieres leer mas al respecto, puedes revisar la documentación

0

hay varias posibilidades para resolver este problema. La más sencilla sería usar el método toLocaleString. Así, en lugar de format: (field) => field.toFixed(2), ejecutes format: (field) => field.toLocaleString().

Este approach sin embargo transformará tu number en un string. Si necesitas manipular ese valor de nuevo como un number entonces puedes usar parseFloat(field).

1
  • agregue field.toLocaleString como lo menciones pero sigue todo igual, actualice la pregunta añadiendo el codigo que me enviaste para que revises si me falta algo ..
    – Giovanny
    el 31 jul. 2022 a las 23:07
0

Debes de cambiar asi:

format: (field) => field.valor.toLocaleString('USD') //Pones el formato de la moneda que necesitas

Para darle el formato que necesitas en tu columna

1
  • agregando format como lo siguieres sigue apareciendo el valor sin los . "5000"
    – Giovanny
    el 4 ago. 2022 a las 11:33
0

Revisando las opciones de configuración de material-table, puedes intentar con la propiedad render y proporcionando el idioma y país que deseas usar para el método toLocaleString():

{
  title:'SUELDO BASE ($)',
  field: 'valor',
  render: rowData => rowData.valor.toLocaleString('es-MX')
},

Nota importante de la documentación:

Cuando formateas una gran cantidad de números, es mejor crear un objeto NumberFormat y utilizar la función NumberFormat.format().

1
  • agregando render como lo siguieres sigue apareciendo el valor sin los . "5000"
    – Giovanny
    el 4 ago. 2022 a las 11:33

Tu Respuesta

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

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