primeng DataTable шаблон заголовка с прокруткой

Question

У меня есть DataTable

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

MyComponent в основном содержит кнопку, когда щелкнул скрытый DIV. Который действует как модальный и имеет абсолютное позиционирование. Смотрите рисунок ниже Он отлично работает, но если я добавить прокручивать вариант

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

то модальное окно скрыто, как на картинке. Мне не удается поставить его сверху. Я пробовал с z-index, но он не работает. Не могли бы вы понять, почему у меня такое поведение? Thanks

Answer 1

Используйте appendTo = "body" в тэге p-multiSelect. Это добавит выпадающий список в заголовок столбца.

Например:

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