DataTable: changing size of cells does not work in every situation

[stephanpelikan]

Expected Behavior

I need to show details for a record by expanding it's row size (changing the content of one column). On collapsing the row's size decreases to the content height of the cell. This should work for normal-, plain-columns and also having multiple plain plain-columns.

Actual Behavior

Expanding and collapsing works if there is no or only one plain-column. Once more than one plain-column is used, the columns can be expanded but won't reduce their height any more on collapsing the content.

The reason for this is because for plain-columns an additional div is inserted: https://github.com/grommet/grommet/blob/master/src/js/components/TableCell/TableCell.js#L128. On expanding heights all those div-elements will be set based on the surrounding cell: https://github.com/grommet/grommet/blob/master/src/js/components/TableCell/TableCell.js#L73. So, if the expanded plain-cell collapses it's content, then the others plain-cell's height is expanded because their cell-height changed according to the expanded cell (all cells of a row have the same height). In the end, the row can only expand it's height.

Actually, a fix is if the height is not measured based on the cell but rather on the additional div-element. But that might break the issue mentioned in this comment, which is the reason for using this additional div-element: https://github.com/grommet/grommet/blob/master/src/js/components/TableCell/TableCell.js#L129.

Steps to Reproduce

I created a sandbox using one storybook's example:

https://codesandbox.io/p/sandbox/datatable-collapse-issue-2jq6d9

In the "percent complete" column click on the percent value to change to the graphical representation what expands the cell. Another click on the graphical representation will collapse the cell.

This percent-column is of type plain. Once change another column to plain (see line 322), you will experience the bug.

Your Environment

• Grommet version: 2.34.2
• Browser Name and version: Chrome, Firefox, Edge
• Operating System and version (desktop or mobile): Windows, MacOS

[stephanpelikan]

Based on a Google search "div fit into td" there first a hit showing a CSS solution (https://jsfiddle.net/3mx8hvpo/12/). I applied this to grommet code-base and it works fine. I tested with Chrome, Firefox and Safari.

Would you mind to accept this stephanpelikan@7586a99 as a PR?