Can I use mdbdropdown or other vue components as a row eleme

Riva pro premium priority commented 2 years ago

Thanks! Do you have some suggestion how can I add a dropdown button to the row elements in MDBDatatable with current mdb-vue-ui-kit? Thanks

Bartosz Cylwik staff commented 2 years ago

You can add custom HTML content to the datatables like in this example with action buttons:

https://mdbootstrap.com/docs/vue/data/datatables/#section-action-buttons

Unfortunately, vue components will not render correctly, so as a workaround I think the best try would be to create a simple dropdown yourself and add it like in the action buttons example. Best Regards!

Riva pro premium priority commented 2 years ago

Thanks Bartosz, I found it is hard to change the MDBDatatable's styles. If I want to change or overwrite " table td { overflow: hidden }" to " table td {overflow: visiable}", How can I do? add ".datatable table td { overflow: visible !important; }" to does not work. Thanks.

Bartosz Cylwik staff commented 2 years ago

For me this one works:

.datatable table td {
  overflow: auto;
}

Make sure that your css styles are not beeing overwritten by the mdb ones. Check if you are importing the mdb-vue-ui-kit css files after your file, or if your any styles are able to overwrite our mdb ones.

Another idea would be to change the styles with use of JS, for example if you were to add a template with dropdown like this:

       ...
        ].map((row,id) => {
          return {
            ...row,
            contact: `<div class="my-dropdown">${customDropdownTemplate}</div>
          };
        })
       ...

You could add the overflow styles to the every parent of my-dropdown container:

  document.querySelectorAll(".my-dropdown").forEach(container=> container.parentNode.style.overflow="auto")

If noone of that works, let us know and we will find a solution. Best Regards!