PrimeVue menus submenu is hidden behind the PrimeVue datatable

[ferguson03]

I have a very simple screen layout which has a primevue/menubar at the top and a primevue/Datatable below it. The sub menu of the primevue/menubar is rendered behind the DataTable almost as if the z-index is messed up.

example here:

In the example above there are two more menu items which cannot be seen because they are being rendered behind the primevue DataTable

I have narrowed down this issue by inspecting the css removing styles
primevue applies a class called p-datatable-scrollable-table to the table when the scrollable property is enabled. When this occurs this problem happens. If you remove the p-datatable-scrollable-table class off the DataTable then it renders fine as shown here.

I am running the latest as of today 12/15/24 - version 4.25

[ferguson03]

I did find out that it is the thead option of the datatable that causes this because the thead of the datatable is set to sticky. When it is set to sticky the issue arises. So to resolve I hacked it for now overriding the primevue css class of the submenu like this and giving it a top level z-index. This fixes the issue

ul.p-menubar-submenu{z-index:500}