Home / Questions / 549298
Accepted
Giovanny
Asked: 2022-08-01 05:08:12 +0800 CST 2022-08-01 05:08:12 +0800 CST

add currency format to matter-table column - reactjs

  • 772

Good day, I have a table with material-table reactjs and I need it to format the values ​​that appear to me in the column valor;

For example "5000000" and I need it to appear for example "5,000,000"valor , I have tried in many ways but I have not succeeded, I have tried to add format the column constants valorbut I have not succeeded, if someone can help me and find the solution I would appreciate it, you sent the code I have:

I have also tried with the documentation but I could not: 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
reactjs

5 Answers

  1. Best Answer

    Add the format using a regular expression, it does identical amounts as you ask 5000000 becomes 5,000,000 you can check the code

       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

  2. Due to the problems you have material-tableto apply changes after loading the information, I recommend that it be done before loading this information, which would be when making the request in peticionGet().

    To avoid breaking the structure we will use.map()

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

    The method toLocaleString()returns a localized representation of the number in text form. If you want to read more about it, you can check the documentation

    • 1

  3. There are several possibilities to solve this problem. The simplest would be to use the toLocaleString method . So instead of format: (field) => field.toFixed(2), run format: (field) => field.toLocaleString().

    This approach however will transform your numberinto a string. If you need to manipulate that value again as a numberthen you can use parseFloat(field).

    • 0

  4. You should change like this:

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

    To give it the format you need in your column

    • 0

  5. Looking at the material-table configuration options , you can try the property renderand supplying the language and country you want to use for the toLocaleString() method :

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

    Important documentation note:

    When you're formatting a large number of numbers, it's best to create a NumberFormat object and use the NumberFormat.format() function .

    • 0