[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Grid/Table Pagination
Tabular table UIs are used commonly in many web products. Building a tabular table UI from scratch isn't easy, however, Ignite UI for Blazor grid, creating a Table UI is simple, and binding large amounts of local or remote data to the Blazor grid is easy. Since the grid is virtualized by default, you are not required to include table pagination to show large data sets. It is mainly used due to its most efficient ways of organizing complex data in the UI. With table pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without actually needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows / buttons that let users flip through pages, as demonstrated here:
Row Paging is enabled within the Ignite UI for Blazor Data Table / Data Grid by setting the IsPagerVisible property. In addition, you can limit the maximum number of visible rows by setting PageSize.
Blazor Row Paging Example
Overview
From a UX perspective, table pagination has pros and cons. According to a recent article on UX Matters, here is a breakdown of the good and the bad when it comes to table pagination.
Table Pagination Benefits:
- Limits user choice
- Clicks are measurable
Table Pagination Negatives:
- Users still have to scrolls
- Pagers work and behave differently from site to site
- Too many UI controls can be confusing
- Users perceive paging and slow and cumbersome
- Users may not notice pagination controls
- Page loading may be slow
- Users are confused whether actions apply to Page or entire set of data
With the Ignite UI Blazor grid, we allow the developer to add paging, however, as the grid has infinite scrolling built in by default, we recommend infinite (or virtual) scrolling vs. adding a pager to the grid. With virtualized, infinite scrolling as the default user experience, you get:
- Best performance while still having control or how much data is ‘paged’ via the scrolling interaction
- Natural approach to scrolling all content
- All interactions are clear to the end user
- Maps to the natural interactions on a mobile UX
Blazor Grid/Page Synchronization
When users interact with the Grid like sorting and grouping, and you have enabled the Blazor Pager on the grid, you need to use the following functions to ensure that the Blazor Pagination data is synchronized with the Blazor table display.
- applySorts
- applyGroups
- applyFilters