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

Titanium free asked 5 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 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


Magdalena Dembna staff answered 5 years ago


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


jhetuts free answered 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


Magdalena Dembna staff 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 free 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 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


Magdalena Dembna staff answered 5 years ago


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



Please insert min. 20 characters.

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