Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table responsiveness not working well when columns are unhidden. #256

Open
3 tasks done
robbykrlos opened this issue Jul 30, 2021 · 0 comments
Open
3 tasks done

Table responsiveness not working well when columns are unhidden. #256

robbykrlos opened this issue Jul 30, 2021 · 0 comments

Comments

@robbykrlos
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant