Styling Vuetify V-Data-Table

Vuetify v-data-table custom header class styling not being applied

You can hide default header and create custom using v-slot:

<template>
    <v-data-table
    :headers="headers"
    :items="myitems"
    hide-default-header
    >

    <template v-slot:header="{ props: { headers } }">
        <thead>
          <tr>
            <th v-for="h in headers" :class="h.class">
              <span>{{h.text}}</span>
            </th>
          </tr>
        </thead>
    </template>
    </v-data-table>
</template>

<script>
export default {
  name: 'MyComponent',

   data () {
        return {
            headers:[
                { text: 'First Header', value: 'first', class: 'my-header-style' },
                { text: 'Second Header', value: 'thing', class: 'my-header-style' },
            ],
            myitems : []
        }
    }
}
</script>

<style scoped>
.some-other-style {
  background: blue;
}
.my-header-style {
  color: #6f8fb9 !important;
}
</style>

change the style of Vuetify table header

As said by @StevenSiebert. I need to check what is the class after being rendered.

I checked the table header class name and use this code inside the style tag to change the style for that class:

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}

Here is the reference I found for Scoped CSS in Vue: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

CSS with Vuetify V-data-table

You should apply border-spacing to table, not tr. Also need to have border-collapse: separate; for this to work. Usually it's set to separate as default, but not sure if vuetify overwrites it

>>> table {
  border-spacing: 10px;
  border-collapse: separate;
}

As for the border: none, I suspect it's set on the td level. So if you want to affect that style, do:

>>> table td {
  border: none;
}

Best way to apply css class formatting on vuetify data table column

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>

vuetify data table mobile view

Not sure if it is the way to do it but twisting the css can do what you want.

https://codepen.io/michael-vascue/pen/KKWaKZo

.v-data-table>.v-data-table__wrapper .v-data-table__mobile-table-row {
  margin: 10px; // add margin between each row
  border: 1px solid #ededed; // add border color
  display: block; // display table row as block
}

Vuetify data-table cell coloring

You can try using the item slot which allows you to create a custom row - meaning you'll be able to apply conditional classes.

Check out an example here where I use Vuetify's example data-set: https://codepen.io/ianteoyy-the-flexboxer/pen/JjOxjMQ