As mentioned above this component was created to display data. If you want to be able to edit data, we have created a plugin to do this: https://mdbootstrap.com/docs/standard/plugins/table-editor Unfortunately, in both cases we do not support the use of components inside. Datatable and Table editable were created for different purposes. But I'll add it to our ideas board. Maybe one day we will create a solution that will support adding other components inside.

How about this solution:

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach((dropdown) => {
  dropdown.addEventListener('show.bs.dropdown', (e) => {
        e.target.closest('td').classList.add('my-custom-class');
  });
  dropdown.addEventListener('hidden.bs.dropdown', (e) => {
        e.target.closest('td').classList.remove('my-custom-class');
  });
});

If it is required in your project, maybe just add the appropriate css?

.datatable table td {
    overflow: visible;
}

We do not support this type of solution. But this CSS should help. Remember that you do it at your own risk. In some cases, this may affect the correct display of the datatable. Trimming too long text will definitely stop working.

Therefore, it will be best if you add your own CSS class to the cell in which the dropdown is located and add CSS which will also use this class in the selector: .datatable table td.my-custom-class

Can I have your update statement about this issue ?

PS-1: Is it known or unknown issue?

PS-2: If I am very strict or unfriendly with my issue, I want to say that I say the best opinion to my friends about you :D... And I Support your project in my StartUp Project