title: vuetify v-data-table using search function to search for item's property that is not indicated in the headers
body: <p>My table looks like this:</p>
  <p><a href="https://i.stack.imgur.com/2Xjdj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Xjdj.png" alt="enter image description here" /></a></p>
  <p>I have a templated 'product name' wherein code goes like this:</p>
  <pre class="lang-html prettyprint-override"><code>                &lt;template v-slot:item.name=&quot;{ item }&quot;&gt;
                    &lt;v-list-item two-line&gt;
                      &lt;v-list-item-avatar style=&quot;width: 70px; height: 70px&quot; tile&gt;
                        &lt;v-img :src=&quot;item.img&quot; alt=&quot;John&quot; /&gt;
                      &lt;/v-list-item-avatar&gt;
                      &lt;v-list-item-content&gt;
                        &lt;v-list-item-title style=&quot;&quot;&gt;
                          &lt;a
                            style=&quot;
                              text-decoration: none;
                              color: #0b0b0b;
                              font-size: 0.9em;
                            &quot;
                            &gt;{{ item.name }} {{ item.variation }}&lt;/a
                          &gt;
                        &lt;/v-list-item-title&gt;
                        &lt;v-list-item-subtitle class=&quot;mt-1&quot;&gt;
                          &lt;small class=&quot;mr-5&quot;&gt;
                            &lt;v-icon small&gt;mdi-package-variant&lt;/v-icon&gt;
                            {{ item.sku }}
                          &lt;/small&gt;
                          &lt;small&gt;
                            {{ item.shop_name }}
                          &lt;/small&gt;
                        &lt;/v-list-item-subtitle&gt;
                      &lt;/v-list-item-content&gt;
                    &lt;/v-list-item&gt;
                  &lt;/template&gt;
  </code></pre>
  <p>as I understand, the search ONLY search for the value from the headers we indicated my headers btw:</p>
  <pre class="lang-js prettyprint-override"><code>      headers: [
          { text: &quot;Product Name&quot;, value: &quot;name&quot; },
          { text: &quot;Quantity&quot;, value: &quot;quantity&quot; },
          { text: &quot;Price&quot;, value: &quot;price&quot; },
          { text: &quot;Orders&quot;, value: &quot;itemsSold&quot; },
          { text: &quot;Revenue&quot;, value: &quot;revenue&quot; },
          { text: &quot;Status&quot;, value: &quot;active&quot; },
        ],
  </code></pre>
  <p>How do I search un-declared value from headers? such as MEDIHEAL-MASK-PLACENTAREVITAL-EX (the subtitle for the product name of the first item in the table)</p>
  <p>I was thinking of putting another value in the headers without the &quot;text&quot; element and templating the value to display nothing to the table. Any cleaner way of doing this?</p>