Datatable - how to add row custom template (add action butto

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.)

Add comment

Mikołaj Smoleński staff answered 4 years ago

0 1 Best answer

Please insert min. 20 characters.

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 1 year ago

This is not helpful at all.

Bartosz Cylwik staff commented 1 year 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!

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:
<a href="https://mdbootstrap.com/docs/vue/data/datatables/#section-action-buttons" target="_blank">https://mdbootstrap.com/docs/vue/data/datatables/#section-action-buttons</a>

If you need to add some functionality on <code>row-click</code> you can use an event with the same name (<code>row-click</code>). 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 <code>getElementsByClassName</code> method with <code>querySelectorAll</code>):
<a href="https://mdbootstrap.com/docs/vue/data/datatables/#section-clickable-rows" target="_blank">https://mdbootstrap.com/docs/vue/data/datatables/#section-clickable-rows</a>

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

Best Regards!

Please insert min. 15 characters.

Add comment

Write

Create snippet

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

eladhr83

85Support score
13Questions 2Answers 0Snippets