3

I have dynamically changing data for Vuetify's v-data-table:

 <v-data-table
      :headers="table_headers"
      :items="table_content"
    >
    </v-data-table>

In the table_headers I can add "class" so that it can be used to apply custom css formatting on the headers:

  table_headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
            class: 'section-dessert'
          },
          { text: 'Calories', value: 'calories', class: 'section-calories' },
    
        ],

However this only affect headers. So my question is, would it be possible, or what is the best way to apply this class that I keep in table_headers also to all rows (per respective column).

So that when I write css for given class it will affect both header and all the rows for the given column.

EDIT: So essentially I want to style whole column (on column basis), something like this: Can I color table columns using CSS without coloring individual cells? However with dynamic data for headers and table items (and since vuetify does not have working colgroup then Im not sure how to do something like this here)

Alex T
  • 3,529
  • 12
  • 56
  • 105

1 Answers1

1

You have to use the body slot to achieve that kind of customization, see below:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    table_headers: [{
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
        class: 'section-dessert'
      },
      {
        text: 'Calories',
        value: 'calories',
        class: 'section-calories'
      },

    ],
    table_content: [{
        name: "Some dessert",
        calories: 100
      },
      {
        name: "Some dessert2",
        calories: 200
      },
      {
        name: "Some dessert3",
        calories: 300
      },
      {
        name: "Some dessert4",
        calories: 400
      }
    ]
  }),

})
.section-dessert {
  color: red !important;
}

.section-calories {
  color: green !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<body>
  <div id="app">
    <v-app>
      <v-data-table :headers="table_headers" :items="table_content" hide-action hide-default-footer>
        <template v-slot:body="{ items }">
        <tbody>
        <tr v-for="item in items" >
          <td :class="table_headers[0].class">{{item.name}}</td>
          <td :class="table_headers[1].class">{{item.calories}}</td>
        </tr>
        </tbody>
      </template>
      </v-data-table>
    </v-app>
  </div>
</body>
João Pedro Domingues
  • 96
  • 9