Anyone built expandable rows in data table?

[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?