Vuetify: [Feature Request] Data Table expand all expandable per default

Created on 29 Dec 2017  Â·  9Comments  Â·  Source: vuetifyjs/vuetify

New Functionality

Expand all slots on a v-data-table per default. Currently i have to click each row to expand.

Improvements

I have to iterate all rows and emit a click event.

Bugs or Edge Cases it Helps Avoid

Invalid "expanded" value on row.

enhancement

Most helpful comment

I think we should perhaps expose the internal expanded array through a .sync prop, similar to how we do it for selected through the v-model. That way you can easily get the functionality request in this issue, and you get fine-grained external control of expanded rows.

All 9 comments

Sounds like the user wants an "expandAllByDefault" prop of some sort.

A temporary solution: https://codepen.io/anon/pen/aEJeVo

@nekosaur thoughts on this?

I think we should perhaps expose the internal expanded array through a .sync prop, similar to how we do it for selected through the v-model. That way you can easily get the functionality request in this issue, and you get fine-grained external control of expanded rows.

+1 for this feature

Please don't post comments saying +1. Github added reactions where you can
voice your interest and have it be sortable for the devs. Thank you

On Jan 16, 2018 2:52 PM, "Matei-Alexandru Nenciu" notifications@github.com
wrote:

+1 for this feature

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/2890#issuecomment-358084244,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgp6KIKQ8XxX-vs6mE6j0mi5ByXVsks5tLP4TgaJpZM4RO-v5
.

Is this something you think you can still do for v1.1 @nekosaur ?

Could anyone please let me know if this feature was ever implemented and if so how to use it ? I can't seem the workaround to get to work it is not letting me compile.
Capture

@AakifMushtaq I got this error too, so I typecast to any and compiled with no errors.

let table: any = this.$refs.dTable;
this.$set(table.expanded, item.name, true);

Try look at this example
<v-data-table :expanded="items" .... >
or
<v-data-table :expanded.sync="copyArrayOfItems" .... >
First way just expand all items; second way for tracking selected items by copyArrayOfItems

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Antway picture Antway  Â·  3Comments

aaronjpitts picture aaronjpitts  Â·  3Comments

gluons picture gluons  Â·  3Comments

chriswa picture chriswa  Â·  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  Â·  3Comments