menu

SpecFM

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

Channels
# All channels
view-forward
# General
view-forward
# Assemble
view-forward
# Design
view-forward
# Design Details
view-forward
# Design Systems
view-forward
# Developer Tea
view-forward
# Does Not Compute
view-forward
# Fragmented
view-forward
# Framework
view-forward
# Immutable
view-forward
# inspect
view-forward
# Jobs
view-forward
# Layout
view-forward
# Music
view-forward
# Orthogonal
view-forward
# Programming
view-forward
# Reactpodcast
view-forward
# Research
view-forward
# Runtime
view-forward
# show-n-tell
view-forward
# Specifics
view-forward
# Swift Unwrapped
view-forward
# Toolsday
view-forward
# Typography
view-forward
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.
  • reply
  • like
http://nicelydone.club/products/lattice/list/
  • reply
  • like
in the same way that this list has a 'toggle btwn list and grid view' button in the top right corner
  • reply
  • like
Ah thats an interesting idea. Currently I have search / filtering at the top right.
  • reply
  • like
  • reply
  • like
  • reply
  • like
  • reply
  • like
Only problem with hiding from the table header, is how do you bring them back.
  • reply
  • like
Virgil Pana on dribbble has some cool table concepts https://dribbble.com/shots/1903644-Data-Grid
  • reply
  • like
can't seem to upload here for some reason - heres the full page http://imgur.com/a/5Xn2M
  • reply
  • like
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.
  • reply
  • like
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.
  • reply
  • like
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
  • reply
  • like
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.
  • reply
  • like
shoot, yeah i figured
  • reply
  • like
quite the pickle
  • reply
  • like