UUI icon indicating copy to clipboard operation
UUI copied to clipboard

DataTable become useless if the pinned columns width exceed the table width.

Open shum-dev opened this issue 3 years ago • 4 comments

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

  1. Pin some columns to the left of the table
  2. Move the right border of the far right pinned column beyond the edge of the table
  3. 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

shum-dev avatar Feb 16 '22 10:02 shum-dev

Sorry, but i don't exactly got what your mean. Could you please provide the video or codesendox with this bug behavior?

AlekseyManetov avatar Feb 16 '22 15:02 AlekseyManetov

https://user-images.githubusercontent.com/40317982/154414182-b326e370-20e9-459c-ba56-fc32196871c6.mp4

Here it is

shum-dev avatar Feb 17 '22 05:02 shum-dev

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

AlekseyManetov avatar Nov 29 '22 14:11 AlekseyManetov

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 DataTableHeaderCell to DataTableHeaderRow. 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 property fix: "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 property fix: "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

dzevakov avatar Dec 22 '22 08:12 dzevakov