Topic: How to select mdb datatable row's data ?
Expected behavior
On clicking a row should select data in a variable or copy to somewhere
Actual behavior
Nothing, there is no method mentioned in the docs also on click isn't working. Since we can' alter datatables DOM in vue, I assume there is a method available ? In Jquery we could just alter dom but here it seems different.
Hi,
Unfortunately, we don't provide such feature in our mdb-datatable component for now. It is quite possible that we'll introduce this option in the future . Thank your for this suggestion. Kind regards,
Magdalena
You can do it this way:
rows: [
{
name: 'name 1',
name2: 'name 2',
clickEvent: () => this.handleClick(params)
}
]
Were in the clickEvent property is a reserved row key in MDB core
Magdalena Dembna staff premium commented 5 years ago
Since MDB 5.2.0 Datatable component has new properties - focus (Boolean) which allows for selecting rows and handler @selectRow event which emits the selected index. See API tab for more details: https://mdbootstrap.com/docs/vue/tables/datatables/
jepoycerujano commented 5 years ago
Hi can we illustrate on how it was used in codes @selectRow. Looks like documentation is not working.
deanliou premium commented 4 years ago
Hi, I am using the Pro package MDB-Vue-Pro-6.7.1 and just spent 3 hours investigating why the documented
focus @selectRow="handler" properties were not actually emitting the events as user jepoycerujano above noted...
I'm using the CDN installation. In the mdbvue/lib/index.js file, search for the string emit("selectRow" ... the letter "R" should be lowercased so it becomes emit("selectrow"
This is because vue doesn't like camelCase events when using in-DOM templates. I hope this helps someone out and saves them an evening of frustration.
Magdalena Dembna staff premium commented 4 years ago
We are aware that this syntax has to change, but we need to wait until the next major release. Next regards, Magdalena
<mdb-datatable
:data="data5"
striped
bordered
materialInputs
responsive
focus
@selectRow="selectHandler"
/>
Remember that focus property has to be set to true. The value emitted by @selectRow is the index of the selected row. To modify the given row you need to overwrite rows with the updated array.
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: 5.3.0
- Device: HP
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
jhetuts commented 5 years ago
You can do it this way:
Were in the clickEvent property is a reserved row key in MDB core