Vue Data Table Headers All Appearing in One Column

Question

I have a v-data-table and I am trying to print my headings, but with my code they are all appearing grouped into one column instead of across the entire table.

<template v-slot:header>
    <thead>
        <tr>
            <div v-for="(itm, i) in hdrs" :key="i">
              <th>
                {{itm.value}}
              </th>
            </div>
        </tr>
    </thead>
</template>

Can anyone offer a suggestion as to how to resolve this issue please?

Boussadjra Brahim · Accepted Answer · 2021-03-15T08:25:12.377

1

the loop should be done in the th elements and remove the div one :

<tr>
  <tempalte v-for="(itm, i) in hdrs">
     <th v-if="someCondition">
      {{itm.value}}
     </th>
  </template>
</tr>

edited Mar 15 '21 at 08:25

answered Mar 15 '21 at 08:13

Boussadjra Brahim

82,684
19
144
164

Agreed - but what if I don't want to display the ` ` on certain headings? Doing it this way produces large gaps in the `v-data-table`? – Dustin Cook Mar 15 '21 at 08:15
you could use conditional rendering using `v-if` – Boussadjra Brahim Mar 15 '21 at 08:18
Doesn't that have to go inside the `` tags in this case? Which means it will always attempt to render the column header, but not print the contents. – Dustin Cook Mar 15 '21 at 08:20
the v-for loop could be done in a virtual element `template` and the v-if done in the th element which will be rendered based on the condition – Boussadjra Brahim Mar 15 '21 at 08:27
This still creates a blank ` ` element? – Dustin Cook Mar 15 '21 at 08:38
D'oh you're right! I have my logic muddled, sorry. – Dustin Cook Mar 15 '21 at 08:43

Vue Data Table Headers All Appearing in One Column

1 Answers1