Anyone built expandable rows in data table?
I am looking for something similar to http://element.eleme.io/#/en-US/component/table#expandable-row
I am pretty sure this feature is not available out of the box with Quasar. I am also pretty sure it can be done but I lack the front-end skills to do so. That is exactly why I am using frameworks and libraries like Quasar
Thanks for 0.14.1 by the way. Excellent job!
This feature is a bit tricky to implement on top of the existing DataTable component, because of the way it is structured.
Your best bet would be to open a Github issue which requests such a feature and if enough people are interested it can be built into the existing component.
Any hint as to how you would implement the feature? I could try it myself and submit a pull request.
Take a look at the source code of QDataTable here: https://github.com/quasarframework/quasar/blob/dev/src/components/data-table/QDataTable.vue
In your example, they added another
<tr>element after the initial data.
So first thing would be to add a prop
extendableand alter the template to render an additional row below the data.
Then you need a way to pass the additional data, so you need to extend the format.
Finally, you need some logic to toggle the extendable content per row.
Thanks @a47ae, this really helps.
@rstoenescu: before I dive into this, are you working on such a feature already?
ssuess last edited by
+1 for this feature!
The next version is a rewrite of the DataTable that makes it more flexible, so should be implemented soon.
ssuess last edited by
Any idea when this will be released? Or is the in dev version stable enough to use?
I have no real ETA, but I would guess near the end of this month, keep an eye on the recent github commits.
Hi, im using collapsible inside <template>.
I will upload a video working when get back in company.
With litle css and no-margin / no-padding etc , works very good.
gabrielsclimaco last edited by
@leon any updates?
A litle example https://codesandbox.io/s/x2lx8k8rzp
I forgot to make a video, i’m using a more complex in produciton , whit 4 toogles and 1 rating inside the collapse.
The problem is , order must be implemented manualy.
BTW in QDataTable revamp , @rstoenescu will do it.
+1 for this feature please.