RVBBIT

Teaser - Column re-ordering and re-sizing

Mar 18, 2023 · Ryan Robitaille Tweets

I don't know about you, but I can't stand data apps where the result-set allows re-sizing by dragging the edges of the columns over. I know it seems intuitive, but too often it just results in frustration - either due to the drag target being too small, too hard to find, or just laggy and weird. This isn't limited to web apps either.

So for I decided to skip that mode of interaction. Table result-sets are arguably one of the most important part of the application (hell, upon release it'll be called Rabbit Tables) - so I wanted to replace it with something better.

WASD movement. Selected blocks can already be moved around the canvas via the WASD keyboard keys (think first-person shooters, Quake, COD, etc) - and Shift-WASD will resize them. It's actually quite a nice feeling and makes things feel a bit more tangible when you get used to it.

Well, I decided to use this same interaction model for the columns. When I block is selected, you can click the header of a column - and WASD and shift-WASD work the same way as the block movement. Widen and reduce their size as well as shift them aroung in the query order. Best of all - the SQL execution is paused during this reaction, so if you are shifting a column 4 places to the right, you won't be triggering 4 new SELECT statements. The query will become un-paused when you are done and the column is unselected, or you move on to another block.

Archive of the RVBBIT dev blog (2022–2025), formerly hosted on Ghost. RVBBIT lives on at rvbbit.ai. By Ryan Robitaille.