AG Grid Feature Catalog

AG Grid Feature Catalog

목적

AG Grid React 문서에서 자주 확인하는 기능을 Storybook 예제 기준으로 구조화합니다.

기능 구조

그룹	기능	패키지 경계	Storybook 예제
Charting	Sparklines	ag-grid-enterprise + ag-charts-community	Data Grid/AG Grid/Charting
Charting	Integrated Charts	ag-grid-enterprise + ag-charts-community	Data Grid/AG Grid/Charting
Charting	Standalone Charts	ag-charts-react + ag-charts-community	Data Grid/AG Grid/Charting
Core Features	Columns	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Rows	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Cells	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Filtering	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Selection	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Editing	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Updating Data	ag-grid-community	Data Grid/AG Grid/Core Features
Core Features	Interactivity	ag-grid-community	Data Grid/AG Grid/Core Features

구현 기준

Core Features

AgGridCoreFeatures는 하나의 그리드에서 다음 동작을 확인합니다.

• Columns: 정렬, 필터, 리사이즈, pinned column
• Rows: rowData 기반 목록과 새 행 추가
• Cells: status badge cellRenderer, 가격 valueFormatter
• Filtering: quick filter와 컬럼 필터
• Selection: multiRow selection
• Editing: editable column과 select cell editor
• Updating Data: 선택 행 가격 갱신
• Interactivity: cell click, selection, edit 이벤트를 외부 UI 상태와 연결

Charting

AgGridCharting은 세 가지 차트 흐름을 분리해서 보여줍니다.

• Sparklines: 그리드 셀 내부의 작은 trend chart
• Integrated Charts: 선택한 grid range를 차트 컨테이너에 생성
• Standalone Charts: grid 없이 AgCharts 컴포넌트로 bar chart 렌더링

사용 시 주의

Sparklines와 Integrated Charts는 AG Grid Enterprise 기능입니다. 실서비스 사용에는 AG Grid Enterprise 라이선스 정책을 확인해야 합니다.

Standalone Charts는 AG Charts React를 직접 사용하는 흐름입니다. Grid와 별개로 대시보드 차트를 구성할 때 사용합니다.

참고 문서

• AG Grid React Key Features: https://www.ag-grid.com/react-data-grid/key-features/
• AG Grid React Filtering Overview: https://www.ag-grid.com/react-data-grid/filtering-overview/
• AG Grid React Sparklines Overview: https://www.ag-grid.com/react-data-grid/sparklines-overview/
• AG Grid React Integrated Charts: https://www.ag-grid.com/react-data-grid/integrated-charts-chart-types/
• AG Charts React Quick Start: https://www.ag-grid.com/charts/react/quick-start/

Storybook

Storybook 경로:

• Data Grid/AG Grid/Feature Catalog
• Data Grid/AG Grid/Core Features
• Data Grid/AG Grid/Charting