Search code examples
angularprimengvirtualscroll

PrimeNG table with virtualScroll not showing border around rows properly

I am using PrimeNG table with virtualScroll like so

  <p-table 
  [value]="filteredData" 
  scrollHeight="37rem" 
  [scrollable]="true" #tableEl 
  [virtualScroll]="virtualScroll"
  [virtualScrollItemSize]="53"
  selectionMode="single" 
  [(selection)]="selectedRow"
  dataKey="modelId"
  sortMode="multiple"

It renders the rows that are originally visible properly : enter image description here

but the ones below that you need to scroll to get to are missing border around them: enter image description here Adding

styleClass="p-datatable"

or selecting another styleClass primeNG provides (p-datatable-scrollable) does not solve the problem. Adding my own style to the elements like for example

 <tr style="height:53px;border-bottom: 5px solid red;"

also does not help (only the first "page"/"buffer" is styled). Removing virtualScroll does solve the problem (they all render with a border), but then it's slow which is why I need virtualScroll.

Solution

  • I've also encountered this problem and the culprit was Tailwind.

    Tailwind sets the table border to collapse by default.

    I've fixed this by changing it to "separate"

    .p-datatable table { border-collapse: separate; }