row expanding animation

[VolDer77]

Is there a way to animate row expanding? Maybe to add a transtion or something like that.

[geniusit]

I ve made a try with Headless UI Transition with no success unfortunately. Any help would be appreciate.

[Chrisdo82]

I did it like that:

{row.subRows.map((subRow) => (
  <Transition
      key={subRow.id}
      show={row.getIsExpanded()}
      as={Fragment}
      enter="transition-opacity ease-in-out duration-500"
      enterFrom="opacity-0"
      enterTo="opacity-100"
      leave="transition-opacity ease-out duration-250"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
  >
      <tr>...</tr>
  </Transition>
)}

[ChristianReifberger]

Hi, would it be possible for you to show a complete example of this? Can't quite get it to work with your answer

[petrprikryl]

Vue.js variant:

  <tbody>
      <tr
        v-for="row in table.getRowModel().rows"
        :key="row.id"
      >
        <TransitionGroup>
          <td
            v-for="cell in row.getVisibleCells()"
            :key="cell.id"
          >
            <FlexRender
              :render="cell.column.columnDef.cell"
              :props="cell.getContext()"
            />
          </td>
        </TransitionGroup>
      </tr>
  </tbody>