Q-Table click-row feature (instead of checkbox)

See original GitHub issue

Is your feature request related to a problem? Please describe. No, it’s not a problem.

Describe the solution you’d like I will love if you put an attribute for QTable to select a row clicking on TR, without using checkboxes (or emit @selection always, even if I’m not on selection mode)

Describe alternatives you’ve considered The alternative is to use a @click.native on TR, but I have to rewrite both header and body:

<template v-slot:header="props">
  <q-tr :props="props">
    <q-th v-for="col in props.cols" :key="col.name" :props="props">
      {{ col.label }}
    </q-th>
  </q-tr>
</template>

<template v-slot:body="props">
  <q-tr :props="props" @click.native="props.selected = !props.selected">
    <q-td v-for="col in props.cols" :key="col.name" :props="props">
      {{ col.value }}
    </q-td>
  </q-tr>
</template>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
smolinaricommented, Apr 2, 2020

@CrawfordW

Not sure my code for selection and de-selection for multiple rows is as elegant as it could be, but you should get the gist of it. 😄

https://codepen.io/smolinari/pen/WNvWMvB?editors=1011

Scott

1reaction
dariodepaoliscommented, Sep 18, 2019

Sure I can create my own component and program the slots once, but sometimes, as developer, we are really lazy and want to use a component with zero code 😛 something like: <q-table :data=... :columns=... selection="single-row" :selected.sync="selected"/>

Like Bootstrap-Vue or Buefy for instance

Read more comments on GitHub >

github_iconTop Results From Across the Web

Click table rows to select checkbox using jQuery
In order to select the checkbox of a row inside the table, we will first check whether the type attribute of the element...
Read more >
Table Row Click that checks a checkbox in that same row
I've got it working; Clicking on the row will check the box, however now clicking the checkbox itself doesn't work I'm guessing because....
Read more >
How to check checkbox within Table Records on click on the ...
I do have a Table Records with three cols. One of them contains checkbox. What I need to achieve is to have onclick...
Read more >
How to create a "Select All" checkbox - Educative.io
Introduction. The “select all” checkbox is a User Interface element present in some Web applications that allows you to select multiple items or...
Read more >
Populate checkbox in rows based on Model Object Variable
$('.checkBox').on("change", function () { var row = $(this).closest('tr'); var data = table.row( ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found