Grid contains transactions of a sort. Each transaction can be: Open, Closed, or Cancelled. There's a "Status" column, and each cell has one of the 3 words in it: Open, Closed, or Cancelled.

Now, Open, Closed, or Cancelled, is just the highest level status. Each category, has between 10-20 sub-statuses. Like, if the transaction is Open, which team is it Open with? Legal, Compliance, Operations, or other.

What are some good ways to show this sub-status?

  1. I was thinking maybe on hover.

  2. Or an extra column that shows on default, but user can hide if they want to.

  3. Or maybe it's all together, in one cell, like this, "OPEN: awaiting Legal approval". But I don't know if this is feasible from a TECH perspective?

Any other ideas?

Thank you.

  • Hi Yelena! Could you provide some mock-ups of your ideas?
    – Aline
    Jan 22, 2020 at 15:39

2 Answers 2


Consider representing those top-level statuses using colour and/or pattern, then the text can focus on conveying any sub-status.


Could it be an option to show the additional information in an expandable row within the table?

I assume the users are interested in the Status, and only then, they may be interested in the further details of that given item.
So, perhaps a progressive disclosure could be a possible scenario here.

(I found an example on the internet, just to convey the behaviour: https://codesandbox.io/s/collapsible-table-rows-in-react-ybb28)

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.