QTable - slot for `expand`
See original GitHub issueIs your feature request related to a problem? Please describe.
There is expand
prop in QTable for rows. Docs show it’s usage: https://quasar.dev/vue-components/table#Expanding-rows
Describe the solution you’d like Current implementation requires to define all cells manually. I think there should be separate slot for the expanded row
Additional context At the end of __getTBodyTR I’ve added:
const expandScope = this.$scopedSlots['expand']
if (expandScope !== void 0 && this.isRowExpanded(key)) {
const { key, ...trData } = data
const td = h('q-td', {
attrs: {
colspan: '100%'
}
}, [expandScope(this.__getBodyScope({
key: key + '-expanded',
row,
pageIndex,
__trClass: selected ? 'selected' : ''
}))]
)
return [h('tr', data, child), h('tr', [td])]
}
return h('tr', data, child)
It allows me to use in template:
<template v-slot:body-selection="props">
<q-checkbox v-model="props.expand"/>
</template>
<template v-slot:expand="props">
<div class="text-left">
This is expand slot for row above: {{ props.row.name }}.
<q-input v-model="props.row.input" />
</div>
</template>
Currently I’ve cheated with body-selection
slot, but hey, it works! New slot has the same props as body
, so migration should be easy. Unresolved problems:
- Should developer manually include
<tr><td colspan="100%"></td></tr>
tags? Or just let Quasar do it? - Should all props be available?
- Should
expand
switch be defined and rendered, if slot is provided by default?
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:10
Top Results From Across the Web
Quasar's QTable: The ULTIMATE Component (2/6)
Paddock Sprays With QTable Expanded. The farmers LOVE IT! And guess what. ... Expandable rows are made possible with the #body slot.
Read more >Table
Total customization of rows and cells through scoped slots; Ability to add additional row(s) at top or bottom of data rows; Column picker...
Read more >q table add expanded row | Quasar Framework Community
Hello, I excellent component q-table ! from example here. ... This is expand slot for row above: {{ props.row.name }}. </div> </div> </q-td> ......
Read more >Quasar Vue's QTable (2/6) - Expandable Rows and ... - YouTube
Now that we have a basic setup with Quasar's Table Component, let's explore "Expandable Rows" and "Selectable Rows"!It's surprisingly simple ...
Read more >Expanded row and custom selector - Quasar Playground
https://quasar.dev/vue-components/table#Example--Expanded-row-and-custom-selector ... <template v-slot:body="props">. 17. <q-tr :props="props">.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I created PR for that, but there is no response
Uh, any progress? Coming from vuetify and really missing this feature.