How to add 'All' option for Angular Material paginator?

Question

I would like an option to display all rows in the table. Angular Material only supports numbers for page size options. I need something like this:

[pageSizeOptions]="[5, 10, 25, 50, 100, 'All']"

Answer 1

You could try this:

[dataSource] = "dataSource"
...
[pageSizeOptions] = "[5, 10, 25, 50, 100, dataSource.data.length]"

Answer 2

You could try this in your component html file under mat-paginator : " [pageSizeOptions]="getPageSizeOptions() "

And in your css file add following CSS, that will change the total length variable content with "All" Text :

mat-option:last-child:before{
    content: 'All';
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
}
mat-option:last-child .mat-option-text{
  display: none;
  position: relative;
}

And in your component .ts file:

getPageSizeOptions(): number[]{
    console.log(this.paginator.length);
    if(this.paginator.length>this.maxperpage)
    return [5, 10,50,this.maxperpage, this.dataSource.data.length];
    else
    return [5,10,50, this.maxperpage];
  }

Hopefully this will help!!!

Answer 3

please see the actual result https://stackblitz.com/edit/angular-hpnbha-z4l4zf?file=app/table-pagination-example.ts

1) table-pagination-example.html

<mat-paginator [pageSizeOptions]="getPageSizeOptions()

2) table-pagination-example.ts

maxall : number=20;
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
getPageSizeOptions(): number[] {
if (this.dataSource.paginator.length>this.maxall)
return [5, 10, 20,  this.dataSource.paginator.length];
else
return [5, 10, 20, this.maxall];
}
}

3)style.css

mat-option:last-child:before{
content: 'All';
float: left;
text-transform: none;
top: 4px;
position: relative;
}
mat-option:last-child .mat-option-text{
display: none;
position: relative;
}

Answer 4

Demo: https://stackblitz.com/edit/angular-hpnbha-5ewyqw?file=app%2Ftable-pagination-example.html (forked from rahul tailor's answer)

---

In case you have non optional pagination on the backend you want to send the page size to the API.

Therefore you have to know the parameter in advance. In this case you can use the maximal Integer value (2'147'483'647) of Java (or any other limit that is suitable for your situation)

This workaround will only change the label, in the background your predefined maximal value will be used.

component.html

<mat-paginator (page)="paginatorHtmlElement.nativeElement.querySelector('div.mat- 
    select-value > span > span').innerHTML = paginator.pageSize == 2147483647? 'All': paginator.pageSize" 
    #paginator #paginatorElement
    [length]="dataSource.totalItemCount 
    [pageIndex]="0" [pageSizeOptions]="[5, 10, 25, 50, 100, 2147483647]" 
    [pageSize]="10">
</mat-paginator>

component.ts

@ViewChild(MatPaginator)
paginator: MatPaginator;
@ViewChild('paginatorElement', {read: ElementRef})
paginatorHtmlElement: ElementRef;

global stylesheet (styles.css)

mat-option[ng-reflect-value='2147483647'] > span {
   display: none;
}

mat-option[ng-reflect-value='2147483647']:last-child:after {
   content: 'Max' !important;
   visibility: visible !important;
   display: block !important;
   position: absolute !important;
   background-color: transparent !important;
}`

Its still a workarround but it also allows you to use a large page size option like 10000 as the maximal size and display it in a more readable way.

If you use another value as your max page size just replace the value 2147483647 in my snippets.

Answer 5

Using CSS selectors like:

mat-option[ng-reflect-value='2147483647']:last-child:after

will not work in production because when compiling code to production you will lose unique selectors.

Answer 6

The many of the answers above do not work with data called from a database due to loading time of the GET. And some have a bunch of unneeded code and CSS... What I did was as follows:

In your template for the paginator:

<mat-paginator [pageSizeOptions]="!pageLoading ? getPageSizes() : [5, 10, 20]"></mat-paginator>

And then in the .ts file:

getPageSizes(): number[] {
    if (this.dataSource.data.length > 20) {
      return [5, 10, 20, this.dataSource.data.length];
    }
    else {
     return [5, 10, 20];
    }
  }

And lastly the .css file:

::ng-deep mat-option:last-child:before{
  content: 'All';
}
::ng-deep mat-option:last-child .mat-option-text{
  display: none;
}

I noticed sometimes the styling I put on the mat-(whatevers) classes sometimes would not work. ::ng-deep fixes that and makes sure that your styling will effect it.

The lambda expression checks to see if your page is loading the data, if it is then there are some "default" choices. If not, and thus if the dataSource is populated, it will call the function and display the default choices + the "All" choice. pageLoading is just a boolean that I set initially to TRUE and then inside the subscribe of the call to my service to GET the data at the very end, but still inside the subscribe function , I set pageLoading to FALSE. The answers above will not work with database data because of the loading time to GET it and thus the dataSource length being null. So unless your data is hard coded... the answers above probably won't work (nicely).