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:table
AMD Module key: N/A
Experimental API: 2.2
General API: 3

Examples

Example
# First name Last name Username
1 Matt Bond mbond
2 Ross Chaldecott rchaldecott
3 Henry Tapia htapia
AخA
 
<table class="aui">
    <thead>
        <tr>
            <th id="basic-number">#</th>
            <th id="basic-fname">First name</th>
            <th id="basic-lname">Last name</th>
            <th id="basic-username">Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="basic-number">1</td>
            <td headers="basic-fname">Matt</td>
            <td headers="basic-lname">Bond</td>
            <td headers="basic-username">mbond</td>
        </tr>
        <tr>
            <td headers="basic-number">2</td>
            <td headers="basic-fname">Ross</td>
            <td headers="basic-lname">Chaldecott</td>
            <td headers="basic-username">rchaldecott</td>
        </tr>
        <tr>
            <td headers="basic-number">3</td>
            <td headers="basic-fname">Henry</td>
            <td headers="basic-lname">Tapia</td>
            <td headers="basic-username">htapia</td>
        </tr>
    </tbody>
</table>

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.

Example
Name Type Order Action
Default Internal Directory
Corporate LDAP Microsoft Active Directory
 
<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>

You can use aui-table-list CSS class. When present, this CSS class will:

  • remove border lines between table rows.
  • add a :hover and :focus-within style to a row.

To make row "subtle" add aui-row-subtle CSS class to any row.

Example
Author Commit Commit date
Alana Alana 2585eafcbca 1 hour ago
Emma Emma 057e4fa1472 2 hours ago
Harvey Harvey 6ba504ba68a Yesterday
Jose Jose 96cae8b6ddc 3 days ago
Mia Mia bf6c9e853ac 5 days ago
William William 711e734b705 1 week ago
 
<table class="aui aui-table-list" style="width: 500px">
    <thead>
        <tr>
            <th id="author">Author</th>
            <th id="commit">Commit</th>
            <th id="date">Commit date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-alana.jpg" alt="Alana" />
                    </span>
                </span>
                Alana
            </td>
            <td headers="commit">
                <a href="#">2585eafcbca</a>
            </td>
            <td headers="date">1 hour ago</td>
        </tr>
        <tr class="aui-row-subtle">
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-emma.jpg" alt="Emma" />
                    </span>
                </span>
                Emma
            </td>
            <td headers="commit">
                <a href="#">057e4fa1472</a>
            </td>
            <td headers="date">2 hours ago</td>
        </tr>
        <tr>
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-harvey.jpg" alt="Harvey" />
                    </span>
                </span>
                Harvey
            </td>
            <td headers="commit">
                <a href="#">6ba504ba68a</a>
            </td>
            <td headers="date">Yesterday</td>
        </tr>
        <tr>
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-jose.jpg" alt="Jose" />
                    </span>
                </span>
                Jose
            </td>
            <td headers="commit">
                <a href="#">96cae8b6ddc</a>
            </td>
            <td headers="date">3 days ago</td>
        </tr>
        <tr>
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-mia.jpg" alt="Mia" />
                    </span>
                </span>
                Mia
            </td>
            <td headers="commit">
                <a href="#">bf6c9e853ac</a>
            </td>
            <td headers="date">5 days ago</td>
        </tr>
        <tr>
            <td headers="author">
                <span class="aui-avatar aui-avatar-xsmall">
                    <span class="aui-avatar-inner">
                        <img src="images/avatar-william.jpg" alt="William" />
                    </span>
                </span>
                William
            </td>
            <td headers="commit">
                <a href="#">711e734b705</a>
            </td>
            <td headers="date">1 week ago</td>
        </tr>
    </tbody>
</table>

Table element usage:

Element Optional Description
<table class="aui"> Root element.
<table class="aui aui-table-list"> Optional Add aui-table-list CSS class for table-based lists.
<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.
<tr class="aui-row-subtle"> Optional Add aui-row-subtle CSS class for subtle row. Valid only if you add aui-table-list CSS class for table
<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.