Implement column flex sizing

[roblotter]

We need to implement column flex sizing, to behave similar to browser flex.

Example:

say infinite table is sized at 1000px and there are 3 columns:

• 1 fixed column with width: 400px - col A
• 1 flex column with flex: 2 - col B
• 1 flex column with flex: 1 - col C

Available flex size: 1000px - 400px = 600px. Column sizes:

• col A - 400px
• col B - 400px
• col C - 200px

The flex algorithm will distribute space like this: From the total available size, it will substract the fixed sizes: 1000px - 400px = 600px It will sum up all flex values: 1+2 = 3 It will compute the width of a flex unit: 600px / 3 = 200px It will distribute the flex space to every column, taking into account the flex value: col B = 2200px, col C = 1200px

[roblotter]

There are some other points to take into consideration:

• need to take into account behaviour when resizing columns and need a flag to specify whether columns share space on resize or not.
• when there is at least a flex column, and the user resizes that, it could become a fixed width column or it could keep it's flex in relation to all other flexes.
• when there is at least a flex column (but let's assume at least 2 flex cols, for simplicity), and say it's made smaller on resize, if it's configured to be kept as flex, there will be remaining whitespace in the table viewport (otherwise, column resize won't feel natural and would make an ugly flicker, meaning the other flex col would have to be made wider all of a sudden, which is something we don't want). We need to preserve that space and allow users to control how it behaves - could call it viewportReservedWidth

[roblotter]

Implemented in 0.0.9 - adding docs very soon and will update and close this