title: How to highlight a search result in V-data-table - VueJS
body: <p>I have a <code>v-data-table</code> that has some generic data. I wanted to know if I could highlight a specific value that I obatin by searching a word?</p>
  
  <p>My current code is simple &amp; a snippet of it looks like this. </p>
  
  <p>EDIT: I am utilizing the CRUD-Actions Example from the officail vuetify documentation. <a href="https://vuetifyjs.com/en/components/data-tables/" rel="nofollow noreferrer">https://vuetifyjs.com/en/components/data-tables/</a></p>
  
  <pre><code>&lt;v-data-table 
      :headers="headers" 
      :items="rows" 
      item-key="name" 
      :search="search" &gt;
      &lt;template v-slot:item="props"&gt;
          &lt;tr&gt;
              &lt;td v-for="(prop, key) in props.item" 
  :key="key" @click="onClickItem(key, props.item[key])"&gt;{{props.item[key]}} 
             &lt;/td&gt;
              &lt;td&gt;
                  &lt;v-icon small @click="editItem(item)"&gt;mdi-pencil&lt;/v-icon&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/template&gt; 
      &lt;template v-slot:top&gt;
          &lt;!-- A dailog box is present here to edit the rows--&gt;                   
      &lt;/template&gt;
  
      &lt;template v-slot:item.actions="{ item }"&gt;
          &lt;v-icon small class="mr-2" @click="editItem(item)"&gt;
              mdi-pencil
          &lt;/v-icon&gt;
      &lt;/template&gt;
  
  &lt;/v-data-table&gt;
  
  </code></pre>
  
  <p>Thanks!</p>