Vuetify Data Table (v-data-table) - how to conditionally style values in certain columns

4
votes

What is the easiest way to highlight certain values in a column in a Vuetify Data Table (v-data-table component).

E.g. let's say in this first example here: https://vuetifyjs.com/en/components/data-tables

How to automatically style values in the Calories column that are greater than 300 in bold and red?

1
javascriptcsstypescriptvuejs2vuetify.js

1 Answers

4
votes

You can do something like that :

    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <div :class="getStyle(item.calories)">{{ item.calories }}</div>
      </template>
    </v-data-table>

Then, in your script you can add a method "getStyle" that automatically style the values.

methods: {
    getStyle (calories) {
      if (calories > 300) return 'red--text font-weight-bold'
      else return ''
    },
  },

Here a codepen example : https://codepen.io/guizboule/pen/LYPyWMV?&editable=true&editors=101

In you want another solution, Vuetify made an example with chips : https://codepen.io/guizboule/pen/vYBmxwg?&editable=true&editors=101