Topic: Datatable - how to add row custom template (add action button)
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.)
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 pro premium priority commented 6 months ago
This is not helpful at all.
Bartosz Cylwik staff commented 6 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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