-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
QTable - animation for expanding/closing row #4380
Comments
I second the notion! Also if we can add to this request.. an "expand all" option? |
An upvote from me also :) |
Suitable also for adding, removing rows dynamically 👍 |
And the ability to have a single row open at a time... |
Im using an example in docs for expanding a row for qtable. If it doesn't fit to your need You can open a new issue. |
Definitely need to animate the expanding. Also useful to have a single row open at a time! |
I have tried to use QSlideTransition in Qtable, but it does not work Does anyone know how to use it in Qtable? |
I have many tables with expansion rows, i need some animation to open or close the row, something like q-expansion-item but for q-table |
I use the following to animate the QTable height (can probably work for any component I would think). SlideTransition.vue <template>
<div ref="container" style="transition: height 0.4s; overflow: hidden;">
<div ref="content">
<slot></slot>
</div>
</div>
</template>
<script>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
export default defineComponent({
setup() {
const content = ref()
const container = ref()
const resizeObserver = new ResizeObserver(() => {
container.value.style.height = content.value.scrollHeight + 'px'
})
onMounted(() => {
resizeObserver.observe(content.value)
})
onUnmounted(() => {
resizeObserver.disconnect()
})
return {
container,
content,
}
},
})
</script> Example usage <template>
<SlideTransition>
<q-table></q-table>
</SlideTransition>
</template> |
I would prefer if the animation of the qTable-expansion-row was included in the default of Quasar and would work like the qExpansionItem. |
Is there an update here? This is a frequently requested feature and would fit in well with the "Quasar style" if there was a smooth open and close animation. Maybe incomming with Quasar 3? |
Since I'm literally working on coding this atm, it would be great to upvote this as a standard part of q-table! |
Also, suggestion for anyone else working on this, don't try to transition the TR, just transition a div or divs within it:
|
Is your feature request related to a problem? Please describe.
I use q-table with expanding rows. I think that from UI perspective is better to have a row expanded with animation rather than quick show/hide.
It is easy to do it with div table but I haven't found a way for table/td/tr.
Describe the solution you'd like
Add property/class which will animate expanding row.
Describe alternatives you've considered
If it is not suitable to be part of q-table it'd be nice to have a link to a how-to where could be piece of code how to manage it.
Additional context
Expanding rows example from the documentation page.
The text was updated successfully, but these errors were encountered: