5

I am using Datatable from Vuetify 1.5.x

Have enabled the checkboxes so that multiple rows can be selected, I would like to be able to select with Shift + Click so that I don't have to click on each checkbox exact same as Gmail works.

It wouldn't be difficult to do if I had a row id that changes by the sort or if the rows array was reordered when the data table is sorted. But none of these seem to work.

Has anyone achieve this with vuetify datatable?

    <template v-slot:items="props">
        <tr :active="props.selected" @click="selectRow(props);">
            <td>
                <v-layout>
                    <v-flex>
                        <v-checkbox
                            :input-value="props.selected"
                            primary
                            hide-details
                            :class="{ 'red--text': props.item.was_modified_recently == 1 }"
                        ></v-checkbox>
                    </v-flex>
               </td>
          </tr>
     </template>

Vuetify documentation example

3
  • I have the exact same requirement but with vuetify 2.x
    – titou10
    Sep 20, 2019 at 23:27
  • 1
    Since its a component and the component code needs to be tweaked you can try the Vuetify discord for support discordapp.com/channels/340160225338195969/389885858729164801. For id you could you the 'item-key' field but like you said it won't rearrange if you are using a sortable table.
    – zapping
    Sep 27, 2019 at 3:26
  • There is always an option to fork and alter that component :) Oct 1, 2019 at 8:12

4 Answers 4

2

I actually had to solve this today.

My solution relied on using the item-selected hook and method that performs the bulk selection.

methods: {
  bulkSelect({ item: b, value }) {
      const { selectedRows, current, shiftKeyOn } = this;

      if (selectedRows.length == 1 && value == true && shiftKeyOn) {
        const [a] = selectedRows;
        let start = current.findIndex((item) => item == a);
        let end = current.findIndex((item) => item == b);
        if (start - end > 0) {
          let temp = start;
          start = end;
          end = temp;
        }
        for (let i = start; i <= end; i++) {
          selectedRows.push(current[i]);
        }
      }
    },
}

So that's the meat of it. There's other housekeeping details like keeping track of when shift is being held down, and preventing the browser from highlighting the text of the table when holding down shift and clicking the second row.

I made a codepen showing this functioning here.

https://codepen.io/ryancwynar/pen/jOWoXZw

1

In the new version of vuetify i.e. 2.0 You question is solved easily the following way

I have put the answer in the following Stack Overflow question link

0

Vuetify added prepend-item slot that lets you add a custom item before listing items by which we can add "select all"

Please check the example in codepen on pretend-item for select all checkboxes

0

I've got the same case as you faced.

  1. First of all, you got to add another events (keyboard events) on the <tr> tag and pass the props as argument.
  2. And then use slice to the items array for determined range of the selected items you want.

In my case, i've stored the selected array inside vuex store. hoped i can helped ;)

<template v-slot:items="props">
            <tr :active="props.selected" @click.shift="useShift(props)" @click="selectRow(props)">
                <td>
                    <v-layout>
                        <v-flex>
                            <v-checkbox
                                :input-value="props.selected"
                                primary
                                hide-details
                                :class="{ 'red--text': props.item.was_modified_recently == 1 }"
                            ></v-checkbox>
                        </v-flex>
                   </td>
              </tr>
         </template>


    export default {
       methods:{
          ...mapMutations(["setSelected"]),
          useShift({ index }) {
           this.setSelected(
            this.items.slice(
              this.items.findIndex(el => {
                return this.selected.find(v => v.track.id == el.track.id);
              }),
              index
            )
          );
        },
       }
    }      

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.