Tables

General Info

This section will present a list of guidelines that will help give your tables a design structure, define interaction patterns and also techniques that will help improve the overall experience. 

When to use

Use tables when:

• The data you are presenting are bounded by similar measures and have some sort of relationship.
• Looking up individual values are important.
• Precise values are required.
• The information presented involves multiple measures to make sense.

 General Structure

 A table should have:

• A heading clearly communicating what the table is about.
• Columns of different measures.
• Actions (if the user needs to make any)
• Rows should have alternate colors (zebra pattern) for better readability.

Alignment

• Columns having text should be left aligned.
• Columns having numbers should be right aligned.
• Columns of fixed width values should be central aligned (for e.g. date if the date is always MM/DD/YYYY – it can be center aligned).

Hover Actions

Provide additional actions when a user hovers a respective row. Use this when you feel that the table is already presented with a lot of information. This would help reduce the visual clutter.

 Inline Editing

Whenever possible allow users to edit inline to reduce clicks.

Table actions

If the users can perform actions on the table allow them to do so.