Vuetify data-table body.append slot mobile breakpoints

1
votes

I have this code in a vue component that uses Vuetify data table.

<template slot="body.append">
    <tr>
       <th :colspan="6" class="text-right">Total:</th>               
    </tr>
</template>

The problem is that on mobile my custom tr row is not getting the CSS classes similar to the default data table

<tr class="v-data-table__mobile-table-row">
  <td class="v-data-table__mobile-table-row"></td>
</tr>

How could I add those classes dynamically like the default data tables does. And also is there any way I can disable :colspan="6" on mobile?

1
vue.jsvuejs2datatablevue-componentvuetify.js

1 Answers

3
votes

You could take advantage of breakpoints and add class binding if the breakpoint name equals to xs (mobile size), so add a computed called mobile that detects the breakpoint :

<template slot="body.append">
    <tr :class="{'v-data-table__mobile-table-row':isMobile}">
       <th :colspan="`${isMobile?6:1}`" :class="{'v-data-table__mobile-row':isMobile}" class="text-right">Total:</th>               
    </tr>
</template>

....

computed:{
  isMobile(){
    return this.$vuetify.breakpoint.name==='xs'
   }
}