Para formatear cifras con formato americano (por ejemplo, 1,000.00, 10,000.00, 100,000.00) en el componente ReactGrid, la solución recomendada es usar la API Intl.NumberFormat para formatear los números en las celdas.
En ReactGrid, esto se puede hacer creando un template o un render personalizado para las celdas numéricas que formateen los valores con Intl.NumberFormat usando la configuración regional ‘en-US’ y formato numérico con separadores de miles y dos decimales.
Un ejemplo de código en React para formatear números con formato americano en ReactGrid sería este:
import React from "react";
import { NumberCell } from "@silevis/reactgrid";
const AmericanNumberCell = (props) => {
const { value } = props;
// Usar Intl.NumberFormat para formato americano (miles con coma y dos decimales)
const formattedValue = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
return (
<NumberCell
{...props}
value={formattedValue}
/>
);
};
// Ejemplo de uso dentro de columnas o celdas de ReactGrid:
const columns = [
{
columnId: "price",
header: "Price",
cellType: AmericanNumberCell
}
];
// Más configuración de ReactGrid aquí...
Este componente personalizado AmericanNumberCell formatea el valor numérico con separadores de miles y dos dígitos decimales utilizando la localización americana, asegurando que las cifras se vean como 1,000.00, 10,000.00, etc.
Se debe reemplazar el uso estándar de celdas numéricas en ReactGrid por este template personalizado para las columnas o celdas donde se desee este formato.
Esta es la forma estándar y recomendada porque ReactGrid permite proporcionar templates personalizados para celdas numéricas usando Intl.NumberFormat para controlar el formato numérico.
Aquí está un ejemplo completo de cómo usar ReactGrid para mostrar números con formato americano (1,000.00, 10,000.00, etc.) usando un componente personalizado que formatea con Intl.NumberFormat:
import React, { useState } from "react";
import { ReactGrid, NumberCell, EditCellProps, CellBase, CellChange, Row, Column } from "@silevis/reactgrid";
// Componente personalizado para formatear número estilo americano
const AmericanNumberCell = ({ value, columnId, rowId, onCellChanged }) => {
// Formatear valor con separadores de miles y dos decimales
const formattedValue = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
return (
<NumberCell
value={formattedValue}
columnId={columnId}
rowId={rowId}
onCellChanged={onCellChanged}
/>
);
};
const App = () => {
// Datos iniciales con números
const [cells, setCells] = useState([
[{ type: "text", text: "Product" }, { type: "text", text: "Price" }],
[{ type: "text", text: "Apple" }, { type: "number", value: 1000 }],
[{ type: "text", text: "Orange" }, { type: "number", value: 10000 }],
[{ type: "text", text: "Banana" }, { type: "number", value: 100000 }],
]);
// Columnas con definición de tipo
const columns = [
{ columnId: "product", width: 200 },
{ columnId: "price", width: 150 }
];
// Filas con mapeo a celdas
const rows = cells.map((row, rowIndex) => ({
rowId: rowIndex.toString(),
cells: row
}));
// Función para manejar cambios en las celdas
const onCellsChanged = (changes) => {
const newCells = cells.map(row => [...row]);
changes.forEach(({ cell, rowId, columnId }) => {
const rowIndex = Number(rowId);
const colIndex = columnId === "product" ? 0 : 1;
newCells[rowIndex][colIndex] = cell;
});
setCells(newCells);
};
// Función para renderear la celda (usar el formateo americano para el precio)
const customCellRender = (cell, columnId, rowId, onCellChanged) => {
if (columnId === "price" && cell.type === "number") {
return (
<AmericanNumberCell
value={cell.value}
columnId={columnId}
rowId={rowId}
onCellChanged={onCellChanged}
/>
);
}
return undefined; // Usa renderizado por defecto para otras celdas
};
return (
<ReactGrid
rows={rows}
columns={columns}
onCellsChanged={onCellsChanged}
customCellRender={customCellRender}
/>
);
};
export default App;
Detalles de este ejemplo:
Se definió un componente AmericanNumberCell que usa Intl.NumberFormat para formatear con coma como separador de miles y dos decimales.
El estado
cellscontiene datos iniciales con productos y precios.La propiedad
customCellRenderde ReactGrid se usa para interceptar la renderización de la columna «price» y aplicar el formateo americano solo a esas celdas numéricas.Cambios en las celdas se manejan con onCellsChanged para actualizar el estado.
Con este enfoque, los números aparecerán como 1,000.00, 10,000.00, etc., en la grilla ReactGrid.
Para permitir edición de números con formato americano (1,000.00, etc.) en ReactGrid, se puede implementar un editor personalizado que use un input para mostrar y modificar el número en formato local, y convierta el texto ingresado a valor numérico para la celda.
Aquí un ejemplo completo con edición:
import React, { useState, useEffect, useRef } from "react";
import { ReactGrid, NumberCell, EditCellProps, CellBase, CellChange, Row, Column } from "@silevis/reactgrid";
// Componente para visualización formateada de número americano
const AmericanNumberCell = ({ value, columnId, rowId, onCellChanged }) => {
const formattedValue = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(value);
return (
<NumberCell
value={formattedValue}
columnId={columnId}
rowId={rowId}
onCellChanged={onCellChanged}
/>
);
};
// Editor personalizado para editar número con formato americano
const AmericanNumberEditor = ({ initialValue, onBlur, onChange }) => {
const [inputValue, setInputValue] = useState(
new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(initialValue)
);
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
// Convertir cadena a número al modificar input (eliminar comas)
const handleChange = (e) => {
const val = e.target.value;
setInputValue(val);
// Convertir a número quitando comas
const numericValue = Number(val.replace(/,/g, ''));
if (!isNaN(numericValue)) {
onChange(numericValue);
}
};
return (
<input
ref={inputRef}
type="text"
value={inputValue}
onChange={handleChange}
onBlur={onBlur}
style={{ width: "100%", boxSizing: "border-box" }}
/>
);
};
const App = () => {
const [cells, setCells] = useState([
[{ type: "text", text: "Product" }, { type: "text", text: "Price" }],
[{ type: "text", text: "Apple" }, { type: "number", value: 1000 }],
[{ type: "text", text: "Orange" }, { type: "number", value: 10000 }],
[{ type: "text", text: "Banana" }, { type: "number", value: 100000 }],
]);
const columns = [
{ columnId: "product", width: 200 },
{ columnId: "price", width: 150 }
];
const rows = cells.map((row, rowIndex) => ({
rowId: rowIndex.toString(),
cells: row
}));
const onCellsChanged = (changes) => {
const newCells = cells.map(row => [...row]);
changes.forEach(({ cell, rowId, columnId }) => {
const rowIndex = Number(rowId);
const colIndex = columnId === "product" ? 0 : 1;
newCells[rowIndex][colIndex] = cell;
});
setCells(newCells);
};
// Renderizado personalizado para celdas "price"
const customCellRender = (cell, columnId, rowId, onCellChanged) => {
if (columnId === "price" && cell.type === "number") {
return (
<AmericanNumberCell
value={cell.value}
columnId={columnId}
rowId={rowId}
onCellChanged={onCellChanged}
/>
);
}
return undefined;
};
// Editor personalizado para celdas "price"
const customCellEditor = (cell, columnId, rowId, onCellChanged) => {
if (columnId === "price" && cell.type === "number") {
return (
<AmericanNumberEditor
initialValue={cell.value}
onChange={(newValue) => onCellChanged({ ...cell, value: newValue }, rowId, columnId)}
onBlur={() => {}}
/>
);
}
return undefined;
};
return (
<ReactGrid
rows={rows}
columns={columns}
onCellsChanged={onCellsChanged}
customCellRender={customCellRender}
customCellEditor={customCellEditor}
/>
);
};
export default App;
Explicación:
El componente
AmericanNumberEditormuestra el número formateado y lo permite editar como texto.En la edición, elimina comas para convertir el texto a número correcto.
La función
customCellEditoren ReactGrid usa este editor personalizado solo para la columna «price».Así, la visualización y edición usan el mismo formato americano amigable.
Esto garantiza números visualizados y editados con formato 1,000.00, 10,000.00, etc., manteniendo la usabilidad.
Comentarios recientes