Skip to main content Skip to footer
React Icon

React Datagrid Paging

A common technique for dealing with large collections of data, Paging from Wijmo's React datagrid, FlexGrid, delivers powerful capabilities for React applications.

Paging

Wijmo's React datagrid, FlexGrid, uses the CollectionView component to allow client-side paging by default. This allows you to generate datagrids that display a reasonable amount of data per page.

Paging Demo

Server-Side Paging

Wijmo includes an ODataCollectionView class that is designed to work with FlexGrid to connect your React application to OData data sources. Use the ODataCollectionView in conjunction with FlexGrid to implement server-based paging for OData data sources.

Server-Side Paging Demo

No Scrollbars

FlexGrid shows scrollbars automatically when the data is larger than the React datagrid's view range. Remove the scrollbar while maintaining scrolling functionality within FlexGrid.

No Scrollbars Demo

Fast Scroller

The iPad contact list uses a fast scroller to make it easier to look up people by their initials. FlexGrid is able to implement an iOS-style scroller in this same manner. Add a vertical list of initials to the datagrid to allow users to quickly navigate to the first value that matches the request.

Fast Scroller Demo

Scrolling and ViewRange

When a user selects a cell, FlexGrid ensures that it is displayed in view by calling the scrollIntoView method. Use this method to jump to specific cells without scrolling through the React datagrid.

Scrolling and ViewRange Demo