0

I need to customize my vuetify datatable header by making some calculations on the fly for each column.

<template>
  <v-app>
    <v-content>
      <v-data-table
        :headers="headers"
        :items="items"
      >

        <!-- Stop working on mobile size -->
        <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>

      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    headers: [
      { text: '10', value: 'col1', desc: 'Description of column 1' },
      { text: '20', value: 'col2', desc: '' },
      { text: '30', value: 'col3', desc: 'Description of column 3' },
      { text: '40', value: 'col4', desc: '' }
    ],
    items: [
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      },
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      }
    ]
  })
}
</script>

It works well except when I reach the mobile breakpoint. Seems that the header template is no longer applied when the viewport width is under the Vuetify mobile breakpoint value.

Any idea of what I am doing wrong?

Thanks in advance.

Regards.

Lulu
  • 13
  • 4
  • 2
    I think you'd have to disable the mobile (`:mobile-breakpoint="0"`) if you want to customize the mobile headers. – Carol Skelly May 28 '20 at 12:21
  • Thanks for your reply. Already try to add :mobile-breakpoint="0", it keeps my customization alive but unfortunatly the table is no more readable in mobile. My goal is too keep this header customization in all screen sizes. – Lulu May 28 '20 at 14:00
  • After some search, seems this issue already known: https://github.com/vuetifyjs/vuetify/issues/10818 – Lulu Jun 01 '20 at 06:38

0 Answers0