La agrupación de filas, la agregación, los datos en árbol, el maestro/detalle y la exportación a Excel de AG Grid forman parte de Enterprise: su uso en producción requiere una licencia comercial y, sin clave, la cuadrícula muestra una marca de agua y registra un error en la consola. La cuadrícula de datos de Needless UI ofrece agrupación con totales, datos en árbol, detalles de fila y exportación a .xlsx con licencia MIT. Esta guía lleva una aplicación Angular de una a otra: lo que se mantiene, lo que no y cómo cambia el código.
La guía usa los nombres de AG Grid 36. AG Grid 36 es compatible con Angular 20 a 22; Needless UI necesita Angular 22.
Qué obtienes
| Función | AG Grid | Needless UI |
|---|---|---|
| Agrupación de filas, con agregados y una fila de totales | Enterprise | Sí: varios niveles, con suma, media, mínimo, máximo, recuento o una función |
| Datos en árbol | Enterprise | Sí, a partir de filas anidadas |
| Detalles bajo una fila (maestro/detalle) | Enterprise | Sí: cualquier plantilla bajo la fila, incluida otra cuadrícula |
| Exportación a Excel | Enterprise: estilos, varias hojas, imágenes y fórmulas | Sí: una hoja de celdas tipadas, con formatos numéricos y un encabezado inmovilizado con filtros |
| Menú de columna con selector de columnas | Enterprise | Sí: ordenar, filtrar, fijar, mover, ajustar al contenido y ocultar cada columna, y mostrarlas u ocultarlas todas |
| Ordenación por varias columnas, búsqueda rápida, paginación, selección de filas | Community | Sí |
| Filtros de columna | Community: hasta dos condiciones, unidas con AND u OR | Una condición por columna |
| Filtros de conjunto, múltiples y avanzados | Enterprise | En parte: una lista de casillas con las opciones de una columna, no con los valores de los datos |
| Redimensionar, mover, fijar y ocultar columnas, y guardar su estado | Community | Sí |
| Scroll virtual | Community: filas y columnas | Filas |
| Edición de celdas | Community; algunos editores, con Enterprise | Sí, según el tipo de columna, con validación; sin editores personalizados ni opción de deshacer |
| Tablas dinámicas, gráficos integrados | Enterprise | No |
| Portapapeles, selección de rangos de celdas, menú contextual, barra de estado, panel lateral | Enterprise | No |
| Datos de un servidor | Modelo de filas del servidor: Enterprise; carga por bloques: Community | Páginas de tu servidor, con su orden, sus filtros y su búsqueda; sin agrupación en el servidor |
| Grupos de columnas, arrastre de filas, filas fijadas | Community | No |
| Frameworks | React, Angular 20 a 22, Vue y JavaScript puro | Angular 22 y React 19 |
Qué equivale a qué
| AG Grid | Cuadrícula de Needless UI |
|---|---|
<ag-grid-angular>, registro de módulos, LicenseManager.setLicenseKey() | <nui-grid>; nada que registrar y sin clave |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (opciones de Intl o una función), type |
cellRenderer | Una plantilla nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup en la columna, groupDefaultExpanded | [(groupBy)], una lista de ids de columna. Los grupos empiezan abiertos; [(collapsed)] los cierra. |
aggFunc, grandTotalRow | aggregate, totals |
treeData con treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Una plantilla nuiGridDetail y [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection y [(selected)]: las claves de las filas seleccionadas |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() devuelve un Blob, y exportCsv(), texto |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; el sentido de derecha a izquierda sigue el dir de la página |
Pedidos agrupados por país, con ambos
La tarea: pedidos agrupados por país, con un total por país y otro general, exportación a Excel, búsqueda rápida y selección múltiple. Con AG Grid 36, donde la agrupación, los totales y la exportación a Excel requieren Enterprise:
Con la cuadrícula de Needless UI:
Hay algunas cosas que funcionan de otra manera. La selección guarda claves, los ids de las filas, así que se mantiene aunque lleguen datos nuevos; cuando necesites las filas, búscalas a partir de esas claves. Los grupos empiezan abiertos. La etiqueta de un grupo va en la primera columna visible, y la búsqueda solo lee las columnas visibles, así que deja visible la columna agrupada si quieres que la búsqueda la tenga en cuenta. Y exportXlsx() devuelve el archivo en lugar de descargarlo: una hoja con las filas filtradas y ordenadas, sin las filas de grupo.
Si necesitas lo que falta
Si tu aplicación depende de tablas dinámicas, gráficos, el portapapeles y la selección de rangos, la agrupación en el servidor o los grupos de columnas, la cuadrícula de Needless UI todavía no puede sustituir a AG Grid. Abre un issue con lo que necesitas. Para todo lo demás, la página de la cuadrícula de datos tiene todos los inputs, outputs y ejemplos.