Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

270
Views
formato de números en tablas antD, o cadenas de números localeCompare() con comas

Tengo valores que quiero mostrar en una tabla AntD. Quiero que se puedan ordenar, pero también formatear con comas, como "1000". Idealmente, los almacenaría en estado React como números enteros y luego los formatearía como cadenas con comas en la pantalla, pero no he encontrado una manera enlas tablas AntD para hacer esta conversión en el último minuto. Aquí hay un elemento JSX de columna de ejemplo que muestra enteros sin formato pero clasificables:

 <Column title="Population" dataIndex="population" key="population" sorter={(a, b) => a.population - b.population} />

Intenté convertir todo mi estado en cadenas formateadas, y luego la tabla las muestra muy bien, pero la clasificación está desordenada. Pensé que localeCompare with numeric = True solucionaría esto, pero no es así.

Con esta entrada:

 let arr = ['999', '1,000', '1,001']; console.log( arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true, ignorePunctuation: true, }) ) );

Espero que la entrada se ordene numéricamente, pero no es así. Tal vez entiendo mal cómo funciona localeCompare(). Este es el resultado:

 [ "1,000", "1,001", "999" ]

Así que tengo dos preguntas, y responder cualquiera de ellas solucionaría mi problema:

  1. ¿Puedo tener una tabla AntD con columnas que formatee números enteros en un formato legible en pantalla y, de ser así, cómo?
  2. Si no, ¿cómo puedo simplemente ordenar las representaciones de cadenas de números enteros con comas (y cantidades de $ para el caso)? Podría usar expresiones regulares aquí, por supuesto, pero espero que haya una solución más simple que me haya perdido. Cambiar enteros en cadenas y luego volver a enteros para ordenarlos parece muy tonto.
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Creo que el mejor enfoque en su caso sería usar la propiedad render de Column .

 import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import { Table } from "antd"; const { Column } = Table; const data = [ { key: "1", name: "John Brown", salary: 1000 }, { key: "2", name: "Jim Green", salary: 2000 }, { key: "3", name: "Joe Black", salary: 999 }, { key: "4", name: "Jim Red", salary: 1001 } ]; ReactDOM.render( <Table dataSource={data}> <Column title="Name" dataIndex="name" key="name" /> <Column title="Salary" dataIndex="salary" key="salary" sorter={(a, b) => a.salary - b.salary} render={(value) => { return "$" + value.toLocaleString("en"); }} /> </Table>, document.getElementById("container") );
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!