Tables

Basic Tables

Tables are specialized content inside of containers. They should always be inside of a container such as .adb-container or .adb-modal). When the table is wider than its container, a horizontal scroll bar and overflow indicator (gradient) automatically appear.

Item List

We often use tables to display a sortable list of items such as products or users.

User Status Email Address Apps System Role

Clyde Hoyle

Engineer
 Active carly_sumner@gmail.com 2 Apps System Admin

Reese Kaplan

Engineer
 Active ruby-waters@aol.com 2 Apps System Admin

Eoin Byrne

Engineer
 Active johnnie_nichols@me.com 2 Apps System Admin

Alexis Clapp

Engineer
 Active raul-joyce@live.com 2 Apps System Admin

Cindy Floyd

Engineer
 Active hamish-bowman@mac.com 2 Apps System Admin 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            User
          </th>
          <th>Status</th>
          <th>Email Address</th>
          <th>Apps</th>
          <th>System Role</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Noel Morgan
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              kerrychristensen@live.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Danielle Hawkins
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              jamal_sparks@yahoo.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Kaden Rich
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              marybeth-byrne@yahoo.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Kenneth Robertson
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              dulce_sutton@gmail.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Preston Abrams
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              xena_graves@fastmail.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Data Tables

Data tables may include many columns of comparable, sortable data. Column names should be as succinct as possible in describing the column data.

Column Order
  • Status
  • Unique ID
  • Time/Date (created, updated, etc.)
  • Name
  • Attributes (number of users, contact information, etc.)
  • Categories (marketplace, type, etc.)
  • Monetary values. The most important monetary value should be in the last column, such as Total Fees. See Receipt Tables for tables that add rows of values together.
Status ID Created Company Product Edition Frequency Total Fee
Active 12345 01/15/1991 veniam molestiae nobis minus Professional Edition Monthly $999.99
Active 12345 11/26/2007 expedita expedita est est Standard Edition Yearly $999.99
Pending 12345 06/16/1991 magni amet quos dolore Basic Edition Weekly $999.99
Failed 12345 04/28/2002 quia eius mollitia aliquam Business Edition Daily $999.99
Canceled 12345 09/14/2005 recusandae non numquam laboriosam Enterprise Edition Hourly $999.99 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Status
          </th>
          <th>ID</th>
          <th>Created</th>
          <th>Company</th>
          <th>Product</th>
          <th>Edition</th>
          <th>Frequency</th>
          <th>Total Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            12/14/1992
          </td>
          <td>
            enim iure
          </td>
          <td>
            accusantium quae
          </td>
          <td>Professional Edition</td>
          <td>Monthly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            06/19/2004
          </td>
          <td>
            quo rem
          </td>
          <td>
            qui accusamus
          </td>
          <td>Standard Edition</td>
          <td>Yearly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            09/03/2009
          </td>
          <td>
            saepe repudiandae
          </td>
          <td>
            velit est
          </td>
          <td>Basic Edition</td>
          <td>Weekly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            09/09/2002
          </td>
          <td>
            neque eius
          </td>
          <td>
            qui aut
          </td>
          <td>Business Edition</td>
          <td>Daily</td>
          <td>$999.99</td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            08/04/1990
          </td>
          <td>
            facilis illo
          </td>
          <td>
            commodi corrupti
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
Status and longer ID and longer Created and longer Company and longer Product and longer Edition and longer Frequency and longer Total Fees and Etc. Total Fees and Etc. Total Fees and Etc.
Active 12345 09/11/2003 possimus exercitationem quis nihil mollitia Professional Edition Monthly $999.99 $999.99 $999.99
Active 12345 07/27/2000 omnis fuga fugiat beatae occaecati Standard Edition Yearly $999.99 $999.99 $999.99
Pending 12345 05/05/1990 labore laborum ullam sit quo Basic Edition Weekly $999.99 $999.99 $999.99
Failed 12345 04/10/1999 voluptate qui similique sint nihil Business Edition Daily $999.99 $999.99 $999.99
Canceled 12345 10/09/2009 aut et fugit necessitatibus odit Enterprise Edition Hourly $999.99 $999.99 $999.99 
<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
        <button class="adb-button__inset adb-button__small adb-filters--download_button" type="button">
          Download CSV
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-table adb-table__actionable">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort title="Status and longer">
            Status and longer
          </th>
          <th title="ID and longer">ID and longer</th>
          <th title="Created and longer">Created and longer</th>
          <th title="Company and longer">Company and longer</th>
          <th title="Product and longer">Product and longer</th>
          <th title="Edition and longer">Edition and longer</th>
          <th title="Frequency and longer">Frequency and longer</th>
          <th title="Subtotals and Etc.">Total Fees and Etc.</th>
          <th title="Total Fees and Etc.">Total Fees and Etc.</th>
          <th title="Taxes and Etc.">Total Fees and Etc.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            01/28/2001
          </td>
          <td>
            iure quisquam
          </td>
          <td>
            ut maiores earum
          </td>
          <td>Professional Edition</td>
          <td>Monthly</td>
          <td>$999.99</td>
          <td>$999.99</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            10/06/2007
          </td>
          <td>
            sint nam
          </td>
          <td>
            fuga quod ut
          </td>
          <td>Standard Edition</td>
          <td>Yearly</td>
          <td>$999.99</td>
          <td>$999.99</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            04/12/2007
          </td>
          <td>
            ut aut
          </td>
          <td>
            sint similique ut
          </td>
          <td>Basic Edition</td>
          <td>Weekly</td>
          <td>$999.99</td>
          <td>$999.99</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            02/17/1996
          </td>
          <td>
            ut nemo
          </td>
          <td>
            iure aut ex
          </td>
          <td>Business Edition</td>
          <td>Daily</td>
          <td>$999.99</td>
          <td>$999.99</td>
          <td>$999.99</td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            05/04/2008
          </td>
          <td>
            similique dicta
          </td>
          <td>
            quia soluta laboriosam
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
          <td>$999.99</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_footer">
    <div class="adb-container_footer--item adb-container_footer--item__last">
      <nav class="adb-pagination_v1">
        <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
        <a class="adb-pagination_v1--button">1</a>
        <a class="adb-pagination_v1--button">23</a>
        <span class="adb-pagination_v1--current">456</span>
        <a class="adb-pagination_v1--button">7890</a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
      </nav>
    </div>
  </div>
</div>

Table Headings

Add data-sort attribute to the headings of sortable columns. Add data-sort-order attribute if you want to specify the sort order. Add .adb-is-active class to indicate the active sorted column.

Status ID Created Company Product Edition Frequency Total Fee
Canceled 12345 11/27/2001 consectetur quam praesentium dolorum iste Enterprise Edition Hourly $999.99
Failed 12345 09/18/2003 ipsum eaque totam et placeat Business Edition Daily $999.99
Pending 12345 01/30/1999 quia impedit laboriosam dolor esse Basic Edition Weekly $999.99
Active 12345 07/29/2008 ducimus occaecati facere animi voluptate Professional Edition Monthly $999.99
Active 12345 05/13/2004 nesciunt aut similique facilis mollitia sed autem repellat esse qui iste Standard Edition Yearly $999.99 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="ascending">
            Status
          </th>
          <th data-sort>ID</th>
          <th data-sort>Created</th>
          <th>Company</th>
          <th data-sort>Product</th>
          <th data-sort>Edition</th>
          <th data-sort>Frequency</th>
          <th data-sort>Total Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            04/06/2003
          </td>
          <td>
            vel ipsa
          </td>
          <td>
            esse modi consequuntur
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            04/17/2006
          </td>
          <td>
            labore sed
          </td>
          <td>
            magni quasi velit
          </td>
          <td>Business Edition</td>
          <td>Daily</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            03/02/2008
          </td>
          <td>
            odio corrupti
          </td>
          <td>
            minus qui autem
          </td>
          <td>Basic Edition</td>
          <td>Weekly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            10/16/2008
          </td>
          <td>
            assumenda sapiente
          </td>
          <td>
            non iure illum
          </td>
          <td>Professional Edition</td>
          <td>Monthly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            01/04/2004
          </td>
          <td>
            ut autem doloribus adipisci quod
          </td>
          <td>
            blanditiis eos temporibus quisquam et reprehenderit
          </td>
          <td>Standard Edition</td>
          <td>Yearly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Horizontal Heading

Apply .adb-table--column_heading class to highlight the table heading row.

Status ID Created Product Edition Total Fee
Active 12345 09/05/2002 modi saepe molestiae Professional Edition $999.99
Active 12345 08/07/1998 corrupti quo facere aperiam sit illum Standard Edition $999.99
Pending 12345 11/06/2003 perspiciatis dicta vel Basic Edition $999.99
Failed 12345 11/20/2003 dolor impedit tempora Business Edition $999.99
Canceled 12345 11/25/1992 iste sed fugiat Enterprise Edition $999.99 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead class="adb-table--column_heading">
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Status
          </th>
          <th>ID</th>
          <th>Created</th>
          <th>Product</th>
          <th>Edition</th>
          <th>Total Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            01/14/1993
          </td>
          <td>
            autem harum sit
          </td>
          <td>Professional Edition</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            03/26/2004
          </td>
          <td>
            non dignissimos illo voluptatem et velit
          </td>
          <td>Standard Edition</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            10/23/1992
          </td>
          <td>
            atque natus et
          </td>
          <td>Basic Edition</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            09/14/1994
          </td>
          <td>
            sed omnis sit
          </td>
          <td>Business Edition</td>
          <td>$999.99</td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            10/27/1994
          </td>
          <td>
            sed ut necessitatibus
          </td>
          <td>Enterprise Edition</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Vertical Heading

Apply .adb-table--row_heading class to highlight heading cells within a row.

Product Edition Company Total Fee Status
ipsa non repudiandae Professional Edition blanditiis qui $999.99 Active
perferendis vel maiores voluptatum minima recusandae Standard Edition labore magnam $999.99 Active
sed rerum consequuntur Basic Edition assumenda excepturi $999.99 Pending
totam reiciendis itaque Business Edition quasi impedit $999.99 Failed
est sit error Enterprise Edition ratione aut $999.99 Canceled 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-table--row_heading">Product</th>
          <th>Edition</th>
          <th>Company</th>
          <th>Total Fee</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--row_heading">
            vel necessitatibus voluptas
          </td>
          <td>Professional Edition</td>
          <td>
            voluptate mollitia
          </td>
          <td>$999.99</td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
        </tr>
        <tr>
          <td class="adb-table--row_heading">
            quos recusandae ut rerum doloribus sed
          </td>
          <td>Standard Edition</td>
          <td>
            voluptatem eum
          </td>
          <td>$999.99</td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
        </tr>
        <tr>
          <td class="adb-table--row_heading">
            tempora est tempore
          </td>
          <td>Basic Edition</td>
          <td>
            porro facere
          </td>
          <td>$999.99</td>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
        </tr>
        <tr>
          <td class="adb-table--row_heading">
            dolor voluptatem dolores
          </td>
          <td>Business Edition</td>
          <td>
            non earum
          </td>
          <td>$999.99</td>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
        </tr>
        <tr class="adb-is-disabled">
          <td class="adb-table--row_heading">
            et rerum voluptate
          </td>
          <td>Enterprise Edition</td>
          <td>
            distinctio nulla
          </td>
          <td>$999.99</td>
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Special Table Content

Cards

A card is a component that pairs a logo or avatar with a title and brief descriptive text. Use the following markup to show cards in tables.

User Manager Project Team Department

Nathan Romero

Designer

Ben Domanico

Creative Director
 Product Design Engineering

Alex Capasso

Designer

Ben Domanico

Creative Director
 Marketing Design Engineering 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            User
          </th>
          <th>Manager</th>
          <th>Project</th>
          <th>Team</th>
          <th>Department</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-48x48.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Nathan Romero
                </a>
              </h3>
              <div class="adb-summary--details">Designer</div>
            </div>
          </td>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/benDomanico-48x48.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Ben Domanico
                </a>
              </h3>
              <div class="adb-summary--details">Creative Director</div>
            </div>
          </td>
          <td>
            <a>
              Product
            </a>
          </td>
          <td>
            <a>
              Design
            </a>
          </td>
          <td>
            <a>
              Engineering
            </a>
          </td>
        </tr>
        <tr>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/alexCapasso-48x48.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Alex Capasso
                </a>
              </h3>
              <div class="adb-summary--details">Designer</div>
            </div>
          </td>
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/benDomanico-48x48.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Ben Domanico
                </a>
              </h3>
              <div class="adb-summary--details">Creative Director</div>
            </div>
          </td>
          <td>
            <a>
              Marketing
            </a>
          </td>
          <td>
            <a>
              Design
            </a>
          </td>
          <td>
            <a>
              Engineering
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Menus, Dropdowns, and Buttons

Use the .adb-table--menu class on td elements for any button-style components in tables, including button menus, dropdown selectors and buttons.

Rank Status Application
Active Sample Application
Active Sample Application 
<div class="adb-container">
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Rank
          </th>
          <th>Status</th>
          <th>Application</th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--menu">
            <div class="adb-js-dropdown adb-dropdown adb-dropdown__small">
              <select>
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
              </select>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>Sample Application</a>
          </td>
          <td class="adb-table--menu">
            <menu class="adb-toolbar adb-toolbar__small">
              <button class="adb-button__primary adb-button__small adb-toolbar--item" type="button">
                <i class="adb-icon__check"></i>
                Approve
              </button>
              <button class="adb-button__secret adb-button__small adb-toolbar--item" type="button">
                <i class="adb-icon__no"></i>
                Deny
              </button>
            </menu>
          </td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">
                      Edit Application
                    </a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">
                      Delete Application
                    </a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr>
          <td class="adb-table--menu">
            <div class="adb-js-dropdown adb-dropdown adb-dropdown__small">
              <select>
                <option>1</option>
                <option selected>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
              </select>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>Sample Application</a>
          </td>
          <td class="adb-table--menu">
            <menu class="adb-toolbar adb-toolbar__small">
              <button class="adb-button__primary adb-button__small adb-toolbar--item" type="button">
                <i class="adb-icon__check"></i>
                Approve
              </button>
              <button class="adb-button__secret adb-button__small adb-toolbar--item" type="button">
                <i class="adb-icon__no"></i>
                Deny
              </button>
            </menu>
          </td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">
                      Edit Application
                    </a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">
                      Delete Application
                    </a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Actionable Tables

Add the .adb-table__actionable class to show that a table row is linked or selectable. Each row shows a highlighted state when the user hovers over it.

User Status Email Address Apps System Role

Danielle Hawkins

Engineer
 Active anagray@email.com 2 Apps System Admin

Perla Starr

Engineer
 Active alexis-puckett@live.com 2 Apps System Admin

Jared May

Engineer
 Active cara-adkins@email.com 2 Apps System Admin

Cara Floyd

Engineer
 Active siennapuckett@aol.com 2 Apps System Admin

Giselle Barton

Engineer
 Disabled elainekennedy@fastmail.com 2 Apps System Admin 
<div class="adb-container">
  <div class="adb-table adb-table__actionable">
    <table>
      <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            User
          </th>
          <th>Status</th>
          <th>Email Address</th>
          <th>Apps</th>
          <th>System Role</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr data-url="/prototype/account/user/index.html">
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Omar Griffin
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              kerry-goldstein@mac.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr data-url="/prototype/account/user/index.html">
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Camila Mangum
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              omarbyrd@aol.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr data-url="/prototype/account/user/index.html">
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Nadia Joseph
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              kelly-blanchard@fastmail.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr data-url="/prototype/account/user/index.html">
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Nadia Joseph
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            <a>
              katie-chan@me.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
        <tr class="adb-is-disabled" data-url="/prototype/account/user/index.html">
          <td class="adb-table--card">
            <div class="adb-table--card_image">
              <div class="adb-id adb-id__sq_small">
                <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">inn Morse
                </a>
              </h3>
              <div class="adb-summary--details">Engineer</div>
            </div>
          </td>
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Disabled
            </span>
          </td>
          <td>
            <a>
              pete-allen@aol.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</td>
          <td class="adb-table--menu">
            <menu class="adb-js-context_menu adb-context_menu adb-context_menu__small" data-placement="right">
              <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret adb-button__small" type="button">
                <i class="adb-icon__cog"></i>
              </button>
              <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                <ul class="adb-stack adb-stack__small">
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Apps
                    </a>

                  </li>
                  <li class="adb-stack--item">
                                        <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/roles.html">Edit Role
                    </a>

                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Disable User</a>
                  </li>
                  <li class="adb-stack--item">
                    <a class="adb-link__option adb-stack--item_content">Remove User</a>
                  </li>
                </ul>
              </div>
            </menu>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
Edition Included Price
Gold Edition 3 users
25 Gigabytes
  • $199.95 / user / month Free Trial
  • $180.00 / month for 1-25 users + $9.95.00 / email
  • $180.00 / month Occaecati nulla ut officiis unde + $9.95.00 / email Fuga odit et ut quis laboriosam sed id sit ut aut non
Silver Edition 2 users
  • $79.95 / user / month + $0.00 / email / month 2-Month Contract
  • $199.95 / user / day + $0.00 / email / month 2-Day Contract
Bronze Edition 1 users
  • $9.95 / user / month for 1-25 users + $0.00 / email / month 
<table class="adb-table__actionable adb-table__multiline">
  <colgroup>
    <col span="1">
    <col width="30%">
    <col width="20%">
    <col width="50%">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Edition</th>
      <th>Included</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="adb-js-radio">
      <td>
        <input checked id="purchase-pricing-plan1" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Gold Edition</td>
      <td>
        3 users
        <br>
        25 Gigabytes
      </td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$199.95 / user / month</strong>
            <span class="adb-badge adb-badge__free">Free Trial</span>
          </li>
          <li>
            <strong>$180.00 / month for 1-25 users</strong>
            <span class="adb-caption">+ $9.95.00 / email</span>
          </li>
          <li>
            <strong>
              $180.00 / month
              Et iure ut rerum sapiente ducimus
            </strong>
            <span class="adb-caption">
              + $9.95.00 / email
              Adipisci quia quia temporibus vel
            </span>
          </li>
        </ul>
      </td>
    </tr>
    <tr class="adb-js-radio">
      <td>
        <input id="purchase-pricing-plan2" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Silver Edition</td>
      <td>2 users</td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$79.95 / user / month</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
            <span class="adb-badge adb-badge__info">2-Month Contract</span>
          </li>
          <li>
            <strong>$199.95 / user / day</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
            <span class="adb-badge adb-badge__info">2-Day Contract</span>
          </li>
        </ul>
      </td>
    </tr>
    <tr class="adb-js-radio">
      <td>
        <input id="purchase-pricing-plan3" name="purchase-pricing-plans" type="radio">
      </td>
      <td>Bronze Edition</td>
      <td>1 users</td>
      <td>
        <ul class="adb-list__feature">
          <li>
            <strong>$9.95 / user / month for 1-25 users</strong>
            <span class="adb-caption">+ $0.00 / email / month</span>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Table with Truncated Data

The data-truncate attribute forces the table to be exactly 100% as wide as its container (does not overflow) and limits text in th and td elements to one line, attaching an ellipsis at the end of the text. Add a title attribute to allow users to read the entire title.

Status and longer ID and longer Created and longer Company and longer Product and longer Edition and longer Frequency and longer Total Fees and Etc.
Active 12345 05/01/2003 aut est eum ut at Professional Edition Monthly $999.99
Active 12345 08/10/1998 explicabo deserunt et necessitatibus commodi dolores et quis voluptate est cupiditate Standard Edition Yearly $999.99
Pending 12345 08/05/2008 eveniet nihil distinctio vero qui Basic Edition Weekly $999.99
Failed 12345 05/04/1999 sunt omnis doloremque dolores recusandae Business Edition Daily $999.99
Canceled 12345 04/21/2007 occaecati hic et porro est Enterprise Edition Hourly $999.99 
<div class="adb-container">
  <div class="adb-table" data-truncate="table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort title="Status and longer">
            Status and longer
          </th>
          <th title="ID and longer">ID and longer</th>
          <th title="Created and longer">Created and longer</th>
          <th title="Company and longer">Company and longer</th>
          <th title="Product and longer">Product and longer</th>
          <th title="Edition and longer">Edition and longer</th>
          <th title="Frequency and longer">Frequency and longer</th>
          <th title="Total Fees and Etc.">Total Fees and Etc.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            05/04/1998
          </td>
          <td>
            eveniet nam
          </td>
          <td>
            natus consequatur asperiores
          </td>
          <td>Professional Edition</td>
          <td>Monthly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            02/24/2005
          </td>
          <td>
            in quo sint animi est
          </td>
          <td>
            quo illo dolorem neque et aliquid
          </td>
          <td>Standard Edition</td>
          <td>Yearly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            12/28/1993
          </td>
          <td>
            ullam voluptas
          </td>
          <td>
            in in nam
          </td>
          <td>Basic Edition</td>
          <td>Weekly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            07/14/1993
          </td>
          <td>
            dicta laborum
          </td>
          <td>
            sed magnam itaque
          </td>
          <td>Business Edition</td>
          <td>Daily</td>
          <td>$999.99</td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            03/17/1992
          </td>
          <td>
            corrupti quas
          </td>
          <td>
            et quibusdam eligendi
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Table with Filters and Pagination

Tables with filters and pagination use the filters and foopagination components as described in Containers.
Status Date Product Vendor Price
Active 05/25/1995 vel et aut eius quis $5.00
Active 04/29/1995 deserunt incidunt voluptatem incidunt est $5.00
Pending 05/22/1992 quam in est temporibus iure $5.00
Failed 01/30/2000 laudantium sint recusandae incidunt velit $5.00
Canceled 07/28/2003 quo labore libero id minus $5.00 
<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
        <button class="adb-button__inset adb-button__small adb-filters--download_button" type="button">
          Download CSV
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Status
          </th>
          <th>Date</th>
          <th>Product</th>
          <th>Vendor</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            05/11/1999
          </td>
          <td>
            incidunt quis est
          </td>
          <td>
            adipisci corrupti
          </td>
          <td>
            $5.00
          </td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>
            06/07/2006
          </td>
          <td>
            illo dolores laudantium
          </td>
          <td>
            rem perferendis
          </td>
          <td>
            $5.00
          </td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>
            09/06/1992
          </td>
          <td>
            qui unde possimus
          </td>
          <td>
            eum aperiam
          </td>
          <td>
            $5.00
          </td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>
            12/11/1996
          </td>
          <td>
            eveniet et voluptatem
          </td>
          <td>
            consectetur sed
          </td>
          <td>
            $5.00
          </td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>
            09/13/1993
          </td>
          <td>
            consequuntur repellat quo
          </td>
          <td>
            blanditiis distinctio
          </td>
          <td>
            $5.00
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_footer">
    <div class="adb-container_footer--item adb-container_footer--item__last">
      <nav class="adb-pagination_v1">
        <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
        <a class="adb-pagination_v1--button">1</a>
        <a class="adb-pagination_v1--button">23</a>
        <span class="adb-pagination_v1--current">456</span>
        <a class="adb-pagination_v1--button">7890</a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
      </nav>
    </div>
  </div>
</div>

Results Count Filter

If you want to allow users to change the number of results viewable in a table per page, add the results count filter to a footer controls container.
Date Event
11/29/2008, 12:00 PST Perla Davis purchased Sample Application.
04/26/1993, 12:00 PDT Sydney Carver canceled Sample Application.
06/21/2006, 12:00 PDT Kyleigh Rich invited penny_chang@mac.com to Sample Application.
11/19/2009, 12:00 PST Clint Hardin removed Margarita Chung from Sample Application.
03/24/2002, 12:00 PST Laila May paid $999.99 for Invoice #12345.
02/20/1994, 12:00 PST Uriel Brady purchased Sample Application.
03/02/2005, 12:00 PST Ruby Cooper canceled Sample Application.
10/27/1994, 12:00 PDT Hudson Heller invited alberto-o-brien@email.com to Sample Application.
10/03/1999, 12:00 PDT Davion Floyd removed Skylar Davidson from Sample Application.
03/03/1994, 12:00 PST Preston Stevenson paid $999.99 for Invoice #12345.
02/09/1992, 12:00 PST Angelo Heath purchased Sample Application.
06/23/1990, 12:00 PDT Johnny Watts canceled Sample Application.
07/30/1991, 12:00 PDT Cindy Dougherty invited caitlyn-stout@fastmail.com to Sample Application.
05/24/1997, 12:00 PDT Jamal McLean removed Brock Hoyle from Sample Application.
05/01/2005, 12:00 PDT Luis Lucas paid $999.99 for Invoice #12345.
01/06/2009, 12:00 PST Margarita Barr purchased Sample Application.
06/13/2003, 12:00 PDT Skylar Hobbs canceled Sample Application.
03/29/2004, 12:00 PST Alfredo Cooper invited antonio_neal@email.com to Sample Application.
06/01/1998, 12:00 PDT Jadyn Kane removed Dulce Norman from Sample Application.
06/19/1998, 12:00 PDT Marsha Reid paid $999.99 for Invoice #12345.
06/15/1993, 12:00 PDT Cindy Waters purchased Sample Application.
09/12/1991, 12:00 PDT Alexis Bowden canceled Sample Application.
08/29/1994, 12:00 PDT Rolando Hobbs invited reese-wilkerson@mac.com to Sample Application.
10/08/2001, 12:00 PDT Samuel Graves removed Bryce Abbott from Sample Application.
07/04/2000, 12:00 PDT Bart Fox paid $999.99 for Invoice #12345. 
<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-table">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Date
          </th>
          <th>Event</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            03/02/1997, 12:00 PST
          </td>
          <td>
            <a>
              Kristi Morse
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/01/2005, 12:00 PDT
          </td>
          <td>
            <a>
              Ciaran Garrett
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            04/15/1997, 12:00 PDT
          </td>
          <td>
            <a>
              Randal Becker
            </a>
            invited
            <a>
              caleb-sparks@gmail.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            06/25/1997, 12:00 PDT
          </td>
          <td>
            <a>
              Emma McLean
            </a>
            removed
            <a>
              Alondra Bender
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            06/15/1993, 12:00 PDT
          </td>
          <td>
            <a>
              inn Goldman
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            06/21/1995, 12:00 PDT
          </td>
          <td>
            <a>
              Tracy Heath
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            11/04/1993, 12:00 PST
          </td>
          <td>
            <a>
              Maggie Hardin
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            07/23/2007, 12:00 PDT
          </td>
          <td>
            <a>
              Joey Adkins
            </a>
            invited
            <a>
              justice-goldman@email.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            08/07/2009, 12:00 PDT
          </td>
          <td>
            <a>
              Kenneth Kane
            </a>
            removed
            <a>
              Monty O'Brien
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            11/02/2008, 12:00 PDT
          </td>
          <td>
            <a>
              Antonio Burch
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            09/27/1998, 12:00 PDT
          </td>
          <td>
            <a>
              Maisie Petersen
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            12/03/1995, 12:00 PST
          </td>
          <td>
            <a>
              Lucinda Song
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            12/31/2006, 12:00 PST
          </td>
          <td>
            <a>
              Noelle Perkins
            </a>
            invited
            <a>
              angela_glass@yahoo.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            09/06/1998, 12:00 PDT
          </td>
          <td>
            <a>
              Brenden Marsh
            </a>
            removed
            <a>
              Denis Schroeder
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/17/1998, 12:00 PDT
          </td>
          <td>
            <a>
              Maisie McKenzie
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/07/1995, 12:00 PDT
          </td>
          <td>
            <a>
              Makenzie Black
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/03/1993, 12:00 PST
          </td>
          <td>
            <a>
              Hector Schroeder
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/04/2002, 12:00 PST
          </td>
          <td>
            <a>
              Darius Hoyle
            </a>
            invited
            <a>
              kelly-norman@me.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/20/2007, 12:00 PDT
          </td>
          <td>
            <a>
              Dulce Barton
            </a>
            removed
            <a>
              Caleb Lamb
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/28/1991, 12:00 PST
          </td>
          <td>
            <a>
              Billie McNamara
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/02/2005, 12:00 PST
          </td>
          <td>
            <a>
              Preston Robertson
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            04/22/2006, 12:00 PDT
          </td>
          <td>
            <a>
              Kelvin Brady
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/23/1997, 12:00 PST
          </td>
          <td>
            <a>
              Antoinette Henry
            </a>
            invited
            <a>
              brendenfinch@yahoo.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/31/2006, 12:00 PST
          </td>
          <td>
            <a>
              Calum Underwood
            </a>
            removed
            <a>
              Kaden Brady
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/06/2009, 12:00 PDT
          </td>
          <td>
            <a>
              Eric Lawrence
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_footer">
    <div class="adb-container_footer--item">
      <menu>
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>25 Results</option>
            <option>50 Results</option>
            <option>100 Results</option>
            <option>All Results</option>
          </select>
        </div>
      </menu>
    </div>
    <div class="adb-container_footer--item adb-container_footer--item__last">
      <nav class="adb-pagination_v1">
        <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
        <a class="adb-pagination_v1--button">1</a>
        <a class="adb-pagination_v1--button">23</a>
        <span class="adb-pagination_v1--current">456</span>
        <a class="adb-pagination_v1--button">7890</a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
        <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
      </nav>
    </div>
  </div>
</div>

Alternative Table Layouts
Status ID Created Total
Paid 19209 06/07/2008 $999.99
Paid 56325 09/01/1991 $999.99
Paid 42609 10/01/1991 $999.99
Unpaid 71035 04/06/1992 $999.99
Unpaid 35895 03/18/1992 $999.99
ID Created Transaction Total
42046 12/12/1992 AB123CD4567EF89 $999.99
29632 06/02/2005 AB123CD4567EF89 $999.99
61438 03/04/2002 AB123CD4567EF89 $999.99
11471 02/08/1996 AB123CD4567EF89 $999.99
56814 02/23/2008 AB123CD4567EF89 $999.99 
<div class="adb-layout-row">
  <div class="adb-layout-content_half adb-layout-column__first">
    <div class="adb-container">
      <div class="adb-filters" data-filters>
        <menu class="adb-filters--header">
          <menu class="adb-filters--header_item">
            <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
              Show Filters
            </button>
          </menu>
          <div class="adb-filters--header_item">
            <div class="adb-search_field adb-input_row adb-js-input_row">
              <div class="adb-input_row--item adb-input_row--primary">
                <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
              </div>
              <div class="adb-input_row--item">
                <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
                  <i class="adb-icon__search"></i>
                </button>
              </div>
            </div>
          </div>
        </menu>
        <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
          <div class="adb-filters--filter">
            <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
              <select>
                <option>Option</option>
                <option>Another option</option>
              </select>
            </div>
          </div>
        </menu>
      </div>
      <div class="adb-table">
        <table>
          <thead>
            <tr>
              <th class="adb-is-active" data-sort data-sort-order="descending">
                Status
              </th>
              <th>
                ID
              </th>
              <th>
                Created
              </th>
              <th>
                Total
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <span class="adb-status adb-status__active">
                  <span class="adb-status--gem"></span>
                  Paid
                </span>
              </td>
              <td>
                76509
              </td>
              <td>
                02/25/2001
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                <span class="adb-status adb-status__active">
                  <span class="adb-status--gem"></span>
                  Paid
                </span>
              </td>
              <td>
                59245
              </td>
              <td>
                04/18/2007
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                <span class="adb-status adb-status__active">
                  <span class="adb-status--gem"></span>
                  Paid
                </span>
              </td>
              <td>
                63744
              </td>
              <td>
                12/30/1994
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                <span class="adb-status adb-status__error">
                  <span class="adb-status--gem"></span>
                  Unpaid
                </span>
              </td>
              <td>
                45872
              </td>
              <td>
                07/20/1996
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                <span class="adb-status adb-status__error">
                  <span class="adb-status--gem"></span>
                  Unpaid
                </span>
              </td>
              <td>
                79819
              </td>
              <td>
                10/15/1992
              </td>
              <td>
                $999.99
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="adb-container_footer">
        <div class="adb-container_footer--item adb-container_footer--item__last">
          <nav class="adb-pagination_v1">
            <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
            <a class="adb-pagination_v1--button">1</a>
            <a class="adb-pagination_v1--button">2</a>
            <a class="adb-pagination_v1--button">3</a>
            <span class="adb-pagination_v1--current">4</span>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="adb-layout-content_half">
    <div class="adb-container">
      <div class="adb-filters" data-filters>
        <menu class="adb-filters--header">
          <menu class="adb-filters--header_item">
            <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
              Show Filters
            </button>
          </menu>
          <div class="adb-filters--header_item">
            <div class="adb-search_field adb-input_row adb-js-input_row">
              <div class="adb-input_row--item adb-input_row--primary">
                <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
              </div>
              <div class="adb-input_row--item">
                <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
                  <i class="adb-icon__search"></i>
                </button>
              </div>
            </div>
          </div>
        </menu>
        <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
          <div class="adb-filters--filter">
            <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
              <select>
                <option>Option</option>
                <option>Another option</option>
              </select>
            </div>
          </div>
        </menu>
      </div>
      <div class="adb-table">
        <table>
          <thead>
            <tr>
              <th class="adb-is-active" data-sort data-sort-order="descending">
                ID
              </th>
              <th>
                Created
              </th>
              <th>
                Transaction
              </th>
              <th>
                Total
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                49715
              </td>
              <td>
                06/24/1990
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                48682
              </td>
              <td>
                01/25/2008
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                23387
              </td>
              <td>
                05/03/1999
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                10770
              </td>
              <td>
                06/03/1993
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                60416
              </td>
              <td>
                10/30/2003
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="adb-container_footer">
        <div class="adb-container_footer--item adb-container_footer--item__last">
          <nav class="adb-pagination_v1">
            <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
            <a class="adb-pagination_v1--button">1</a>
            <a class="adb-pagination_v1--button">2</a>
            <a class="adb-pagination_v1--button">3</a>
            <span class="adb-pagination_v1--current">4</span>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
            <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>