[table] column resizing limited by row action column

[bjornalm]

Describe the bug

For a table with row actions, when you hide columns, the right-hand side of the table is still considered occupied, and you cannot drag the furthest-right column to fill the space.

Reason: A table with row actions will get an additional column appended. This column will be assigned all the remaining width. When normal columns are hidden, this row action column will occupy the new width and since it cannot be resized itself we end up in the problem described above.

See gif: https://ibm.ent.box.com/s/q36zlk7mfdc56xlh8par51mnan0jdlue/file/631494139544

To Reproduce

Steps to reproduce the behavior:

1. Open a table that allows both column resizing and column reordering/hide/show
2. Hide a couple of columns
3. Notice how the row action column fills up the new space
4. Show the hidden columns and notice how the row action column does not shrink and cannot be resized.

Expected behavior

The complete expected behavior is not 100% clear to me, but perhaps this should be solved in two steps.

a) The row actions column will not be allowed to grow when columns are hidden by the user, i.e. the row actions column will remain the width it had before any user initiated show/hide of columns. The row actions column should also remain the same width when normal columns are resized. This would solve the issue as described and is already implemented in the solution for issue 1016

b) Although the above might solve the immediate problem, we probably want to go beyond this since the row action column could never be made smaller than its initially rendered width. This can become an issue in scenarios like the following:

A table has 2 columns defined, both 100 px wide. The second column is hidden by default. The table is rendered in a container that is 300 px wide. The first column renders 100px wide and the row action column gets the remaining 200 pixels (although it only needs 50px). Now the user toggles the previously hidden second column to be shown. Since the row action column never changes in size the space needed for the second column will be taken from the other columns, which in this case is only the first column. This results in the first column getting a width of 0.

Even if the width distribution algorithm is improved to distribute the available 100px in a smarter way over the two normal columns, it will seem odd that the action column gets to keep its space. Figuring out how and when to "steal" space from the row actions column could be possible... but now it is getting very complicated. One solution is to allow a suboptimal column distribution but also allow the row actions column to be resized... or find a completely different design for this problem.

Edit:

There has been a lot of changes to column hide/show that we should be aware of but I think this issue still persist. The Action button column is taking up more than 50px. Let's verify that this issue persist and if so apply the solution described by @dianatran18

[bjornalm]

@lukefirth This relates to the discussion we have had. Please feel free to weigh in here.

[bjornalm]

@lukefirth This is partly related to the solution for https://github.ibm.com/Watson-IoT/pal-tracking/issues/321 which proposes a solution for when tables are using table-layout:fixed and the actions didn't fit the cell.

But the row action column will still grow if there is available size so the problem described above as b) still exists.

[tay1orjones]

@dianatran18 could you take a look at this one? There's some outstanding design questions.

[dianasanborn]

Let me take a stab at this with just the context above.

I agree with Bjorn for a) regardless of how much column width space is available when you hide/resize/rearrange columns, the row actions column should stay the same size always.

In this scenario described above...

A table has 2 columns defined, both 100 px wide. The second column is hidden by default. The table is rendered in a container that is 300 px wide. The first column renders 100px wide and the row action column gets the remaining 200 pixels (although it only needs 50px). Now the user toggles the previously hidden second column to be shown. Since the row action column never changes in size the space needed for the second column will be taken from the other columns, which in this case is only the first column. This results in the first column getting a width of 0.

I would expect that the first column would take up the 250px width if the second column is hidden, and the row actions takes up the remaining 50px. When the second column is turned on, the first and second column split the space to be 125px each, and the row actions is still 50px.

^ That wasn't accounting for the defined column widths, but if we have to stay within the column widths, then I would still say the same thing, but instead at first the first column takes up 100px, blank 150px, and the row actions at 50px. And when the second column is turned on, then it's 100px for the first column, 100px for the second column, 50px blank space (which technically looks like it's part of the second column) and the row actions at 50px.

That might have been super confusing but let me know if that makes sense and if something like that is doable.

@lukefirth correct me if I'm totally off from what you were thinking

[bjornalm]

This will be fixed by PR https://github.com/carbon-design-system/carbon-addons-iot-react/pull/2306