How to custom all headers in v-data-table?

Question

I'm trying to customize all headers in my v-data-table like this

<v-data-table
          :headers="headers"
          :items="desserts"
          :disable-sort="true"
          :hide-default-footer="true"
        >
          <template v-slot:header="{ header }">
            {{ header.text.toUpperCase() }}
          </template>
</v-data-table>

I saw in the documentation how to do this for only ONE header like this :

<v-data-table
          :headers="headers"
          :items="desserts"
          :disable-sort="true"
          :hide-default-footer="true"
        >
          <template v-slot:header.name="{ header }">
            {{ header.text.toUpperCase() }}
          </template>
</v-data-table>

but I want to custom ALL headers and I'm not figuring out how to do this. Also my headers are dynamics.

Gaetan C. · Accepted Answer · 2020-11-04T13:41:32.950

You can do it using the header (not header.<name>) slot. Note that this slot is used for generating all header columns at once. It means that you'll need to dynamically create the <th> tags using a v-for directive.

Also, it is located under the default headers, so you'll need to add the hide-default-header prop.

<v-data-table :headers="headers" :items="desserts" hide-default-header>
    <template v-slot:header="{ props }">
        <thead>
            <tr>
                <th v-for="header in props.headers" :key="header.text">
                    {{ header.text.toUpperCase() }}
                </th>
            </tr>
        </thead>
    </template>
</v-data-table>

See this working example.

How to custom all headers in v-data-table?

1 Answers1