#Colunas

⧉const columns: ColumnDefinition[] = [
    { field: 'product', title: 'Product', width: 160 },
    { field: 'price', type: 'currency', currency: 'BRL', footer: 'avg' }
];

#Propriedades

#Tipos

Operadores de texto: contém, não contém, igual a, diferente de, começa com, termina com, em branco, não está em branco. Operadores de faixa: =, ≠, >, ≥, <, ≤, entre, em branco, não está em branco.

#Formatação

1. Função format: controle total, apenas na exibição.
2. String format: um formato de número do Excel, por exemplo '#,##0.00;[Red]-#,##0.00' ou 'dd/mm/yyyy'. O mesmo código é gravado no arquivo XLSX.
3. Caso contrário, o padrão do tipo, usando Intl para o locale.

⧉{ field: 'margin', type: 'percent', decimals: 1 },                       // 12.5%
{ field: 'revenue', type: 'number', format: '#,##0,"k"' },               // 1,500k
{ field: 'rating', type: 'integer', format: v => '★'.repeat(v ?? 0) },   // ★★★

#Renderização personalizada

⧉{
    field: 'status',
    render: (value, row, { formatted }) => {
        const badge = document.createElement('span');
        badge.className = `badge badge-${value}`;
        badge.textContent = formatted;
        return badge;
    }
}

render pode retornar uma string (definida como texto) ou um nó do DOM. Com html: true, uma string é usada como innerHTML. Escape você mesmo qualquer coisa fornecida pelo usuário.

#Alterando colunas em tempo de execução

⧉grid.addColumn({ field: 'margin', type: 'percent', formula: '=[@profit]/[@total]' }, 3);
grid.removeColumn('margin');
grid.setColumnVisible('internal', false);
grid.setColumnFormula('total', '=[@qty]*[@price]*1.1');
grid.setColumns(newDefinitions);   // substitui tudo e recalcula as fórmulas

Editar esta página no GitHub