q-table highlight filtered value

[erhard]

Hello, all

I use the q-table in grid style. Has anybody an idea how I can highlight the filtered text ?

I have a lot of textfields One is for example
“bla bla target bla bla”. The filter filters the record with “target” But now because there is a lot of text it would be great if there is an idea how to make the word target e.g. blue.
best regards
erhard

[nededa]

If I understood you correctly you could just wrap it in span element by using replace and then use v-html to render html. Something like this:

<q-td
    key="calories" 
    :props="props"
    v-html="props.item.calories.replace(searchValue, `<span style='color:yellow'>${searchValue}</span>`"
>
</q-td>

[erhard]

@nededa Thanks for Your reply. Yes this would work if you have data where a column is settled with one item like calories and a number. But I have a text like a disceiption of an item = prosa text in large textfields. Q-table works great to find single words in that text and filters properly. But when there is a large text the user expects to see the hits somehow.

[nededa]

@erhard you mean you want to highlight input text? You could just hide text and use default slot to show div on top of input also disable pointer events for div overlay. It is a bit hacky but either this or you’ll have to replace your inputs with div+contenteditable.

  <q-input v-model="text" label="Standard">
    <template v-slot:default>
      <div class="relative">
        <div 
             class="absolute text-black" 
             style="left:0;top:25px;pointer-events:none"
             v-html="text.replace(search, `<span class='text-red'>${search}</span>`)"
        ></div>
      </div>
    </template>
  </q-input>
  
  <style>
  
    input {
  
      color: white !important
  
    }
  
  </style>

[xdesai]

@erhard You could use the “item” scoped slot to create a custom template to output your data e.g. in a card, then use v-html and string replacement:

https://codepen.io/xariusdesai/pen/XWNBLNZ