menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

SpecFM

A network of designers and developers making the best podcasts, blogs, and resources for designers and developers.

Channels
Team

Collapsable table columns

August 25, 2017 at 6:47pm

Collapsable table columns

August 25, 2017 at 6:47pm
I'm trying to come up with an easy way to allow a user hide and show a column in a table. Most examples I have found let you hide and show all the columns of a table (https://codepen.io/christianacca/pen/meevep). They often use checkboxes above the table.
Image
While this is nice, its not quite what I am looking for because I just want the user to be able to manipulate one column. And just having a toggle for one column feels kinda strange.
Currently these are my explorations of a collapsed / displayed column. Image
Anywho, would love to hear what you all think of collapsable tables and some of my explorations. I can't seem to recall if I have seen this implemented where the show/hide toggle is in the table header. Perhaps I'm trying to be a bit too clever and I should do a toggle above the table. What do you think?

August 25, 2017 at 7:16pm
Can you add a header to the table? I think if this list had a persistent header there could be an opportunity to house a toggle button.
http://nicelydone.club/products/lattice/list/
in the same way that this list has a 'toggle btwn list and grid view' button in the top right corner
Ah thats an interesting idea. Currently I have search / filtering at the top right.
Only problem with hiding from the table header, is how do you bring them back.
Virgil Pana on dribbble has some cool table concepts https://dribbble.com/shots/1903644-Data-Grid
can't seem to upload here for some reason - heres the full page http://imgur.com/a/5Xn2M
yeah, Anthony for the collapsed state I have an icon with a little arrow to the right to allow the user to open it up again.
Haha I've looked at the dribbble shot probably 20 times. I wish there were more table designs out there easily referenced. In this case I only want to allow 1 column to be toggleable so its a little strange to only have one item in that list displayed.
You might have constraints blocking this but would you be open to moving the image column to the far right? I imagine if that column were to the right of everything you'd have less content shifting and you wouldn't have to shrink the column title down to an icon
Also a good idea but in this case I need the image to be to the left of the name field because we want to let instructors review the matching of scans that we do automatically via OCR.
shoot, yeah i figured
quite the pickle