How to select mdb datatable row&#38;#039;s data ?

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

Titanium free asked 4 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 free commented 4 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 answered 4 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

jhetuts free answered 4 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 commented 4 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 free commented 4 years ago

Hi can we illustrate on how it was used in codes @selectRow. Looks like documentation is not working.

deanliou premium commented 3 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.

Please insert min. 15 characters.

Magdalena Dembna staff commented 3 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 answered 4 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

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: 5.3.0
Device: HP
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Titanium

90Support score
10Questions 4Answers 0Snippets