0.15 QTable search



  • Hi everyone,

    I got a strange result when I enter ‘f’ in the search of my 3 differents QTable wich is that it doesn’t filter at all !
    In one of my QTable, if I enter ‘j’ or ‘je’ it doesn’t filter at all too.

    I checked several times and i don’t have those strings in my QTable’s data.

    I implemented correctly all the QTable by checking the doc and I have no error.

    What can be the problem ? And how can i see what is the string that correspond to my search ?

    Thanks in advance


  • Admin

    Hi,

    Can’t help you without seeing your vue file…



  • Sorry I though that maybe it’s a common issue.
    Here is the parts of my code that are concerned:

    QTable:

    <q-table
                :data="table"
                :filter="filter"
                :columns="columns"
                :visible-columns="visibleColumns"
                row-key="title"
                color="primary"
              >
                <template slot="body" slot-scope="props">
                  <q-tr :props="props">
                    <q-td key="title" :props="props">
                      {{ props.row.title }}
                    </q-td>
                    <q-td key="author" :props="props">
                      {{ props.row.author }}
                    </q-td>
                    <q-td key="date" :props="props">
                      {{ props.row.date }}
                    </q-td>
                    <q-td key="completed" :props="props">
                      {{ props.row.completed }}
                    </q-td>
                    <q-td key="versions" :props="props">
                      <q-chip small color="secondary" v-for="(version,index) in props.row.versions" v-bind:key="version.id" v-if="index === props.row.versions.length - 1">
                        {{ version.number }}
                      </q-chip>
                    </q-td>
                    <q-td key="actions" :props="props">
                      <q-checkbox color="primary" v-model="props.expand" checked-icon="remove" unchecked-icon="add" class="q-mr-md" />
                      <q-btn color="tertiary" size="md" @click="viewForm($event)"><q-icon name="visibility" /></q-btn>
                      <q-btn color="tertiary" size="md" @click="formClick($event, props.row)"><q-icon name="edit" /></q-btn>
                      <q-btn color="negative" size="md" @click="removeFormModal($event, props)"><q-icon name="delete" /></q-btn>
                    </q-td>
                  </q-tr>
                  <q-tr v-show="props.expand" :props="props">
                    <q-td colspan="100%">
                      <div class="text-left">This is expand slot for row above: {{ props.row.title }}.</div>
                    </q-td>
                  </q-tr>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-search
                    color="primary"
                    v-model="filter"
                  />
                </template>
              </q-table>
    

    data():

    table: [],
          columns: [
            {
              name: 'title',
              label: 'Titre',
              field: 'title',
              align: 'left',
              sortable: true
            },
            {
              name: 'author',
              label: 'Auteur',
              field: 'author',
              align: 'left',
              sortable: true
            },
            {
              name: 'date',
              label: 'Date',
              field: 'date',
              align: 'left',
              sortable: true
            },
            {
              name: 'completed',
              label: 'Q-Synth(s) complète(s)',
              field: 'completed',
              align: 'left',
              sortable: true
            },
            {
              name: 'versions',
              label: 'Versions',
              field: 'versions',
              align: 'left',
              sortable: false
            },
            {
              name: 'actions',
              label: 'Actions',
              field: 'actions',
              align: 'left',
              sortable: false
            }
          ],
          filter: '',
          visibleColumns: ['title', 'author', 'date', 'completed', 'versions', 'actions'],
    

    Store with fake data:

    forms: [
        {
          id: '1c58e652-b9ee-dbb2-9d8e-1518791916196',
          title: 'Testez vos aptitudes en négociation',
          author: 'Elodie',
          date: '2018-01-12 15:24',
          assignated: 'Teddy - teddy.levis@email.com',
          completed: 2,
          versions: [
            {
              number: '1.0',
              form: [
                {
                  id: 'dc1247ec',
                  label: 'Quelles étaient vos couleurs favorites ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc3447ec',
                  label: 'Vos anciennes couleurs favorites',
                  type: 'percentage',
                  width: 12
                }
              ]
            },
            {
              number: '1.1',
              form: [
                {
                  id: 'dc5647ec',
                  label: 'Quelles sont vos couleurs favorites ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc7847ec',
                  label: 'Vos couleurs favorites',
                  type: 'percentage',
                  width: 12
                }
              ]
            }
          ]
        },
        {
          id: '2c58e653-b9ee-dbb2-9d8e-1518791916196',
          title: 'Evaluez la maturité numérique de votre expert-comptable',
          author: 'Ethan',
          date: '2018-01-08 15:22',
          assignated: 'Teddy - teddy.levis@email.com',
          completed: 4,
          versions: [
            {
              number: '1.0',
              form: [
                {
                  id: 'dc9147ec',
                  label: 'Quelles sont vos jours de la semaine préférés ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc9247ec',
                  label: 'Vos jours préférés',
                  type: 'percentage',
                  width: 12
                }
              ]
            }
          ]
        },
        {
          id: '3c58e654-b9ee-dbb2-9d8e-1518791916196',
          title: 'Analysez votre profil de vendeur BtoB',
          author: 'Elodie',
          date: '2018-01-08 15:20',
          assignated: 'Teddy - teddy.levis@email.com',
          completed: 4,
          versions: [
            {
              number: '1.0',
              form: [
                {
                  id: 'dc9347ec',
                  label: 'Quelles sont vos couleurs favorites ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc9447ec',
                  label: 'Vos couleurs favorites',
                  type: 'percentage',
                  width: 12
                }
              ]
            }
          ]
        },
        {
          id: '4c58e655-b9ee-dbb2-9d8e-1518791916196',
          title: 'Analysez votre mode de pensée pour mieux négocier',
          author: 'Ethan',
          date: '2018-01-26 15:18',
          assignated: 'Teddy - teddy.levis@email.com',
          completed: 1,
          versions: [
            {
              number: '1.0',
              form: [
                {
                  id: 'dc9547ec',
                  label: 'Quelles sont vos couleurs favorites ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc9647ec',
                  label: 'Vos couleurs favorites',
                  type: 'percentage',
                  width: 12
                }
              ]
            }
          ]
        },
        {
          id: '5c58e656-b9ee-dbb2-9d8e-1518791916196',
          title: 'Testez vos connaissances sur les techniques de ventes BtoC à domicile',
          author: 'Morgane',
          date: '2018-01-20 15:16',
          assignated: 'Teddy - teddy.levis@email.com',
          completed: 0,
          versions: [
            {
              number: '1.0',
              form: [
                {
                  id: 'dc9747ec',
                  label: 'Quelles sont vos couleurs favorites ?',
                  type: 'multiple',
                  width: 12
                }
              ],
              synth: [
                {
                  id: 'dc9847ec',
                  label: 'Vos couleurs favorites',
                  type: 'percentage',
                  width: 12
                }
              ]
            }
          ]
        }
      ]
    

    I tried to remove the ‘versions’ for each but it’s still not filtering with the ‘f’ but workink for the ‘j’ or ‘je’.

    Noticed that i tested in the 0.14 with the same data and it’s working fine when i search ‘f’ or ‘j’.

    Thanks for the help


  • Admin

    Write your own custom filter-method when you have particular data.