React

Polymer

VueJS

Angular 1

Javascript

Aurelia

Web component

개발자들은 ag-Grid를 사랑합니다. 한번 ag-Grid 로 옮기고 나면 삶이 편해집니다. 애플리케이션 개발이 빨라져 더 중요한 일들에 시간을 쏟을 수 있게 됩니다.

사용자

사용자들은 그리드를 엑셀로 엑스포트하거나 다른 리포팅 툴을 이용하는 횟수가 줄어들 것입니다. ag-Grid 의 진보한 기능들이 사용자를 우리 애플리케이션에 계속 머무르게 할 것입니다.

웹애플리케이션

ag-Grid 가 사용된 애플리케이션은 부드럽게 동작하여 좀 더 전문적이고 진짜 엑셀같은 느낌을 줄것입니다. 뛰어난 그리드야 말로 뛰어난 애플리케이션의 기본중의 기본입니다.

컬럼 그룹

컬럼들은 그룹으로 묶일 수 있습니다. 또한 그룹내에서 확장해서 펼치기 하거나 숨기게도 할 수 있습니다. 

​컬럼 헤더

컬럼 헤더가 표시될때 컬럼 높이도 설정이 가능하며 텍스트의 방향도 원하는 대로 조정할 수 있습니다.

컬럼 리사이즈

컬럼헤더를 드래그해서 컬럼 크기를 재조정할 수 있습니다. 컬럼 크기가 재조정되면 컨텐츠 내용이 자동으로 채워지며 컨텐츠 내용에 맞게 컬럼 크기가 자동 맞춤 되는 기능을 제공합니다.

외부 필터는 그리드 외부에 필터 값을 설정할 수 있게 합니다. 예를 들어 사용자가 지정한 필터를 그리드 밖에 위치시킬 수가 있게 됩니다.

​퀵 필터

퀵필터는 단순한 텍스트 검색 기능을 통해 모든 칼럼을 동시에 걸러줍니다. 마치 지메일에서 이메일 검색하는 것과 같습니다. 

열 정렬

열 정렬은 데이타를 정렬합니다. 컬럼 헤더 클릭을 통해 오름차순 내림차순 정렬이 가능하며 쉬프트 키로 동시에 여러 컬럼을 선택하여 멀티 컬럼 정렬도 가능합니다.

열을 선택할때는 컬럼을 클릭하거나 체크박스를 선택하여 열을 선택할 수 있으며 그룹열을 클릭하면 자식 열들도 모두 선택이 됩니다.

컬럼 범위 선택

그리드 크기

CSS 를 이용해서 그리드 넓이와 높이를 설정할 수 있습니다. 만약 그리드를 포함하고 있는 애플리케이션의 사이즈가 변하면 그리드 사이즈도 가변적으로 변하게 만들 수 있습니다.

컬럼 스패닝

컬럼 스패닝 기능은 하나의 셀이 여러 컬럼에 걸쳐 스패닝 되는 기능을 지원합니다. 엑셀에서 지원되는 기능과 유사합니다. 

개별 셀 데이타를 기반으로 각각의 셀 스타일을 CSS 로 지정할 수 있습니다. 예를 들어 음수인 셀의 배경색을 붉은 색으로 지정한다던가 100보다 큰 값이 있는 셀 배경색을 초록생으로 지정하는 등의 기능들을 제공합니다.

셀 편집

셀 편집 기능을 통해 사용자가 그리드 데이타를 업데이트 할 수 있습니다. 

키보드 네비게이션

키보드 네비게이션을 지원하는 관계로 커서키나 탭키를 통해서 그리드 내에서 빠른 이동이 가능합니다.