CODEWITHSUNDEEP
vue.jsvuetify.jsv-data-table
Dustin Cook
Dustin Cook

Reputation: 1305

Vue Data Table Headers All Appearing in One Column

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?

Upvotes: 2

Views: 1320

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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>

Upvotes: 1

Related Questions