Tables

Ask a question Design guidelines

Summary

Tables are used to make large volumes of data easy to understand and to access.

Status

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:ajs
AMD Module key: N/A
Experimental since: 2.2

Examples

# First name Last name Username
1 Matt Bond mbond
2 Ross Chaldecott rchaldecott
3 Henry Tapia htapia

Code

HTML

The core AUI Tables API is markup-only. All it requires is some HTML on the page, the CSS will automatically be applied. There is no JavaScript to configure or set up (note extensions such as Sortable Tables do require JavaScript).

The following example shows the markup pattern required for AUI Tables.

AخA
 
<table class="aui">
    <thead>
        <tr>
            <th id="name">Name</th>
            <th id="type">Type</th>
            <th id="order">Order</th>
            <th id="action">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="name">Default</td>
            <td headers="type">Internal Directory</td>
            <td class="order" headers="order">
                <ul class="menu">
                    <li>
                        <a class="down" href="#">Down</a>
                    </li>
                </ul>
            </td>
            <td class="action" headers="action">
                <ul class="menu">
                    <li>
                        <a href="#">An Action</a>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td headers="name">Corporate LDAP</td>
            <td headers="type">Microsoft Active Directory</td>
            <td class="order" headers="order">
                <ul class="menu">
                    <li>
                        <a class="up" href="#">Up</a>
                    </li>
                    <li>
                        <a class="down" href="#">Down</a>
                    </li>
                </ul>
            </td>
            <td class="action" headers="action">
                <ul class="menu">
                    <li>
                        <a href="#">An Action</a>
                    </li>
                    <li>
                        <a href="#">Another Action</a>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Correct table element usage:

  • table: class="aui". Root element.
  • thead: Used to group table heading elements. All cells inside THEAD should be TH, not TD.
  • th: Used for all table heading cells, either in THEAD for a top row, or as the first cell in a table with headings in the first column.
  • tfoot: Optional Used to group table footer elements.
  • tbody: Used to group together table content elements. Your table can include more than one TBODY, the start of each new TBODY will be emphasized with a slightly thicker border.
  • tr: Used in THEAD, TFOOT and TBODY to section table elements into rows.
  • td: Used in TBODY and TFOOT to display table contents.
  • ul (class="menu"): Optional - Used in table content elements to automatically remove bullets and float list items neatly to the left.