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


Topic: Can I use mdbdropdown or other vue components as a row element in mdbdatatable?

Riva pro premium priority asked 2 years ago

Can I use mdbdropdown or other vue components as a row element in mdbdatatable? Can I have some examples?Thanks


Bartosz Cylwik staff answered 2 years ago

Hi, currently it is not possible to add vue components as a row elements in MDBDatatable. However, we are planning to test this option in this quarter. Best Regards!


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!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.2.0
  • Device: thinkpad
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No