Tree component - use different names for label and children
-
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? -
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