fix(VDataTableServer): add search prop

[nekosaur]

Description

search prop is necessary so that we can signal table when update:options event is needed, so that we dont get double events, or none at all

closes #16959

Markup:

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue'

  const headers = [
    { title: 'id', key: 'id' },
    { title: 'title', key: 'title' },
  ]
  const q = ref('')
  const users = ref([])
  const totalUsers = ref(0)

  const isLoading = ref(false)
  const options = ref<any>({})
  const createUrl = opts => {
    const url = 'https://jsonplaceholder.typicode.com/albums'

    const params = new URLSearchParams()

    const { page, itemsPerPage, q } = opts

    const _start = (page - 1) * itemsPerPage
    q && params.append('q', String(q))
    params.append('_start', String(_start))
    params.append('_limit', String(itemsPerPage))

    return `${url}?${params.toString()}`
  }

  const fetchData = opts => {
    const url = createUrl(opts)
    console.info('Fetching data using URL: ', url)
    isLoading.value = true

    fetch(url)
      .then(res => {
        totalUsers.value = Number(res.headers.get('X-Total-Count'))
        return res.json()
      })
      .then(data => {
        console.log(data)

        users.value = data

        isLoading.value = false

        console.log('-------\n')
      })
  }

  watch(
    options,
    (val, oldVal) => {
      console.log('Options changed!')

      const _val = JSON.parse(JSON.stringify(val))
      const _oldVal = JSON.parse(JSON.stringify(oldVal))

      console.log('val :>> ', _val)
      console.log('oldVal :>> ', _oldVal)

      fetchData({ ...options.value, q: q.value })
    },
    { deep: true }
  )
</script>

<template>
  <v-app>
    <v-main>
      <v-text-field label="Search..." @change="q = $event.target.value" />
      <v-data-table-server
        :headers="headers"
        :items="users"
        :search="q"
        :loading="isLoading"
        :page="options.page"
        :items-length="totalUsers"
        :items-per-page="2"
        @update:options="options = $event"
      />
      Total: {{ totalUsers }}
    </v-main>
  </v-app>
</template>

[DeepKumbhare85]

Hi,

Thanks so much for working on the fix. I checked the pull request locally and tested it. It's working perfectly fine 💯

Thanks so much for your efforts. Can we merge this into the main branch now? v3.1.13 just released and unfortunately, we didn't get this in that patch release, We are eagerly waiting for the fix.

Best regards.

[johnleider]

Resolve conflicts and we'll merge this straight away.