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

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!

Hi. I have a tree that filters based on a search input. All good.

I also want to filter based on a button that relates to a status property of each node. So, when I click the button, filter the tree nodes for status === 1 (for example)

I have added the status filter to the custom filter method and as long as I type something into the search box the status filter works perfectly.

But… how do I tell the tree to start filtering ONLY from the button click? i.e. even if the search input is empty, filter on status?

I could not find a myTree.runFilter() method and as I am pretty new to Vue I could not work it out from the Quasar tree source code.

Thanks,
Murray

@metalsadman Thanks!

A more robust version:

    getParentNode (nodeid) {
      let parentNode = null
      if (nodeid) {
        const nodeMeta = this.$refs.projectTree.meta[nodeid]
        if (nodeMeta.parent) {
          parentNode = this.$refs.projectTree.getNodeByKey(nodeMeta.parent.key)
        }
      }
      return parentNode
    }

Each node in my tree has a unique nodeid property and node-key="nodeid".

With a set of ticked nodes, I also need to get their parents. getNodeByKey() and getTickedNodes() return node objects but it seems I cannot do:

const aNode = this.$refs.myTree.getNodeByKey(nodeid)
const parentNode = aNode.getParent()

Instead I have made my own method:

    getParentNode (nodeid) {
      const nodeMeta = this.$refs.myTree.meta[nodeid]
      const parentNode = this.$refs.myTree.getNodeByKey(nodeMeta.parent.key)
      return parentNode
    }

Am I missing something or is that the way to do it?
Thanks,
Murray

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

So, just to complete this…
I ended up going with semver and using the patch as the build number because all I really wanted was to auto generate a new version number to display to users in the app. Since I am pretty new to all this I didn’t realise npm version could be leveraged to auto-update the version in package.json.

So when I am ready to release a new version I run my simple batch file:

npm version patch
quasar build

In my app, on the .vue file that displays the version number (simplified and adjust your relative path):

import { version } from '../../package.json'
export default {
  data () {
    return {
      appVersion: version
    }
  }
}

In the template (eg):

<div>v{{ appVersion }}</div>

Thanks,
Murray

@beets Aha… I didn’t know about that git-revision-webpack-plugin. Thanks, I will look at that. Much appreciated.