@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!

@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.

Hi. I am trying to make a vertical scrolling “panel” that fits inside another component and is responsive to both height and width. It almost works, but …

Here is my pen: https://codepen.io/flowt-au/pen/zYBarrZ

If I remove the toolbar and have a 100% height on #myPanel it works perfectly.

If I include the toolbar and have 100% height on #myPanel the scroll-area scrolling does not reveal the last items because the height is now below the bottom of the window by the height of the toolbar.

How to have a responsive height scroll-area with a toolbar above it? Any ideas?

Thanks!

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!