Angular

React

Polymer

VueJS

Angular 1

Javascript

Aurelia

Web component

​개발자

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

사용자

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

웹애플리케이션

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

ag-Grid 기능 데모 보기

ag-Grid 주요 기능들

​컬럼 정의

컬럼들은 컬럼정의 리스트를 통해서 그리드내의 컬럼들이 설정됩니다. 컬럼 제목, 폭과 같은 속성들을 모두 세세하게 설정할 수 있습니다.  

컬럼 그룹

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

​컬럼 헤더

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

컬럼 리사이즈

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

컬럼 필터

컬럼 필터는 컬럼 메뉴안에서 기본적으로 제공됩니다. 텍스트, 숫자, 날짜와 같은 필터기능을 제공하며 사용자가 원하는 필터도 셋팅할 수 있습니다.

외부 필터

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

​퀵 필터

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

열 정렬

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

열 선택

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

컬럼 범위 선택

그리드 셀위에서 마우스를 드래그 하면 컬럼을 선택할 수 있습니다. 특정 데이타를 부각시키거나 그리드 내용을 복사할 때 유용하게 사용됩니다.

그리드 크기

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

컬럼 스패닝

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

열 고정

열고정기능을 통해 하나 또는 여러개의 열을 그리드 상단 또는 하단에 고정시킬 수 있습니다. 고정된 열은 항상 노출되며 스크롤이 되어도 그 위치를 유지합니다.

셀 스타일링

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

셀 편집

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

키보드 네비게이션

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

ag-Grid 기본 테마