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
<div style="position:relative;"> <div id="coDataGrid" style="overflow: hidden; outline: 0px; position: relative; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1811px; " unselectable="on"><div id="slickgrid_903737gl_category" style="width: 276px; " title=""><span>GL Category</span><div></div></div><div id="slickgrid_903737budget" style="width: 104px; " title=""><span>Budget</span><div></div></div><div id="slickgrid_903737actual" style="width: 104px; " title=""><span>Actual</span><div></div></div><div id="slickgrid_903737commitment" style="width: 104px; " title=""><span>Commitment</span><div></div></div><div id="slickgrid_903737forecast" style="width: 105px; " title=""><span>Forecast</span><div></div></div><div id="slickgrid_903737balance" style="width: 103px; " title=""><span>Balance</span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 26px; height: 272px; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div style="width: 796px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 796px; height: 257px; "><div style="top:0px"><div><span style="display:inline-block;float:left;height:1px;width:10px"></span> <span></span> Transfers</div><div><span style="width:100%;float:right;text-align:right;color: #A23026;">-$118,023.00</span></div><div><span style="width:100%;float:right;text-align:right;color: #A23026;">-$118,023.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div><div><span style="width:100%;float:right;text-align:right;">$0.00</span></div></div></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 796px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; "><div tabindex="0" hidefocus="" style="height: 257px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div> <div id="coSummaryGrid" style="position: absolute; top: 51px; left: 15px; width: 794px; z-index: 100; "> <div id="summary_titlebar"> <span id="summary_title">Summary</span> <span><label for="detail_filter">Filter</label><input type="text"></span> <span style="display: block; ">Loading Next Page...</span> <span></span> </div> <div style="overflow: hidden; outline: 0px; position: relative; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1809px; " unselectable="on"><div id="slickgrid_444838cost_object" style="width: 271px; " title=""><span>Cost Object</span><div></div></div><div id="slickgrid_444838gl_account" style="width: 119px; " title=""><span>GL Account</span><div></div></div><div id="slickgrid_444838type" style="width: 101px; " title=""><span>Type</span><div></div></div><div id="slickgrid_444838amount" style="width: 101px; " title=""><span>Amount</span><div></div></div><div id="slickgrid_444838first_budget" style="width: 101px; " title=""><span>First Budget</span><div></div></div><div id="slickgrid_444838last_budget" style="width: 101px; " title=""><span>Last Budget</span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 26px; height: 272px; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 794px; "></div><div style="width: 794px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 794px; height: 257px; "></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 794px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 272px; "><div tabindex="0" hidefocus="" style="height: 257px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div> </div> <div id="coDetailGrid" style="display: none; "> <div id="detail_titlebar"> <span id="detail_title">Summary</span> <span><label for="detail_filter">Filter</label><input id="detail_filter" type="text"></span> <span>Loading Next Page...</span> <span></span> </div> <div> </div> </div> </div>
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.