4

I have a table which can contain more than 15 columns, it is not likely that users will see the 15 columns at the same time, but I need to give them the option to select which columns they want to see. I added a section in the table to allow the user to choose from the "Available columns" and move them to the "Selected columns" that will be displayed: enter image description here

But the client didn't like it, because he is looking for something more interactive and intuitive. Can you recommend me other controls that I can use? Note! The table is like an excel table, user can expand, filter and sort by column. I was thinking of using something similar to excel to hide the columns, but I couldn't find out how to make the "show" columns.

Improve this question

1 Answer 1

Reset to default
7

Consider placing table controls in close proximity from the data the user is viewing.

In the example above, you're using a list builder. You say this is similar to an Excel table: do you have any CRUD actions on table rows, or filter controls above the table?

Visible table controls means the user doesn't have to go into a 'mode' to bring up the list builder, and they can see the results of their actions in context.

If you think users may adjust columns to view on a fairly frequent basis you might use a column control above the table, similar to this example:

enter image description here

Here's another version in action (I would probably make it more discoverable with a label):

Tablesaw project from the filament group

enter image description here

Mailchimp allows you to change the column order as well:

enter image description here

There could be 2 cases (that come to mind) why users want to control table columns (I'm not sure which situation you have):

  1. Turning down the noise of less relevant columns
  2. Viewport widths, and tradeoffs of which data to prioritize

The first example works with the checkbox controls.

The second also works, but I imagine you might consider some responsive table patterns (I'm assuming you have), allowing for horizontal scrolling or mobile stacked row patterns.

Responsive data tables from css tricks

It's from 2012, but a decent roundup of responsive table options, plus the link above.

Improve this answer
2
  • upvoted! if you dont mind sharing, what should happen to sort on hidden columns? lets say you show 5 columns with numbers where each can be sorted ascending descending. Now you hide the 5th column, what should be the state of the table now? sorted by the default index column? left as it was before hiding the 5th column?
    – PirateApp
    Jul 23, 2018 at 6:39
  • @PirateApp In the movie ranking gif in this answer the table appears to be sorted by "Rank" and when that column is removed the sorting doesn't change. I don't know if that is the "right" way to do things but it looked pretty intuitive to me.EDIT: I followed the link and the pictured table isn't sortable, but this one is with the same results: filamentgroup.github.io/tablesaw/demo/sort.html
    – DasBeasto
    Aug 1, 2019 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.