[Vuejs]-How to add individual column searching (text inputs) in vuetify data table?

by

0👍

Use table header slot. Here’s an example how you can implement input text boxes below the table headings. This creates two rows in table header – the first one will contain captions, the second will contain input boxes where table header column has filterable set to true. You can leave out the v-show directive if you want to create input box for every column. Very simple example that does not produce drop downs etc. for fields, but should give you the basic idea.

<template
    slot="headers"
    slot-scope="props"
>
    <tr>
        <th
            v-for="header in props.headers"
            :key="header.text"
            align="left"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              <VIcon small>
                arrow_upward
              </VIcon>
              {{ header.text }}
        </th>
    </tr>
    <tr>
        <th
            v-for="header in props.headers"
            v-show="header.filterable === 'true'"
            :key="header.text"
        >
            <VTextField
                :label="header.text"
                box
            />
        </th>
    </tr>
</template>

Leave a comment