Vuetify: Datatable Search prop confusion

[hackel]

Please clarify the use of the VDataTable search prop. It seems that it is only useful for local data, is this correct? I implemented a data table that retrieved its data from an API call, filtered by the search query entered. This was all working fine, and the data I pulled contained the correct, filtered records, however the table always appeared empty. I was banging my head over this for a while until I finally stepped through the Vuetify source itself and discovered that it was looking for a "searchLength" property that was always set to 0, no matter what. It seems that there is no way to set this property through the public API, for when you are performing the search filtering server-side.

The solution to the problem was remarkably simple: I just removed the search prop from the component entirely, and manually watch my search model to update the data accordingly.

If my understanding is correct, this is simply how the component was designed, so it's more of a documentation issue, but I wanted to be sure that I wasn't doing something wrong. Perhaps it should only check for searchLength instead of itemsLength if the totalItems prop is not being used?

[nekosaur]

You are correct that the search prop is only used when the data is local. If you're using the total-items prop then search, sort and pagination are disabled as it is expected that you're handling those server-side.

I'm sure the docs could be clearer on this. I'll keep this issue open until I've had a chance to look it over.

[CharlesOkwuagwu]

Please some more guidance on setting up server side search is needed please.
Thanks!

[hackel]

@CharlesOkwuagwu Basically, you've just got to do it all yourself. I created a completely separate input field from the data table to hold my search query, and added a listener to update my table whenever it changes. Something like this:

<template>
    <v-text-field @input="value => fetchDataFromApi(value)"></v-text-field>
    <v-data-table :items="items">...</v-data-table>
</template>

<script>
    export default {
        data() {
            return {
                items: [],
            };
        },
        methods: {
            fetchDataFromApi(query) {
                // Use Axios or whatever you like to retrieve updated search results into items
                axios.get(`api/search?q=${query}`)
                    .then(response => this.items = response);
            },
        },
    };
</script>

Obviously you could trigger this with enter or a submit button instead, etc.

I do think eventually integrating some external search functionality into the data-table component makes sense.

[johnleider]

I'm going to re-open this for a potential enhancement.

[nekosaur]

Issue moved to vuetifyjs/vuetifyjs.com #417 via ZenHub

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord