Datos locales y columnas
El modo local es el predeterminado. Pasá los registros de facturas que posee tu aplicación mediante rows. La identidad de fila se resuelve como getRowId → rowIdField → id → identidad interna estable. getRowId es opcional; este ejemplo lo usa como forma explícita y recomendada cuando la aplicación dispone de un identificador de negocio estable.
const rows = [{
id: 'FAC-00481', invoice: 'FAC-00481', customer: 'Comercial Norte',
balance: 184500, dueDate: '2026-08-15', status: 'pending',
}];
<DyonaGrid columns={columns} rows={rows} getRowId={(row) => row.id as string} />
Las columnas aceptan field, headerName, y opcionalmente width, minWidth y align. density puede ser compact, standard (predeterminado) o comfortable.
Los strings, numbers y booleans se muestran directamente. null, undefined, arrays y objetos dejan la celda vacía. Usá renderCell para contenido personalizado; tiene prioridad sobre format.
const columns: DyonaGridColumn[] = [
{field: 'invoice', headerName: 'Factura', minWidth: 130},
{field: 'balance', headerName: 'Saldo', align: 'right', format: {type: 'currency', currency: 'ARS', minimumFractionDigits: 2, maximumFractionDigits: 2}},
{field: 'rate', headerName: 'Tasa', format: {type: 'percent', maximumFractionDigits: 1}},
{field: 'quantity', headerName: 'Cantidad', format: {type: 'number', maximumFractionDigits: 0}},
{field: 'dueDate', headerName: 'Vencimiento', format: {type: 'date', day: '2-digit', month: '2-digit', year: 'numeric'}},
{field: 'customerImage', headerName: 'Imagen', format: {type: 'image', width: 40, height: 40, fit: 'cover', borderRadius: 6}},
{field: 'status', headerName: 'Estado', renderCell: ({value}) => <StatusChip value={value} />},
];