Dados locais e colunas
O modo local é o padrão. Passe os registros de faturas da aplicação por rows. A identidade da linha é resolvida como getRowId → rowIdField → id → identidade interna estável. getRowId é opcional; este exemplo o usa como a forma explícita e recomendada quando a aplicação dispõe de um identificador de negócio estável.
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} />
As colunas aceitam field, headerName, e opcionalmente width, minWidth e align. density pode ser compact, standard (padrão) ou comfortable.
Strings, numbers e booleans são exibidos diretamente. null, undefined, arrays e objetos deixam a célula vazia. Use renderCell para conteúdo personalizado; ele tem prioridade sobre format.
const columns: DyonaGridColumn[] = [
{field: 'invoice', headerName: 'Fatura', minWidth: 130},
{field: 'balance', headerName: 'Saldo', align: 'right', format: {type: 'currency', currency: 'ARS', minimumFractionDigits: 2, maximumFractionDigits: 2}},
{field: 'rate', headerName: 'Taxa', format: {type: 'percent', maximumFractionDigits: 1}},
{field: 'quantity', headerName: 'Quantidade', format: {type: 'number', maximumFractionDigits: 0}},
{field: 'dueDate', headerName: 'Vencimento', format: {type: 'date', day: '2-digit', month: '2-digit', year: 'numeric'}},
{field: 'customerImage', headerName: 'Imagem', format: {type: 'image', width: 40, height: 40, fit: 'cover', borderRadius: 6}},
{field: 'status', headerName: 'Status', renderCell: ({value}) => <StatusChip value={value} />},
];