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: Add a dropdown with checkboxes to show/hide specific columns + reorder the columns #233

Closed
ninetteadhikari opened this issue Nov 22, 2021 · 20 comments · Fixed by #236
Assignees
Labels
UI UI Components
Milestone

Comments

@ninetteadhikari
Copy link
Member

ninetteadhikari commented Nov 22, 2021

Is your feature request related to a problem? Please describe.
We would like the ability for a user to select which columns to display and re-order in the table view

AS a user
AND I'm viewing a table
THEN I should be able to click on a settings icon
AND a dropdown will appear with a list of columns displayed in my table
AND I should have the ability to select a checkbox next to each column to display in the table view
AND I should have the ability to reorder any of the options in the dropdown to display the columns in that order

Additional context
Here is a quick mock up of the dropdown menu (apologies its so messy), still getting the hang of figma 🙈
image

@ninetteadhikari ninetteadhikari added the UI UI Components label Nov 22, 2021
@andrewtpham andrewtpham mentioned this issue Nov 23, 2021
9 tasks
@andrewtpham andrewtpham changed the title Table: show/hide specific columns Table: Add a dropdown with checkboxes to show/hide specific columns + reorder the columns Nov 23, 2021
@andrewtpham andrewtpham added this to the Oct-Dec 2021 milestone Nov 23, 2021
@michaelbukachi
Copy link
Collaborator

michaelbukachi commented Nov 23, 2021

@andrewtpham, I'm looking at the table and I'm not sure if the settings button will fit properly 🤔
screenshot_20211123174552

@michaelbukachi
Copy link
Collaborator

@andrewtpham what about right-clicking on a header column in order to bring up the menu?

@andrewtpham
Copy link
Member

@michaelbukachi Could we create the settings icon a row above the main header? See in this example, we could add the icon somewhere above (see purple highlight):
image

@ninetteadhikari
Copy link
Member Author

ninetteadhikari commented Nov 23, 2021

we can also have the last column fixed. https://element.eleme.io/#/en-US/component/table#table-with-fixed-column
@andrewtpham what do you think?

image

image

image

@andrewtpham
Copy link
Member

Yes! I like the fixed column if that works for @michaelbukachi

@michaelbukachi
Copy link
Collaborator

Yes! I like the fixed column if that works for @michaelbukachi

Alright. I'll start implementing this.

@michaelbukachi
Copy link
Collaborator

@andrewtpham @ninetteadhikari
Preview for the hide/show column:
https://vue-ui-components-mpm9ps1kt-hikaya.vercel.app

@andrewtpham
Copy link
Member

@andrewtpham @ninetteadhikari Preview for the hide/show column: https://vue-ui-components-mpm9ps1kt-hikaya.vercel.app

@michaelbukachi This looks great! I really like how it works. Here's some feedback points (cc @ninetteadhikari):

  • Can we add the option to specify a checkbox or a switch to hide/display a column
  • Do you think we can add the ability to re-order columns from the dropdown menu itself? If we did this, we would need to add a confirmation or some sort of trigger when the columns will re-order so the screen doesn't change as a user is in the process of re-ordering.
  • NICE TO HAVE: Also, I like an idea to place a lock icon for each column, so that we can suggest which fields are required to be displayed so that a table can't just be fully empty. Not sure how to approach this but maybe it can be something an admin/owner user can define.
    Example screen:
    image

@michaelbukachi
Copy link
Collaborator

@andrewtpham

  1. On it
  2. Looking into to this. Though this might be quite difficult to achieve
  3. The hiding/displaying of columns isn't persistent so having fields that are required might not be necessary 🤔. The only thing we can probably do is ensure that at least one column is displayed.

@ninetteadhikari ninetteadhikari linked a pull request Nov 25, 2021 that will close this issue
3 tasks
@andrewtpham andrewtpham mentioned this issue Nov 25, 2021
3 tasks
@michaelbukachi
Copy link
Collaborator

michaelbukachi commented Nov 26, 2021

@andrewtpham @ninetteadhikari

  1. Done
  2. Done

The preview link:
https://vue-ui-components-hrmutaluz-hikaya.vercel.app

@michaelbukachi
Copy link
Collaborator

@andrewtpham @ninetteadhikari

1. Done

2. Done

The preview link: https://vue-ui-components-hrmutaluz-hikaya.vercel.app

Also. I'm not sure if it's just my computer. But I get a bit of lag when I hide/show columns 🤔

@andrewtpham
Copy link
Member

@michaelbukachi For the styling of drag and drop to re-order the column order, we can follow something like this?
https://dribbble.com/shots/15013254-Table-view-settings

image

@andrewtpham
Copy link
Member

@michaelbukachi Apologies for the many examples but wanted to share this in case some of the styling is easier to implement:
drag-n-drop

The main things to keep in mind for the drag and drop styling:

  • Add the waffle icon next to each column
  • When a user clicks the column we will display a moving rectangle with the column name
  • While moving, the column name is disabled
  • When a user drags it between two other columns, a line will be shown so that the user knows where it will be dropped

@michaelbukachi
Copy link
Collaborator

@andrewtpham
I don't think we have an icon which we can use as a drag indicator:
https://element.eleme.io/#/en-US/component/icon

@michaelbukachi
Copy link
Collaborator

Here's the line indicator:
https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@andrewtpham
Copy link
Member

andrewtpham commented Dec 2, 2021

https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@michaelbukachi Could we use one of these for our drag and drop icon, which do you prefer given the screen real estate? Also, do you think it should be on the right side?

https://fontawesome.com/v6.0/icons/grip-vertical?s=solid
https://fontawesome.com/v6.0/icons/grip-lines?s=solid

@andrewtpham
Copy link
Member

https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@michaelbukachi This is perfect! Nicely done 🙌

@michaelbukachi
Copy link
Collaborator

https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@michaelbukachi Could we use one of these for our drag and drop icon, which do you prefer given the screen real estate? Also, do you think it should be on the right side?

https://fontawesome.com/v6.0/icons/grip-vertical?s=solid https://fontawesome.com/v6.0/icons/grip-lines?s=solid

With this, we'd have to introduce fontawesome into hakawati. But it seems we don't have an alternative.

@andrewtpham
Copy link
Member

https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@michaelbukachi Could we use one of these for our drag and drop icon, which do you prefer given the screen real estate? Also, do you think it should be on the right side?
https://fontawesome.com/v6.0/icons/grip-vertical?s=solid https://fontawesome.com/v6.0/icons/grip-lines?s=solid

With this, we'd have to introduce fontawesome into hakawati. But it seems we don't have an alternative.

@michaelbukachi Ok, let's skip fontawesome for now.

Do you think we could use el-icon-minus and stack 2 of them on top of each other? And if it doesnt look good, you can just add one as a placeholder until we find another one in element 😅

@andrewtpham
Copy link
Member

https://vue-ui-components-cn3aqhl9o-hikaya.vercel.app

@michaelbukachi Could we use one of these for our drag and drop icon, which do you prefer given the screen real estate? Also, do you think it should be on the right side?
https://fontawesome.com/v6.0/icons/grip-vertical?s=solid https://fontawesome.com/v6.0/icons/grip-lines?s=solid

With this, we'd have to introduce fontawesome into hakawati. But it seems we don't have an alternative.

@michaelbukachi Ok, let's skip fontawesome for now.

Do you think we could use el-icon-minus and stack 2 of them on top of each other? And if it doesnt look good, you can just add one as a placeholder until we find another one in element 😅

@michaelbukachi On second thought, let's get this PR merged and I'll ticket the icon in a separate enhancement for the future. Maybe we'll find a better icon to use by then 🙆‍♂️

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

Successfully merging a pull request may close this issue.

3 participants