QTable with column filtering

[s-light]

hello community,

are there any examples out there / is it possible for the QTable to filter based on columns ?
similar to https://www.material-react-table.com/docs/examples/filter-variants#filter-variants-example

any tips are welcome!

[s-light]

there are some comments in the discord thread:
https://discord.com/channels/415874313728688138/1489046270109548584

if i get anything running i will post it here
(therefore leaving it open for now)

[s-light]

https://github.com/pratik227/quasar-qgrid
seems promising.

[s-light]

a very quick try also works:

 <q-table
        flat
        bordered
        title="Treats"
        :rows="rows"
        :columns="columns"
        row-key="id"
        :filterMethod="filterMethod"
        :filter="filterTerms"
    >
<template v-slot:header-cell="props">
            <q-th :props="props">
                {{ props.col.label }}<br />
                <q-input
                    v-if="props.col.filterable != false"
                    v-model.value="filterTerms[props.col.name]"
                    input-class="text-right"
                    type="text"
                    dense
                    filled
                    debounce="300"
                    placeholder="filter"
                />
            </q-th>
        </template>
            </q-table>
    <div>
        <!-- {{ visibleColumns }} -->
        {{ filterTerms }}
    </div>
</template>

<script setup>
        
const filterTerms = ref({})
const filterMethod = (rows, terms) => {
    console.log('rows', rows)
    console.log('terms', terms)
    // console.log('col', col)
    rows = rows.filter((row) => {
        let result = true
        // check if all column filters result in true..
        for (const [columnName, value] of Object.entries(terms)) {
            // console.log(`${row.id} '${columnName}' → '${value}'`)
            if (!row[columnName].includes(value)) {
                result = false
            }
        }
        return result
    })
    return rows
}
</script>

the cocde above is not functional in this way - i just copied the relevant parts here..

with this i have a bug in that every click on the input changes the sort-order for this column.
we will see how i can fix this..