Quasar: [Request] Data Table select event

[robbertvc]

Is it possible to create a selectevent on the data table?

Right now the selected data is only available in the scoped selection slot. This means it is not possible to interact with the selected data outside of the table component. (It is also possible to directly reference the table and the selected data using $refs.[tableReference].selectedRows but $refs is not watchable in VueJS. Therefore this method cannot be used to continuously update data outside of the table based on the selected table data.)

I hope I made the reason for the existence of such a select event clear enough.

BTW, many thanks for this awesome framework.

[rstoenescu]

Yes, will do! Thanks for suggesting this.

[rstoenescu]

Added @selection event which takes two parameters: number of rows selected and the actual rows that have been selected.

Available in future v0.14.

[jayudhandha]

@rstoenescu Is there any way to modify the "1 selected row." message that is coming when we click on any single checkbox.

I want to change from "1 selected row." to "1 row selected."

As suggested my Denjell (In your staff). I done following in my src/i18n/en.js

export default {
  table: {
    selectedRows: function (rows) {
      return rows === 1
        ? '1 row selected'
        : rows + ' rows selected!'
    }
  }
}

But it's not working. Any help?
Thanks!

[rstoenescu]

@jayudhandha change will be available in 0.15.11.

[jayudhandha]

@rstoenescu I am not sure this is existing issue or mine.

But the count of Rows per page in getting overlapped on the drop down (In IE11 + Edge).

Please find attached screenshot.

Thanks!

[Luciden]

Can you update the documentation? I'm attempting to implement this with the latest version of Quasar. Using Typescript 3

<q-table selection="single" :selected.sync="selectedItems" :data="tableData" :columns="columns" row-key="OrgID" @selection="selection" />

public selection (number: number, rows: number) { console.log(selected ${number}: ${rows}) }

[smolinari]

Ok. The docs do need to be updated with this event, but the best docs can also be had by reading the source code.

From QTable.js or rather from the table-row-selection mixin.

  methods: {
    isRowSelected (key) {
      return this.selectedKeys[key] === true
    },
    clearSelection () {
      this.$emit('update:selected', [])
    },
    __updateSelection (keys, rows, adding) {
      if (this.singleSelection) {
        this.$emit('update:selected', adding ? rows : [])
      }
      else {
        this.$emit('update:selected', adding
          ? this.selected.concat(rows)
          : this.selected.filter(row => !keys.includes(row[this.rowKey]))
        )
      }
    }

I think with that, you can see your mistake or rather where Razvan's comment above is just a bit misleading. 😄

Scott