В AG Grid группировка строк, агрегация, древовидные данные, master/detail и экспорт в Excel относятся к Enterprise: для использования в продакшене нужна коммерческая лицензия, а без ключа таблица показывает водяной знак и выводит ошибку в консоль. В таблице данных Needless UI группировка с итогами, древовидные данные, подробности строк и экспорт в .xlsx доступны под лицензией MIT. Это руководство помогает перевести приложение Angular с одного на другое: что переносится, что нет и как меняется код.
Здесь используются названия из AG Grid 36. AG Grid 36 поддерживает Angular с 20 по 22; Needless UI нужен Angular 22.
Что вы получаете
| Возможность | AG Grid | Needless UI |
|---|---|---|
| Группировка строк с агрегатами и строкой итогов | Enterprise | Да: несколько уровней, итоги — сумма, среднее, минимум, максимум, количество или функция |
| Древовидные данные | Enterprise | Да, из вложенных строк |
| Подробности под строкой (master/detail) | Enterprise | Да: любой шаблон под строкой, в том числе другая таблица |
| Экспорт в Excel | Enterprise: стили, несколько листов, изображения и формулы | Да: один лист с типизированными ячейками, форматами чисел и закреплённым заголовком с фильтрами |
| Меню столбца с выбором столбцов | Enterprise | Да: сортировка, фильтрация, закрепление, перемещение, подгонка ширины и скрытие каждого столбца, а также показ и скрытие всех сразу |
| Сортировка по нескольким столбцам, быстрый поиск, пагинация, выбор строк | Community | Да |
| Фильтры столбцов | Community: до двух условий, объединённых через AND или OR | Одно условие на столбец |
| Фильтры по набору значений, составные и расширенные | Enterprise | Частично: чекбоксы с вариантами столбца, а не со значениями из данных |
| Изменение ширины, перемещение, закрепление и скрытие столбцов, сохранение их состояния | Community | Да |
| Виртуальная прокрутка | Community: строки и столбцы | Строки |
| Редактирование ячеек | Community; некоторые редакторы — Enterprise | Да, по типу столбца, с валидацией; без собственных редакторов и отмены правок |
| Сводные таблицы, встроенные диаграммы | Enterprise | Нет |
| Буфер обмена, выделение диапазонов ячеек, контекстное меню, строка состояния, боковая панель | Enterprise | Нет |
| Данные с сервера | Серверная модель строк: Enterprise; загрузка блоками: Community | Страницы с вашего сервера, который сам сортирует, фильтрует и ищет; без группировки на сервере |
| Группы столбцов, перетаскивание строк, закреплённые строки | Community | Нет |
| Фреймворки | React, Angular с 20 по 22, Vue и чистый JavaScript | Angular 22 и React 19 |
Что чему соответствует
| AG Grid | Таблица Needless UI |
|---|---|
<ag-grid-angular>, регистрация модулей, LicenseManager.setLicenseKey() | <nui-grid>; без регистрации и ключа |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (параметры Intl или функция), type |
cellRenderer | Шаблон nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup у столбца, groupDefaultExpanded | [(groupBy)] — список id столбцов. Группы изначально раскрыты; [(collapsed)] сворачивает их. |
aggFunc, grandTotalRow | aggregate, totals |
treeData с treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Шаблон nuiGridDetail и [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection и [(selected)] — ключи выбранных строк |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() возвращает Blob, а exportCsv() — текст |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; направление справа налево берётся из dir страницы |
Заказы, сгруппированные по странам, в двух вариантах
Задача: заказы, сгруппированные по странам, с итогом по каждой стране и общим итогом, экспорт в Excel, быстрый поиск и множественный выбор. С AG Grid 36, где для группировки, итогов и экспорта в Excel нужен Enterprise:
С таблицей Needless UI:
Есть несколько отличий. Выбор хранит ключи — id строк, поэтому он сохраняется, когда приходят новые данные; если нужны сами строки, найдите их по ключам. Группы изначально раскрыты. Подпись группы выводится в первом видимом столбце, а поиск идёт только по видимым столбцам, поэтому не скрывайте столбец группировки, если поиск должен находить его значения. И exportXlsx() возвращает файл, а не скачивает его: один лист с отфильтрованными и отсортированными строками, без строк групп.
Если вам нужно то, чего нет
Если ваше приложение зависит от сводных таблиц, диаграмм, буфера обмена и выделения диапазонов, группировки на сервере или групп столбцов, таблица Needless UI пока не заменит AG Grid. Откройте issue и опишите, что вам нужно. Для всего остального на странице таблицы данных есть все входные и выходные свойства и примеры.