React 계층적 그리드 페이징 개요

React Hierarchical Grid의 Ignite UI for React 페이지 매김 기능은 큰 데이터 집합을 유사한 콘텐츠가 있는 페이지 시퀀스로 분할하는 데 사용됩니다. React 그리드 페이지 매김은 사용자 경험과 데이터 상호 작용을 개선합니다. IgrHierarchicalGrid 페이지 매김은 열을 추가하는 것과 유사하게 태그를 정의 IgrPaginator 하여 그리드 트리에 투영된 별도의 구성 요소를 통해 구성할 수 있습니다. 여느 React 테이블에서와 마찬가지로 React Hierarchical Grid의 페이지 매김은 사용자 지정 페이지에 대한 템플릿을 지원합니다.

React 계층적 그리드 페이징 예제

다음 예제에서는 페이지 매김을 나타내 IgrHierarchicalGrid 고 옵션, 페이지당 항목 사용 및 페이징을 사용하도록 설정하는 방법을 노출합니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 페이지를 빠르게 탐색 IgrHierarchicalGrid 할 수도 있습니다.

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

.gridSize {
    --ig-size: var(--ig-size-small);
}
css

<IgrHierarchicalGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator perPage={10}>
    </IgrPaginator>
</IgrHierarchicalGrid>
tsx

용법

IgrPaginator 구성 요소는 아래 예제의 구성 요소와 IgrHierarchicalGrid 함께 사용되지만 페이징 기능이 필요한 경우 다른 구성 요소와 함께 사용할 수 있습니다.

자식 그리드 내의 Paginator 구성

페이지네이터 구성요소 데모

API 참조

추가 리소스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.