Quasar: Request for QTable: @click-row event

[mesqueeb]

Is your feature request related to a problem? Please describe.

I often need to do something (execute a function) when a row is tapped/clicked in a QTable.
Currently I always implement it like so:

<q-table
  :data="rows"
  :columns="columns"
  row-key="id"
>
  <template v-slot:body-cell="props">
    <q-td :props="props" @click.native="tappedRow(props.row.id)">
      <div>{{ props.value }}</div>
    </q-td>
  </template>
</q-table>

Describe the solution you'd like
I believe it would be much easier for me if QTable could have an event for when a row is tapped. Maybe something like @click-row

Eg.

<q-table
  :data="rows"
  :columns="columns"
  row-key="id"
  @click-row="tappedRow"
/>

Then it could have details passed (just like selection) with the row-key which was tapped.

Describe alternatives you've considered
I have considered using the event @selection.
However, this is clearly an event to use with rows that are "selectable" of some sort.

I hardly ever need selectable rows, I just need to do various things when a row is tapped.

The current method with using <template v-slot:body-cell="props"> as I showed above works great! But I think an @click-row event would be even cleaner, and might be useful to a lot of developers!

[rstoenescu]

Will be available in "quasar" v1.2.6.

[mesqueeb]

Great, thanks a lot!!!!

[leosdad]

Thanks! Unfortunately I can't use it in my project because I use custom slots. The doc says explicitly that "it is not emitted when using body/row/item scoped slots". Any particular reason for this?

[rstoenescu]

@leosdad You are building your content, so you can attach the event yourself. This feature fills in the last unfulfilled need when NOT using those slots so you had no means of attaching it yourself.

[dariodepaolis]

Thank you for this nice new event, it could be more useful also if click row is binded to selection, so we can avoid to use the old checkbox way, and select a row just tapping on it.
I don't know if it could be better to add another selection type (single, multiple, clickrow) or using this new event

[leosdad]

Thank you for this nice new event, it could be more useful also if click row is binded to selection, so we can avoid to use the old checkbox way, and select a row just tapping on it.

Yes. In my case I had to use all the code below to duplicate the same funcionality:

function selectRow(row, force = false)
{
  let list = vue.$refs.mainListing;
  let sel = list.selected;
  let index = sel.indexOf(row);

  if(force) {
    sel.length = 0;
    sel.push(row);
  } else {
    if(list.properties.selection === 'single') {
      if(index === -1) {
        if(sel.length) {
          sel.length = 0;
        }
        sel.push(row);
      } else {
        sel.pop(row);
      }
    } else if(list.properties.selection === 'multiple') {
      if(index === -1) {
        sel.push(row);
      } else {
        sel.splice(index, 1);
      }
    }
  }
}

Exposing a property like "full-row-select" or something would suffice and do the job much better.

[rstoenescu]

Hi,

If there's anything that can be further improved, please open up another ticket so this doesn't gets lost.
Thanks!

[sachingk]

When using @row-click , how to prevent click on particular column ?

I have a table which has @row-click configured to redirect to View Page . Further this table also has edit button for each row configured to redirect to Edit Page.

Currently, when I click on the edit button it still redirect to View Page. This is because @row-click kicks in takes the control.

How to avoid this happening ?

[pdanpdan]

@sachingk mark the event in the handler for column and check for the marker in the @row-click and if it's present do nothing

[sachingk]

Should I mark the @row-click on every column in the table ?

Because I want users to click any where on the row to view the record details. However when they click on edit button in a particular column then I want to redirect them to edit screen.

[pdanpdan]

Then mark the event when they click the button and check if the mark is present in the row-click

[pdanpdan]

Or more simple try to add @click.stop on the button