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

**URL:** https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812
**Category:** Dashboard
**Created:** [24 August 2025 04:02 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812 "2025-08-24T04:02:12Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [24 August 2025 04:02 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812/1 "2025-08-24T04:02:12Z")

</div>

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?

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [24 August 2025 11:11 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812/2 "2025-08-24T11:11:50Z")

</div>

Try this

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

```

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

---

<div class="post-metadata">

### Author: ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)
#### Post date: [24 August 2025 12:42 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812/3 "2025-08-24T12:42:35Z")

</div>

> [@omrid](#):
>
> `"{style:{color:'blue',backgroundColor:'orange'}}"`

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

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [24 August 2025 13:12 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812/4 "2025-08-24T13:12:56Z")

</div>

It works for me for both.

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1684c36d39c252944e2066ef7e997e86222c747.png)  
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:

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

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [7 September 2025 13:13 UTC](https://discourse.nodered.org/t/using-ui-template-to-create-a-v-data-table-problem/98812/5 "2025-09-07T13:13:46Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.