md-table-pagination Page selector with 'big data'
See original GitHub issueI’ve been playing around with this module and server side pagination of ‘big data’ (big data = ~70,000 records - Not that big), and have noticed that within the module ‘md-table-pagination.html’ where the <md-option> for each page number is being generated is causing CPU bottleneck.
angular.module('md-table-pagination.html', []).run(['$templateCache', function($templateCache) {
$templateCache.put('md-table-pagination.html',
//Excerpt
'<md-select class="md-table-select" ng-show="showPageSelect()" ng-model="page" md-container-class="md-pagination-select" ng-change="onPageChange()" aria-label="Page">\n' +
' <md-option ng-repeat="num in range(pages()) track by $index" ng-value="$index + 1">{{$index + 1}}</md-option>\n' +
'</md-select>\n' +
Namely: ng-repeat="num in range(pages()) track by $index"
So the higher the pages() return value, the more md-option elements obviously, and it just becomes really sluggish. Technically not a fault of md-data-table, more-so angular material however it does seem logical to have some sort of page range algorithm or some logical UX to handle this part logically when there’s an excessive amount of pages.
tl;dr: Page selector in <md-table-pagination> causes bottleneck when there’s lots of pages.
Issue Analytics
- State:
- Created 8 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
Material Design: md-table-pagination doesn't work
Your code is incomplete so can't say where and what is wrong, but you can use below code and it works fine. Here-Codepen...
Read more >Bootstrap 4 table pagination - examples & tutorial.
Table pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.
Read more >Adding pagination to the mat-table using mat ... - Angular Wiki
mat-table selector in Angular used to display data in table format. ... but dividing the large number of records in a tables into...
Read more >Data table with sorting, pagination, and filtering.
MatTableDataSource} from '@angular/material';. /**. * @title Data table with sorting,. pagination, and filtering. */. @Component({. selector: ...
Read more >Data tables - Material Design
Dropdown menus are used in the pagination section of the table to allow selection of rows-per-page. Progress indicator appears under the header row...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi all, in
v0.10.0
the page dropdown uses virtualization.@Mechzeit @nevernet Is latest version v0.10.0 solved your issue with pagination big tables? I have the same issue now with table > 2 500 000 rows.