Base by AppDirect

Layout

Complex components and layout patterns

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

Judith Chung

Engineer
 Active margarita_melton@gmail.com 2 Apps System Admin

Kerry Hill

Engineer
 Active lorenzo-song@yahoo.com 2 Apps System Admin

Justice Hamilton

Engineer
 Active raulwagner@hotmail.com 2 Apps System Admin

Liliana McLaughlin

Engineer
 Active eliseraynor@email.com 2 Apps System Admin

Ciaran Moon

Engineer
 Active moses_desai@live.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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Davion Wallace
                </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>
              mohammed-griffin@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="bottom 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Harvey Dougherty
                </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>
              hudsonmay@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="bottom 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Brendan Steele
                </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>
              denisvick@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="bottom 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Sadie Gallagher
                </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>
              jacquelyn_walsh@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="bottom 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Virgil Monroe
                </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>
              alexa-hawkins@mail.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="top 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/02/2016 alias consequatur aut perferendis sit voluptatem accusantium doloremque aperiam eaque Professional Edition Monthly $999.99
Active 12345 03/10/2015 ipsa quae ab illo inventore veritatis et quasi architecto beatae Standard Edition Yearly $999.99
Pending 12345 03/02/2014 vitae dicta sunt explicabo aspernatur aut odit aut fugit sed Basic Edition Weekly $999.99
Failed 12345 08/12/2016 quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Business Edition Daily $999.99
Canceled 12345 11/04/2014 neque dolorem ipsum quia dolor sit amet consectetur adipisci velit 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/01/2015
          </td>
          <td>
            sed quia non numquam eius
          </td>
          <td>
            modi tempora incidunt ut labore
          </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>
            07/05/2015
          </td>
          <td>
            et dolore magnam aliquam quaerat
          </td>
          <td>
            voluptatem ut enim ad minima
          </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>
            08/07/2014
          </td>
          <td>
            veniam quis nostrum exercitationem ullam
          </td>
          <td>
            corporis nemo enim ipsam voluptatem
          </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>
            02/09/2013
          </td>
          <td>
            quia voluptas sit suscipit laboriosam
          </td>
          <td>
            nisi ut aliquid ex ea
          </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>
            10/11/2016
          </td>
          <td>
            commodi consequatur quis autem vel
          </td>
          <td>
            eum iure reprehenderit qui in
          </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 06/16/2015 ea voluptate velit esse quam nihil molestiae et iusto odio Professional Edition Monthly $999.99 $999.99 $999.99
Active 12345 09/03/2014 dignissimos ducimus qui blanditiis praesentium laudantium totam rem voluptatum deleniti Standard Edition Yearly $999.99 $999.99 $999.99
Pending 12345 01/19/2013 atque corrupti quos dolores et quas molestias excepturi sint occaecati Basic Edition Weekly $999.99 $999.99 $999.99
Failed 12345 01/21/2016 cupiditate non provident sed ut perspiciatis unde omnis iste natus Business Edition Daily $999.99 $999.99 $999.99
Canceled 12345 10/01/2016 error similique sunt in culpa qui officia deserunt mollitia animi 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/02/2016
          </td>
          <td>
            id est laborum et dolorum
          </td>
          <td>
            fuga et harum quidem rerum
          </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>
            03/10/2015
          </td>
          <td>
            facilis est et expedita distinctio
          </td>
          <td>
            nam libero tempore cum soluta
          </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>
            03/02/2014
          </td>
          <td>
            nobis est eligendi optio cumque
          </td>
          <td>
            nihil impedit quo porro quisquam
          </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>
            08/12/2016
          </td>
          <td>
            est qui minus id quod
          </td>
          <td>
            maxime placeat facere possimus omnis
          </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>
            11/04/2014
          </td>
          <td>
            voluptas assumenda est omnis dolor
          </td>
          <td>
            repellendus temporibus autem quibusdam et
          </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">
        <a class="adb-pagination--button adb-pagination--button__prev"></a>
        <a class="adb-pagination--button adb-pagination--button__first">1</a>
        <a class="adb-pagination--button">2</a>
        <span class="adb-pagination--current">3</span>
        <a class="adb-pagination--button">4</a>
        <a class="adb-pagination--button adb-pagination--button__middle">5</a>
        <span class="adb-pagination--ellipsis"></span>
        <a class="adb-pagination--button adb-pagination--button__last">90</a>
        <a class="adb-pagination--button adb-pagination--button__next"></a>
      </nav>
    </div>
  </div>
</div>
Alternating Table Rows

Data tables may display alternating background colors by adding the .adb-table__alternating class onto the table. It might not be advisable to combine Actionable Tables with Alternating Tables as the hover color and alternating background color are very similar on the ACME theme.

Status ID Created Company Product Edition Frequency Total Fee
Active 12345 12/01/2015 aut consequatur vel illum qui dolorem eum fugiat quo voluptas Professional Edition Monthly $999.99
Active 12345 07/05/2015 nulla pariatur at vero eos et accusamus officiis debitis aut Standard Edition Yearly $999.99
Pending 12345 08/07/2014 rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et Basic Edition Weekly $999.99
Failed 12345 02/09/2013 molestiae non recusandae itaque earum rerum hic tenetur a sapiente Business Edition Daily $999.99
Canceled 12345 10/11/2016 delectus ut aut reiciendis voluptatibus maiores doloribus asperiores repellat repellat Enterprise Edition Hourly $999.99 
<div class="adb-container">
  <div class="adb-table adb-table__alternating">
    <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>
            06/16/2015
          </td>
          <td>
            alias consequatur aut perferendis sit
          </td>
          <td>
            voluptatem accusantium doloremque aperiam eaque
          </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>
            09/03/2014
          </td>
          <td>
            ipsa quae ab illo inventore
          </td>
          <td>
            veritatis et quasi architecto beatae
          </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>
            01/19/2013
          </td>
          <td>
            vitae dicta sunt explicabo aspernatur
          </td>
          <td>
            aut odit aut fugit sed
          </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>
            01/21/2016
          </td>
          <td>
            quia consequuntur magni dolores eos
          </td>
          <td>
            qui ratione voluptatem sequi nesciunt
          </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>
            10/01/2016
          </td>
          <td>
            neque dolorem ipsum quia dolor
          </td>
          <td>
            sit amet consectetur adipisci velit
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </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 01/02/2016 sed quia non numquam eius modi tempora incidunt ut labore Enterprise Edition Hourly $999.99
Failed 12345 03/10/2015 et dolore magnam aliquam quaerat voluptatem ut enim ad minima Business Edition Daily $999.99
Pending 12345 03/02/2014 veniam quis nostrum exercitationem ullam corporis nemo enim ipsam voluptatem Basic Edition Weekly $999.99
Active 12345 08/12/2016 quia voluptas sit suscipit laboriosam nisi ut aliquid ex ea Professional Edition Monthly $999.99
Active 12345 11/04/2014 commodi consequatur quis autem vel eum iure reprehenderit qui in 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>
            12/01/2015
          </td>
          <td>
            ea voluptate velit esse quam
          </td>
          <td>
            nihil molestiae et iusto odio
          </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>
            07/05/2015
          </td>
          <td>
            dignissimos ducimus qui blanditiis praesentium
          </td>
          <td>
            laudantium totam rem voluptatum deleniti
          </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>
            08/07/2014
          </td>
          <td>
            atque corrupti quos dolores et
          </td>
          <td>
            quas molestias excepturi sint occaecati
          </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>
            02/09/2013
          </td>
          <td>
            cupiditate non provident sed ut
          </td>
          <td>
            perspiciatis unde omnis iste natus
          </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>
            10/11/2016
          </td>
          <td>
            error similique sunt in culpa
          </td>
          <td>
            qui officia deserunt mollitia animi
          </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 06/16/2015 id est laborum et dolorum Professional Edition $999.99
Active 12345 09/03/2014 fuga et harum quidem rerum Standard Edition $999.99
Pending 12345 01/19/2013 facilis est et expedita distinctio Basic Edition $999.99
Failed 12345 01/21/2016 nam libero tempore cum soluta Business Edition $999.99
Canceled 12345 10/01/2016 nobis est eligendi optio cumque 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/02/2016
          </td>
          <td>
            nihil impedit quo porro quisquam
          </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/10/2015
          </td>
          <td>
            est qui minus id quod
          </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>
            03/02/2014
          </td>
          <td>
            maxime placeat facere possimus omnis
          </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>
            08/12/2016
          </td>
          <td>
            voluptas assumenda est omnis dolor
          </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>
            11/04/2014
          </td>
          <td>
            repellendus temporibus autem quibusdam et
          </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
aut consequatur vel illum qui Professional Edition dolorem eum fugiat quo voluptas $999.99 Active
nulla pariatur at vero eos Standard Edition et accusamus officiis debitis aut $999.99 Active
rerum necessitatibus saepe eveniet ut Basic Edition et voluptates repudiandae sint et $999.99 Pending
molestiae non recusandae itaque earum Business Edition rerum hic tenetur a sapiente $999.99 Failed
delectus ut aut reiciendis voluptatibus Enterprise Edition maiores doloribus asperiores repellat repellat $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">
            alias consequatur aut perferendis sit
          </td>
          <td>Professional Edition</td>
          <td>
            voluptatem accusantium doloremque aperiam eaque
          </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">
            ipsa quae ab illo inventore
          </td>
          <td>Standard Edition</td>
          <td>
            veritatis et quasi architecto beatae
          </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">
            vitae dicta sunt explicabo aspernatur
          </td>
          <td>Basic Edition</td>
          <td>
            aut odit aut fugit sed
          </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">
            quia consequuntur magni dolores eos
          </td>
          <td>Business Edition</td>
          <td>
            qui ratione voluptatem sequi nesciunt
          </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">
            neque dolorem ipsum quia dolor
          </td>
          <td>Enterprise Edition</td>
          <td>
            sit amet consectetur adipisci velit
          </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?1625765173" />
              </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/lindaYang-48x48.png?1625765173" />
              </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?1625765173" />
              </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/lindaYang-48x48.png?1625765173" />
              </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__stop"></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__stop"></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="top 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

Marianne Middleton

Engineer
 Active caseywatts@mail.com 2 Apps System Admin

Alondra Johnston

Engineer
 Active katherinewilkerson@gmail.com 2 Apps System Admin

Skyler Barton

Engineer
 Active carly_hall@yahoo.com 2 Apps System Admin

Abel Ross

Engineer
 Active luis-bender@hotmail.com 2 Apps System Admin

Dominick Woods

Engineer
 Disabled noeljoseph@email.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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Ciara Rosenthal
                </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>
              skylarbarton@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 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Brock Underwood
                </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>
              dwayne_baker@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 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Jackie Merritt
                </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>
              sienna-cooper@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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Nolan Holmes
                </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>
              jeanmorgan@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 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?1625765173" />
              </div>
            </div>
            <div class="adb-table--card_text adb-summary">
              <h3 class="adb-summary--title">
                <a data-truncate="line" href="../../prototype/account/user/">Shirley Hoyle
                </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>
              geraldinerich@fastmail.com
            </a>
          </td>
          <td>2 Apps</td>
          <td>System Admin</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 Sed quia non numquam eius + $9.95.00 / email Modi tempora incidunt ut labore
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 
<div class="adb-table__scrollable">
  <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 dolore magnam aliquam quaerat
              </strong>
              <span class="adb-caption">
                + $9.95.00 / email
                Voluptatem ut enim ad minima
              </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>
</div>

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 12/01/2015 veniam quis nostrum exercitationem ullam corporis nemo enim ipsam voluptatem Professional Edition Monthly $999.99
Active 12345 07/05/2015 quia voluptas sit suscipit laboriosam nisi ut aliquid ex ea Standard Edition Yearly $999.99
Pending 12345 08/07/2014 commodi consequatur quis autem vel eum iure reprehenderit qui in Basic Edition Weekly $999.99
Failed 12345 02/09/2013 ea voluptate velit esse quam nihil molestiae et iusto odio Business Edition Daily $999.99
Canceled 12345 10/11/2016 dignissimos ducimus qui blanditiis praesentium laudantium totam rem voluptatum deleniti 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>
            06/16/2015
          </td>
          <td>
            atque corrupti quos dolores et
          </td>
          <td>
            quas molestias excepturi sint occaecati
          </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>
            09/03/2014
          </td>
          <td>
            cupiditate non provident sed ut
          </td>
          <td>
            perspiciatis unde omnis iste natus
          </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>
            01/19/2013
          </td>
          <td>
            error similique sunt in culpa
          </td>
          <td>
            qui officia deserunt mollitia animi
          </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>
            01/21/2016
          </td>
          <td>
            id est laborum et dolorum
          </td>
          <td>
            fuga et harum quidem rerum
          </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>
            10/01/2016
          </td>
          <td>
            facilis est et expedita distinctio
          </td>
          <td>
            nam libero tempore cum soluta
          </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 01/02/2016 nobis est eligendi optio cumque nihil impedit quo porro quisquam $5.00
Active 03/10/2015 est qui minus id quod maxime placeat facere possimus omnis $5.00
Pending 03/02/2014 voluptas assumenda est omnis dolor repellendus temporibus autem quibusdam et $5.00
Failed 08/12/2016 aut consequatur vel illum qui dolorem eum fugiat quo voluptas $5.00
Canceled 11/04/2014 nulla pariatur at vero eos et accusamus officiis debitis aut $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>
            12/01/2015
          </td>
          <td>
            rerum necessitatibus saepe eveniet ut
          </td>
          <td>
            et voluptates repudiandae sint et
          </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>
            07/05/2015
          </td>
          <td>
            molestiae non recusandae itaque earum
          </td>
          <td>
            rerum hic tenetur a sapiente
          </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>
            08/07/2014
          </td>
          <td>
            delectus ut aut reiciendis voluptatibus
          </td>
          <td>
            maiores doloribus asperiores repellat repellat
          </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>
            02/09/2013
          </td>
          <td>
            alias consequatur aut perferendis sit
          </td>
          <td>
            voluptatem accusantium doloremque aperiam eaque
          </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>
            10/11/2016
          </td>
          <td>
            ipsa quae ab illo inventore
          </td>
          <td>
            veritatis et quasi architecto beatae
          </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">
        <a class="adb-pagination--button adb-pagination--button__prev"></a>
        <a class="adb-pagination--button adb-pagination--button__first">1</a>
        <a class="adb-pagination--button">2</a>
        <span class="adb-pagination--current">3</span>
        <a class="adb-pagination--button">4</a>
        <a class="adb-pagination--button adb-pagination--button__middle">5</a>
        <span class="adb-pagination--ellipsis"></span>
        <a class="adb-pagination--button adb-pagination--button__last">90</a>
        <a class="adb-pagination--button adb-pagination--button__next"></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
06/16/2015, 12:00 MDT Niall Rich purchased Sample Application.
09/03/2014, 12:00 MDT Kristi Grant canceled Sample Application.
01/19/2013, 12:00 MST Monty Proctor invited tammie_graham@mail.com to Sample Application.
01/21/2016, 12:00 MST Zachariah Watkins removed Fatima Hinton from Sample Application.
10/01/2016, 12:00 MDT Ruby Marsh paid $999.99 for Invoice #12345.
01/02/2016, 12:00 MST Nadia Hewitt purchased Sample Application.
03/10/2015, 12:00 MDT Anahi Branch canceled Sample Application.
03/02/2014, 12:00 MST Calum Walton invited alfredo-case@mail.com to Sample Application.
08/12/2016, 12:00 MDT Marybeth Watts removed Bonnie Christensen from Sample Application.
11/04/2014, 12:00 MST Gordon Parks paid $999.99 for Invoice #12345.
12/01/2015, 12:00 MST Cara Hardin purchased Sample Application.
07/05/2015, 12:00 MDT John Lucas canceled Sample Application.
08/07/2014, 12:00 MDT Staci Eason invited carmenwhitehead@gmail.com to Sample Application.
02/09/2013, 12:00 MST Rylee Rose removed Yehudi Sparks from Sample Application.
10/11/2016, 12:00 MDT Colm Moore paid $999.99 for Invoice #12345.
06/16/2015, 12:00 MDT Beth Pearson purchased Sample Application.
09/03/2014, 12:00 MDT Dulce Rodgers canceled Sample Application.
01/19/2013, 12:00 MST Darius Graves invited javonsutton@yahoo.com to Sample Application.
01/21/2016, 12:00 MST Jason Sinclair removed Perla Bowman from Sample Application.
10/01/2016, 12:00 MDT Wayne Olsen paid $999.99 for Invoice #12345.
01/02/2016, 12:00 MST Laila Love purchased Sample Application.
03/10/2015, 12:00 MDT Kaleigh McLean canceled Sample Application.
03/02/2014, 12:00 MST Maggie Christian invited quinn_james@hotmail.com to Sample Application.
08/12/2016, 12:00 MDT Collin Chandler removed Aniya Stout from Sample Application.
11/04/2014, 12:00 MST Zoe Cowan 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>
            12/01/2015, 12:00 MST
          </td>
          <td>
            <a>
              Isabel Golden
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            07/05/2015, 12:00 MDT
          </td>
          <td>
            <a>
              Clint Bowling
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            08/07/2014, 12:00 MDT
          </td>
          <td>
            <a>
              Leland Beasley
            </a>
            invited
            <a>
              emma-abrams@email.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            02/09/2013, 12:00 MST
          </td>
          <td>
            <a>
              Madeline Tilley
            </a>
            removed
            <a>
              Byron Morse
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/11/2016, 12:00 MDT
          </td>
          <td>
            <a>
              Courtney Boykin
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            06/16/2015, 12:00 MDT
          </td>
          <td>
            <a>
              Vanessa Sumner
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            09/03/2014, 12:00 MDT
          </td>
          <td>
            <a>
              Terry Cassidy
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/19/2013, 12:00 MST
          </td>
          <td>
            <a>
              Antoinette Davidson
            </a>
            invited
            <a>
              constanceblanchard@live.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/21/2016, 12:00 MST
          </td>
          <td>
            <a>
              Preston McAllister
            </a>
            removed
            <a>
              Rolando McKenzie
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/01/2016, 12:00 MDT
          </td>
          <td>
            <a>
              Caleb Byrne
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/02/2016, 12:00 MST
          </td>
          <td>
            <a>
              Kenneth Schroeder
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/10/2015, 12:00 MDT
          </td>
          <td>
            <a>
              Lynette Griffin
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            03/02/2014, 12:00 MST
          </td>
          <td>
            <a>
              Carley Gross
            </a>
            invited
            <a>
              johnnierobertson@me.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            08/12/2016, 12:00 MDT
          </td>
          <td>
            <a>
              Jordyn Palmer
            </a>
            removed
            <a>
              Arturo Brady
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            11/04/2014, 12:00 MST
          </td>
          <td>
            <a>
              Camila Rowe
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            12/01/2015, 12:00 MST
          </td>
          <td>
            <a>
              Skye Zhang
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            07/05/2015, 12:00 MDT
          </td>
          <td>
            <a>
              Guy Hodge
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            08/07/2014, 12:00 MDT
          </td>
          <td>
            <a>
              Ana Li
            </a>
            invited
            <a>
              nia_justice@mac.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            02/09/2013, 12:00 MST
          </td>
          <td>
            <a>
              Colton Glass
            </a>
            removed
            <a>
              Bart Willis
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/11/2016, 12:00 MDT
          </td>
          <td>
            <a>
              Brendon Hester
            </a>
            paid $999.99 for
            <a>
              Invoice #12345.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            06/16/2015, 12:00 MDT
          </td>
          <td>
            <a>
              Alvin Floyd
            </a>
            purchased
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            09/03/2014, 12:00 MDT
          </td>
          <td>
            <a>
              Daryl Graves
            </a>
            canceled
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/19/2013, 12:00 MST
          </td>
          <td>
            <a>
              Dirk Fischer
            </a>
            invited
            <a>
              pete-chan@aol.com
            </a>
            to
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            01/21/2016, 12:00 MST
          </td>
          <td>
            <a>
              Joann Hunt
            </a>
            removed
            <a>
              Uriel Byrd
            </a>
            from
            <a>
              Sample Application.
            </a>
          </td>
        </tr>
        <tr>
          <td>
            10/01/2016, 12:00 MDT
          </td>
          <td>
            <a>
              Alonzo Lane
            </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">
        <a class="adb-pagination--button adb-pagination--button__prev"></a>
        <a class="adb-pagination--button adb-pagination--button__first">1</a>
        <a class="adb-pagination--button">2</a>
        <span class="adb-pagination--current">3</span>
        <a class="adb-pagination--button">4</a>
        <a class="adb-pagination--button adb-pagination--button__middle">5</a>
        <span class="adb-pagination--ellipsis"></span>
        <a class="adb-pagination--button adb-pagination--button__last">90</a>
        <a class="adb-pagination--button adb-pagination--button__next"></a>
      </nav>
    </div>
  </div>
</div>

Alternative Table Layouts
Status ID Created Total
Paid 16925 01/02/2016 $999.99
Paid 21936 03/10/2015 $999.99
Paid 73240 03/02/2014 $999.99
Unpaid 67821 08/12/2016 $999.99
Unpaid 67821 11/04/2014 $999.99
ID Created Transaction Total
14488 12/01/2015 AB123CD4567EF89 $999.99
58901 07/05/2015 AB123CD4567EF89 $999.99
58912 08/07/2014 AB123CD4567EF89 $999.99
58912 02/09/2013 AB123CD4567EF89 $999.99
16925 10/11/2016 AB123CD4567EF89 $999.99 
<div class="adb-layout-row">
  <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">
                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>
                21936
              </td>
              <td>
                06/16/2015
              </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>
                73240
              </td>
              <td>
                09/03/2014
              </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>
                67821
              </td>
              <td>
                01/19/2013
              </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>
                67821
              </td>
              <td>
                01/21/2016
              </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>
                14488
              </td>
              <td>
                10/01/2016
              </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>
                58901
              </td>
              <td>
                01/02/2016
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                58912
              </td>
              <td>
                03/10/2015
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                58912
              </td>
              <td>
                03/02/2014
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                16925
              </td>
              <td>
                08/12/2016
              </td>
              <td>
                AB123CD4567EF89
              </td>
              <td>
                $999.99
              </td>
            </tr>
            <tr>
              <td>
                21936
              </td>
              <td>
                11/04/2014
              </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>

Table Placeholders

Container Content Placeholders

Throw a generic message here, or something specific to this empty container.

Empty Table State

Throw a generic message here, or something specific to this empty container.

<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-container_content">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <p>Throw a generic message here, or something specific to this empty container.</p>
        <button class="adb-button__primary" type="button">
          Do This Instead
        </button>
      </div>
    </div>
  </div>
</div>
<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-container_content">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <figure class="adb-placeholder--image">
          <i class="adb-icon__list"></i>
        </figure>
        <h2>Empty Table State</h2>
        <p>Throw a generic message here, or something specific to this empty container.</p>
        <button class="adb-button__primary" type="button">
          Do This Instead
        </button>
      </div>
    </div>
  </div>
</div>

Loading Placeholders
Loading...
Status ID Created Company Product Edition Frequency Total Fee
Active 12345 12/01/2015 vitae dicta sunt explicabo aspernatur aut odit aut fugit sed Professional Edition Monthly $999.99
Active 12345 07/05/2015 quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Standard Edition Yearly $999.99
Pending 12345 08/07/2014 neque dolorem ipsum quia dolor sit amet consectetur adipisci velit Basic Edition Weekly $999.99
Failed 12345 02/09/2013 sed quia non numquam eius modi tempora incidunt ut labore Business Edition Daily $999.99
Canceled 12345 10/11/2016 et dolore magnam aliquam quaerat voluptatem ut enim ad minima Enterprise Edition Hourly $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>
      </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-container_content adb-js-placeholder">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <figure class="adb-placeholder--image">
          <span class="adb-loading">
            <span class="adb-loading--text">Loading...</span>
          </span>
        </figure>
      </div>
    </div>
  </div>
  <div class="adb-table adb-js-placeholder-target adb-is-hidden">
    <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>
            06/16/2015
          </td>
          <td>
            veniam quis nostrum exercitationem ullam
          </td>
          <td>
            corporis nemo enim ipsam voluptatem
          </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>
            09/03/2014
          </td>
          <td>
            quia voluptas sit suscipit laboriosam
          </td>
          <td>
            nisi ut aliquid ex ea
          </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>
            01/19/2013
          </td>
          <td>
            commodi consequatur quis autem vel
          </td>
          <td>
            eum iure reprehenderit qui in
          </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>
            01/21/2016
          </td>
          <td>
            ea voluptate velit esse quam
          </td>
          <td>
            nihil molestiae et iusto odio
          </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>
            10/01/2016
          </td>
          <td>
            dignissimos ducimus qui blanditiis praesentium
          </td>
          <td>
            laudantium totam rem voluptatum deleniti
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_footer adb-js-placeholder-target adb-is-hidden">
    <div class="adb-container_footer--item adb-container_footer--item__last">
      <nav class="adb-pagination">
        <a class="adb-pagination--button adb-pagination--button__prev"></a>
        <a class="adb-pagination--button adb-pagination--button__first">1</a>
        <a class="adb-pagination--button">2</a>
        <span class="adb-pagination--current">3</span>
        <a class="adb-pagination--button">4</a>
        <a class="adb-pagination--button adb-pagination--button__middle">5</a>
        <span class="adb-pagination--ellipsis"></span>
        <a class="adb-pagination--button adb-pagination--button__last">90</a>
        <a class="adb-pagination--button adb-pagination--button__next"></a>
      </nav>
    </div>
  </div>
</div>
Placeholders in Tables
Status ID Created Product

Throw a generic message here, or something specific to this empty table. 

<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>Product</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--menu" colspan="4">
            <div class="adb-placeholder adb-container">
              <div class="adb-placeholder--content">
                <p>
                  Throw a generic message here, or something specific to this empty table.
                </p>
                <button class="adb-button__primary" type="button">
                  Do This Instead
                </button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>