How to select mdb datatable row's data ?

Topic: How to select mdb datatable row's data ?

Titanium asked 6 years ago

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.

jhetuts commented 5 years ago

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

Add comment

Magdalena Dembna staff premium answered 6 years ago

0 1 Best answer

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

Add comment

jhetuts answered 5 years ago

0 0 Best answer

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

Add comment

Magdalena Dembna staff premium answered 5 years ago

0 0 Best answer

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

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

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

Titanium

90Support score
10Questions 4Answers

0Snippets likes 0Snippets