Primeng: p-table horizontal scroll disappears when filtering in a field and no data are shown

[hschindler]

When you filter the turbo table and because of that the list will be empty, the horizontal srollbar is disappearing and the overlapping columns can't reached anymore.So you can't clear the filter to show all data and scroll bar again.

[MSCapNG]

Facing same issue,can someone please look into this.its a blocker.

[tscislo]

This is still an issue in "primeng": "6.1.2". Is anyone working on this?

[cagataycivici]

Suggestion is to use emptyMessage so you can provide feedback to the users as well;

<ng-template pTemplate="emptymessage" let-columns>
    <tr>
         <td [attr.colspan]="columns.length">No Data</td>
    </tr>
</ng-template>

[umdstu]

@cagataycivici Just to clarify- this won't be 'fixed' other than the suggested message display?

[ch-k]

Suggestion is to use emptyMessage so you can provide feedback to the users as well;

<ng-template pTemplate="emptymessage" let-columns>
    <tr>
         <td [attr.colspan]="columns.length">No Data</td>
    </tr>
</ng-template>

I do not see how @cagataycivici proposal solves this issue. When a user enters a filter expression that leads to empty results and the filter belongs to a column that is not visible any longer because there's no scrollbar, the user has no chance to remove the filter. Only a reload of the site helps. Or implementing a logic to reset filters inside of the emptymessage template. But the latter looks like a hack to me.
I suggest to reopen this issue.

[himenp]

This CSS solved the issue. It worked for me.

.ui-table-scrollable-wrapper {
overflow: auto !important;
}

.ui-table-scrollable-header, .ui-table-scrollable-body, .ui-table-scrollable-footer {
overflow: visible !important;
}

[AlejandroFlorin]

The solution from himenp should be added to the core css. It fixes the issue where the user can't scroll to filter controls in the header that are off screen when the table is empty. I always include a Clear Filters button on pages with tables but forcing the horizontal scroll bar is better.

[AlejandroFlorin]

Workaround for version 11 (this should be implemented in the core css)

.p-datatable-scrollable-wrapper {
overflow: auto !important;
}
.p-datatable-scrollable-header, .p-datatable-scrollable-body, .p-datatable-scrollable-footer {
overflow: visible !important;
}

[OPunktSchmidt]

@AlejandroFlorin @himenp Thanks this was my rescue.

@cagataycivici This is definitely a bug in PrimeNG and should be fixed.

[OPunktSchmidt]

Unfortunately, the table is displayed incorrectly after I applied the CSS style to solve the original problem.