@Hawkeye64 Cool, thanks! That certainly takes it to another level.

So, I want to filter the tree by both a Search input box and / or a value passed by a button click that represents a status property on the leaf nodes. (Actually, there are 5 such buttons, each representing a different status, but for simplicity’s sake we pretend there is just one status value.)

This is the stripped-down solution.

<!-- The search input box -->
<q-input
  v-model="searchBox"
  label="Filter"
></q-input>

<!-- The button to filter where node status = 1 -->
<q-button @click="onClickStatus(1)">
  Status 1
</q-button>

<!-- The tree -->
<q-tree
  ref="projectTree"
  :filter="filterTrigger"
  :filter-method="customFilterMethod"
 ....
></q-tree>

export default {
  data () {
    return {
      searchBox: '',
      filterTrigger: 'true',
      statusFilter: ''
      ....
    }
  },

  watch: {
    // Whenever the searchBox property changes, 
    // use it to trigger the tree filter's reactivity
    // by assigning its value to the 
    // filterTrigger property. 
    // Actually, the value we assign here is irrelevant.
    searchBox: function (newVal, oldVal) {
      this.filterTrigger = newVal
    }
  },

  methods: {
    onClickStatus (statusId) {
      // This method is more complicated than this in reality,
      // but basically we track which of the 5 status' were clicked
      this.statusFilter = statusId
    },

    customFilterMethod (node, filterTrigger) {
      // The filterTrigger param is ignored in here.

      // Instead, we use the contents of the search box input ...
      const searchBoxText = this.searchBox.toLowerCase()

      const matchedNodeLabel = (node.label && node.label.toLowerCase().indexOf(searchBoxText) > -1)

      // And any status button that was clicked ....
      let matchedStatus = true

      if (this.statusFilter !== '') {
        // if the node status is in the list of filters, match it
        // Very simplified example code:
        matchedStatus = (this.statusFilter.indexOf(node.status) > -1)
      }

      // In our context we always AND the filters
      return (matchedNodeLabel && matchedStatus)
    }
  }
}

Now, if there is something typed into the search box, or if a status button is clicked, either or both of those values will be used to filter the tree nodes. Yay!

@metalsadman
Wow! That’s awesome. Thank you.
I already had the sticky header but left it out of my example to keep it simple. I thought the issue of the sizing was with flex but clearly I was wasting time trying to make that happen! Much appreciated.
Go well,
Murray

@metalsadman
Wow! That’s awesome. Thank you.
I already had the sticky header but left it out of my example to keep it simple. I thought the issue of the sizing was with flex but clearly I was wasting time trying to make that happen! Much appreciated.
Go well,
Murray

Hi.
I have a q-table inside a q-tab-panel. It is not a virtual scroll - there will only ever be < 100 rows. I am paginating by 10 rows. When the tab panel is too short to show all 10 rows I would like to keep the pagination footer sticky to the bottom of the tab panel and the rows to scroll (vertically). In other words the tab panel height is the maximum table height with scrolling when it wont fit.

Here is my code pen

If you set the fixed height on the table wrapper div you can see the effect I am trying to achieve but of course the table should flex to the tab panel size. And, if there are only 1 or 2 rows (for example) the table remains at the full height of the wrapper div with the pagination footer sticky to the bottom of that div. That is what I want.

Without a fixed height the 10 table rows makes the table higher than tab panel. I cant find a flex way to achieve this.

My question is: How to use flex so the the table will always grow/shrink with the tab panel resize and the pagination footer will stick to the bottom of the tab panel?

The Text Tab is just to show that the tab setup is flexing properly for simple text scrolling.

Thanks,
Murray

@kerbo This works:
https://forum.quasar-framework.org/topic/5284/q-table-height-virtual-scroll-and-sticky-headers/2

Yay!! That’s better!. Thank you. Very much appreciated.

Thanks for your replies. They all work in straight divs but when in a table v-slot:bottom template they dont’!

Codepen: https://codepen.io/flowt-au/pen/OJRpmWw?editors=1010

The first 3 are within the table and the last 3 that are centered are outside the table.

Weird.

I have a q-table with a <template v-slot:bottom> into which I would like to center a button. I have tried all sorts of combinations of alignment but cannot get it to work.
eg:

<q-table
  etc >
  <template v-slot:bottom>
    <div class="relative-position">
      <q-btn
        class="center"
        round
        icon="add"
        @click="addMyThing"/>
    </div>
  </template>
</q-table>

How to do that?
Thanks again,
Murray

Thanks so much for your help - that’s much better. Sorry for the slow reply - for some reason I missed the notification.

Oh… of course. I had done this:
extras: [
‘material-icons’
]

not realising I actually needed to add to that, eg:
‘material-icons’,
‘material-icons-outlined’,
‘material-icons-round’,
‘material-icons-sharp’

Thanks again!
Murray

I am using the out-of-the-box Material icons and when I ask for the outlined version I get the icon name as text instead of the icon.

Here is a screenshot from the Basic Example in CodePen:

From the docs: eg material-icons-outlined: o_thumb_up

How do I do that?
Thanks,
Murray

@beets Thanks for that. Sorry for the slow reply, I missed your post.