QTable - animation for expanding/closing row

[m0jimo]

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.

[rfox12]

I second the notion! Also if we can add to this request.. an "expand all" option?

[trondulseth]

An upvote from me also :)

[luckylooke]

Suitable also for adding, removing rows dynamically 👍

[Batsirai]

And the ability to have a single row open at a time...

[m0jimo]

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.

[apavel3458]

Definitely need to animate the expanding. Also useful to have a single row open at a time!

[ecmap]

I have tried to use QSlideTransition in Qtable, but it does not work

Does anyone know how to use it in Qtable?

[davidparraz41]

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

[philfontaine]

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>

[hendrik-schneider]

I would prefer if the animation of the qTable-expansion-row was included in the default of Quasar and would work like the qExpansionItem.

[namespace-github]

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?

[brakop]

Since I'm literally working on coding this atm, it would be great to upvote this as a standard part of q-table!

[brakop]

Also, suggestion for anyone else working on this, don't try to transition the TR, just transition a div or divs within it: <q-tr style="height:0px;padding:0px;"> <q-td :colspan="props.cols.length" style="height:0px;padding:0px;" > <transition name="fadeHeight"> <div v-if="FridgesSelected" > This is the magic row you want to display/hide </div> </transition> </q-td> </q-tr> </q-table>

<style> .fadeHeight-enter-active, .fadeHeight-leave-active { transition: all 0.5s; max-height: 230px; } .fadeHeight-enter-from , .fadeHeight-leave-to { opacity: 0; max-height: 1px; } </style>