title: How can you customize all elements in a table header?
body: <p>Looking at the examples on <a href="https://vuetifyjs.com/en/components/data-tables/#customizing-default-header" rel="nofollow noreferrer">this page</a>, what is the way to apply toUpper to all header items? It looks too clumsy having to do it one-by-one (i.e. header.calories, header.fat...) and I can't figure out how a v-for can wrap around the template/v-slot element. Is the only way to use a 'div' and flex it horizontally?</p>
  
  <pre><code> &lt;template&gt;
     &lt;v-data-table
       :headers="headers"
       :items="desserts"
       class="elevation-1"
     &gt;
       &lt;template v-slot:header.name="{ header }"&gt;
         {{ header.text.toUpperCase() }}
       &lt;/template&gt;
     &lt;/v-data-table&gt;
   &lt;/template&gt;
  
   &lt;script&gt;
     export default {
       data: () =&gt; ({
         headers: [
           {
             text: 'Dessert (100g serving)',
             align: 'start',
             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: 159,
             fat: 6.0,
             carbs: 24,
             protein: 4.0,
             iron: '1%',
           },
           ....// rest of it
         ],
       }),
     }
   &lt;/script&gt;
  </code></pre>