CODEWITHSUNDEEP
vuetify.js
FledglingDeveloper
FledglingDeveloper

Reputation: 421

How to change background color of data tables in Vuetify?

I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.

Upvotes: 4

Views: 33741

Answers (4)

tlalco
tlalco

Reputation: 422

The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.

# 1. Add a class to the table element  
<v-simple-table class="table">
...
 </v-simple-table>

# 2. Add background color
<style scoped>
.table {
  background-color: red;
}
</style>

Upvotes: 0

Avanish Pandey
Avanish Pandey

Reputation: 61

You can use headers object to specify class as below,

headers: [{
    text: 'Dessert (100g serving)',
    align: 'start',
    divider: true,
    sortable: false,
    value: 'name',
    class: "blue lighten-5"
},
{
    text: 'Calories',
    value: 'calories',
    align: 'center',
    divider: true,
    class: "blue lighten-5"
}]

The above code will add light blue background to your header. You can do more with the class attr in headers object

Upvotes: 2

Brad
Brad

Reputation: 8698

Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.

<v-data-table class="elevation-1 primary"></v-data-table>

Upvotes: 6

max
max

Reputation: 529

  1. Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>

elevation-1 is their standard class name. I added test to illustrate the point.

  1. Add necessary styling to .test .theme--light.v-table selector in your custom CSS.

E.g. .test .theme--light.v-table { background-color: #00f; }

You may need to replace the theme name in the CSS path with your theme name.

If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.

enter image description here

A simple way to include your CSS is with <style> tag inside your App.vue file:

<style>
  @import './assets/styles/yourstyles.css';
</style>

How to include css files in Vue 2 has more on that.

Upvotes: 2

Related Questions