AG Grid의 행 그룹화, 집계, 트리 데이터, 마스터/디테일, Excel 내보내기는 Enterprise 기능입니다. 프로덕션에서 쓰려면 상용 라이선스가 필요하고, 키가 없으면 그리드에 워터마크가 표시되며 콘솔에 오류가 기록됩니다. Needless UI 데이터 그리드는 합계가 있는 그룹화, 트리 데이터, 행 세부 정보, .xlsx 내보내기를 MIT 라이선스로 제공합니다. 이 가이드에서는 Angular 앱을 AG Grid에서 Needless UI로 옮기면서, 그대로 옮겨지는 것과 그렇지 않은 것, 코드가 어떻게 바뀌는지를 살펴봅니다.
AG Grid 36의 이름을 씁니다. AG Grid 36은 Angular 20부터 22까지 지원하고, Needless UI는 Angular 22가 필요합니다.
기능 비교
| 기능 | AG Grid | Needless UI |
|---|---|---|
| 집계 값과 합계 행을 갖춘 행 그룹화 | Enterprise | 지원: 여러 단계로 그룹화하고 합계, 평균, 최솟값, 최댓값, 개수 또는 함수로 집계 |
| 트리 데이터 | Enterprise | 지원, 중첩된 행으로 구성 |
| 행 아래 세부 정보(마스터/디테일) | Enterprise | 지원: 행 아래에 어떤 템플릿이든 표시, 다른 그리드도 가능 |
| Excel 내보내기 | Enterprise: 스타일, 여러 시트, 이미지, 수식 | 지원: 타입이 있는 셀로 된 시트 하나, 숫자 서식, 필터가 달린 고정 헤더 |
| 열 선택기가 있는 열 메뉴 | Enterprise | 지원: 열마다 정렬, 필터링, 고정, 이동, 너비 맞춤, 숨기기가 가능하고, 모든 열을 한꺼번에 표시하거나 숨길 수 있음 |
| 여러 열 정렬, 빠른 검색, 페이지 나누기, 행 선택 | Community | 지원 |
| 열 필터 | Community: 조건 최대 2개, 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 내보내기, 빠른 검색, 다중 선택을 지원합니다. 그룹화, 합계, Excel 내보내기에 Enterprise가 필요한 AG Grid 36으로는 다음과 같습니다.
Needless UI 그리드로는 다음과 같습니다.
몇 가지가 다르게 동작합니다. 선택은 행의 id인 키를 담으므로 새 데이터가 들어와도 유지됩니다. 행 자체가 필요하면 키로 행을 다시 찾으세요. 그룹은 처음에 열려 있습니다. 그룹의 레이블은 보이는 열 중 첫 번째 열에 표시되고 검색은 보이는 열만 대상으로 하므로, 그룹화한 열의 값도 검색되어야 한다면 그 열을 표시해 두세요. 또 exportXlsx()는 파일을 내려받지 않고 반환합니다. 필터링하고 정렬한 행을 담은 시트 하나이며, 그룹 행은 들어가지 않습니다.
빠진 기능이 필요하다면
앱이 피벗, 차트, 클립보드와 범위 선택, 서버 측 그룹화, 열 그룹에 의존한다면 아직은 Needless UI 그리드가 AG Grid를 대신할 수 없습니다. 필요한 기능은 이슈로 등록해 주세요. 그 밖의 것은 데이터 그리드 페이지에서 모든 입력, 출력, 예제를 확인하세요.