带有可滚动的primeng数据表模板头

Question

I have a datatable

<p-dataTable ... > 
        <p-column field="name" header="Name" [style]="{'width':'250px'}"> 
               <template pTemplate type="header">
            <mycomponent> </mycomponent>
            </template>
    </p-column>
    ...
    </p-dataTable>

Mycomponent basically contains a button when clicked open a hidden div. Which act like a modal and has absolute positioning. See the picture below It works fine but if I add the scrollable option

<p-dataTable ...  scrollable="true" scrollHeight="200px" scrollWidth="75%">

then the modal box is hidden like in the picture. I don't manage to put it on top. I tried with z-index but it doesn't work. Could you see why I have this different behaviour? Thanks

Answer 1

Use appendTo="body" in your p-multiSelect tag. This will add the dropdown to your column header.

Eg :

<p-column field="Description" ...>
<template pTemplate="filter" let-col>
  <p-multiSelect appendTo="body" ... ></p-multiSelect>
</template>