How to highlight a search result in V-data-table - VueJS

Question

I have a v-data-table that has some generic data. I wanted to know if I could highlight a specific value that I obatin by searching a word?

My current code is simple & a snippet of it looks like this.

EDIT: I am utilizing the CRUD-Actions Example from the officail vuetify documentation. https://vuetifyjs.com/en/components/data-tables/

<v-data-table 
    :headers="headers" 
    :items="rows" 
    item-key="name" 
    :search="search" >
    <template v-slot:item="props">
        <tr>
            <td v-for="(prop, key) in props.item" 
:key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}} 
           </td>
            <td>
                <v-icon small @click="editItem(item)">mdi-pencil</v-icon>
            </td>
        </tr>
    </template> 
    <template v-slot:top>
        <!-- A dailog box is present here to edit the rows-->                   
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
        </v-icon>
    </template>

</v-data-table>

Thanks!

Answer 1

You can create a filter like:

filters: {
    highlight: function(value, query){
        return value.replace(new RegExp(query, "ig"), '<span class=\'blue\'>' + query + '</span>')
    }
},

and then use it in the item slots of the appropriate columns...

<template #item.address="{ value }">
     <div :inner-html.prop="value | highlight(search)">
     </div>
</template>

Demo: https://codeply.com/p/3CS7vssZqg