React Grid 페이지네이션 개요

    React Grid의 Ignite UI for React 많은 양의 데이터를 유사한 콘텐츠가 있는 일련의 페이지로 분할하는 데 사용됩니다. React 그리드 Pagination은 사용자 경험과 데이터 상호 작용을 개선합니다. IgrGrid Pagination은 열을 추가하는 것과 유사하게 IgrPaginator 태그를 정의하여 그리드 트리에 투사된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 React 테이블에서와 마찬가지로 React Grid의 Pagination은 사용자 지정 페이지에 대한 템플릿을 지원합니다.

    React Grid 페이지네이션 예제

    다음 예제는 IgrGrid 페이지 매김을 나타내고 페이지당 항목 옵션 사용법과 페이징을 활성화하는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 IgrGrid 페이지를 빠르게 탐색할 수도 있습니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

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

    .gridSize {
    --ig-size: var(--ig-size-small);
}
css
    <IgrGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator key="paginator" perPage="10">
    </IgrPaginator>
</IgrGrid>
tsx

    Group By를 사용한 페이징

    그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다.

    페이징과 그룹화 기준 간의 통합은 그룹화 기준 항목에 설명되어 있습니다.

    Ignite UI for React | CTA 배너

    용법

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

    const selectOptions = [5, 15, 20, 50];

<IgrGrid className="gridSize">
    <IgrPaginator key="paginator" perPage={10} page={1} selectOptions={selectOptions}>
    </IgrPaginator>
</IgrGrid>
tsx

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스

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