Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for?

In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality.

Many other libraries in the market need you to implement search by yourself. Although not a big deal (the code is highly reusable), it is nice to not worry about yet another feature for once.

You describe a data table in Vuetify like so -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<template>
  <v-card>
    <v-card-title>
      <v-text-field v-model="search" label="Search"></v-text-field>
    </v-card-title>
    <v-data-table :headers="headers" :items="records" :search="search">
      <template slot="items" slot-scope="props">
        <tr>
          <td>{{ props.item.id }}</td>
          <td>{{ props.item.description }}</td>
          <td>{{ props.item.cost }}</td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
</template>

Define search, headers, and records in the <script> block, and you have the complete search function defined for you.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<script>
  data() {
      return {
        search: "",

        headers: [
          { text: "Id", value: "id", sortable: "desc" },
          { text: "Description", value: "description", sortable: false },
          { text: "Cost", value: "cost", sortable: false },

        ],

        records: [
            {id:1, description: 'watch', cost: '100'},
            {id:2, description: 'clock', cost: '200'},
            {id:3, description: 'chronograph', cost: '300'}
            ],
      };
    },
</script>

Note that the search function finds results by matching values in all fields in all records in the results. These loops may not be as efficient as you want in larger data sets. Also, the functionality does not work if you are tying search results to paginated data from server. In these cases, you would want to use your own search function rather than the one provided by Vuetify.