I have built an inventory system and I am working on adding a feature to it that will allow groups of parts to be reserved. I need a way that I can display the quantity of the item, how many are reserved and the final available total.

The application is for internal use only and different tiers of employees will be using it. Some employees will only see the quantity, some will see the available items and those that will be reserving/ordering items will need to see all of the quantities.

Each item has a table row with a quantity column. I had thought of displaying the item quantities as a simple X(Y) where X is the quantity and (Y) is the reserved amount. But I think it is too ambiguous. A user could see 5(2) and think a total of 5 items, with 2 reserved and 3 available. Another user could see 2 reserved for a total of 7 items, with 5 available. For this reason I would like to have the application do the math and not have the users do any of the thinking.

I have also thought of adding an extra column for the available quantity, but that would mean my table would have empty spaces where the majority of items do not have anything reserved. I would also like to avoid adding more columns as it is already a large table.

The most recent idea I have looked into is displaying all values in a single quantity column and using the superscript tag (<sup>) with background colours and a divider, such as |, \, /. Here is what I had in mind.

Quantity column

This displays the quantity, the reserved amount raised, with a background colour and the - in front of the number and the available items a bit off to the side. So 22 items in total, 4 reserved and 18 available.

I do not know if this is sufficiently self-explanatory. Is there a way I can make it more so? Or is there a better way to display all of these values in a single column?

  • Why would you have empty spaces? When no items are reserved, the number of parts and the number of available parts would have the same value in the table. Commented Oct 5, 2016 at 20:42
  • 1
    Another question, why does the viewer care about how many are reserved? Surely they only care about what's left.
    – Confused
    Commented Oct 6, 2016 at 0:16
  • @AndreDickson The empty spaces would be the extra column where there is no items reserved, so if that column just shows either nothing if I chose to display nothing when no items are reserved, or the same quantity again. I think it would be a waste of space. Also mentioned in the question is that the table is already large so I would like to find a single column solution.
    – Ryan89
    Commented Oct 6, 2016 at 12:23
  • @Confused I should have been more specific. The application is for internal use only and different tiers of employees will be using it. Some employees will only see the quantity, some will see the remaining items and some that will be reserving/ordering items will need to see all of the values.
    – Ryan89
    Commented Oct 6, 2016 at 12:27
  • @Ryan89 why would someone reserving items need to see all three values? To be able to reserve or order, I would assume that I would only need to know how many items are currently available. Commented Oct 6, 2016 at 22:22

3 Answers 3


Without a clear explanation, I wouldn't directly understand the superscript notation. Depending on context, the -4 could also mean other things making it unclear (defective items, backordered items, instead of your intended notation for reserved).

Option A)

If you need to display the total number and the breakdown of the items available vs those reserved, you can create drop-down rows for those items that have any items reserved. This opens the door to including action buttons, descriptions, modified pricing, or comments to the right of the quantity.


+MyReallyCoolPart     22


-MyReallyCoolPart     22
   Reserved            4   Cancel   
   Available          18   Reserve

You can optionally hide the drop-down rows if it doesn't pertain to a specific user.

Option B)

Make MyReallyCoolPart a clickable link to another page that allows you to order from the remaining items and show the detail of how many are reserved. The advantage is this is likely easier to develop and get up and running, though it takes an extra step for a user.


You are on the right track with the superscript strategy. But I would keep it simple and just do:

22 - 4 = 18

update: just case it wasn't clear from my example, DO NOT USE SUPERSCRIPT, just show the equation like a math problem.

  • The OP shouldn't be using superscript as it would make -4 an exponent not a term to be subtracted from 22 i.e. 0.00000426883 not 18. Also, according to MDN this use of the superscript tag is improper developer.mozilla.org/en/docs/Web/HTML/Element/sup. Commented Oct 7, 2016 at 13:53
  • I didn't say he should be using superscript, i said he was on the right track, look at my example, - 4 isn't a superscript in my example.
    – Andy
    Commented Oct 7, 2016 at 22:29

one column


width 7

22 - 4 = 18

width 11

three columns


width 7

If you are going to display the data what is the big deal with 3 columns?
For sure 3 columns is the most clear presentation.

  • Won't the column's header also help to determine it's width? Commented Oct 8, 2016 at 0:57
  • @AndreDickson YES. Even 3 combined into 1 it would have to describe all three components so not seeing the difference there. Could still have a spanned header. Could have angled headers. Lots of way to deal with that and it is a separate issue.
    – paparazzo
    Commented Oct 8, 2016 at 1:02

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.