question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-table-pagination Page selector with 'big data'

See original GitHub issue

I’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.

https://github.com/daniel-nagy/md-data-table/blob/1cef4dbacd977110ed70ccd74609f8228772b64a/dist/md-data-table.js#L1292

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:open
  • Created 8 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
daniel-nagycommented, Mar 27, 2016

Hi all, in v0.10.0 the page dropdown uses virtualization.

0reactions
MikeSamcommented, Jul 31, 2017

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found