CODEWITHSUNDEEP
vue.jsvuetify.js
AliCa
AliCa

Reputation: 269

How to add icon to the Header in vuetify DataTable

I'm trying to add (+) icon to the one of the header columns in v-datatable. The code below does not add any icon. Actually, creating template slot for header does not have any effect on datatable.

What I try,

<template>
  <v-data-table 
            item-key="name"
            :items="complainantInfos"
            :headers="headers"
            sort-by="Id"
            class="elevation-1">
            <template v-slot:top>
                <v-toolbar flat color="white">
                <v-toolbar-title>Inspection</v-toolbar-title>
                <v-spacer></v-spacer>           
                </v-toolbar>
            </template>
              <template slot="headers" slot-scope="props">
               <tr>         
                  <th
                     v-for="header in props.headers"
                     :key="header.text">
                     <v-icon small >plus-circle-outline</v-icon>
                     {{ header.text }}
                  </th>
               </tr>
             </template>
    </v-data-table>
</template>
<script>
  import {  mapGetters } from "vuex";    
export default {    
    data(){
        return{
           complainantInfos:[
              {
                 ...
               }
           ],
            headers: [
                { text: 'NameSurname', value: 'name', align: 'left' ,width: "25%" },
                { text: 'ID', value: 'PersonelIdNumber' },
                { text: 'Phone-1', value: 'Cellular1' },
                { text: 'Phone-2', value: 'Cellular2' },  
                { text: 'Work Phone',  value: 'WorkPhone' },  
                { text: 'InterPhone',  value: 'Interphone' },
                { text: 'Email',   value: 'Email' },
                //{ text: '+', value: 'action', sortable: false, align: 'right'}
              
            ],

I have edited the code according to the comments. The problem solved.

 ...

    </v-card>
                </v-form>
              </v-dialog>
            </v-toolbar>
            </template>           
            
            <template v-slot:header.Actions="{ header }">
               
                     <v-icon small>plus-circle-outline</v-icon>{{ header.text }}
             
            </template>
...

Upvotes: 5

Views: 6555

Answers (3)

Mohammad Alavi
Mohammad Alavi

Reputation: 1

Here is what I ended up with. The behavior is exactly the same as the current data-table. With correct hover effect, sort icon and multi-sort counter badge.

<template #[`header.YOUR_COLUMN_NAME`]="{ column, isSorted, toggleSort, getSortIcon, sortBy }">
    <v-tooltip text="something...">
        <template #activator="{ props }">
            <div class="v-data-table-header__content">
                <!-- this is the tooltip icon-->
                <v-icon v-bind="props" icon="mdi-information" />
                <div class="v-data-table-header__content">
                    <span @click="() => toggleSort(column)">{{ column.title }}</span>
                    <v-icon v-if="column.sortable && !disableSort" class="v-data-table-header__sort-icon" :icon="getSortIcon(column)" />
                    <div v-if="multiSort && isSorted(column)" class="v-data-table-header__sort-badge">
                        {{ sortBy.findIndex((x) => x.key === column.key) + 1 }}
                    </div>
                </div>
            </div>
        </template>
    </v-tooltip>
</template>

Some context:

‍‍disableSort is a variable I use to disable the sorting is some situations, e,g. while fetching data from server.

:disable-sort="disableSort"

multiSort is a prop I use to configure my data-table component.

:multi-sort="multiSort"

Change these stuff according to your code.

Here is the reference I used to write this code.

Upvotes: 0

js-user20163804
js-user20163804

Reputation: 11

The above code was not applied, so I did the following.

<template v-slot:column.name="{ column }">
 {{ column.title }}<v-btn variant="text" icon="mdi-delete"></v-btn>
</template>

You can put your header key in the name.

Upvotes: 0

Ivan Shulev
Ivan Shulev

Reputation: 566

Since you only wish to add the icon to one specific column, I would suggest header.columnName.

Your slot would look like this:

<template v-slot:header.name="{ header }">
  <v-icon small>plus-circle-outline</v-icon>{{ header.text }}
</template>

If the column name is "Cellular1", the code will be <template v-slot:header.Cellular1="{ header }">.

Please make sure you have the icon set included. Otherwise, no HTML will be rendered for v-icon. You can test it with default mdi icons, for example mdi-minus.

Upvotes: 7

Related Questions