Hia,I have a dynamic datatable with a dropdown in the last column.

However, the dropdown is underneath the pagination section:

This tends to happen when only a few items are in the table.

How can I get this dropdown to be over the datatable pagination since it cuts off access to the other dropdown options?

Please see this snippet: https://mdbootstrap.com/snippets/standard/stefangregg/4856956

Adding "z-index: 9999 !important;" to any of the dropdown elements doesn't work!

I have also tried to specify the overflow css variable. but that doesn't work either.

I using the normal dropdown initialization:

<a id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">Options</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <li><a class="dropdown-item">Option 1</a></li>
  <li><a class="dropdown-item">Option 2</a></li>
  <li><a class="dropdown-item">Option 3</a></li>
  <li><a class="dropdown-item">Option 4</a></li>
</ul>

Cheers!