@dobbel
OK I see it. Thanks for letting me know. I’ll re-post on the new GitHub forum.

@dobbel
What new forum? Did I miss something important?

I have a component with a q-table dynamically populated. Haven’t touched it for several weeks, but all of a sudden, it hangs the browser as soon as any data is populated. I’ve tried reducing it to a single column, and adding one element to the data array - it still hangs the browser!
I have no idea how to resolve this - any suggestions will be welcome.

Here’s the code:

<q-table
        class="sticky-header-column full-width full-height non-selectable"
        ref="table"
        :dense="dense"
        flat
        square
        virtual-scroll
        :virtual-scroll-sticky-size-start="30"
        :virtual-scroll-sticky-size-end="30"
        :rows-per-page-options="[0]"
        :pagination.sync="pagination"
        :data="tableItems"
        :columns="columns"
        row-key="name"
        selection="single"
        :selected.sync="selected"
        :sort-method="customSort"
        :filter="searchTerm"
        no-data-label="No items match filter and category setting"
      >

Good point Scott. Thanks for reminding me of the component approach. I’ve use it a few times, but got lazy I guess.

Scott, your codepen works fine, but on a form with many input boxes it means a lot of extra code. A built-in feature of the q-input would make life a lot easier. Not a huge issue -just nice to have and maybe food for thought in a future update.

Yes, but that’s what I need - just prevent the user from entering an invalid number by accidentally holding the down arrow too long. Don’t need to show an error message.

It would be really handy if quasar would extend the rules so you could just write something like:
:rules="[ val => val < 0 || val = 0]"

@beets Yes. You’re the best! Thanks again.

Oh, one more thing…
How can I center the text? text-align doesn’t have any effect.

@beets OK that does the trick! Thanks a bunch!

@beets OK, that works! Now the style is showing.
But the background-color only affects the title text. How can I set the background of the containing box for the title?

Yes, removing ‘scoped’ lets it show. But I need it to be scoped.
I have a global style in app.styl: .q-table__top, thead tr:first-child th
This overrides the scoped style. If I comment that out in app.styl, there doesn’t seem to be any style applied unless I remove scoped from the local one.
Is this title-class prop supposed to work?

Doesn’t help

I have a table like this:

<q-table
   class="non-selectable q-mx-sm q-mt-sm"
   dense
   square
   title="Default Units for new recipes:"
   title-class="table-title"
   :data="defaultMeasures"
   :columns="defaultColumns"
   hide-bottom
 >

and style like this:

<style lang="stylus" scoped>
.table-title
  background-color: $blue-grey-1
  color: $indigo-10
thead tr:first-child th
  background-color: $blue-grey-1
  color: $indigo-10
</style>

The thead class works fine, but the title class does not have any effect.
What am I doing wrong?

Forget it - found a way to allow user to clear without needing the button; the filter function can check for zero length text and clear the model.

I have a form with a bunch of q-selects in a table. I need the clearable button, but would be easier for user to tab out of the q-select without first stopping on the clear button. Any way to suppress that?

Great! thanks.

I have a q-table and each row has a q-select. I want to have autocomplete, but unable to pass the row index to the filter function.

The q-select includes this prop:

@filter="filterFn(props.row.rowIndex)

and the filter method looks like this:

filterFn (val, update, abort, rowIndex) {
   if (this.tableRows[rowIndex].itemList.length <= 0 || !val || val.length < 2) {
        abort()
        return
    }

    update(() => {
        const needle = val.toLowerCase()
        this.options = this.tableRows[rowIndex].itemList.filter(v => v.toLowerCase().indexOf(needle) > -1)
    })
},

But the rowIndex parameter is not getting passed.

Well this is just weird!
Vetur was showing every line with error in two of my components. After trying many things, I accidentally discovered that changing the filename fixed the problem!
So TreeSelect.vue was full of errors starting with the <template> tag, but renaming to SelectTree.vue made them all go away!
And now, my jest tests are working again too!
I’ll leave this post up in case someone else falls into this weird situation.

Went back to before the Quasar upgrade, but still see the problem.
Then re-installed jest like this, but still have the same problem…
$ quasar ext remove @quasar/testing-unit-jest
$ quasar ext add @quasar/testing-unit-jest

Why is jest not recognizing <template> ??