1

I am using the PrimeNG (v15.0.0) library's p-table component in an Angular 15 application, and I am trying to make the table header sticky. However, the sticky attribute is not working as expected.

I tried the offical solution of PrimNG by apply CSS

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
            position: -webkit-sticky;
            position: sticky;
            top: 0px;
        }

        @media screen and (max-width: 64em) {
            :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
                top: 0px;
            }
        }

my HTML template look like:

<p-table [value]="data" [scrollable]="true">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of columns; let i = index">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data let-column>
        <tr>
            <td>
                {{column.name}}
            </td>
            .
            .
            .
        </tr>
    </ng-template>
</p-table>

In order for the sticky position to work i set the scrollable attribute to true on the p-table element.But header still not sticky.

PS: Before upgrade PrimNG version to v15, it was working correctly!

Hani
  • 31
  • 4
  • 1
    Can you provide a stackblitz with your code? – Schrader Jan 02 '23 at 11:57
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jan 02 '23 at 12:44
  • ok i added some HTML code, thanks! – Hani Jan 02 '23 at 13:54
  • @Schrader you can check this example [link](https://stackblitz.com/edit/primeng-tablesticky-demo?file=README.md) where stick feature work fine for PrimNG 13. BUT if you update dependancy you can notice that sticky feature not work any more – Hani Jan 02 '23 at 14:34
  • Cant reproduce your error but there are some closed issues on github and some with chrome 90. https://github.com/primefaces/primeng/issues/12287 – Schrader Jan 02 '23 at 15:07
  • 1
    As @Schrader mentioned, there is a issue. It seems that the documents are not updated correctly for the new version. Have a look at the file `tablestickydemo.ts` in the [prime repository](https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/table/tablestickydemo.ts) and try to add the missing part `:host ::ng-deep .p-datatable > .p-datatable-wrapper {overflow: visible;}` – riorudo Jan 03 '23 at 10:16
  • Thanks @riorudo @Schrader yes i agree. PrimNG documentation isn't up to date, adding `:host ::ng-deep .p-datatable > .p-datatable-wrapper {overflow: visible;}` make sticky header work correctly. – Hani Jan 03 '23 at 15:24

1 Answers1

0

try to add this styles for component:

:host ::ng-deep .p-datatable-scrollable {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}
Маргарита Андрюхина
  • 1
  • 3