Using ui-template to create a v-data-table problem

Dashboard
1

I have successfully created the table using the code below.
My issue is with the header… I can get the background set to red, but I haven’t been able to set the foreground color. What’s missing from my code?

<template>
    <v-data-table 
        fixed-header
        :header-props="{ class: 'bg-red'}"
        hide-default-footer
        :headers="headers" 
        :items="items">
    </v-data-table>
</template>

<script>
    export default {
        data() {
            return {      
                payload: {}    
            }
        },
        watch: {
            msg: function(){            
                if(this.msg.payload != undefined)  {                    
                    this.payload = this.msg.payload;
                }
            }
        },

        computed:  {
            headers()  {
                return [
                    {text: 'Device Name', value: 'name'},
                    {text: 'Model', value: 'model'},
                    {text: 'Firmware', value: 'firmware'}
                ]
            },

            items()  {
                return this.payload
            }
        },
    }
</script>
2

Try this

 :header-props="{style:{color:'blue',backgroundColor:'orange'}}"

or point header-props it to a function that computes & returns an object with a 'style' property.

3

Changed props to your value kinda worked… the background is orange, but there is no text being displayed at all.

4

It works for me for both.

<template>
    <div class="ml-6" style="border: 1px solid black;width:200px; max-height:100px;">
        <v-data-table
            :headers="headers"
            :items="items"
            :items-per-page="-1"
            :header-props="{style: {color:'blue',backgroundColor: 'orange'}}"
            hide-default-footer
            density="compact">
        </v-data-table>
    </div>
</template>
<script type="text/javascript">
    export default {
        data() {
            return {
            headers: [
                { title: 'Col1', key:'col1',width:'100px'},
                { title: 'Col2', key:'col2',width:'100px'}
            ],
            items:[]
            }
        }
    }
</script>

Result:

image
image239×118 1002 Bytes

Are you setting the text color in some other place? Maybe your original 'bg-red' class?

Another option is to set the header style as part of the field (column) definitions:

  headers: [
      { title: 'Diff', key:'diffType',,width:'100px',headerProps: {class:'header-style' }},
1 Like