Page panels enclose an ACE Header and ACE Table, creating a pattern that can display a set of tables; with optional expand/collapse functionality. An ACE Lozenge is used to indicate the number of rows in the table.
Accountants
error
Advisors
error
Code
<div class="ace-panel ace-panel-table ace-panel-table-expanded" id="yourIDhere">
<!-- ACE Header-->
<!-- ACE Table-->
</div>Expanded and collapsed
- When the table is expanded, the panel has the class
ace-panel-table-expandedand the table contained in the panel has the attributearia-hidden="false" - When the table is collapsed, the panel has the class
ace-panel-table-collapsedand the table contained in the panel has the attributearia-hidden="true"
<div class="ace-panel ace-panel-table ace-panel-table-expanded">
<!-- ACE Header-->
<div class="ace-table-scroll-container">
<div class="ace-table-container">
<table class="ace-table" aria-hidden="false">
</table>
</div>
</div>
</div>
<div class="ace-panel ace-panel-table ace-panel-table-collapsed">
<!-- ACE Header-->
<div class="ace-table-scroll-container">
<div class="ace-table-container">
<table class="ace-table" aria-hidden="true">
</table>
</div>
</div>
</div>Colour indicators
Table panels have a grey border by default, with the intention you add spot colour via ID attributes:
#accountants { border-color: #ae4eb0; }
#administrators { border-color: #2380b0; }
#accountants { border-color: #bc4e68; }The border colour can be injected inline if required, noting only the border-color should be set and not the full border CSS.
<div class="ace-panel ace-panel-table" style="border-color: #ae4eb0">
</div>Complete example
<div class="ace-panel ace-panel-table ace-panel-table-expanded" id="administrators">
<div class="ace-header ace-group ace-group-split">
<div class="ace-item ace-header-main">
<h2 class="ace-h2">Administrators</h2>
</div>
<div class="ace-item ace-header-controls">
<div class="ace-lozenge"><span>123</span>
</div>
</div>
</div>
<div class="ace-table-scroll-container">
<div class="ace-table-container">
<table class="ace-table" aria-hidden="false" data-ace-sortable="true">
<thead>
<tr>
<th>Status
</th>
<th>Name
</th>
<th>Email
</th>
<th>Foo
</th>
<th>Bar
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ace-icon ace-icon-status-disabled" title="Disabled">Disabled</span>
</td>
<td>David Clarence Boooooooooooooooon
</td>
<td>[email protected]
</td>
<td>Foo
</td>
<td>Bar
</td>
</tr>
<tr>
<td><span class="ace-icon ace-icon-status-disabled" title="Disabled">Disabled</span>
</td>
<td>Aussie Grit
</td>
<td>[email protected]
</td>
<td>Foo
</td>
<td>Bar
</td>
</tr>
<tr>
<td><span class="ace-icon ace-icon-status-disabled" title="Disabled">Disabled</span>
</td>
<td>Shane Webcke
</td>
<td>[email protected]
</td>
<td>Foo
</td>
<td>Bar
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Expanded and collapsed
You can expanded or collapsed the table panel via expanded boolean attribute
- If the
expandedattribute is not set the table panel will be set to expanded - When the table is expanded, the panel has the class
ace-panel-table-expandedand the table contained in the panel has the attributearia-hidden="false" - When the table is collapsed, the panel has the class
ace-panel-table-collapsedand the table contained in the panel has the attributearia-hidden="true"
ace.PresetTablePanel(Array(_
"expanded", "true",_
"headertext", "expanded",_
"id", "test-panel-expanded"_
))
ace.PresetTablePanel(Array(_
"expanded", "false",_
"headertext", "collapsed",_
"id", "test-panel-collapsed"_
))
Colour indicators
Table panels have a grey border by default, with the intention you add spot of colour via color attribute:
<% ace.PresetTablePanel(Array(_
"color", "#c33",_
"headertext", "expanded",_
"id", "test-panel-notexpanded"_
))
Complete example
<% ace.PresetTablePanel(Array(_
"color", "#c33",_
"expanded", "false",_
"headertext", "not expanded",_
"id", "test-panel-notexpanded"_
))
ace.TableThead(Array())
ace.TableTr(Array())
ace.TableTh(Array())%>
User <%
ace.TableThEnd
ace.TableTh(Array())%>
Type
<% ace.TableThEnd
ace.TableTrEnd
ace.TableTheadEnd
ace.TableTbody(Array())
ace.TableTr(Array())
ace.TableTd(Array()) %>
[email protected]
<% ace.TableTdEnd
ace.TableTd(Array()) %>
User
<% ace.TableTdEnd
ace.TableTrEnd
ace.TableTr(Array())
ace.TableTd(Array()) %>
[email protected] <%
ace.TableTdEnd
ace.TableTd(Array()) %>
Limited User
<% ace.TableTdEnd
ace.TableTrEnd
ace.TableTr(Array())
ace.TableTd(Array()) %>
[email protected]
<% ace.TableTdEnd
ace.TableTd(Array()) %>
Limited User
<% ace.TableTdEnd
ace.TableTrEnd
ace.TableTbodyEnd
ace.PresetTablePanelEnd %>
Javascript
Once initialised, Table Panel will do the following:
- Update the item count in the lozenge
- Enable expand/collapse by clicking the header or lozenge
- Ensure the aria-hidden attribute matches the expanded/collapsed state asserted on the root element
To initialise Table Panels, use the init method, eg:
$(document).ready(function(){
ACE.TablePanel.init();
});
Optional Methods
| Function | Arguments | Description | Example |
|---|---|---|---|
| init | none | Ensure all tables are hidden or shown according to the outer classname. Enable expand/collapse via click on the heading or lozenge. |
|
| update | jQuery element or selector | Update the Table Panel, in effect this will reset the count of visible table rows. |
|
| toggle | jQuery element or selector | Toggle the table(s) matching the jQuery selector. If they are expanded, they will be collapsed; and vice versa. |
|
| expand | jQuery element or selector | Expand the table(s) matching the jQuery selector. |
|
| collapse | jQuery element or selector | Collapse the table(s) matching the jQuery selector. |
|