Angular Data Grid for
Enterprise Applications

High-Performance Virtualization

그리드는 뷰포트에 보이는 행과 열만 렌더링하며, 데이터셋 크기와 상관없이 DOM 크기를 일정하게 유지합니다. 팀은 100만 개 이상의 레코드를 부드럽게 60fps 스크롤과 즉시 스크롤 위치 복원으로 불러온다.

행과 열 가상화 모두 지원되며, 이는 행만 가상화하는 그리드와 중요한 차별점입니다. 수십 개의 열을 가진 넓은 데이터셋(금융 및 과학 응용 분야에서 흔함)에서는 컬럼 가상화가 스크롤 성능 저하를 유발하는 수평 렌더링 오버헤드를 방지합니다. 또한 가변 행 높이, 극단적인 데이터셋 크기에 대한 지연 스크롤, Angular 조정 주기를 최소화하는 셀 단위 렌더링 최적화도 지원합니다.

일반적인 사용 사례: 실시간 모니터링 대시보드, 금융 거래 블로터, CRM 관리 패널, 그리고 사용자가 표준 HTML 테이블을 압도할 수 있는 데이터셋을 탐색해야 하는 IoT 센서 데이터 디스플레이.

• ✓Virtualization documentation
• ✓Best Angular Data Grid for Large Datasets

정렬, 필터링, 그룹화

다중 열 정렬, 엑셀 스타일의 고급 필터링, 요약 집계가 포함된 행 그룹화가 내장되어 있습니다. 사용자는 이 데이터를 지역별로 그룹화하고, 각 그룹 내 수익별로 정렬한 뒤, 특정 날짜 범위로 필터링하는 등 인터랙티브하게 결합할 수 있습니다.

그룹화된 뷰에는 자동 집계, 합산, 평균, 최소값, 최대값, 그리고 사용자 정의 집계 함수가 포함된 접이식 헤더가 포함됩니다. 필터 UI는 간단한 드롭다운 선택과 고급 조건 빌더(커스텀 술어를 포함, 시작, 커짐, 사이 포함)를 모두 지원합니다. 열 고정은 사용자가 넓은 데이터셋을 수평으로 스크롤하면서 키 식별자 열을 잠글 수 있게 해줍니다.

편집 및 데이터 상호작용

셀 수준 및 행 단위 편집과 내장된 검증, 실행 실행 해제 지원, 트랜잭션 커밋/버려진 워크플로우가 포함됩니다. 이 그리드는 편집 모드 진입, 입력 검증, 변경 커밋 각 단계에서 편집 이벤트를 노출하여 팀이 백엔드 API, 낙관적 업데이트, 승인 워크플로우와 통합할 수 있도록 합니다.

배치 편집은 사용자가 여러 행에 걸쳐 여러 가지를 변경하여 하나의 트랜잭션으로 제출할 수 있게 하여 API 왕복 경로를 줄이고 익숙한 스프레드시트 같은 경험을 제공합니다. 또한 그리드는 클립보드 작업(복사, 붙여넣기, 셀 범위 간 잘라내기)과 서식을 유지한 엑셀 내보내기를 지원하는데, 이는 그리드 기반 애플리케이션과 스프레드시트 간 데이터를 이동하는 팀에 매우 중요합니다.

키보드 내비게이션 및 접근성

셀, 행, 그룹, 에디터 간 완전한 키보드 탐색. 사용자는 그리드에 탭을 넣고, 셀을 화살표로 이동하며, 편집 모드에 들어가고, 필터를 적용하며, 그룹/확장된 섹션을 마우스 없이 완전히 탐색할 수 있습니다. 포커스 관리는 WAI-ARIA 그리드 패턴을 따르므로, 보조 기술 사용자도 마우스 사용자와 동일한 작업 흐름을 누릴 수 있습니다.

ARIA 역할과 라이브 지역은 WCAG 2.1 AA 요구사항을 충족하는 스크린 리더 지원을 제공합니다. 기업 조달팀은 점점 더 벤더 평가의 일부로 접근성 준수를 요구하고 있습니다—Ignite UI 그리드는 사후 우회 방법이나 맞춤형 ARIA 오버레이 없이 섹션 508과 VPAT 감사를 통과하도록 설계되었습니다.

계층적 및 트리 그리드

대부분의 그리드는 트리 그리드 또는 평면 그리드를 제공합니다. Ignite UI for Angular 두 가지를 모두 지원합니다: 단일 계층 확장 가능한 행(조직도, 파일 시스템, 카테고리 분류체계)을 위한 트리 그리드와 중첩된 마스터 디테일 관계(주문→ 항목 → 배송, 또는 계정 → 연락처 → 활동)을 위한 계층적 그리드입니다.

두 패턴을 하나의 라이브러리에서 지원하는 것은 의미 있는 차별점입니다—경쟁사는 거의 없는 동일한 구성 라이브러리에서 두 패턴을 모두 제공합니다. 관계형 자료구조를 시각적으로 표현해야 하는 팀은 맞춤형 확장/붕괴 로직을 만들거나 중첩된 데이터 그리드 인스턴스를 수동으로 관리하지 않고도 이를 수행할 수 있습니다. 두 그리드 유형 모두 동일한 API 규칙을 공유하므로, 한 가지를 배운 개발자도 다른 것에 동일한 패턴을 적용할 수 있습니다.

• ✓Tree Grid documentation