cannot filter when passing string from a parent component.

[iampawan31]

I am using a separate input field for adding a filter to my QGrid table. The problem is, I am sending the filter prop to QGrid, but nothing happens. I checked the source code and it doesn't accept filter as a Prop. Can we have a functionality similar to the QTable component where a filter value can be passed as a prop?

  <div class="q-pa-md">
    <q-table
      ref="tableRef"
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="id"
      v-model:pagination="pagination"
      :loading="loading"
      :filter="filter"
      binary-state-sort
      @request="onRequest"
    >
      <template v-slot:top-right>
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

    </q-table>
  </div>
</template>

[pratik227]

You can use global_search props pass it as true.

[iampawan31]

But that creates an input field as part of QGrid. I am using a separate input field as part of the parent component.

<template>
  <q-input v-model="filter" />
  <q-grid :data="data" :columns="columns" :filter="filter" :global-search="true"></q-grid>
</template>

<script>
import {defineComponent, ref} from 'vue'

const filter = ref('')

const columns = [
  {
    name: 'name',
    required: true,
    label: 'Dessert (100g serving)',
    align: 'left',
    field: 'name',
    sortable: true
  },
  {name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true},
  {name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true},
  {name: 'carbs', label: 'Carbs (g)', field: 'carbs'},
  {name: 'protein', label: 'Protein (g)', field: 'protein'},
  {name: 'sodium', label: 'Sodium (mg)', field: 'sodium'},
  {
    name: 'calcium',
    label: 'Calcium (%)',
    field: 'calcium',
    sortable: true,
    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
  },
  {
    name: 'iron',
    label: 'Iron (%)',
    field: 'iron',
    sortable: true,
    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
  }
]

const data = [
  {
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    sodium: 87,
    calcium: '14%',
    iron: '1%'
  },
]

export default defineComponent({
  name: "Basic",
  setup() {
    return {
      columns,
      data,
      filter
    }
  }
})
</script>

How do i pass the filter prop to QGrid without using the inbuilt search slot?

[pratik227]

Hi @iampawan31 ,

Just published new version you can just pass your v-model in global_filter and it will work. No need to pass :global-search="true"

Try to install new version it will work.

<q-grid :data="data" :columns="columns" :global_filter="global_filter" ></q-grid>

[iampawan31]

@pratik227 Hi, I see that you have added changes to a new branch but it still has not merged with the default branch. I am not able to see the changes even when I update the plugin in my quasar app.

[pratik227]

Make sure it's not taking package from cache. UI version -> 1.0.17

[iampawan31]

The version you mentioned doesn't show up.

[pratik227]

It's ui version not app extension version

[pratik227]

Try to remove node-modules and install all using npm install

[pratik227]

The version you mentioned doesn't show up.

https://www.npmjs.com/package/quasar-ui-qgrid

[iampawan31]

@pratik227 Used the Npm version. Its working now. Thank you so much. Happy Coding :)