Tree component - use different names for label and children

MarkStacey

I’m trying to use the output of d3.nest() to populate my tree - but it appears the tree can only use a property named label and children, rather than the key and values that d3.nest() outputs?
Is there a simple way to do this?

Shone

Hi @MarkStacey you can use slots for that.

<div slot='header-generic' slot-scope='prop' class='row items-center'>
      <span>{{ prop.node.name }}</span>
 </div>

I’ve also created custom filter to search by node.name and by user full name…

treeFilter (node, filter) {
      const filt = filter.toLowerCase()
      const nodeNameMatch = node.name && node.name.toLowerCase().indexOf(filt) > -1
      const usersMatch = node.users.filter(user => (user.full_name.toLowerCase().indexOf(filt) > -1)).length > 0

      return nodeNameMatch || usersMatch
    },

http://quasar-framework.org/components/tree.html#Customizing-nodes-header-and-body-slots