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

Question

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

Answer 1

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;
  }

    }

Answer 2

You're just missing the quotes around 'All':

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

Answer 3

This is most correct answer resulting in display value of all dropdown items as :ALL, I had to make some alterations to the styling to fix that. Here is the final corrected style:

.ui-paginator {
  border: 0 none;
  padding: 1em;

  .ui-dropdown {
    float: left;

    .ui-dropdown-panel {
      ul {
        p-dropdownItem:last-child > li {
          &:last-child {
            span::before {
              content: "All";
              visibility: visible;
            }

            span::after {
              content: "";
            }

            span {
              visibility: hidden;
            }
          }
        }
      }
    }
  }

  .ui-paginator-current {
    float: right;
  }
}