Tables
Summary
Tables with text should include headers and be displayed in Source Sans at a minimum 13 pt font. Text should be aligned left.
Tables with numbers should be displayed in Source Code Pro at a minimum 13 pt font. Numbers should be aligned right.
Headers and instruction text should appear above the tables. Column headers should allow users to sort their view of the table by clicking the header. For filtering, place a drop-down menu above the affected table(s). If the drop-down filter affects a single table, the select widget should appear above the table and below the table header and instruction copy. If the drop-down selector affects multiple tables, it should appear above all the affected tables and their headers and instruction copy.
Code
Example
Related patterns
Tabs
Drop-downs
Problem
Users need to search or scan a complex table for values that interest them. Users may be more effective if they can dynamically change the column that is used for sorting the values on.
Solution
Tables are filterable and users are allowed to sort their view by clicking on column headers.
Rationale
Many users will already know this type of behavior from standard windows applications. It is a very direct way to control sorting in tables, i.e. just one click.