Table: Add a dropdown with checkboxes to show/hide specific columns + reorder the columns

ninetteadhikari commented 2 years ago

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 🙈

michaelbukachi commented 2 years ago

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

michaelbukachi commented 2 years ago

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

andrewtpham commented 2 years ago

@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):

ninetteadhikari commented 2 years ago

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?

andrewtpham commented 2 years ago

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

michaelbukachi commented 2 years ago

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

Alright. I'll start implementing this.

michaelbukachi commented 2 years ago

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

andrewtpham commented 2 years ago

@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:

michaelbukachi commented 2 years ago

@andrewtpham

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

michaelbukachi commented 2 years ago

@andrewtpham @ninetteadhikari

Done
Done

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

michaelbukachi commented 2 years ago

@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 :thinking:

andrewtpham commented 2 years ago

@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

andrewtpham commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

andrewtpham commented 2 years ago

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 commented 2 years ago

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

@michaelbukachi This is perfect! Nicely done 🙌

michaelbukachi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 🙆‍♂️

hikaya-io / hakawati

Table: Add a dropdown with checkboxes to show/hide specific columns + reorder the columns #233