Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

🧲 Just shipped: Tables that split, stretch, and snap into place.

316,719 Aufrufe • vor 12 Tagen •via X (Twitter)

41 Kommentare

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

The old tables were static. For the new Operate, I wanted something that reacts to how you actually use it. It’s a context panel inside chat. If you give it more width, you’re probably focusing on the data, so it shows you more to work through. Keep it narrow and it becomes a quick glance while you’re talking to an Operate agent. Then I started thinking about how to make that transition feel more pleasant. Here’s how it works: • Widen the panel and a deal row breaks apart. Amount moves out from the deal name into its own column, and close date separates from the owner. • It’s magnetic, not instant. Near the breakpoint, the amount strains toward its column and the name gives a little, then it snaps across. Narrowing is the exact mirror: they pull toward each other, then click back together. • Column icons enter from the side their data came from. Empty dashes travel too. • Snaps, no bounce. The name is back in place the moment the amount lets go. • Long names truncate instead of pushing the table sideways. The video shows Deals, but Accounts, People, Meetings, and Tasks all use the same table now. And it respects reduced motion.

Profilbild von Ash
Ashvor 12 Tagen

@operate_gtm Love the way it adds columns and switches up the layout!

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Yesss, that part was so fun to get right. 🫶

Profilbild von Joe Bell
Joe Bellvor 12 Tagen

@operate_gtm I'm still genuinely gobsmacked you shipped this straight to prod yourself — incredible work

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Couldn’t have gotten here without you helping me along the way. 🫂

Profilbild von Deckard
Deckardvor 12 Tagen

@operate_gtm Stop it. It's too good...

Profilbild von dario
dariovor 12 Tagen

@operate_gtm Super cool, did you start from scratch on that table component or did you start from some framework? I’ve been struggling with tables in our product and have been looking around 👀

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Not from scratch. Our static table was already built on @tan_stack Table + Virtual (both headless). I revamped its UI first, then added the dynamic layout, interactions and motion on top, all custom.

Profilbild von Anish B Ghosh
Anish B Ghoshvor 12 Tagen

@operate_gtm wow its soo cool!! we need more creativity like this in the UI space. you earned a follower, man.

Profilbild von Gregor
Gregorvor 12 Tagen

@operate_gtm snap threshold tuning is where i lost a week. too tight and it fights you, too loose and nothing feels sticky.

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Hahaha yes. This was exactly it. Tiny changes and suddenly the whole thing either feels perfect or completely wrong

Profilbild von Sihoon Kim
Sihoon Kimvor 12 Tagen

@operate_gtm Is there an open source for it? I really wanna use this!

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Not yet, it's part of Operate's codebase right now. If there's enough interest I'll pull it out into something shareable.

Profilbild von Prerna Kashyap
Prerna Kashyapvor 12 Tagen

@operate_gtm Love it!

Profilbild von Masudur Rahman
Masudur Rahmanvor 12 Tagen

@operate_gtm Beautiful work 🔥

Profilbild von Alex Krasikov
Alex Krasikovvor 12 Tagen

@operate_gtm whooot

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm I’ll take this as approval 🙂‍↕️

Profilbild von Melody Shar 🌸
Melody Shar 🌸vor 12 Tagen

@operate_gtm Smooth

Profilbild von Sid
Sidvor 12 Tagen

@operate_gtm Clean

Profilbild von Aditya Das
Aditya Dasvor 12 Tagen

@operate_gtm love that staggered movement ❤️

Profilbild von adeeb
adeebvor 12 Tagen

@jamesm @operate_gtm That snapping is so cool

Profilbild von anthony
anthonyvor 12 Tagen

@operate_gtm very curious, does this happen to be powered by layoutId's? or is this done in raw css/js

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Not layoutId. Raw CSS and a small hook, with two breakpoints.

Profilbild von tegha
teghavor 12 Tagen

@operate_gtm Those animations are like cutting butter 😫😫

Profilbild von kon
konvor 12 Tagen

@operate_gtm all i see are the dance moves

Profilbild von heyflo
heyflovor 12 Tagen

@operate_gtm Wow, ok, this is sick! 👏

Profilbild von Ashish
Ashishvor 12 Tagen

@operate_gtm banger

Profilbild von Alvish 🧙‍♂️
Alvish 🧙‍♂️vor 12 Tagen

@operate_gtm Appreciate it, bhai!

Profilbild von Sean Cope
Sean Copevor 12 Tagen

@operate_gtm banger

Profilbild von Yolo
Yolovor 12 Tagen

@operate_gtm Tables that split, stretch and snap — finally, spreadsheet yoga.

Profilbild von Harsh Singh
Harsh Singhvor 12 Tagen

@operate_gtm this animation is legit eye candy

Profilbild von abdelhamid ouglhacen
abdelhamid ouglhacenvor 12 Tagen

@operate_gtm That’s insane 🔥🔥🔥🔥

Profilbild von Wuraola | Product Designer
Wuraola | Product Designervor 12 Tagen

@operate_gtm Really cool!

Profilbild von Laabidi
Laabidivor 12 Tagen

@operate_gtm super smooth 😍

Profilbild von Kolbe Yang
Kolbe Yangvor 12 Tagen

@operate_gtm You can tell how well-designed a web app is by its tables 😉. Not a sexy component but incredibly nuanced.

Profilbild von Marc
Marcvor 12 Tagen

@operate_gtm This animation is too good 🤯

Profilbild von Ayush Barnwal | Building
Ayush Barnwal | Buildingvor 12 Tagen

@operate_gtm this is the unsexy ship that actually matters tables behaving is how an app starts feeling expensive

Profilbild von Solopreneur Dad
Solopreneur Dadvor 12 Tagen

@operate_gtm That is oddly satisfying

Profilbild von Bill Xie
Bill Xievor 12 Tagen

@operate_gtm tables that split, stretch restraint looks intentional. clean release.

Profilbild von Omar
Omarvor 12 Tagen

@operate_gtm clean

Profilbild von Victor Sango
Victor Sangovor 12 Tagen

@operate_gtm That snap animation is quite satisfying!

Ähnliche Videos