toggle menu

[ngGrid] ng-grid - 앵귤러 기반 그리드 UI

2012. 12. 11. 19:10 AngularJS
앵귤러를 쓰다보면, 앵귤러의 특색을 잘 살린 컴포넌트들의 필요를 느낄때가 많다.

처음에 앵귤러와 jQuery를 같이 쓸때 어느부분까지 앵귤러를 쓰고 어느부분까지 jQuery를 써야할지 혼란을 느끼는 것처럼,
모든 영역이 깔끔하게 앵귤러로만 구현되었으면 하는 바램이 드는 것이 사실이다.

그러던 참에 얼마전 ng-grid라는 앵귤러 기반의 그리드가 나왔다.
http://angular-ui.github.com/ng-grid/


원래는 knockout 프레임웍 기반으로 제작된 것을 앵귤러 기반으로 포팅하고 있다고 한다.
가상 스크롤링을 지원하기 때문에 10만건 이상의 데이터에서도 정상적으로 그리드를 그려줄 수 있다고 한다.
실제로 100만건 이상도 무리없이 그려주는 것을 확인했다.

1.3.6 버전을 실제 업무에서 활용해본 결과 충분히 타 그리드를 대체할만하다.
앵귤러의 철학이 잘 반영되어있고, 템플릿 개념을 도입해서 셀단위, 로우단위 등으로 내가 원하는 형태로 레이아웃이나 클릭 이벤트 등을 설정할 수 있기 때문에 앵귤러를 잘 이해하고 있다면, 매우 확장성있게 활용 가능해보인다.

간단한 ng-grid 사용 예제를 jsFiddle로 작성해 보았다.
더블 클릭을 할 경우 해당 컬럼을 바로 inline에서 수정할 수 있고, Shift 키를 누른 채로 컬럼헤더를 클릭하면 다중 컬럼 정렬이 가능하다. 그 외에도 다양한 기능을 포함하고 있는데, 자세한 기능은 ngGrid Github 을 참고하자. 





AngularJS 관련 포스팅 더보기