[Feature Request] Add option to only select one row at a time in data tables

[jim0thy]

New Functionality

Option to select one row at a time in a data table, radio-button style. Selecting a new row will clear the previous selection.

Improvements

No existing workaround

Bugs or Edge Cases it Helps Avoid

Allows the user to provide extra functionality in custom components based on a guaranteed single-row selection in the data table; a preview pane, for example.

[slippyC]

Yep, would like this as well. Was fixing to start writing some code, to attempt, to do something similar.

[benjaminpwarren]

As a workaround, you can just use <v-radio-group> and <v-radio>:

  <template slot="items" slot-scope="props">
    <tr @click="selected = props.item.id">
      <td>
        <v-radio-group
          v-model="selected"
          name="rowSelector">
          <v-radio :value="props.item.id"/>
        </v-radio-group>
      </td>
      <td>...</td>
    </tr>
  </template>

Note: Don't specify v-model on the <v-data-table>.

[FabioZanchi]

Yes! This feature would be great.

@benjaminpwarren Could you please make a quick example on Codepen or Fiddle about how it works?
I've tried to do it here but It's not working.

Cheers

[benjaminpwarren]

@FabioZanchi, here you go.

(Note that in my snippet in my previous post, I used .id as the "key", whereas in the linked CodePen I've used .name as there was no .id in the source.)

Edit: I've just noticed that the selected radio doesn't 'move' when the table is sorted. There's probably a quick fix and I'll look into when I get a chance.

[FabioZanchi]

Thanks, @benjaminpwarren!

I'll have a look!!

[uxweb]

Hi @benjaminpwarren

Thanks for publishing the example for selecting a row with a radio button. Have you discovered how to fix the fixed selected radio button? When I select a row and skip to the next page, the radio button keeps selected in the new page.

Best regards

[zerosym]

In case someone comes across this and needs a fix still for the workaround @benjaminpwarren posted, you can just add a unique :key="" to the v-radio. In the codepen example it'd be :key="props.item.name"

The problem is when you page the data table it attempts to reuse the v-radio components. In Vuetify's checkbox version this doesn't matter since the checkbox values are forced to update to match their corresponding rows' props, whereas in the radio group case the value of the radio is unchanging.

[andrewackerman]

As I didn't want my table to be covered in auxiliary radio buttons, my work-around solution to this was to set a data object equal to the item of the clicked row and then check against it during the calculation of the :active property of the rows on the refresh. See here.

[iKoru]

Hey guys, wouldn't it be better if we use this way?

<tr @click="selected = (selected===props.index?null:props.index)">
  <td>
    <v-checkbox :input-value="selected === props.index" primary hide-details></v-checkbox>
  </td>
</tr>

I found it works well.

[RiickNogueira]

The best solution for me was to just recode the method @click used in the Vuetify documentation example.

<tr :active="props.selected" @click="select(props.item)">

select(selectedItem) {
      this.selected = [];
      this.items.forEach(item => {
        if (item.id == selectedItem.id) {
          this.selected.push(item);
        }
      })

All remaining code is the same. Complete solution here.

[morgenweck]

Yes! This feature would be great. Me too!

[ShayanBits]

Yep, I also need this feature.
Thanks @benjaminpwarren for the workaround and thanks @zerosym for the tip. It works fine with the workaround. 👍

[tnikolai2]

simple way
https://codepen.io/nicolai-nikolai/pen/GRgLpNY