Local data and columns
Local mode is the default. Pass consumer-owned invoice records through rows. Row identity resolves as getRowId → rowIdField → id → stable internal identity. getRowId is optional; this example uses it as the explicit, recommended approach when your application has a stable business identifier.
const rows = [{
id: 'FAC-00481', invoice: 'FAC-00481', customer: 'North Commercial',
balance: 184500, dueDate: '2026-08-15', status: 'pending',
}];
<DyonaGrid columns={columns} rows={rows} getRowId={(row) => row.id as string} />
Columns accept field, headerName, optional width, minWidth, and align. density can be compact, standard (default), or comfortable.
Values render directly for strings, numbers, and booleans. null, undefined, arrays, and objects render as an empty cell. Use renderCell for custom content; it has priority over format.
const columns: DyonaGridColumn[] = [
{field: 'invoice', headerName: 'Invoice', minWidth: 130},
{field: 'balance', headerName: 'Balance', align: 'right', format: {
type: 'currency', currency: 'ARS', minimumFractionDigits: 2, maximumFractionDigits: 2,
}},
{field: 'rate', headerName: 'Rate', format: {type: 'percent', maximumFractionDigits: 1}},
{field: 'quantity', headerName: 'Quantity', format: {type: 'number', maximumFractionDigits: 0}},
{field: 'dueDate', headerName: 'Due date', format: {
type: 'date', day: '2-digit', month: '2-digit', year: 'numeric',
}},
{field: 'customerImage', headerName: 'Image', format: {
type: 'image', width: 40, height: 40, fit: 'cover', borderRadius: 6,
}},
{field: 'status', headerName: 'Status', renderCell: ({value}) => <StatusChip value={value} />},
];