React Tree Grid 페이지네이션 개요

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

React Tree Grid 페이지네이션 예제

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

EXAMPLE

DATA

TSX

CSS

export class OrdersTreeDataItem {
    public constructor(init: Partial<OrdersTreeDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem({ ID: 1, ParentID: -1, Name: `Order 1`, Category: ``, OrderDate: `2010-02-17`, Units: 1844, UnitPrice: 3.73, Price: 6884.38, Delivered: true }),
                new OrdersTreeDataItem({ ID: 101, ParentID: 1, Name: `Chocolate Chip Cookies`, Category: `Cookies`, OrderDate: `2010-02-17`, Units: 834, UnitPrice: 3.59, Price: 2994.06, Delivered: true }),
                new OrdersTreeDataItem({ ID: 102, ParentID: 1, Name: `Red Apples`, Category: `Fruit`, OrderDate: `2010-02-17`, Units: 371, UnitPrice: 3.66, Price: 1357.86, Delivered: true }),
                new OrdersTreeDataItem({ ID: 103, ParentID: 1, Name: `Butter`, Category: `Diary`, OrderDate: `2010-02-17`, Units: 260, UnitPrice: 3.45, Price: 897, Delivered: true }),
                new OrdersTreeDataItem({ ID: 104, ParentID: 1, Name: `Potato Chips`, Category: `Snack`, OrderDate: `2010-02-17`, Units: 118, UnitPrice: 1.96, Price: 231.28, Delivered: true }),
                new OrdersTreeDataItem({ ID: 105, ParentID: 1, Name: `Orange Juice`, Category: `Beverages`, OrderDate: `2010-02-17`, Units: 261, UnitPrice: 5.38, Price: 1404.18, Delivered: true }),
                new OrdersTreeDataItem({ ID: 2, ParentID: -1, Name: `Order 2`, Category: ``, OrderDate: `2022-05-27`, Units: 1831, UnitPrice: 8.23, Price: 15062.77, Delivered: false }),
                new OrdersTreeDataItem({ ID: 201, ParentID: 2, Name: `Frozen Shrimps`, Category: `Seafood`, OrderDate: `2022-05-27`, Units: 120, UnitPrice: 20.45, Price: 2454, Delivered: false }),
                new OrdersTreeDataItem({ ID: 202, ParentID: 2, Name: `Ice Tea`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 840, UnitPrice: 7, Price: 5880, Delivered: false }),
                new OrdersTreeDataItem({ ID: 203, ParentID: 2, Name: `Fresh Cheese`, Category: `Diary`, OrderDate: `2022-05-27`, Units: 267, UnitPrice: 16.55, Price: 4418.85, Delivered: false }),
                new OrdersTreeDataItem({ ID: 204, ParentID: 2, Name: `Carrots`, Category: `Vegetables`, OrderDate: `2022-05-27`, Units: 360, UnitPrice: 2.77, Price: 997.2, Delivered: false }),
                new OrdersTreeDataItem({ ID: 205, ParentID: 2, Name: `Apple Juice`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 244, UnitPrice: 5.38, Price: 1312.72, Delivered: false }),
                new OrdersTreeDataItem({ ID: 3, ParentID: -1, Name: `Order 3`, Category: ``, OrderDate: `2022-08-04`, Units: 1972, UnitPrice: 3.47, Price: 6849.18, Delivered: true }),
                new OrdersTreeDataItem({ ID: 301, ParentID: 3, Name: `Skimmed Milk 1L`, Category: `Diary`, OrderDate: `2022-08-04`, Units: 1028, UnitPrice: 3.56, Price: 3659.68, Delivered: true }),
                new OrdersTreeDataItem({ ID: 302, ParentID: 3, Name: `Bananas 5 Pack`, Category: `Fruit`, OrderDate: `2022-08-04`, Units: 370, UnitPrice: 6.36, Price: 2353.2, Delivered: true }),
                new OrdersTreeDataItem({ ID: 303, ParentID: 3, Name: `Cauliflower`, Category: `Vegetables`, OrderDate: `2022-08-04`, Units: 283, UnitPrice: 0.95, Price: 268.85, Delivered: true }),
                new OrdersTreeDataItem({ ID: 304, ParentID: 3, Name: `White Chocolate Cookies`, Category: `Cookies`, OrderDate: `2022-08-04`, Units: 291, UnitPrice: 1.95, Price: 567.45, Delivered: true }),
                new OrdersTreeDataItem({ ID: 4, ParentID: -1, Name: `Order 4`, Category: ``, OrderDate: `2023-01-04`, Units: 1065, UnitPrice: 5.56, Price: 5923.5, Delivered: true }),
                new OrdersTreeDataItem({ ID: 401, ParentID: 4, Name: `Mini Milk Chocolate Cookie Bites`, Category: `Cookies`, OrderDate: `2023-01-04`, Units: 68, UnitPrice: 2.25, Price: 153, Delivered: true }),
                new OrdersTreeDataItem({ ID: 402, ParentID: 4, Name: `Wild Salmon Fillets`, Category: `Seafood`, OrderDate: `2023-01-04`, Units: 320, UnitPrice: 16.15, Price: 5168, Delivered: true }),
                new OrdersTreeDataItem({ ID: 403, ParentID: 4, Name: `Diet Lemonade`, Category: `Beverages`, OrderDate: `2023-01-04`, Units: 437, UnitPrice: 0.5, Price: 218.5, Delivered: true }),
                new OrdersTreeDataItem({ ID: 404, ParentID: 4, Name: `Potatoes`, Category: `Vegetables`, OrderDate: `2023-01-04`, Units: 240, UnitPrice: 1.6, Price: 384, Delivered: true }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrPaginator, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrTreeGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.treeGridRef = this.treeGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    data={this.ordersTreeData}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    primaryKey="ID"
                    foreignKey="ParentID">
                    <IgrPaginator
                        perPage={10}>
                    </IgrPaginator>
                    <IgrColumn
                        field="ID"
                        header="Order ID">
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Order Product">
                    </IgrColumn>
                    <IgrColumn
                        field="Category"
                        header="Category">
                    </IgrColumn>
                    <IgrColumn
                        field="Units"
                        header="Units"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="Price"
                        header="Price"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="OrderDate"
                        header="Order Date"
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Delivered"
                        header="Delivered"
                        dataType="boolean">
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

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

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

용법

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

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

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

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

EXAMPLE

DATA

TSX

CSS

export class OrdersTreeDataItem {
    public constructor(init: Partial<OrdersTreeDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem({ ID: 1, ParentID: -1, Name: `Order 1`, Category: ``, OrderDate: `2010-02-17`, Units: 1844, UnitPrice: 3.73, Price: 6884.38, Delivered: true }),
                new OrdersTreeDataItem({ ID: 101, ParentID: 1, Name: `Chocolate Chip Cookies`, Category: `Cookies`, OrderDate: `2010-02-17`, Units: 834, UnitPrice: 3.59, Price: 2994.06, Delivered: true }),
                new OrdersTreeDataItem({ ID: 102, ParentID: 1, Name: `Red Apples`, Category: `Fruit`, OrderDate: `2010-02-17`, Units: 371, UnitPrice: 3.66, Price: 1357.86, Delivered: true }),
                new OrdersTreeDataItem({ ID: 103, ParentID: 1, Name: `Butter`, Category: `Diary`, OrderDate: `2010-02-17`, Units: 260, UnitPrice: 3.45, Price: 897, Delivered: true }),
                new OrdersTreeDataItem({ ID: 104, ParentID: 1, Name: `Potato Chips`, Category: `Snack`, OrderDate: `2010-02-17`, Units: 118, UnitPrice: 1.96, Price: 231.28, Delivered: true }),
                new OrdersTreeDataItem({ ID: 105, ParentID: 1, Name: `Orange Juice`, Category: `Beverages`, OrderDate: `2010-02-17`, Units: 261, UnitPrice: 5.38, Price: 1404.18, Delivered: true }),
                new OrdersTreeDataItem({ ID: 2, ParentID: -1, Name: `Order 2`, Category: ``, OrderDate: `2022-05-27`, Units: 1831, UnitPrice: 8.23, Price: 15062.77, Delivered: false }),
                new OrdersTreeDataItem({ ID: 201, ParentID: 2, Name: `Frozen Shrimps`, Category: `Seafood`, OrderDate: `2022-05-27`, Units: 120, UnitPrice: 20.45, Price: 2454, Delivered: false }),
                new OrdersTreeDataItem({ ID: 202, ParentID: 2, Name: `Ice Tea`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 840, UnitPrice: 7, Price: 5880, Delivered: false }),
                new OrdersTreeDataItem({ ID: 203, ParentID: 2, Name: `Fresh Cheese`, Category: `Diary`, OrderDate: `2022-05-27`, Units: 267, UnitPrice: 16.55, Price: 4418.85, Delivered: false }),
                new OrdersTreeDataItem({ ID: 204, ParentID: 2, Name: `Carrots`, Category: `Vegetables`, OrderDate: `2022-05-27`, Units: 360, UnitPrice: 2.77, Price: 997.2, Delivered: false }),
                new OrdersTreeDataItem({ ID: 205, ParentID: 2, Name: `Apple Juice`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 244, UnitPrice: 5.38, Price: 1312.72, Delivered: false }),
                new OrdersTreeDataItem({ ID: 3, ParentID: -1, Name: `Order 3`, Category: ``, OrderDate: `2022-08-04`, Units: 1972, UnitPrice: 3.47, Price: 6849.18, Delivered: true }),
                new OrdersTreeDataItem({ ID: 301, ParentID: 3, Name: `Skimmed Milk 1L`, Category: `Diary`, OrderDate: `2022-08-04`, Units: 1028, UnitPrice: 3.56, Price: 3659.68, Delivered: true }),
                new OrdersTreeDataItem({ ID: 302, ParentID: 3, Name: `Bananas 5 Pack`, Category: `Fruit`, OrderDate: `2022-08-04`, Units: 370, UnitPrice: 6.36, Price: 2353.2, Delivered: true }),
                new OrdersTreeDataItem({ ID: 303, ParentID: 3, Name: `Cauliflower`, Category: `Vegetables`, OrderDate: `2022-08-04`, Units: 283, UnitPrice: 0.95, Price: 268.85, Delivered: true }),
                new OrdersTreeDataItem({ ID: 304, ParentID: 3, Name: `White Chocolate Cookies`, Category: `Cookies`, OrderDate: `2022-08-04`, Units: 291, UnitPrice: 1.95, Price: 567.45, Delivered: true }),
                new OrdersTreeDataItem({ ID: 4, ParentID: -1, Name: `Order 4`, Category: ``, OrderDate: `2023-01-04`, Units: 1065, UnitPrice: 5.56, Price: 5923.5, Delivered: true }),
                new OrdersTreeDataItem({ ID: 401, ParentID: 4, Name: `Mini Milk Chocolate Cookie Bites`, Category: `Cookies`, OrderDate: `2023-01-04`, Units: 68, UnitPrice: 2.25, Price: 153, Delivered: true }),
                new OrdersTreeDataItem({ ID: 402, ParentID: 4, Name: `Wild Salmon Fillets`, Category: `Seafood`, OrderDate: `2023-01-04`, Units: 320, UnitPrice: 16.15, Price: 5168, Delivered: true }),
                new OrdersTreeDataItem({ ID: 403, ParentID: 4, Name: `Diet Lemonade`, Category: `Beverages`, OrderDate: `2023-01-04`, Units: 437, UnitPrice: 0.5, Price: 218.5, Delivered: true }),
                new OrdersTreeDataItem({ ID: 404, ParentID: 4, Name: `Potatoes`, Category: `Vegetables`, OrderDate: `2023-01-04`, Units: 240, UnitPrice: 1.6, Price: 384, Delivered: true }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrTreeGrid, IgrPaginator, IgrPaginatorResourceStrings, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts";

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrTreeGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private propertyEditor: IgrPropertyEditorPanel
    private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
    }
    private sizeEditor: IgrPropertyEditorPropertyDescription
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }
    private paginator: IgrPaginator
    private  _paginatorResourceStrings1: IgrPaginatorResourceStrings | null = null;
    public get paginatorResourceStrings1(): IgrPaginatorResourceStrings {
        if (this._paginatorResourceStrings1 == null)
        {
            var paginatorResourceStrings1: IgrPaginatorResourceStrings = {} as IgrPaginatorResourceStrings;
            paginatorResourceStrings1.igx_paginator_label = "Records per page";

            this._paginatorResourceStrings1 = paginatorResourceStrings1;
        }
        return this._paginatorResourceStrings1;
    }

    constructor(props: any) {
        super(props);

        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
        this.treeGridRef = this.treeGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    ref={this.propertyEditorRef}
                    componentRenderer={this.renderer}
                    target={this.treeGrid}
                    descriptionType="WebTreeGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        name="SizeEditor"
                        label="Grid Size:"
                        valueType="EnumValue"
                        dropDownNames={["Small", "Medium", "Large"]}
                        dropDownValues={["Small", "Medium", "Large"]}
                        changed={this.webTreeGridSetGridSize}>
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    data={this.ordersTreeData}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    primaryKey="ID"
                    foreignKey="ParentID">
                    <IgrPaginator
                        perPage={10}
                        resourceStrings={this.paginatorResourceStrings1}>
                    </IgrPaginator>
                    <IgrColumn
                        field="ID"
                        header="Order ID">
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Order Product">
                    </IgrColumn>
                    <IgrColumn
                        field="Category"
                        header="Category">
                    </IgrColumn>
                    <IgrColumn
                        field="Units"
                        header="Units"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="Price"
                        header="Price"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="OrderDate"
                        header="Order Date"
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Delivered"
                        header="Delivered"
                        dataType="boolean">
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webTreeGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var newVal = (args.newValue as string).toLowerCase();
        var grid = document.getElementById("treeGrid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

    #treeGrid {
        --ig-size: var(--ig-size-medium);
    }

cssコピー

Edit in: Codesandbox

API 참조

• IgrTreeGrid
• IgrPaginator

추가 리소스

• 가상화 및 성능
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 선택

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

• Ignite UI for React 포럼
• Ignite UI for React GitHub