feat: Add logic for toggling column visibility

hikaya-io / hakawati

A collection of UI components

GNU General Public License v3.0

2 stars 1 forks source link

feat: Add logic for toggling column visibility #399

Closed michaelbukachi closed 1 year ago

michaelbukachi commented 1 year ago

What issue(s) does this PR resolve?

List all the issues resolved by this PR

Resolves #397
Resolves #386

Considerations and implementation

How to test

List the steps for others to test your changes.

Log in as ...
Click on ...

Test(s) added

Mentions?

@mention the people you'd like to review this PR @andrewtpham @ninetteadhikari

ninetteadhikari commented 1 year ago

thanks Michael this is working great!

Is it possible to add a background color when user hovers on a column name from the dropdown. Its difficult to see which one the user is selecting.

ninetteadhikari commented 1 year ago

functionality is all there but we might need to rethink the design of the top row. it kind of looks strange with the top row width being different from table row @andrewtpham

andrewtpham commented 1 year ago

@michaelbukachi This is awesome! One comment:

Can we use el-select instead of el-dropdown and achieve similar functionality? The reason why I think el-select would be more suited is that we can use el-option-group for the visible columns and hidden columns and I like when we use multiple select the menu stays open so you can select multiple options.
reference: https://element.eleme.io/#/en-US/component/select#grouping

andrewtpham commented 1 year ago

functionality is all there but we might need to rethink the design of the top row. it kind of looks strange with the top row width being different from table row @andrewtpham

Added some padding to the title groups and added hover styling:

andrewtpham commented 1 year ago

@michaelbukachi based on the call, things to look into:

✅ We'll continue to use el-dropdown component but would like the menu to stay active and open to the user so they can choose multiple columns to hide or display.
🔖 We would like the toolbar to align with the width of the columns displayed dynamically while still keeping the hide column dropdown button aligned to the right of the screen that is visible to the user. Currently, if you scroll left to right it will look like this:
✅ We would like to add the el-icon-check icon to the left of each dropdown menu item. Currently I was able to add icon="el-icon-check" to theel-dropdown-itembut I havent been able to get thecolumn type` to align to the right side of the screen:
🔖 On the column header, can we display the right-click menu when a user clicks the column icon?

michaelbukachi commented 1 year ago

@andrewtpham 1 and 3 done. 2 and 4 are quite difficult to implement so they might take quite some time.

andrewtpham commented 1 year ago

@andrewtpham 1 and 3 done. 2 and 4 are quite difficult to implement so they might take quite some time.

Thanks for the changes and feedback @michaelbukachi

I've created them as separate tickets: