CODEWITHSUNDEEP
htmlcssangularprimeng
abhjt
abhjt

Reputation: 442

PrimeNG - Sticky header not working in p-table

Hello I am using PrimeNG p-table which has both horizontal scroll and vertical scroll. I want to use sticky header for the table for which I have tried following 2 methods -

[scrollable]="true"
scrollHeight="350px"

This one is making header sticky but column width is getting changed automatically, removes the horizontal scroll and trying to fit complete table in browser page width due to which columns data are overlapping with each other.

Another method I tried is using css -

:host ::ng-deep .ui-table-scrollable-header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

But this code has having no effect on my UI.

Can any body help me in fixing this? Below is my p-table code and all my columns are of variable length.

<p-table #dt [columns]="cols" [value]="data" [paginator]="true" dataKey="id" editMode="row" [rows]="25"
    [rowsPerPageOptions]="[10,25,50,75,100]" [autoLayout]='true' sortMode="multiple"
    selectionMode="multiple" [(selection)]="selected">

Upvotes: 5

Views: 15773

Answers (4)

Hadas Bar
Hadas Bar

Reputation: 1

I use the second option, I created a div with class card to wrap the table this is my CSS:

.card {
    height: calc(100% - 16px);
    overflow: auto;
}
.p-datatable {
    .p-datatable-wrapper {
        overflow: visible !important;
    }

    .p-datatable-thead > tr > th {
        position: sticky;
        top: -16px;
    }
}

Upvotes: 0

Danial Ahmad
Danial Ahmad

Reputation: 21

add this to @Component

  styles: [`
    :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;
        }
    }
  `]

Upvotes: 2

sandu
sandu

Reputation: 66

I also just ran into this problem, after some digging into the cause of it I ended up opening an issue where I give my take on the problem, perhaps they'll eventually make some changes on the way scrollable works https://github.com/primefaces/primeng/issues/11099

Upvotes: 0

PMO1948
PMO1948

Reputation: 2554

Have you seen this primeNg page? They have implementation examples with sticky headers. You may need to set the width to a hard-coded value to prevent the auto-resizing of the columns, but the sticky header comes built in.

PrimeNg example:

    <p-table [value]="customers" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
                <th>Date</th>
                <th>Company</th>
                <th>Status</th>
                <th>Activity</th>
                <th>Representative</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-customer>
            <tr>
                <td>{{customer.id}}</td>
                <td>{{customer.name}}</td>
                <td>{{customer.country.name}}</td>
                <td>{{customer.date}}</td>
                <td>{{customer.company}}</td>
                <td>{{customer.status}}</td>
                <td>{{customer.activity}}</td>
                <td>{{customer.representative.name}}</td>
            </tr>
        </ng-template>
    </p-table>

Upvotes: 1

Related Questions