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

So, when you're dealing with multiple paginators, like around 2 or 3 of them, you can actually smoothly add an option for 'All' right into the choices for pagination. The cool thing is, doing this doesn't mess with the mat-option elements at all.

On the other hand,If you employ the ng-reflect approach, it might encounter issues when transitioning to a production environment due to changes in Angular's internal workings.I've got a simple, straightforward solution that I've personally tried and tested that is effective in my case:

https://github.com/angular/components/issues/8150#issuecomment-1671072641

Answer 2

The Angular Material Paginator does not directly support an "All" option for page size. From the information and discussions in this thread, I've found a workaround that targets the Paginator specifically, and doesn't interfere with other mat-option elements in the application. Here's a step-by-step guide:

Step 1: Modify your TypeScript component

Start by adding a variable named maxall in your TypeScript component. This will represent the maximum number of rows per page before adding the "All" option.

export class YourComponent {
  maxall: number = 20;
  // ...
}

Next, ensure you're setting the paginator for your data source in ngOnInit:

ngOnInit() {
  this.dataSource.paginator = this.topPaginator;
  // ...
}

Then, create a method to dynamically generate the pageSizeOptions:

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

This method checks if the total number of rows is less than or equal to maxall. If it is, the "All" option is set to the total number of rows. Otherwise, it's set to 20.

Step 2: Modify your HTML template

In your Paginator component, use getPageSizeOptions() to dynamically set pageSizeOptions:

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

Step 3: Apply CSS

Lastly, apply CSS to visually replace the last option with "All". Note that you need to target the specific mat-select-panel of the paginator. This can be achieved by using its aria-label attribute.

.mat-select-panel[aria-label="Items per page:"] mat-option:last-child::before {
  content: 'All';
  position: relative;
  display: block;
}

.mat-select-panel[aria-label="Items per page:"] mat-option:last-child .mat-option-text {
  display: none;
}

With this workaround, the last option in the paginator's dropdown will display as "All", allowing users to select it to view all rows.

Answer 3

[pageSizeOptions]="[10, 25, 50, 100, this.paginator.length]"

Answer 4

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

Answer 5

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 6

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 7

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 8

You could try this:

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