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