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 here 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>

search field:playerteam    search value:

PLAYER	TEAM	NUMBER	POSITION	HEIGHT	WEIGHT (lbs)	LAST ATTENDED	COUNTRY
Stephen Curry	GSW	30	G	6-2	185	Davidson	USA

rows per page:

25

• 25
• 50
• 100

1–1 of 1

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:

PLAYER	TEAM	NUMBER	POSITION	HEIGHT	WEIGHT (lbs)	LAST ATTENDED	COUNTRY
Stephen Curry	GSW	30	G	6-2	185	Davidson	USA
Lebron James	LAL	6	F	6-9	250	St. Vincent-St. Mary HS (OH)	USA
Kevin Durant	BKN	7	F	6-10	240	Texas-Austin	USA

rows per page:

25

• 25
• 50
• 100

1–3 of 3