Datatable vuetify select multiple rows (Shift+Click)

Question

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

Answer 1

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

Answer 2

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