Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling:

.condition-table {
    background-color: #e1f5fe70;
}

The styling seems to work fine so far. However, when I added this additional CSS:

.condition-table > thead > tr {
    color: black;
    background-color: white;
}

Unfortunately, it does not seem to have any effect at all. My goal is to make the table header stand out more compared to the row items.

If you notice anything that I may have missed or if you have any suggestions, please feel free to let me know.

https://i.sstatic.net/sCJsT.png

cssvue.jsvuejs2vue-componentvuetify.js

Answer №1

If you want to customize the appearance of the <v-data-table> header, one option is to use a deep selector.

::v-deep .v-data-table-header {
  color: black;
  background-color: white;
}

Answer №2

v-data-table offers a header slot that allows you to customize the style of the table header.

 <template>
       <div id="app">
        <v-app id="inspire">
        <v-data-table
          :headers="headers"
          :items="desserts"
          hide-default-header
          class="elevation-1"
        >
          <template v-slot:header="{ props }">
            <th v-for="head in props.headers"  class="header-text-color">{{ head.text.toUpperCase() }}
          </template>
        </v-data-table>
      </v-app>
    </div>
</template>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { 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: 200,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        }
      ],
    }
  },
})

Below is the CSS code for the custom text color style:

 .header-text-color{
      color: red;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

Is there a way to modify Eclipse's Outline view for CSS files? Specifically, how can I make the outline display comments and create collapsible ranges for groups of CSS rules? Include comments in the outline Create collapsible ranges for groups of ...

csseclipseeclipse-wtpoutline-view

Tips for creating a background image that seamlessly adjusts to various computer screen sizes

I am trying to make sure that an image fills the entire browser window, but unfortunately it has fixed width and height dimensions. Is there a way to adjust this so it displays correctly on screens of different sizes? Can CSS be used to stretch the backg ...

htmlcss

Tips for centering text vertically in an input box specifically for Internet Explorer (IE)

Here is the code I am working with: <input type="text" class="contactInput" value="my string"> .contactInput { border:0; margin:0; padding:0; background-color:#000000; color:#ffffff; height:22px; width:290px; padding ...

htmlcssinternet-explorer

What is the best way to enlarge a column contained within a container, allowing an image to spread from the center of the column all the way to the right edge of the page?

I am trying to modify my image within a bootstrap container to extend it to the side while keeping the rest of the layout unchanged. Here is what I currently have: https://i.sstatic.net/Mcukl.jpg. There is a gap on the right side of the image that I want t ...

htmlcsstwitter-bootstrapbootstrap-4

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this: <div id="menu2a"> <div class="panel list-group"> <div ...

javascriptjqueryhtmlcssangularjs

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

javacssjavafx

Dynamic content in CSS horizontal alignment

In a parent div with fixed width, I have dynamically created divs that I want to distribute horizontally without knowing the exact number of elements. I tried using the "Using inline-block and justified text" technique from a CSS Tricks page but it did not ...

htmlcssalignment

Managing touchEvents in Vue: A comprehensive guide

Is it possible to manage touch events in Vue3 without using an external library? I am trying to make an element draggable (drag and drop to another location) with touch input. The elements are generated using v-for. I was able to implement mouse control w ...

vue.jstouchvuejs3

How can I eliminate the CSS value that was inherited?

Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...

javascriptjqueryhtmlcss

Issue encountered while attempting to execute the command "vue-cli-service serve" using Vue 3

ISSUE ENCOUNTERED During an attempt to update packages, I executed ncu -u, followed by npm install to apply the updates. However, I encountered difficulties as it seemed to cause problems with eslint. Despite trying to reproduce the error for further inve ...

vue.jsnpmnpm-installpackage.jsonvuejs3

Assigning values to props in a Vue component

I created a Vue component that is supposed to receive the "uploadedFile" prop, but it's not functioning properly. I am only getting the correct information in the $attrs: Here is my component: Vue.component('table-file', { props: [' ...

javascriptvue.jsvue-component

What is causing the CSS transition to fail in the updated DOM?

When attempting to apply a CSS transition as shown in the following code snippet: https://jsfiddle.net/sunyuu/e58sfeva/17/ var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { sho ...

javascripthtmlcssvue.js

Bring the element into view by scrolling horizontally

I am facing a challenge with a list of floated left divs inside another div. This inner block of divs can be hovered over to move it left and right. Each inner div, known as 'events', has class names that include a specific year. Additionally, t ...

javascriptjqueryhtmlcss

What is the best way to connect v-model with a select element when dealing with nested foreach loops?

Whenever I use alert(this.property_credentials.district) in vue.js, it returns empty <select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-searc ...

vue.js

Are the frameworks Vue, Angular, and React known for

During a conversation, I came across an interesting viewpoint criticizing popular frameworks such as Angular, Vue, and React. It was argued that these frameworks have a significant disadvantage: apart from the API part that interacts with the server's ...

javascriptangularreactjsvue.js

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

jqueryhtmlcss

Vue.js | Web scrapers struggle to track v-for generated URLs

I am currently managing a small website that utilizes Laravel and Vue.js to display a list of items. You can check it out here. It seems like the Google crawler is having trouble following the links generated by the v-for function. In my Google Search Con ...

laravelweb-crawlervue.jsgoogle-crawlers

What is the best way to separate my Webpack/Vue code into a vendor.js file and exclude it from app.js?

My plan is to create two separate files, vendor.js and app.js, for my project. In this setup, vendor.js will contain the core code for Webpack and Vue.js, while app.js will solely focus on the Vue.js code specific to my application. To streamline this proc ...

javascriptvue.jswebpacklaravel-mixvendor

Vue.js: In a third-party library, the reference to "this" is coming back as "undefined"

My third-party script contains code in the following format ( function initialMethod(scope, factory) { // 'scope' is undefined when used in Vue // but it works fine in React and Angular } (this, function function1(param1) { ...

javascriptvue.js

Exploring navigation options in VueJS with the router

I recently completed a tutorial on integrating Okta OAuth with VueJS. In my application, I have set up a default page that displays the "App.vue" component and switches to the "About.vue" component upon clicking the "/about" route. However, I encountered a ...

javascriptvue.jsvue-router