O agrupamento de linhas, a agregação, os dados em árvore, o master/detail e a exportação para Excel do AG Grid são funcionalidades Enterprise: o uso em produção exige uma licença comercial e, sem chave, a grade mostra uma marca d’água e registra um erro no console. A grade de dados do Needless UI oferece agrupamento com totais, dados em árvore, detalhes da linha e exportação para .xlsx com licença MIT. Este guia leva uma aplicação Angular de um para o outro: o que se aproveita, o que não se aproveita e como o código muda.
Os nomes usados são os do AG Grid 36. O AG Grid 36 suporta do Angular 20 ao 22; o Needless UI precisa do Angular 22.
O que você ganha
| Funcionalidade | AG Grid | Needless UI |
|---|---|---|
| Agrupamento de linhas, com agregados e uma linha de totais | Enterprise | Sim: vários níveis, com soma, média, mínimo, máximo, contagem ou uma função |
| Dados em árvore | Enterprise | Sim, a partir de linhas aninhadas |
| Detalhes sob uma linha (master/detail) | Enterprise | Sim: qualquer template sob a linha, inclusive outra grade |
| Exportação para Excel | Enterprise: estilos, várias planilhas, imagens e fórmulas | Sim: uma planilha de células tipadas, com formatos de número e um cabeçalho congelado com filtros |
| Menu de coluna com seletor de colunas | Enterprise | Sim: ordenar, filtrar, fixar, mover, ajustar ao conteúdo e ocultar cada coluna, e mostrar ou ocultar todas |
| Ordenação por várias colunas, busca rápida, paginação, seleção de linhas | Community | Sim |
| Filtros de coluna | Community: até duas condições, unidas por AND ou OR | Uma condição por coluna |
| Filtros de conjunto, múltiplos e avançados | Enterprise | Em parte: caixas de seleção para as opções da coluna, não para os valores presentes nos dados |
| Redimensionar, mover, fixar e ocultar colunas, e salvar o estado delas | Community | Sim |
| Rolagem virtual | Community: linhas e colunas | Linhas |
| Edição de células | Community; alguns editores são Enterprise | Sim, por tipo de coluna, com validação; sem editores personalizados e sem desfazer |
| Pivotagem, gráficos integrados | Enterprise | Não |
| Área de transferência, seleção de intervalos de células, menu de contexto, barra de status, barra lateral | Enterprise | Não |
| Dados de um servidor | Modelo de linhas do lado do servidor: Enterprise; carregamento em blocos: Community | Páginas do seu servidor, que ordena, filtra e busca; sem agrupamento no servidor |
| Grupos de colunas, arrastar linhas, linhas fixadas | Community | Não |
| Frameworks | React, Angular 20 a 22, Vue e JavaScript puro | Angular 22 e React 19 |
O que corresponde a quê
| AG Grid | Grade do Needless UI |
|---|---|
<ag-grid-angular>, registro de módulos, LicenseManager.setLicenseKey() | <nui-grid>; sem registro e sem chave |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (opções de Intl ou uma função), type |
cellRenderer | Um template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup da coluna, groupDefaultExpanded | [(groupBy)], uma lista de ids de coluna. Os grupos começam abertos; [(collapsed)] os fecha. |
aggFunc, grandTotalRow | aggregate, totals |
treeData com treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Um template nuiGridDetail e [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection e [(selected)]: as chaves das linhas selecionadas |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() retorna um Blob, e exportCsv(), texto |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; a direção da direita para a esquerda segue o dir da página |
Pedidos agrupados por país, das duas formas
A tarefa: pedidos agrupados por país, com um total por país e um total geral, exportação para Excel, busca rápida e seleção múltipla. Com o AG Grid 36, em que o agrupamento, os totais e a exportação para Excel exigem o Enterprise:
Com a grade do Needless UI:
Algumas coisas funcionam de outro jeito. A seleção guarda chaves, os ids das linhas, então ela sobrevive a dados novos; quando precisar das próprias linhas, mapeie as chaves de volta para elas. Os grupos começam abertos. O rótulo de um grupo fica na primeira coluna visível, e a busca só lê colunas visíveis, então mantenha a coluna agrupada à mostra se a busca tiver de encontrar os valores dela. Além disso, exportXlsx() retorna o arquivo em vez de baixá-lo: uma planilha com as linhas filtradas e ordenadas, sem as linhas de grupo.
Se você precisa do que falta
Se a sua aplicação depende de pivotagem, gráficos, área de transferência e seleção de intervalos, agrupamento no servidor ou grupos de colunas, a grade do Needless UI ainda não substitui o AG Grid. Abra uma issue com o que você precisa. Para todo o resto, a página da grade de dados tem todos os inputs, outputs e exemplos.