DataTable become useless if the pinned columns width exceed the table width.
Expected Behavior
The pinned column border is not moved beyond the table borders, it stays inside the table container and can be reached. Expect to have width limits (max/min) for scrollable and pinned columns areas (it might be hardcode for some reasonable min and max widths).
Current Behavior
The pinned column's border might be placed beyond the table borders by dragging a pinned columns age outside the table, due to this, the edge of the column is not visible and unpinned columns are not displayed.
Steps to Reproduce
- Pin some columns to the left of the table
- Move the right border of the far right pinned column beyond the edge of the table
- Try to scroll horizontally
Context
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
- UUI version: 4.5.3
- Browser name: Chrome
- Operating System: Win10
Sorry, but i don't exactly got what your mean. Could you please provide the video or codesendox with this bug behavior?
https://user-images.githubusercontent.com/40317982/154414182-b326e370-20e9-459c-ba56-fc32196871c6.mp4
Here it is
I guess we need to limit width of fixed section that it will not be more than table width container and user had possibility to resize fixed column to more smaller size
After discussions with Yakov Zhmourov, it was decided to postpone the fix until the completion of temification.
Possible implementation steps:
- Move the manual resize logic from
DataTableHeaderCelltoDataTableHeaderRow. For implementation, it is necessary that the column that is being resized has access to information about the other columns of the table. About those that have a propertyfix: "right" - The draggable element should be positioned as
sticky. The distance from the right edge is no more than the sum of the widths of the columns with propertyfix: "right". Thus, even if the width of the fixed column is outside the border of the table container, the dragged element will be available for control. - Think over the implementation of the correct positioning of the dragged element. It should be located strictly between the columns.
As part of the task, consider improving the performance of the resize
- Apply resize changes move from onResize to onResizeEnd. So that the resizing process is visualized only in HeaderRow. Either with changing the column widths of only the HeaderRow cells (an example can be seen how this happens in Excel tables), or without it, but with the visualization of the new edge of the cell being changed.
- Table rerender at the end of resize