Resize DataTable columns (standard & sticky header tables)

[gmoehler]

Closes #4751
Closes #3911

This PR implements a column width resizer which works both for standard DataTable as well as for a DataTable with sticky-header.

It builds on an earlier PR (#5214), but minimizes the impact to the existing code dramatiacally, because it either uses additional components (like TableColumnResizer) or tools (like DataTable/tools/columnResize.js) or introduces copies of existing components (TableHeader -> TableHeaderResizable, TableCell-> TableCellResizable). The resize story with-resizable-columns.js uses the duplicated components and covers a few little additions for the resizing to work (see below).

The resizing algorithm is enhanced as compared to the earlier PR #5214:

• the algorithm is based on table with use 100% of the available with and works best if a min-widthis defined for th/td(as it is the case for sticky header tables)
• if we move a resizer to the right the column is increased and all columns to the right are squeezed accordingly
• when we reduce the width of a column, the width of the column to the right is enlarged and the column of the left is reduced accordingly. When the column to the left hits its minimal width (currently set to 40px) all other columns to the left are squeezed as well
• when all columns (either to the right or left) are at their minimum, no further modification is possible anymore
• going back and forth will alyway produce the same results

The algorithm needs access to the width of all columns, also it potentially changes the column width of all columns. For sticky header tables it is required to update the widh in the header th and the cell td. Therefore, a central place is required to keep the width data. This solution uses an React Context ResizeContext along with a store to keep that data. This keeps the impact to other code low to a maximum, while using state-of-the-art react mechanism. A reducer ResizeReducer triggers store changes. Everything is encapsulated into a custom react hook useColumnResizing(). The hook is used in the resizer component TableColumnResizer to trigger the resizing. In TableHeaderResizableandTableCellResizablethe same hook is used to retreive the new width and set it viastyle={{ width: colWidth + 'px' }}`.

Changelog

New

• new components (as copies of existing components with resizing capabilities): TableHeader -> TableHeaderResizable, TableCell-> TableCellResizable
• additional component TableColumnResizer
• custom react hooks and react context in DataTable/tools/columnResize.js
• some style additions in _data-table-column-resize.scss
• tests for all components and tools

Changed

• included styles from _data-table-column-resize.scss
• modified 3 styles for sticky header table
• more data for data table story to see scrolling in sticky header table

Removed

nothing

Testing / Reviewing

Open the story DataTable > with resizabable columns, grab the resizer in the header of the table and resize the columns. Also switch on Sticky header (experimental) in the Knobs to verify things work for sticky header tables, too.

[joshblack]

Hi @gmoehler! 👋 If I remember correctly, were you going down the route of adding this into Cloud PAL?

[gmoehler]

Correct that was the suggestion from the Carbon team. Will work on it in near future

[joshblack]

Perfect! Sounds great 😄

We're going through older PRs just to clean-up ones that may be inactive. I am going to close this one out but feel free to re-open!

[akmalmzamri]

Is this available in the latest version of Carbon React? Couldn't find any documentation on this

[nagiah]

Can someone please answer: what version of Carbon React is this available in?

[tw15egan]

@nagiah @akmalhakimi1991 this feature was not added to Carbon core

[nagiah]

Thanks for your quick response @tw15egan
Is there a plan to added it any time soon?

[nagiah]

An answer please:
Is there a plan to add Resize DataTable columns any time soon?

[tw15egan]

@nagiah there are no plans to implement this feature