EN

페이지 3: 정렬, 필터링 및 페이지네이션

3. 정렬, 필터링 및 페이지네이션

AG Grid는 대량의 데이터를 쉽게 탐색하고 관리할 수 있도록 강력한 정렬(Sorting), 필터링(Filtering), 페이지네이션(Pagination) 기능을 제공합니다.

3.1. 정렬(Sorting) 활성화

columnDefs에 sortable: true를 설정하여 개별 컬럼의 정렬을 활성화하고, 그리드 전체에 defaultColDef를 사용하여 기본 정렬을 설정할 수 있습니다.

const defaultColDef = useMemo(() => ({
  sortable: true, // 모든 컬럼 기본 정렬 가능
  filter: true,   // 모든 컬럼 기본 필터 가능
}));

// ... AgGridReact 컴포넌트
<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
></AgGridReact>

3.2. 필터링(Filtering) 사용

filter: true를 설정하면 각 컬럼 헤더에 필터 아이콘이 나타나 데이터를 필터링할 수 있습니다. AG Grid는 텍스트, 숫자, 날짜 등 다양한 기본 필터를 제공합니다.

// columnDefs 예시:
{ headerName: "제품명", field: "product", filter: true },
{ headerName: "가격", field: "price", filter: 'agNumberColumnFilter' } // 숫자 필터 명시

3.3. 페이지네이션(Pagination) 구현

그리드에 pagination={true} 속성을 추가하여 페이지네이션을 활성화합니다. paginationPageSize로 페이지당 행 수를 정의할 수 있습니다.

// ... AgGridReact 컴포넌트
<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  pagination={true}
  paginationPageSize={10} // 한 페이지에 10개 행 표시
></AgGridReact>
Contact Us