I have a table with lots of columns, when I switch to a laptop all the text bumps into each other.
I tried using responsiveLayout="scroll" but it creates 2 scrollbars one for the table (which is good) but also another one to all the screen making it difficult to read the needed content.
Is there a way to put only a scrollbar on the table (including the headers) and not for all the screen?
<p-table #dt [value]="detail_records" [paginator]="true" [rows]="10" [totalRecords]="detail_records.length" [rowsPerPageOptions]="[10, 20, 30, 50]" [globalFilterFields]="[ 'status', 'submission', 'recipient', 'ditribution', 'group', 'user', 'file', 'reference', 'detail', '' ]" dataKey="file" (onFilter)="onFilter($event)" rowExpandMode="single"> </p-table>
Sorry for the image because of company policy I had to hide data. but you can clearly see the two scroll bars.
Thank you,
I tried to use the responsiveLayout scroll to make only the table scrollable.
I also tried to set a max-width but it doesn't work.
1 Answer
Add [scrollHeight]="'flex'" [scrollable]="true" to your <p-table>. Also consider adding a min-height and min-height to the parent <div>.
You can also try to play around with .p-datatable-wrapper in your .css file like so: :host ::ng-deep .p-datatable-wrapper {min-width: 100vw;}
