How to customize PrimeNG TurboTable paginator?

Question

I am using PrimeNG TurboTable in Angular 6.

Here's html

<p-table #dataTable
    [value]="primengTableHelper.records"                         
    [rows]="primengTableHelper.defaultRecordsCountPerPage"
    [paginator]="true"                         
    [totalRecords]="primengTableHelper.totalRecordsCount">

    <ng-template pTemplate="header">
      <tr>
        <th>{{l('Name')}}</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-record="$implicit">
      <tr [pSelectableRow]="record">
        <td>
          <span>
           {{record.displayName}}
          </span>
        </td>
      </tr>
    </ng-template>
 </p-table>

And Here's component.ts

ngOnInit() {
    this.getRoles();
}

getRoles(): void {
    this.primengTableHelper.showLoadingIndicator();
    let permission = this.permission ? this.selectedPermission : undefined;

    this._roleService.getRoles(permission).subscribe(result => {
        console.log(result);
        this.primengTableHelper.records = result.items;
        this.primengTableHelper.totalRecordsCount = result.items.length;
        this.primengTableHelper.hideLoadingIndicator();
    });
}

The PrimeNG table shows it's default paginator. But I want to make it pretty.

How can I do this? Please help me.

Answer 1

The PrimeNG has paginator component along with the list of structural style classes. You have to read the theme documentation for customization. Here is the list of selectors you can use to set your own styles using CSS:

Name                      Element

ui-paginator              Container element.

ui-paginator-first        First page element.

ui-paginator-prev         Previous page element.

ui-paginator-pages        Container of page links.

ui-paginator-page          A page link.

ui-paginator-next          Next page element.

ui-paginator-last          Last page element.

ui-paginator-rpp-options   Rows per page dropdown

Learn more here: PrimeNG Paginator