1

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.

4

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.

  • 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 '18 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 at 15:11
1

Make the column labels active, either with normal left click if not used or with context-click if click is used. When activated have a popup menu with options to Sort A-Z, Sort Z-A, Filter, Resize, Hide, and Select columns. Select columns is a submenu with all columns listed and a check box for each.

In addition, either on the Select columns submenu, or using the column labels themselves, you can make the column order dynamic with a drag-and-drop style to change the column order. It's a lot slower, but you could replace the drag-and-drop with a Move left, and Move right. Not as user-friendly as dragging, but still provides for customization.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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