quasar table search filter on single column

[ghost]

Hello all,

I’m looking for a while to find some information about using filtering in a q-table. I have a table with multiple columns and a search filter at the top , but when I type something on that filter it search the info in all the columns. I want to make a search that works with a single column.

I would grateful someone could help

allocation .txt

Regards
Akash

[zanzara]

Write a filter method.

 <q-table
....
:filter-method="myFilterMethod"
....
>
....
myFilterMethod (rows, terms, cols) {
let filteredItems = rows;
 if (this.textFilter && this.textFilter.length) {
        filteredItems = filteredItems.filter(
          row =>
            row.ThisIsYourColOfInterest.includes(this.textFilter) 
        );
      }
      return filteredItems;
}

...
data() {
  textFilter: ""   // use this in your filter q-input  v-model
}

[metalsadman]

example codepen https://codepen.io/metalsadman/pen/rNarNbM.

[ghost]

Hello Zanzara , your solution you provide me is not working can you please check is there something wrong am doing thanks <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=icon> Virus-free. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail&utm_term=link> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

…

On Mon, Apr 5, 2021 at 2:04 AM zanzara ***@***.***> wrote: Write a filter method. <q-table .... :filter-method="myFilterMethod" .... > .... myFilterMethod (rows, terms, cols) { let filteredItems = rows; if (this.textFilter && this.textFilter.length) { filteredItems = filteredItems.filter( row => row.ThisIsYourColOfInterest.includes(this.textFilter) ); } return filteredItems; } ... data() { textFilter: "" // use this in your filter q-input v-model } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8766 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOSYB45OVYRWKGE5QQCVR2LTHDPATANCNFSM42LZH47A> .

[metalsadman]

@AkashRamtohul768 can you please fix your links, and also better to paste the code in triple backticks. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

[ghost]

Hello alderin am really sorry for this please check 1 have uploaded the right code [image: image.png] please help

…

On Thu, Apr 15, 2021 at 5:28 PM Aldrin Marquez ***@***.***> wrote: can you please fix your links, and also better to paste the code in triple backticks. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8766 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOSYB44KFW6CZ3S57IHXT4DTI3SXVANCNFSM42LZH47A> .

--------------------------------------- <skeleton-table v-if="loading" /> <q-table v-else :data="data" :columns="columns" ref="table" color="primary" class="allocationTable" :visible-columns="visibleColumns" :rows-per-page-label="$t('View.RecordLabel')" :rows-per-page-options="[5, 10, 20]" :filter-method="myFilterMethod" -------------------------------------- <template v-slot:top-right> <q-input borderless dense outlined debounce="300" v-model="textFilter" :placeholder="$t('Model.TypeToFilter')" class="filterSize" <template v-slot:append> <q-icon name="search" /> </template> </q-input> </template>

--------------------------------------------- methods: { myFilterMethod(rows, terms, cols) { let filteredItems = rows; console.log(filteredItems); if (this.textFilter && this.textFilter.length) { filteredItems = filteredItems.filter(row => row.ThisIsYourColOfInterest.includes(this.textFilter) ); } return filteredItems; },