laravel-enso/tables

Table responsiveness not working well when columns are unhidden.

robbykrlos opened this issue · 0 comments

This is a bug.

Prerequisites

  • [4.7.1/4.8.0] Are you running the latest version?
  • Are you reporting to the correct repository?
  • Did you check the documentation?
  • Did you perform a cursory search?

Description

Steps to Reproduce

  1. Choose a table were you have too many columns and some of them are hidden by default (showing the arrow ">" / hidden-control in the first column which can be expanded to show the rest of the columns). It works best if you have a table where if you chose all columns it will not fit in the screen. (or to use your demo side, look at https://www.laravel-enso.com/administration/users/ with a lower resolution (640x480). This can be scaled if there are more columns, the resolution can be higher.
  2. If you start making other columns not visible (from the Visibility table control) the remaining columns are being set more and more apart without returning the hidden ones (under the hidden-control - ">") at all, making the table look weird ( until it is reset and is back to initial visible/not visible and/or hidden/not hidden columns OR window is resized even slightly).
    The ">" hidden-control disappears only if you remove the hidden columns at the end, but even if you have enough space, when you select the columns at the end, instead of adding them as visible columns, they are added as hidden.

image

If you set in table JSON "responsive= false", there is no scroll bar to let the user navigate to the end of the table.

image

When debugging, we've noticed that in ResponsiveTable.js (from enso-ui/tables), the condition this.shouldUnhide() in fit() method will always be false because the values compared in wasChanged() are set as being the one and the same in a previous step, in updateWidth(), because there is no window resizing involved to force a difference in the widths compared.

Expected behavior

When columns are being unchecked from Visibility table control, have the hidden ones appear into view.
If 'responsive = false', a scroll bar should appear to allow the user to navigate to the end of the table.

Actual behavior

Columns visible in the main table view are removed from the table, but the ones pushed under the hidden-control (collapsible /expandable ">") are not returned into the main table view, ending up having one column visible, and the rest hidden, although there is room left for all to fit:

image