Topic: Datatable - how to add row custom template (add action button)

eladhr83 free asked 4 years ago


Expected behavior Datatable - be able to use functionality just as basic table handling , pagination , filters while be able to add custom templates - such as for each row add mdbootstrap button that on click we will be able to get the ref of the selected row.

Actual behavior Didn't saw any relevant API /Code example

Resources (screenshots, code snippets etc.)


Mikołaj Smoleński staff answered 4 years ago


Hi there,

Here's an external API integration advanced example: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api.

Also, to add custom HTML content you can just push it to your rows object. Here's an example: https://mdbootstrap.com/docs/vue/tables/datatables/#html

Best regards


karluk priority commented 8 months ago

This is not helpful at all.


Bartosz Cylwik staff commented 8 months ago

Hello!

You can add a custom content to the Datatable component by simply providing some HTML as a row value. You can find an example on how to do it here: https://mdbootstrap.com/docs/vue/data/datatables/#section-action-buttons

If you need to add some functionality on row-click you can use an event with the same name (row-click). The event returns an id of clicked row that can be used to trigger some custom functionality like opening modals. Checkout the example bellow (in case of errors, change the getElementsByClassName method with querySelectorAll): https://mdbootstrap.com/docs/vue/data/datatables/#section-clickable-rows

Let me know if you need more help with your issue by providing more info on whats going on.

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.4.0
  • Device: Desktop
  • Browser: chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No