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:
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") );