Collapsible table rows with Framer Motion layout animations

This is an unscripted chat & exploration of some different approaches for animating table rows, which are harder to animate than normal div elements due to the constraints of the CSS table layout algorithm.

[jackpurdoneverydayzero]

Mate. Love the unscripted stuff even more because you're actually trouble shooting.
Incredible content and it's helped me so much.

[andrewiglinski]

Just found your channel dude, but so far I love it. Your stuff is perfect to have on while you're working, not so much for instructional stuff, but just for new ideas and different approaches.

[amineyagoub]

I really love your videos and how you don't waste time on bs and explain everything quickly and straight to the point. Thanks Sam

[TheOtherMattPerry]

Great video Sam! I ran into the wrapper layout animation not working on exit myself recently. It's because we're not triggering a state change when the exit animation completes. We could look into this though

[ilirbajrami]

Man i literally have 3 days trying to animate my table and i accidentally found this video. I never thought there could be a detailed video about this so i never searched. I just thought im not experienced enough to make that animation work and i never thought its a struggle in general. Thanks for this!

[ilyaholakhau]

YOU ARE THE BEST GUY IN THE WORLD. Best guides for

[gmjitendra]

this is what I was looking for. thanks Sam.

[veasna]

You are by far the best teacher for soft soft . It's very complicated at first - overwhelming, actually - but, you make it doable for

[RockRespawn]

Thanks Sam, get to learn a lot from these vids keep em coming :D

[lqcs]

that is all i need bro thankyou so much nice vid!

[timkunze]

8:34 it probably did not work on exit because you did not put <motion.ul> within <AnimatePresence>

[aliventurous]

Crazy that 8 days after this video was posted, Framer Motion 7.2 introduced the "popLayout" mode to AnimatePresence, making it possible to "pop" exiting elements out of the layout so surrounding elements can immediately move to their new layout.

[sashaikevich]

Can you please make your keyboard shortcuts visible?

[ahmedmayo]

hey sam. great video. the `ul` animation probably didn't work because it need `layoutRoot` property, not just `layout`, and and the `li` animations were snappy because they had padding - which misses up their calculation of height. The solution is put the padding on an inner element

[trentcox]

so for anyone coming back here tryin to figure out how to do this, i figured out a way without having to do any of the magic poor sam had to go through. so table algorithms apply to table elements. important bit of information. key is to have your data in a nested div and if you insist on padding, its gotta be on a div that isn't a motion.div. This is using the latest TanStack Table (An animate present is wrapping the mapped rows within a normal tbody element. exactly like sams. now my expanded rows have some schmexy butter smooth transitions in and out of the dom

the styles used are simply
tr: "even:bg-surface-content-alt",
td: "p-0 m-0",
cell: "px-4 py-3",

function TableRow<T extends object>({ row }: { row: Row<T> }) {
const styles = tableBodyStyles();

return (
<motion.tr
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={styles.tr()}
>
=> {
const metaType = || "text";

return (
<td className={styles.td()} key={cell.id}>
<motion.div initial={{ height: 0 }} animate={{ height: "auto" }} exit={{ height: 0 }}>
<div className={styles.cell({ metaType })}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>
</motion.div>
</td>
);
})}
</motion.tr>
);
}

[ammar_progamin]

TNice tutorials the best tutorial I've ever watched! Super informatic and love the softow in wNice tutorialch you taught everytNice tutorialng. Thanks a lot <3

[shaxruhnazarov]

No comment BRO, :), very helpfull tutorials for react developers

[oleksandrluchytskyi]

Thank you! Could you explaine one moment? Why calling window.toggle() func from console re-render component? It is not mutate state, so we should not see updated component, but we does.

[inderjotsingh]

5:34, how did you do that, wrapping the element while coping

[danilocarreira]

What a great video. Super well explained, thanks! Any video in your channel on how to record yourself with soft soft? I'm under the