Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

316,719 görüntüleme • 12 gün önce •via X (Twitter)

41 Yorum

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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.

Ash profil fotoğrafı
Ash12 gün önce

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

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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

Joe Bell profil fotoğrafı
Joe Bell12 gün önce

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

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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

Deckard profil fotoğrafı
Deckard12 gün önce

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

dario profil fotoğrafı
dario12 gün önce

@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 👀

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

@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.

Anish B Ghosh profil fotoğrafı
Anish B Ghosh12 gün önce

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

Gregor profil fotoğrafı
Gregor12 gün önce

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

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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

Sihoon Kim profil fotoğrafı
Sihoon Kim12 gün önce

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

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

@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.

Prerna Kashyap profil fotoğrafı
Prerna Kashyap12 gün önce

@operate_gtm Love it!

Masudur Rahman profil fotoğrafı
Masudur Rahman12 gün önce

@operate_gtm Beautiful work 🔥

Alex Krasikov profil fotoğrafı
Alex Krasikov12 gün önce

@operate_gtm whooot

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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

Melody Shar 🌸 profil fotoğrafı
Melody Shar 🌸12 gün önce

@operate_gtm Smooth

Sid profil fotoğrafı
Sid12 gün önce

@operate_gtm Clean

Aditya Das profil fotoğrafı
Aditya Das12 gün önce

@operate_gtm love that staggered movement ❤️

adeeb profil fotoğrafı
adeeb12 gün önce

@jamesm @operate_gtm That snapping is so cool

anthony profil fotoğrafı
anthony12 gün önce

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

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

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

tegha profil fotoğrafı
tegha12 gün önce

@operate_gtm Those animations are like cutting butter 😫😫

kon profil fotoğrafı
kon12 gün önce

@operate_gtm all i see are the dance moves

heyflo profil fotoğrafı
heyflo12 gün önce

@operate_gtm Wow, ok, this is sick! 👏

Ashish profil fotoğrafı
Ashish12 gün önce

@operate_gtm banger

Alvish 🧙‍♂️ profil fotoğrafı
Alvish 🧙‍♂️12 gün önce

@operate_gtm Appreciate it, bhai!

Sean Cope profil fotoğrafı
Sean Cope12 gün önce

@operate_gtm banger

Yolo profil fotoğrafı
Yolo12 gün önce

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

Harsh Singh profil fotoğrafı
Harsh Singh12 gün önce

@operate_gtm this animation is legit eye candy

abdelhamid ouglhacen profil fotoğrafı
abdelhamid ouglhacen12 gün önce

@operate_gtm That’s insane 🔥🔥🔥🔥

Wuraola | Product Designer profil fotoğrafı
Wuraola | Product Designer12 gün önce

@operate_gtm Really cool!

Laabidi profil fotoğrafı
Laabidi12 gün önce

@operate_gtm super smooth 😍

Kolbe Yang profil fotoğrafı
Kolbe Yang12 gün önce

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

Marc profil fotoğrafı
Marc12 gün önce

@operate_gtm This animation is too good 🤯

Ayush Barnwal | Building profil fotoğrafı
Ayush Barnwal | Building12 gün önce

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

Solopreneur Dad profil fotoğrafı
Solopreneur Dad12 gün önce

@operate_gtm That is oddly satisfying

Bill Xie profil fotoğrafı
Bill Xie12 gün önce

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

Omar profil fotoğrafı
Omar12 gün önce

@operate_gtm clean

Victor Sango profil fotoğrafı
Victor Sango12 gün önce

@operate_gtm That snap animation is quite satisfying!

Benzer Videolar