Implementing a checkbox in v-data-table header

Question

I have a v-data-table in which I have the rows with checkboxes. I'm trying to implement a checkbox in the table header where selecting the checkbox would select the entire checkboxes in the table row.

This is my code:

             <v-data-table
               v-model="model"
          styles="font-size:5px;"
          :headers="headers"
          :items="items"                      
          single-select
          :items-per-page="10"
           class="elevation-1"  hide-default footer   
   
        >
           <template slot="headers" slot-scope="props">
  <tr>
  <th> <v-checkbox  :input-value="props.all"> </v-checkbox> 
  </tr>

</template>
          <template v-slot:item="row" :activator="{ on, attrs }">
              <!-- <tr @click="highlightRow(item.item, item)">  -->
         <tr>
            <td>{{ row.item.DisplayValue }}</td>
             <td>
                    <label class="form-checkbox">
                        <input type="checkbox" :value="row.item.DataValue" v-model="preselected1" >
                        <i class="form-icon"></i>
                    </label>
                </td>
        <td>
                    <label class="form-checkbox">
                        <input type="checkbox" :value="row.item.DataValue" v-model="preselected2">
                        <i class="form-icon"></i>
                    </label>
                </td>       
         </tr>
          </template>              
       
          </v-data-table>

I did try the solution from https://vuetifyjs.com/en/components/data-tables/#row-selection but what I'm trying to achieve is more like:

Need checkbox in highlighted places

Any pointers on achieving this would be appreciated.

@IVOGELOV Do you have any examples for reference? I'm pretty new to Vue. — Vicky
– Vicky, Commented Jul 9, 2021 at 21:56

IVO GELOV · Accepted Answer · 2021-07-12 06:48:28Z

3

According to Vuetify documentation, you can do something like this:

<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:header.colWithCheckbox_1="{ header }">
      {{ header.text }}
      <v-checkbox v-model="headerCheckboxes.colWithCheckbox_1" />
    </template>
  </v-data-table>

answered Jul 12, 2021 at 6:48

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing a checkbox in v-data-table header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related