Style Name Image Description
afsc-table-sortable Sortable icon Look-and-feel of sortable portion of table. Sortable means the column/row can be sorted in ascending (1, 2, 3, ...) or descending (...3, 2, 1) order.
afsc-table-sorted-ascending Sortable icon Look-and-feel of data sorted in ascending order. Sorted ascending means data increases in value. e.g. 1, 2, 3, ...
afsc-table-sorted-descending Sortable icon Look-and-feel of data sorted in descending order. Sorted descending means data decreases in value. e.g. ... 3, 2, 1.

Examples:

Tag HTML Code Display
<th>
 
<table id="sortable1" 
    width="100%"> 
    <thead> 
        <tr class="portlet-table-header"> 
            <th id="col0_$$PORTLET_ID$$" 
                    class="portlet-table-header afsc-table-sortable"  
                    onclick="afsc_tableColumn_sort('sortable1', 0);"> 
                Product 
            </th> 
            <th id="col1_$$PORTLET_ID$$" 
                    class="portlet-table-header afsc-table-sortable"  
                    onclick="afsc_tableColumn_sort('sortable1', 1);"> 
                Customer 
            </th> 
            <th id="col2_$$PORTLET_ID$$" 
                    class="portlet-table-header afsc-table-data-currency afsc-table-sortable"  
                    onclick="afsc_tableColumn_sort('sortable1', 2);"> 
                Price 
            </th> 
        </tr> 
    </thead> 
    <tfoot class="portlet-table-footer"> 
        <tr> 
            <td>Total</td> 
            <td class="afsc-table-data-currency" 
                  colspan="2"> 
                $912.82      
            </td> 
        </tr> 
    </tfoot> 
    <tbody id="sortableTbody">  
        <tr class="portlet-table-body"> 
            <td>iPhone 4</td> 
            <td class="portlet-table-body"> 
                Minnie Mouse 
            </td> 
            <td class="afsc-table-data-currency"> 
                $31.30 
            </td> 
        </tr> 
        <tr class="portlet-table-alternate"> 
            <td>iPod Classic</td> 
            <td>Bugs Bunny</td> 
            <td class="afsc-table-data-currency"> 
                $1.52 
            </td> 
        </tr> 
        <tr class="portlet-table-body"> 
            <td>MacBook Pro</td> 
            <td>Donald Duck</td> 
            <td class="afsc-table-data-currency"> 
                $555.00 
            </td> 
        </tr> 
        <tr class="portlet-table-alternate"> 
            <td>iPad2</td> 
            <td>Pluto</td> 
            <td class="afsc-table-data-currency"> 
                $325.00 
            </td> 
        </tr> 
    </tbody> 
</table> 
<script type="text/javascript">
    afsc_tableColumn_sort('sortable1', 0);
</script>
            
Product Customer Price
Total $912.82
iPhone 4 Minnie Mouse $31.30
iPod Classic Bugs Bunny $1.52
MacBook Pro Donald Duck $555.00
iPad2 Pluto $325.00