angularprimengpaginator

I want to show "All" as an option in primeng p-table paginator

I have a primeng p-table, where I have [rowsPerPageOptions]="[10, 20, 30]", I also want to have an option which says 'All' on click of which it should display the entire row available in the table.

I tried this based on paginator component documentation. [rowsPerPageOptions]="[10, 20, { showAll: All }]"

but this does not help. https://www.primefaces.org/primeng/#/paginator

[rowsPerPageOptions]="[10, 20, { showAll: All }]"

expected: i shall be able to see 'All'

Please provide answer in this stackblitz https://stackblitz.com/edit/github-vmghz6-ytjegc?file=src/app/app.component.html

Solution

  • One way i found is: [rowsPerPageOptions]="[10, 20, records.length]"

    .ui-paginator .ui-dropdown .ui-dropdown-panel ul li:last-child {
  span::before {
    content: "All";
    visibility: visible;
  }
  span::after {
    content: "";
  }
  span {
    visibility: hidden;
  }

    }