2

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.

FledglingDeveloper
  • 251
  • 3
  • 6
  • 10

3 Answers3

3

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>

Brad
  • 5,578
  • 7
  • 29
  • 43
  • 2
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/25849744) – M. S. Apr 13 '20 at 21:12
  • 1
    In vuetify, primary is the name of the primary color in the theme, the class primary sets the background of the element to the color primary. So on the v-data-table component adding the class 'primary' or any of the color names on the vuetify website will set the background color of the data-table to that color. That is exactly what the OP is asking how to do. – Brad Apr 14 '20 at 09:05
2
  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.

max
  • 359
  • 2
  • 12
0

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

Avanish Pandey
  • 31
  • 2