Searching

Search in a specific field

Use search-field and search-value props to search for result in a specific field. If you don't pass the search-field prop, it will search in all fields.

⚠️ Attention: Searching feature is only available in client-side mode. In server-side mode, you need to request searched data from server when you navigate to a new page. Click hereopen in new window to check more information about server-side mode

Example

By default, vue3-easy-data-table doesn't provide a search input, but you can provide your own search input element like this:

<template>
  <span>search field:</span>
  <select v-model="searchField">
    <option>player</option>
    <option>team</option>
  </select>
  
  <br/>

  <span>search value: </span>
  <input type="text" v-model="searchValue">

  <EasyDataTable
    :headers="headers"
    :items="items"
    :search-field="searchField"
    :search-value="searchValue"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Header, Item } from "vue3-easy-data-table";

const searchField = ref("player");
const searchValue = ref("Stephen Curry");
  
const headers: Header[] = [
  { text: "PLAYER", value: "player" },
  { text: "TEAM", value: "team"},
  { text: "NUMBER", value: "number"},
  { text: "POSITION", value: "position"},
  { text: "HEIGHT", value: "height"},
  { text: "WEIGHT (lbs)", value: "weight", sortable: true},
  { text: "LAST ATTENDED", value: "lastAttended"},
  { text: "COUNTRY", value: "country"},
];

const items: Item[] = [
  { "player": "Stephen Curry", "team": "GSW", "number": 30, "position": 'G', "height": '6-2', "weight": 185, "lastAttended": "Davidson", "country": "USA"},
  { "player": "Lebron James", "team": "LAL", "number": 6, "position": 'F', "height": '6-9', "weight": 250, "lastAttended": "St. Vincent-St. Mary HS (OH)", "country": "USA"},
  { "player": "Kevin Durant", "team": "BKN", "number": 7, "position": 'F', "height": '6-10', "weight": 240, "lastAttended": "Texas-Austin", "country": "USA"},
  { "player": "Giannis Antetokounmpo", "team": "MIL", "number": 34, "position": 'F', "height": '6-11', "weight": 242, "lastAttended": "Filathlitikos", "country": "Greece"},
];
</script>

Edit on CodeSandboxopen in new window

search field:    search value:

PLAYERTEAMNUMBERPOSITIONHEIGHTWEIGHT (lbs)LAST ATTENDEDCOUNTRY
Stephen CurryGSW30G6-2185DavidsonUSA

Search across multiple fields

Set a fields array for the search-field prop.

Example:

<template>
  <span>search value: </span>
  <input type="text" v-model="searchValue">

  <EasyDataTable
    :headers="headers"
    :items="items"
    :search-field="searchField"
    :search-value="searchValue"
  />
</template>

<script lang="ts" setup>
const searchField = ["number", "weight"];
const searchValue = ref(0);

// omit ...
</script>
search value:

PLAYERTEAMNUMBERPOSITIONHEIGHTWEIGHT (lbs)LAST ATTENDEDCOUNTRY
Stephen CurryGSW30G6-2185DavidsonUSA
Lebron JamesLAL6F6-9250St. Vincent-St. Mary HS (OH)USA
Kevin DurantBKN7F6-10240Texas-AustinUSA