Invisible treetable paginator icons in PrimeNG showcase

UI Components for Angular
Post Reply
Setra_Art
Posts: 6
Joined: 21 Oct 2019, 16:39

06 Jun 2023, 18:06

Hello guys,

Since PrimeNG 15 (and also in 16), there is an issue on the treetable.
You can look at your basic paginator just there:
https://primeng.org/treetable#paginatorbasic

You can see that the next and last-page buttons are present when you hover/click them, but the arrow icons are not visible.

Here is a minimal code to reproduce:

Code: Select all

 <p-treeTable [value]="files" [paginator]="true" [rows]="5">
    <ng-template pTemplate="header">
      <tr>
        <th>Name</th>
        <th>Size</th>
        <th>Type</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
      <tr [ttRow]="rowNode">
        <td>
          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
          {{ rowData.name }}
        </td>
        <td>{{ rowData.size }}</td>
        <td>{{ rowData.type }}</td>
      </tr>
    </ng-template>
  </p-treeTable>

Code: Select all

ngOnInit() {
    this.files = [
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      },
      {
        data: {
          name: 'Applications',
          size: '200mb',
          type: 'Folder'
        }
      }
    ];
  }
Is there any workaround available ?

Thank you :)

Graham1
Posts: 1
Joined: 14 Jun 2023, 11:09

14 Jun 2023, 11:13

I can try to help you with the issue you're facing based on the code you provided.
To troubleshoot this issue see below.

* Ensure that you are using the latest version of PrimeNG (version 16) as you mentioned. Sometimes, issues like missing icons can be resolved by updating to the latest version that may include bug fixes.
* Double-check that you have included all the necessary dependencies and CSS stylesheets required by PrimeNG. Make sure you have imported the appropriate styles for the tree table and paginator components.
* PrimeNG uses Font Awesome icons by default. Confirm that you have included the Font Awesome CSS file in your project. If you're using a different icon library or have customized your icon setup, ensure that it is correctly configured.
* Review your custom CSS styles to ensure that they are not overriding or hiding the icon visibility in the paginator buttons. Inspect the page using browser developer tools to see if there are any conflicting CSS rules that might be affecting the display of the icons.

Setra_Art
Posts: 6
Joined: 21 Oct 2019, 16:39

03 Jul 2023, 17:12

Hello Graham1, thanks for your answer, I appreciate it
The fact is that it is present in the last version of the PrimeNG showcase as I said in my previous message ^^
So I think it's really a side-effect that appeared in PrimeNG 15.

here is a screen for better understanding:
Image

Best regards,
Antoine

Setra_Art
Posts: 6
Joined: 21 Oct 2019, 16:39

23 Aug 2023, 15:09

It seems to be solved on the PrimeNG showcase :)

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests