Grid line item status column - how to display broader explanation?

Question

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.

Answer 1

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)

Answer 2

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