Lists

Lists

Lists are the main way to view many records at once. Records are clearly delimited, even when they take up more than one line. Controls are present to help users access specific records, refine the set of records displayed, or work with the entire set of data at once.

To create a basic table or list, just add the "table" class to an existing table. Special modes can be done with special classes. Please beware that on platform lists, users are given the preference to enable or disable each special mode. There may be an existing user preference for these behaviors that should be followed.

Table Options

  • .table-hover - highlights rows when the mouse passes over them (note that for table-hover to work with detail rows, you must have the Heisenberg JS included)
  • .table-striped - alternating rows are shown with different background colors
  • .table-condensed - shows the table cells with less padding inside of them

Simple

Number Updated Caller Category
INC0000046 3 days ago Bud Richman Software
INC0000047 1 month ago Bow Ruggeri
INC0000044 2 months ago Jerrod Bennett Network
<table id="testtable1" class="table">
   <thead>
       <tr>
           <th>Number</th>
           <th>Updated</th>
           <th>Caller</th>
           <th>Category</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td><a href="#">INC0000046</a></td>
           <td><span title="2014-10-02 12:48:48">3 days ago</span></td>
           <td><a href="#">Bud Richman</a></td>
           <td>Software</td>
       </tr>
       <tr>
           <td><a href="#">INC0000047</a></td>
           <td><span title="2014-9-02 12:48:48">1 month ago</span></td>
           <td><a href="#">Bow Ruggeri</a></td>
           <td></td>
       </tr>
       <tr>
           <td><a href="#">INC0000044</a></td>
           <td><span title="2014-8-01 12:48:48">2 months ago</span></td>
           <td><a href="#">Jerrod Bennett</a></td>
           <td>Network</td>
       </tr>
   </tbody>
</table>

Advanced

Number Configure column Number Sorted ascending Updated Configure column Updated Caller Configure column Caller Category Configure column Category
Preview INC0000046 INC0000046 3 days ago Bud Richman Software
Can't access SFA Software
Preview INC0000047 INC0000047 1 month ago Bow Ruggeri
Can't get to network file shares
Preview INC0000044 INC0000044 2 months ago Jerrod Bennett Network
I can't get my weather report
<table class="table table-hover">
   <thead>
       <tr>
         <th class="col-control">
           <button class="icon-cog btn btn-icon table-btn-lg">
               <span class="sr-only">Personalize List</span>
           </button>
         </th>
       <th class="col-control">
           <button class="icon-search btn btn-icon table-btn-lg">
               <span class="sr-only">Search</span>
           </button>
       </th>
       <th>
           Number
           <i class="icon-arrow-down-rounded col-menu">
               <span class="sr-only">Configure column Number</span>
           </i>
       </th>
       <th>
           <a href="#" class="col-change-sort">
               <i class="icon-sort-ascending col-sort">
                   <span class="sr-only">Sorted ascending</span>
               </i>
               Updated
           </a>
           <i class="icon-arrow-down-rounded col-menu">
               <span class="sr-only">Configure column Updated</span>
           </i>
       </th>
       <th>
           Caller
           <i class="icon-arrow-down-rounded col-menu">
               <span class="sr-only">Configure column Caller</span>
           </i>
       </th>
       <th>
           Category
           <i class="icon-arrow-down-rounded col-menu">
               <span class="sr-only">Configure column Category</span>
           </i>
       </th>
   </tr></thead>
   <tbody>
       <tr>
           <td class="col-control col-small col-center" rowspan="2">
               <span class="input-group-checkbox">
                   <input id="record1-checkbox" class="checkbox" type="checkbox" name="record1-checkbox">
                   <label for="record1-checkbox" class="checkbox-label">
                       <span class="sr-only">Select record for action</span>
                   </label>
               </span>
           </td>
           <td class="col-center col-small" rowspan="2">
               <a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000046">
                   <span class="sr-only">Preview INC0000046</span>
               </a>
           </td>
           <td><a href="#">INC0000046</a></td>
           <td><span title="2014-10-02 12:48:48">3 days ago</span></td>
           <td><a href="#">Bud Richman</a></td>
           <td>Software</td>
       </tr>
       <tr class="detail-row">
           <td colspan="4">Can't access SFA Software</td>
       </tr>
       <tr>
           <td class="col-control col-small col-center" rowspan="2">
               <span class="input-group-checkbox">
                   <input id="record2-checkbox" class="checkbox" type="checkbox" name="record2-checkbox">
                   <label for="record2-checkbox" class="checkbox-label">
                       <span class="sr-only">Select record for action</span>
                   </label>
               </span>
           </td>
           <td class="col-center col-small" rowspan="2">
               <a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000047">
                   <span class="sr-only">Preview INC0000047</span>
               </a>
           </td>
           <td><a href="#">INC0000047</a></td>
           <td><span title="2014-9-02 12:48:48">1 month ago</span></td>
           <td><a href="#">Bow Ruggeri</a></td>
           <td></td>
       </tr>
       <tr class="detail-row">
           <td colspan="4">Can't get to network file shares</td>
       </tr>
       <tr>
           <td class="col-control col-small col-center" rowspan="2">
               <span class="input-group-checkbox">
                   <input id="record3-checkbox" class="checkbox" type="checkbox" name="record3-checkbox">
                   <label for="record3-checkbox" class="checkbox-label">
                       <span class="sr-only">
                           Select record for action</span>
                   </label>
               </span>
           </td>
           <td class="col-center col-small" rowspan="2">
               <a href="#" class="btn btn-icon table-btn-lg icon-info" title="Preview INC0000044">
                   <span class="sr-only">Preview INC0000044</span>
               </a>
           </td>
           <td><a href="#">INC0000044</a></td>
           <td><span title="2014-8-01 12:48:48">2 months ago</span></td>
           <td><a href="#">Jerrod Bennett</a></td>
           <td>Network</td>
       </tr>
       <tr class="detail-row">
           <td colspan="4">I can't get my weather report</td>
       </tr>
   </tbody>
</table>