Resizable columns (not Datagrid)

[azuliani]

Showcase:

I don’t know if this is kinda common sense, but I created a way to make resizable columns for non datagrid columns…

Here is how I did it:

1. Make the column width equals a variable “col1_width”
2. Added a container to the end of the colum header (in a way it expands a little into the next column). Made it transparent and blue on hover. Also, on hover, another 1px flexbox appear that goes all the way down. I made the parent flexbox a block with overflow visible so the big vertical line shows up on hover.
3. Created an overlay for the page, initially hidden, so I can use it to run the resize action.
4. The flexbox in 1 has mouse down and a mouse up actions, that changes a showResizerOverlay variable to true/false
5. In the overlay, I added a on mouse move action, that changes a column1_deltaX to be equal to event.x - col1_startX (col1_startX is a variable that is equals to col1_width in the start)
6. The overlay has, than, a mouse up action that does:
   6.1 Change col1_width to col1_width + coumn1_deltaX (deltaX was changed in the mouse move)
   6.2 Change col1_start to be equal col1_width
   6.3 Reset showResizerOverlay and Reset column1_deltaX

With this, I get the effect shown in the Gif above…

It’s a bit cumbersome, but I need a very customized table for this project, and will need to use this method only here for 6 or 7 columns, so it works great for me!