PrimeNG table header misaligned with scrollbar when adding rows dynamically

Question

I have used p-table in angular to display data and used scrollbar with fixed height as "300px"

<p-table [columns]="myCols" [value]="myList" [scrollable]="true" scrollHeight="300px" [responsive]="true">

Here, I am adding rows to the table dynamically which creates scrollbar at runtime and at that time the header becomes misaligned.

So it only has scrollbar on body.

If it has scrollbar at page load then it works fine but has issue when we have scrollbar at runtime.

Here is the stackblitz for the same issue (click 'clone' button to add rows to table dynamically)

Vishal Suthar · Accepted Answer · 2020-06-12 14:00:03Z

4

I have fixed it.

Just needed to make use of spread operator (...)

Need to add below line at the end of the clone event.

this.cars = [...this.cars];

Updated stackblitz

edited Jun 12, 2020 at 14:00

answered Jun 4, 2020 at 12:14

Vishal Suthar

17.2k4 gold badges64 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farhat Zaman · Accepted Answer · 2020-06-04 07:52:51Z

1

just add margin to align header and body.

.ui-table-scrollable-header-box {
   margin-right: 17px !important;
}

see this example.fore more reference visit this link

answered Jun 4, 2020 at 7:52

Farhat Zaman

1,37910 silver badges22 bronze badges

4 Comments

Vishal Suthar Over a year ago

It will be misaligned on load.. I don't want any in-line CSS..

Cédric S Over a year ago

This works perfect in my case where I always show the scrollbar. Because if I don't then table does not recalculate scrollbar place when changing screen size or list size

Cédric S Over a year ago

Actually, better to use padding-right.. because sometimes primeng adds padding-right of 17px.. which would add to the margin and cause problems..

Drenai Over a year ago

For Mac users, where the scrollbar can be hidden by default until scrolling begins, the margin-right and and always showing scrollbar approaches don't quite work

Hanan Afzal · Accepted Answer · 2020-11-26 10:56:37Z

1

::ng-deep .p-datatable-scrollable-header-box {
  margin-right: 17px !important;
}

Add these lines on scss file of your compoenent

answered Nov 26, 2020 at 10:56

Hanan Afzal

711 gold badge1 silver badge4 bronze badges

Comments

Anh Tuấn Nguyễn · Accepted Answer · 2020-06-04 10:36:30Z

0

I have the same trouble as you but i used [resizableColumns]="true". when the header becomes misaligned I will drag the horizontal bar scroll. It will not be misaligned

answered Jun 4, 2020 at 10:36

Anh Tuấn Nguyễn

11 bronze badge

Comments

user22478429 · Accepted Answer · 2023-08-31 14:41:36Z

0

Actually it's a bug from primeng end, when scrollable height is added to p-table tag and more no.of rows are there then this issue occurs. When only one row then this issue is not there.

SOLUTION: Instead of using scrollable and scroll height, add height to the parent tav of the table. With the below mentioned approach I am able to resolve alignment issues.

Eg:`

<div style ="max-height:60vh;overflow:auto">
<p-table></p-table>
</div>

`

edited Aug 31, 2023 at 14:41

answered Aug 31, 2023 at 14:41

user22478429

11 bronze badge

Collectives™ on Stack Overflow

PrimeNG table header misaligned with scrollbar when adding rows dynamically

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related