angularprimengprimeng-table

PrimeNg expand table overlap root table


I have a problem with primeNg table. I use child table printed with rowexpansion. It works well but when scrolling is enabled child table overlap header of parent How can I fix it?

enter image description here


Solution

  • I fixed it by setting z-index to 0 for thead element in child table. This topic helped me: PrimeNG - How to change the style of pTemplate="caption" in p-table for a single component

    Solution:

    1. Add id to child table

      <p-table id="childTable"

    2. Add below code to corresponding scss

      :host ::ng-deep { #childTable { .p-datatable-thead { z-index: 0; } } }