React 行のページング

    行のページングは​​現在 Ignite UI for React Data Table / Data Grid 自体には実装されていませんが、データソースを動的に切り替えることで同様の結果を得ることができます。

    React 行のページングの例

    概要

    上記のサンプルでは、ページングは​​ Ignite UI for React Data Grid に組み込まれていないため、データの配列を取り込み、そのデータの一部をページとして出力するように設計されたカスタム Pager コンポーネントを作成しました。このページデータは Ignite UI for React Data Grid に提供され、自動的にその新しいデータが表示されます。

    Note

    Pager コンポーネントのソース コードは、Ignite UI for React ダウンロードで利用できます。

    Pager コンポーネントの列のソート、行のグループ化、列のフィルターなどをサポートするために、独自のバージョンのデータ ソースを保持しています。ソート、グループ、またはフィルターが Ignite UI for React データ グリッドに追加されると、Pager 内のデータ ソースの内部バージョンが、一致するソート、グループ、またはフィルターで更新されます。このデータソースは、これらに基づいてデータのビューを変更し、変更を反映するデータを提供します。

    コード スニペット

    上記のサンプルが Pager コンポーネントを使用する方法:

    <div>
        <IgrDataGrid
            ref={this.onGridRef}
            sortDescriptionsChanged={this.onSortChanged}
            groupDescriptionsChanged={this.onGroupChanged}
            filterExpressionsChanged={this.onFilterChanged} />
        <Pager
            ref={this.onPagerRef}
            dataSource={this.data}
            pageSize={20}
            pagedChanged={this.onPageChanged}/>
    </div>
    
    private data: any[];
    
    constructor(props: any) {
        super(props);
    
        this.onGridRef = this.onGridRef.bind(this);
        this.onPagerRef = this.onPagerRef.bind(this);
        this.data = SharedData.getEmployees();
    }
    
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
    }
    
    public onPageRef(pager: Pager) {
        this.pager = pager;
    }
    
    private onSortChanged = () => {
        if (this.pager) {
            this.pager.applySorts(this.grid.sortDescriptions);
        }
    }
    
    private onGroupChanged = () => {
        if (this.pager) {
            this.pager.applyGroups(this.grid.groupDescriptions);
        }
    }
    
    private onFilterChanged = () => {
        if (this.pager) {
            this.pager.applyFilters(this.grid.filterExpressions);
        }
    }
    
    private onPageChanged = (pageNumber: number, data: any[]) => {
        this.grid.dataSource = data;
        this.grid.flush();
        this.grid.scrollToRowByIndex(0);
    };
    

    Pager コンポーネントの pageChanged イベントは、ページが変更されたときにそれを通知し、新しいページのデータを提供します。サンプルはこのデータを受け取り、表示用に React データ グリッドに渡します。