Adding a header slot to customize header color in data table in vuetify 2

Question

I am using Vuetify 2 to create a data table for an app. In the data table I have custom headers, with slots, including "text", "value", "sortable". Is there a slot I can add to specify the font color and font size I want for each header? If I add a class parameter, how do I add the CSS specifics needed for the headers?

Example code I am using:

 data: () => ({
    dataFilters: {},
    selectedRows: [],
    gridConfig: {
      records: [],
      loading: true,
      options: {
        itemsPerPageOptions: [10, 25, 50, 100],
        totalPages: 0,
        itemsPerPage: 10,
        page: 1,
        descending: false,
      },
      headers: [
        {
          text: '__HEADER__MENU__',
          value: `__HEADER__MENU__`,
          sortable: false,
        },

Thank you!

chans chans · Accepted Answer · 2019-10-18T03:01:31

Yes it is possible to set custom color to vuetify data-table header and font size

You need to use class property in headers object

headers: [
        {
          text: '__HEADER__MENU__',
          value: `__HEADER__MENU__`,
          sortable: false,
          class: "success--text title"
        },

success--text class changes the color of your header title increase the font size of you header, read all the fonts typography and colors in Vuetify

For dynamically setting the headers classes, use created hook to loop through this.headers and set the headers

Here is the working codepen: https://codepen.io/chansv/pen/WNNGzwm?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    ></v-data-table>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
          class: 'success--text title',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
})

Adding a header slot to customize header color in data table in vuetify 2

1 Answers