CODEWITHSUNDEEP
angularprimengpaginator
Akash Bharati
Akash Bharati

Reputation: 91

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

Upvotes: 4

Views: 6148

Answers (5)

Abdullah Tahan
Abdullah Tahan

Reputation: 2119

For me i wanted to make the all at the end and when i looked to the source control of primeng they unsheft the all to be on top so had to do it using a custom templete

<p-table 
    [value]="products"
    [rows]="productsTable.rows"  
    [paginator]="true"
    [rowsPerPageOptions]="[ 5, 10, 20, 50, 100, 200, products?.length]" 

<ng-template let-item pTemplate="paginatordropdownitem">
      {{ item.value === products?.length ? 'All' : item.value }}
 </ng-template>

Upvotes: 1

Johan Nieto
Johan Nieto

Reputation: 39

@Anmol Jain answer with recent version of prime ng and component scss.

::ng-deep .p-paginator {
  border: 0 none;
  padding: 1em;
  .p-dropdown {
    float: left;
    .p-dropdown-panel {
      ul {
        p-dropdownItem:last-child > li {
          &:last-child {
            span::before {
              content: "All";
              visibility: visible;
            }

            span::after {
              content: "";
            }

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

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

Upvotes: 0

Anmol Jain
Anmol Jain

Reputation: 121

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

enter image description here

Upvotes: 1

Akash Bharati
Akash Bharati

Reputation: 91

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

    }

Upvotes: 5

kshetline
kshetline

Reputation: 13672

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

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

Upvotes: 4

Related Questions