Anyone built expandable rows in data table?

[lvaylet]

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!

[a47ae]

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.

[lvaylet]

Any hint as to how you would implement the feature? I could try it myself and submit a pull request.

[a47ae]

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 extendable and 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.

[lvaylet]

Thanks @a47ae, this really helps.

@rstoenescu: before I dive into this, are you working on such a feature already?

[ssuess]

+1 for this feature!

[a47ae]

The next version is a rewrite of the DataTable that makes it more flexible, so should be implemented soon.

[ssuess]

Any idea when this will be released? Or is the in dev version stable enough to use?

[a47ae]

I have no real ETA, but I would guess near the end of this month, keep an eye on the recent github commits.

[leon]

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]

@leon any updates?

[leon]

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

[april]

+1 for this feature please.

I wonder if there’s some plain javascript component I can use in the mean time. Anybody knows?