5

I am having an issue working with PrimeNG DataTables. I have a table with a large number of columns that requires horizontal scroll. PrimeNG comes out of the box with horizontal scroll working with the scroll bar located below the table.

I need to make the scrollbar visible at all times similar to a browser scrollbar without requiring the user to scroll to the bottom of the table. I've attempted different CSS solutions using overflow-x properties, but they either don't work or ruin the PrimeNG table responsiveness.

Has anyone been able to accomplish this?

Zareh D.
  • 51
  • 1
  • 1
  • 3

2 Answers2

4

The documentation says it can be achieved as follows:

<p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'500px'}">

https://www.primefaces.org/primeng/v8.2.9-lts/#/table/scroll

David Buck
  • 3,752
  • 35
  • 31
  • 35
Swethnag Someshwar Sriramula
  • 41
  • 2
-2

use [scrollable]="true" scrollHeight="100%" scrollWidth="100%" in your <p-table> or <p-dataTable> tag

Alekya
  • 239
  • 5
  • 15