V-Data-Table 1.5 to 2.0

Question

I'm updating vuetify to the lastest version ( was 1.5 prior ) and I'm having trouble trying to adjust my table with the new props and slots. You can see my table right below, it has the possibility of selecting multiple lines and select all as well at the same time. I just need to purely replicate what I have, only to the new version and I don't know how to do it with the new slots.

        <div class="col-12">
            <v-data-table
              v-model="selected"
              :headers="headers"
              :items="queriedData"
              item-key="Id"
              select-all
              :pagination.sync="pagination"
              :total-items="queriedData.lenght"
              prev-icon="mdi-menu-left"
              next-icon="mdi-menu-right"
              sort-icon="mdi-menu-down"
            >
            <template v-slot:headers="props">
              <tr>
                <th v-if="canView">
                  <v-checkbox
                    :input-value="props.all"
                    :indeterminate="props.indeterminate"
                    primary
                    hide-details
                    color="white"
                    @click.stop="toggleAll"
                    class="table-checkbox-header"
                  ></v-checkbox>
                </th>
                <th width="30px">
                </th>
                <th width="30px">
                </th>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                  @click="changeSort(header.value)"
                >
                  {{ header.text }}
                  <v-icon small>arrow_upward</v-icon>
                </th>
              </tr>
            </template>
            <template v-slot:no-data>
              <div class="text-center">
                {{NoInformation}}
              </div>
            </template>
            <template v-slot:items="props">
              <td v-if="canView">
                <v-checkbox
                  v-model="props.selected"
                  primary
                  color="primary"
                  hide-details
                  class="table-checkbox-body"
                ></v-checkbox>
              </td>
              <td style="display: inline-flex;" >
              <v-tooltip top color="primary" v-if="CanEdit">
                <template v-slot:activator="{ on }">
                <a v-on="on" class="btn-table-icon" @click.prevent="doSomething(props.item.Id)">
                  <i class="mdi mdi-eye icons-tables-margins"></i>
                </a>
                </template>
                <span>{{view}}</span>
              </v-tooltip>
              <v-tooltip top color="primary" v-if="CanEdit" >
                <template v-slot:activator="{ on }">
                <a v-on="on" class="btn-table-icon" @click.prevent="doSomething(props.item.Id)">
                  <i class="mdi mdi-square-edit-outline icons-tables-margins"></i>
                </a>
                </template>
                <span>{{view}}</span>
              </v-tooltip>
              </td>
              <td>
                <div v-if="props.item.Id!=0">
                  <span>Hello</span>
                </div>
                <div v-else>
                  <i class="mdi mdi-folder-lock-open"></i>
                </div>
              </td>
              <td>{{ props.item.Name}}</td>
              <td>{{ props.item.Name2}}</td>
              <td>{{ props.item.Name3}}</td>
              <td>{{ props.item.Name4}}</td>
              <td :style="'color:' + props.item.ColorName" >{{ props.item.Name5}}</td>
            </template>
          </v-data-table>
        </div>

Thank you.

holyris holyris · Accepted Answer · 2020-08-06T14:09:55

Using slots seems not very different with the new version.

The only difference I can see is the props:

Before :

<template v-slot:headers="props">

Now :

<template v-slot:headers="{props}">

And for the checkboxes, you can just use the prop 'show-select' instead of using slots

V-Data-Table 1.5 to 2.0

1 Answers