React Row Paging

Row Paging is not currently implemented within the Ignite UI for React Data Table / Data Grid itself however by switching the data source dynamically you can achieve similar results.

React Row Paging Example

Edit on CodeSandbox

Overview

For the above demo, since paging is not built into the Ignite UI for React Data Grid, we created a custom Pager component which was designed to take in an array of data and output portions of that data as a page. This paged data can then be provided to the Ignite UI for React Data Grid which will automatically display that new data.

Note

The source code for the Pager component is available in the Ignite UI for React download.

In order to support things like column sorting,Row grouping and column filtering the Pager component keeps its own version of the data source. When a sort, group or filter is added to the Ignite UI for React Data Grid the internal version of the data source inside the Pager is updated with the matching sort, group or filter. This data source then mutates its view of the data based on these and provides updated data to reflect this.

Code Snippet

Here is how the above demo uses this Pager component:

<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);
};

The pageChanged event on the Pager component will notify us when it changes the page and will provide the data for the new page. The sample takes this data and passes it to the React data grid for display.