1

I have a data table where you can click to expand upon the row. Two out of my four columns have data that can be expanded upon if the column is set to enabled. If disabled, there is no additional data as you can see in the image here.

data table image

I have a few questions regarding this behavior.

  1. Should each download/upload have a separate chevron? If so, should both expand upon a single click, or should the user have to click each one individually to view both columns? (Might be difficult to design a usable table with this function)
  2. Should the expanded row be left aligned for readability, or stay where it is so that it correlates with the main "download" column?
  3. Should I show the empty spaces when the main column is disabled (ex: upload column in image above)?

1 Answer 1

1

I will try to answer each of your questions:

  1. Most expandable tables have a single chevron for the whole row, like the one you have in your screenshot. I consider this to be a better solution than for each column separately, as it requires less user clicks.

  2. Text should be left aligned, but I think you should align the details with the column itself. In your screenshot, all details would shift a bit to the right to match the start of each column. You should also try to preserve the horizontal space needed for details, to avoid shifting the columns when expanding the row.

  3. When a column has "disabled" status, you could show all details as grayed out. Since you also have columns with no details (like Description), I think it's better to display existing details even when the column is marked as "disabled", so that your users know what to expect.

Apart from those questions, I would also add:

  1. Since you have so many data points for each column, it might be better to display each table row as 2 lines, and show a short summary of the most importat data. For example, you could show on 2 lines "Enabled" and "30# 10# 5#", where "#" would be a separate icon for each data value.

  2. I would use white background for normal table rows and grey background for expanded details, since most rows would be collapsed and a table with white rows looks cleaner.

Your Answer

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

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