American Express American Express |

Data Tables

Purpose

A data table organizes information from a data set into a grid. This makes data easy to compare and analyze. The base table is designed so that additional functionality can be added to meet a range of needs.

Base Table

Usage

The transaction table is our most commonly used data set. This table creates a reverse chronological list of all recent and pending transactions and activity.

Example - Base Table

The base style has ample spacing, bordered rows without column dividers, and right-aligned numerical data.

Date Description Amount
Mar 16, 2020 SAINSBURY'S ONLINE-GOL LON $8.76
Mar 16, 2020 Online Payment -$300.00
Mar 15, 2020 Music Enterprise Inc $10.67
Mar 15, 2020 Martin's News Shops Wellington $32.99
Mar 14, 2020 SWISS Intl Air LinesBasel CH $1,758.63
Copy
<div>
  <table class="table table-hover">
    <thead>
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th class="text-align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Mar 16, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">-$300.00</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Music Enterprise Inc</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr>
      <td>Mar 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$1,758.63</td>
    </tr>
    </tbody>
  </table>
</div>

Striped Table

Usage

Zebra striping can be added to tables to improve readability across long rows. Shaded rows appear on a table’s second row of data and subsequently every other row.

Example - Striped Table

Date Description Amount
Mar 16, 2020 SAINSBURY'S ONLINE-GOL LON $8.76
Mar 16, 2020 Online Payment -$300.00
Mar 15, 2020 Music Enterprise Inc $10.67
Mar 15, 2020 Martin's News Shops Wellington $32.99
Mar 14, 2020 SWISS Intl Air LinesBasel CH $1,758.63
Copy
<div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th class="text-align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Mar 16, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">-$300.00</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Music Enterprise Inc</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr>
      <td>Mar 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$1,758.63</td>
    </tr>
    </tbody>
  </table>
</div>

Bordered Table

Usage

Borders are added to all sides of each individual cell.

Example - Bordered Table

Date Description Amount
Mar 16, 2020 Macy's $8.76
Mar 16, 2020 Online Payment -$300.00
Mar 15, 2020 Apple Music $10.67
Mar 15, 2020 Starbucks $32.99
Mar 14, 2020 United Airlines $1,758.63
Copy
<div>
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th class="text-align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Macy's</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr id="row1">
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">-$300.00</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Apple Music</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Starbucks</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr>
      <td>Mar 14, 2020</td>
      <td>United Airlines</td>
      <td class="text-align-right">$1,758.63</td>
    </tr>
    </tbody>
  </table>
</div>

Small Table

Usage

Use a small table when working with limited space or when consolidated data is more user friendly. Use Row Height Small padding when designing and .table-sm when developing.

Example - Small Table

Date Description Amount
Mar 16, 2020 Macy's $8.76
Mar 16, 2020 Online Payment -$300.00
Mar 15, 2020 Apple Music $10.67
Mar 15, 2020 Starbucks $32.99
Mar 14, 2020 United Airlines $1,758.63
Copy
<div>
  <table class="table table-sm">
    <thead>
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th class="text-align-right">Amount</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Macy's</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr id="row2">
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">-$300.00</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Apple Music</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Starbucks</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr>
      <td>Mar 14, 2020</td>
      <td>United Airlines</td>
      <td class="text-align-right">$1,758.63</td>
    </tr>
    </tbody>
  </table>
</div>

Sortable Table

Usage

Use a sortable table when comparing data beyond a linear list. The sort glyph in the header row is to the right of every column label. For consistency and legibility, numerical data is right aligned and column headers are left aligned. To meet minimum target size, sortable columns need a minimum width of 44x44px.

DLS.js provides built-in functionality for alphabetic and numeric sorting. If custom sorting is needed for one or more columns, create the component JS instance manually and pass the custom function as a configuration option. See coded example for date sorting below:

Example - Sortable Table
Jan 05, 2020 SAINSBURY'S ONLINE-GOL LON $8.76
Mar 16, 2020 Online Payment $300
Oct 01, 2020 Music Enterprise In $10.67
Mar 15, 2020 Martin's News Shops Wellington $32.99
Apr 14, 2020 SWISS Intl Air LinesBasel CH $5,000.00
Copy
<div>
  <table
    aria-describedby="table-sortable-status"
    aria-labelledby="table-caption"
    class="tableCustomSort table table-bordered"
  >
    <thead>

    <tr>
      <th scope="col" class="th-sort" aria-sort="descending" data-custom-sort="sortdate">
        <button class="th-sort-button">
          Date
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" class="active th-sort" aria-sort="ascending">
        <button class="active th-sort-button">
          Description
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Amount
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Jan 05, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">$300</td>
    </tr>
    <tr>
      <td>Oct 01, 2020</td>
      <td>Music Enterprise In</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr>
      <td>Apr 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$5,000.00</td>
    </tr>

    </tbody>
  </table>
  <div class="sr-only" id="table-sortable-status" role="status"></div>

</div>

<script>
  /* If custom sorting is needed for one or more columns, create the component's JS instance manually and pass the custom function as a configuration option. */
  var tableCustomSort = DLS.create('datatable', {
    target: document.querySelector('.tableCustomSort'),
    /* config - source is needed, all others optional */
    config: {
      /* Name the function here, than pass as a data attribute to the column head (ex: data-custom-sort="sortdate") */
      sortdate: (a, b, order) => {
        const dateA = new Date(a);
        const dateB = new Date(b);

        if(order === 'ascending') {
          return dateA - dateB;
        } else {
          return dateB - dateA;
        }
      }
    }
  });
</script>

Checkbox Table

Usage

A checkbox table allows customers to select multiple items in a table before performing a batch action. To meet minimum target size, the checkbox column and any sortable columns have a minimum width of 44x44px.

Example - Checkbox Table

 Date
Jan 05, 2020 SAINSBURY'SONLINEGOLLONCHARGES $8.76 $1.06 $0.76 45687990
Mar 16, 2020 Online Payment $300 $11.00 $1.96 15687990
Oct 01, 2020 Music Enterprise In $10.67 $1.01 $3.06 55655990
Mar 15, 2020 Martin's News Shops Wellington $32.99 $0.00 $2.96 95687991
Apr 14, 2020 SWISS Intl Air LinesBasel CH $5,000.00 $141.00 $14.99 45681990
Copy
<div class="scroll-x" data-toggle="checkboxgroup">
  <table
    aria-describedby="table-checkbox-status"
    aria-labelledby="table-caption"
    class="table table-bordered"
    data-toggle="datatable"
  >
    <thead>

    <tr>
      <td
        scope="col"
        class="checkable"
      >
        <div class="checkbox">
          <input id="header-checkbox1" data-indeterminate type="checkbox"
                 aria-checked="mixed"/>
          <label for="header-checkbox1"><span class="sr-only">Select All</span></label>
        </div>
      </td>
      <th
        scope="col">Date
      </th>
      <th scope="col" class="active th-sort" aria-sort="ascending">
        <button class="active th-sort-button">
          Description
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Total Charges
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Discount Amount
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Submission Fees
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Account Number
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="sains-checkbox1" type="checkbox" checked/>
          <label for="sains-checkbox1"><span class="sr-only">Sainbury's</span></label>
        </div>
      </td>
      <td class="text-nowrap">Jan 05, 2020</td>
      <td>SAINSBURY'SONLINEGOLLONCHARGES</td>
      <td class="text-align-right">$8.76</td>
      <td class="text-align-right">$1.06</td>
      <td class="text-align-right">$0.76</td>
      <td class="text-align-right">45687990</td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="online-pay-checkbox1" type="checkbox"/>
          <label for="online-pay-checkbox1"><span class="sr-only">Online Payment</span></label>
        </div>
      </td>
      <td class="text-nowrap">Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">$300</td>
      <td class="text-align-right">$11.00</td>
      <td class="text-align-right">$1.96</td>
      <td class="text-align-right">15687990</td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="music-ent-checkbox1" type="checkbox"/>
          <label for="music-ent-checkbox1"><span class="sr-only">Music Enterprise</span></label>
        </div>
      </td>
      <td class="text-nowrap">Oct 01, 2020</td>
      <td>Music Enterprise In</td>
      <td class="text-align-right">$10.67</td>
      <td class="text-align-right">$1.01</td>
      <td class="text-align-right">$3.06</td>
      <td class="text-align-right">55655990</td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="martin-checkbox1" type="checkbox" checked/>
          <label for="martin-checkbox1"><span class="sr-only">Martin News</span></label>
        </div>
      </td>
      <td class="text-nowrap">Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
      <td class="text-align-right">$0.00</td>
      <td class="text-align-right">$2.96</td>
      <td class="text-align-right">95687991</td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="swiss-air-checkbox1" type="checkbox"/>
          <label for="swiss-air-checkbox1"><span class="sr-only">SWISS Intl Air</span></label>
        </div>
      </td>
      <td class="text-nowrap">Apr 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$5,000.00</td>
      <td class="text-align-right">$141.00</td>
      <td class="text-align-right">$14.99</td>
      <td class="text-align-right">45681990</td>
    </tr>

    </tbody>
  </table>
  <div class="sr-only" id="table-checkbox-status" role="status"></div>

</div>

Expandable Table

Usage

Accordions are useful for showing large amounts of data in a limited space. Clicking/tapping on the glyph will expand or collapse the row. Data values can be selected by double-clicking or highlighting for copying. To meet minimum target size, the accordion button column and any sortable columns have a minimum width of 44x44px.

Example - Expandable Table

Date
Jan 05, 2020 SAINSBURY'S ONLINE-GOL LON $8.76
Mar 16, 2020 Online Payment $300
Oct 01, 2020 Music Enterprise In $10.67
Mar 15, 2020 Martin's News Shops Wellington $32.99
Apr 14, 2020 SWISS Intl Air LinesBasel CH $5,000.00
Copy
<div>
  <table
    aria-describedby="table-expandable-status"
    aria-labelledby="table-caption"
    class="table table-bordered"
    data-toggle="datatable"
  >
    <thead>

    <tr>
      <th class="expand"></th>
      <th
        scope="col">Date
      </th>
      <th scope="col" class="active th-sort" aria-sort="ascending">
        <button class="active th-sort-button">
          Description
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Amount
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

    </tr>
    </thead>
    <tbody>
    <tr class="expandable-row" id="sains-row1">
      <td class="expand">
        <button id="expandable1" data-toggle="accordion" aria-label="Expand SAINSBURY'S ONLINE-GOL LON" aria-expanded="false" class="collapsible icon-hover">
          <span class="collapsible-caret"></span>
        </button>
      </td>
      <td>Jan 05, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr data-expand-id="sains-row1">
      <td class="expanded-section dls-gray-01-bg" colspan="6">
        <div class="accordion-content display-none" aria-labelledby="expandable1">
          <div class="col-md-8 pad-3 flex flex-justify-between">
            <p>SAINSBURY'S ONLINE-GOL LON expanded</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="expand"></td>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">$300</td>
    </tr>
    <tr>
      <td class="expand"></td>
      <td>Oct 01, 2020</td>
      <td>Music Enterprise In</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr class="expandable-row" id="martinnews-row1">
      <td class="expand">
        <button id="expandable2" data-toggle="accordion" aria-label="Expand Martin's News Shops Wellington" aria-expanded="false" class="collapsible icon-hover">
          <span class="collapsible-caret"></span>
        </button>
      </td>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr data-expand-id="martinnews-row1">
      <td class="expanded-section dls-gray-01-bg" colspan="6">
        <div class="accordion-content display-none" aria-labelledby="expandable2">
          <div class="col-md-8 pad-3 flex flex-justify-between">
            <p>Martin's News Shops Wellington expanded</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="expand"></td>
      <td>Apr 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$5,000.00</td>
    </tr>

    </tbody>
  </table>
  <div class="sr-only" id="table-expandable-status" role="status"></div>

</div>

Expandable Checkbox Table

Usage

Tables can build functionality up to fit nearly any need. Combine functionality like sorting, checkboxes for bulk actions, expand/collapse for more details, and more. To meet minimum target size, the checkbox column, accordion button column and any sortable columns have a minimum width of 44x44px.

Example - Expandable Checkbox Table

 Date
Jan 05, 2020 SAINSBURY'S ONLINE-GOL LON $8.76
Mar 16, 2020 Online Payment $300
Oct 01, 2020 Music Enterprise In $10.67
Mar 15, 2020 Martin's News Shops Wellington $32.99
Apr 14, 2020 SWISS Intl Air LinesBasel CH $5,000.00
Copy
<div class="scroll-x" data-toggle="checkboxgroup">
  <table
    aria-describedby="table-expandable-checkbox-status"
    aria-labelledby="table-caption"
    class="tableCustomSort table table-bordered"
    data-toggle="datatable"
  >
    <thead>

    <tr>
      <td
        scope="col"
        class="checkable"
      >
        <div class="checkbox">
          <input id="header-checkbox2" data-indeterminate type="checkbox"
                 aria-checked="mixed"/>
          <label for="header-checkbox2"><span class="sr-only">Select All</span></label>
        </div>
      </td>

      <th class="expand"></th>
      <th
        scope="col">Date
      </th>
      <th scope="col" class="active th-sort" aria-sort="ascending">
        <button class="active th-sort-button">
          Description
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Amount
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>

    </tr>
    </thead>
    <tbody>
    <tr class="expandable-row" id="sains-row2">
      <td class="checkable">
        <div class="checkbox">
          <input id="sains-checkbox2" type="checkbox" checked/>
          <label for="sains-checkbox2"><span class="sr-only">Sainbury's</span></label>
        </div>
      </td>
      <td class="expand">
        <button id="expand-sains" data-toggle="accordion" aria-label="Expand SAINSBURY'S ONLINE-GOL LON" aria-expanded="false" class="collapsible icon-hover">
          <span class="collapsible-caret"></span>
        </button>
      </td>
      <td>Jan 05, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
    </tr>
    <tr data-expand-id="sains-row2">
      <td class="expanded-section dls-gray-01-bg" colspan="6">
        <div class="accordion-content display-none" aria-labelledby="expand-sains">
          <div class="col-md-8 pad-3 flex flex-justify-between">
            <p>SAINSBURY'S ONLINE-GOL LON expanded</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="online-pay-checkbox2" type="checkbox"/>
          <label for="online-pay-checkbox2"><span class="sr-only">Online Payment</span></label>
        </div>
      </td>

      <td class="expand"></td>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">$300</td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="music-ent-checkbox2" type="checkbox"/>
          <label for="music-ent-checkbox2"><span class="sr-only">Music Enterprise</span></label>
        </div>
      </td>
      <td class="expand"></td>
      <td>Oct 01, 2020</td>
      <td>Music Enterprise In</td>
      <td class="text-align-right">$10.67</td>
    </tr>
    <tr class="expandable-row" id="martinnews-row2">
      <td class="checkable">
        <div class="checkbox">
          <input id="martin-checkbox2" type="checkbox" checked/>
          <label for="martin-checkbox2"><span class="sr-only">Martin News</span></label>
        </div>
      </td>
      <td class="expand">
        <button id="expand-martinnews" data-toggle="accordion" aria-label="Expand Martin's News Shops Wellington" aria-expanded="false" class="collapsible icon-hover">
          <span class="collapsible-caret"></span>
        </button>
      </td>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
    </tr>
    <tr data-expand-id="martinnews-row2">
      <td class="expanded-section dls-gray-01-bg" colspan="6">
        <div class="accordion-content display-none" aria-labelledby="expand-martinnews">
          <div class="col-md-8 pad-3 flex flex-justify-between">
            <p>Martin's News Shops Wellington expanded</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="checkable">
        <div class="checkbox">
          <input id="swiss-air-checkbox2" type="checkbox"/>
          <label for="swiss-air-checkbox2"><span class="sr-only">SWISS Intl Air</span></label>
        </div>
      </td>

      <td class="expand"></td>
      <td>Apr 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$5,000.00</td>
    </tr>

    </tbody>
  </table>
  <div class="sr-only" id="table-expandable-checkbox-status" role="status"></div>

</div>

Actionable Table

Usage

Use the Overflow Menu component to trigger specific actions to a row. This should be used when there are three or more options. To meet minimum target size, the overflow menu column and any sortable columns have a minimum width of 44x44px.

Use descriptive icons if there are fewer than three options. For example, “edit”, and “delete”.

Example - Actionable Table

Copy
<div>
  <table
    aria-describedby="table-actionable-status"
    aria-labelledby="table-caption"
    class="table table-bordered"
    data-toggle="datatable"
  >
    <thead>

    <tr>
      <th
        scope="col">Date
      </th>
      <th scope="col" class="active th-sort" aria-sort="ascending">
        <button class="active th-sort-button">
          Description
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th scope="col" aria-sort="descending" class="th-sort">
        <button class="th-sort-button text-align-right">
          Amount
          <span class="glyph glyph-sm th-sort-icon" aria-label="sort">
            <i data-dls-glyph="sort-down" title="Sort icon"></i>
          </span>
        </button>
      </th>
      <th></th>

    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Jan 05, 2020</td>
      <td>SAINSBURY'S ONLINE-GOL LON</td>
      <td class="text-align-right">$8.76</td>
      <td class="overflow min-width-cell">
        <div class="overflow-menu" data-toggle="overflowmenu">
          <button
            class="flex flex-align-items-center pad-1 focus-dark-inner"
            id="overflow1"
            aria-label="SAINSBURY'S ONLINE-GOL LON Actions"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
          </button>
          <ul class="border bordered" aria-labelledby="overflow1">
            <li><button>Edit</button></li>
            <li><button>Copy</button></li>
            <li><button>Move</button></li>
            <li><button>Delete</button></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Mar 16, 2020</td>
      <td>Online Payment</td>
      <td class="text-align-right">$300</td>
      <td class="overflow min-width-cell">
        <div class="overflow-menu" data-toggle="overflowmenu">
          <button
            class="flex flex-align-items-center pad-1 focus-dark-inner"
            id="overflow2"
            aria-label="Online Payment Actions"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
          </button>
          <ul class="border bordered" aria-labelledby="overflow2">
            <li><button>Edit</button></li>
            <li><button>Copy</button></li>
            <li><button>Move</button></li>
            <li><button>Delete</button></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Oct 01, 2020</td>
      <td>Music Enterprise In</td>
      <td class="text-align-right">$10.67</td>
      <td class="overflow min-width-cell">
        <div class="overflow-menu" data-toggle="overflowmenu">
          <button
            class="flex flex-align-items-center pad-1 focus-dark-inner"
            id="overflow3"
            aria-label="Music Enterprise In Actions"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
          </button>
          <ul class="border bordered" aria-labelledby="overflow3">
            <li><button>Edit</button></li>
            <li><button>Copy</button></li>
            <li><button>Move</button></li>
            <li><button>Delete</button></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Mar 15, 2020</td>
      <td>Martin's News Shops Wellington</td>
      <td class="text-align-right">$32.99</td>
      <td class="overflow min-width-cell">
        <div class="overflow-menu" data-toggle="overflowmenu">
          <button
            class="flex flex-align-items-center pad-1 focus-dark-inner"
            id="overflow4"
            aria-label="Martin's News Shops Wellington Actions"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
          </button>
          <ul class="border bordered" aria-labelledby="overflow4">
            <li><button>Edit</button></li>
            <li><button>Copy</button></li>
            <li><button>Move</button></li>
            <li><button>Delete</button></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Apr 14, 2020</td>
      <td>SWISS Intl Air LinesBasel CH</td>
      <td class="text-align-right">$5,000.00</td>
      <td class="overflow min-width-cell">
        <div class="overflow-menu" data-toggle="overflowmenu">
          <button
            class="flex flex-align-items-center pad-1 focus-dark-inner"
            id="overflow5"
            aria-label="SWISS Intl Air LinesBasel CH Actions"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
          </button>
          <ul class="border bordered" aria-labelledby="overflow5">
            <li><button>Edit</button></li>
            <li><button>Copy</button></li>
            <li><button>Move</button></li>
            <li><button>Delete</button></li>
          </ul>
        </div>
      </td>
    </tr>

    </tbody>
  </table>
  <div class="sr-only" id="table-actionable-status" role="status"></div>

</div>

Styles

Class Name Description
.table Styles the table's background color, typography, and spacing.
.table-row-link Darkens the background color of the row on hover with cursor pointer.
.table-hover Sets the hover state for all rows of table without cursor pointer.
.table-striped Sets every other row’s background color to light gray starting with the first.
.table-bordered Adds a light gray border around all table cells.
.table-sm Reduces font size and padding for a table.

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name Options Description
data-toggle datatable Creates a data table object; required for functionality using dls.js.
data-toggle checkboxgroup Creates a checkbox group object. Can be used on a parent element containing a data table to activate checkbox rows.
data-toggle accordion Creates an accordion object. Can be used in a data table to create an expandable row.
aria-sort ascending/descending Can be placed on a table header cell to make the column sortable.
data-custom-sort Defined by developer Used to indicate a custom sort function for that column. Custom functions can be provided through the configuration object. See 'Date' column in the first Sortable Table example for specific instructions.