Skip to main content
Data tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.

Data table

Table title

3 items selected

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--data-table-v2-container" data-table-v2>
  <h4 class="bx--data-table-v2-header">Table title</h4>
  <section class="bx--table-toolbar">
      <div class="bx--batch-actions" aria-label="Table Action Bar">
        <div class="bx--action-list">
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
        </div>
        <div class="bx--batch-summary">
          <p class="bx--batch-summary__para">
          <span data-items-selected>3</span> items selected
        </p>
          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
        </div>
      </div>

    <div class="bx--toolbar-search-container">
      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
            fill-rule="nonzero" />
        </svg>
        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
              fill-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

      <div class="bx--toolbar-content">
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14"
    aria-label="Download" alt="Download">
    <title>Download</title>
    <path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path>
    <path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path>
  </svg>

          </button>
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16"
    aria-label="Edit" alt="Edit">
    <title>Edit</title>
    <path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path>
  </svg>

          </button>
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15"
    aria-label="Settings" alt="Settings">
    <title>Settings</title>
    <path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path>
    <path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path>
  </svg>

          </button>

        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
      </div>
  </section>

<table class="bx--data-table-v2 bx--data-table-v2--zebra">
  <thead>
    <tr>
        <th>
            <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
            <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
        </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Name</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Protocol</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Port</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Rule</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Attached Groups</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Status</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
        </th>
    </tr>
  </thead>
  <tbody>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 1</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
                <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
                <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
                <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
  </tbody>
</table>

</div>

Expandable data table

Table title

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active

Harry Potter

Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents as they tried to protect him, shortly before attacking Harry.

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active

Harry Potter

Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents as they tried to protect him, shortly before attacking Harry.

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--data-table-v2-container" data-table-v2>
  <h4 class="bx--data-table-v2-header">Table title</h4>
  <section class="bx--table-toolbar">

    <div class="bx--toolbar-search-container">
      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
            fill-rule="nonzero" />
        </svg>
        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
              fill-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

  </section>

<table class="bx--data-table-v2">
  <thead>
    <tr>
        <th>
              <span class="bx--table-header-label"></span>
                              </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Name</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Protocol</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Ports</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Rule</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Attached Groups</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Status</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="" alt="">
                  <title></title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
    </tr>
  </thead>
  <tbody>
      <tr class="bx--parent-row-v2" data-parent-row>
              <td class="bx--table-expand-v2" data-event="expand">
                <button class="bx--table-expand-v2__button">
                  <svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
                    <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
                  </svg>
                </button>
              </td>
              <td>Load Balancer 1</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
          <td colspan="7">
            
      <h4>
        <strong>Harry Potter</strong>
      </h4>
      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
        as they tried to protect him, shortly before attacking Harry.</p>
    
          </td>
        </tr>
      <tr class="bx--parent-row-v2" data-parent-row>
              <td class="bx--table-expand-v2" data-event="expand">
                <button class="bx--table-expand-v2__button">
                  <svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
                    <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
                  </svg>
                </button>
              </td>
              <td>Load Balancer 1</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
        <tr class="bx--expandable-row-v2 bx--expandable-row--hidden-v2" data-child-row>
          <td colspan="7">
            
      <h4>
        <strong>Harry Potter</strong>
      </h4>
      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
        as they tried to protect him, shortly before attacking Harry.</p>
    
          </td>
        </tr>
  </tbody>
</table>

</div>

Data table with pagination

Table title

3 items selected

Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Items per page:
1-10 of 40 items
1 of 4 pages

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--data-table-v2-container" data-table-v2>
  <h4 class="bx--data-table-v2-header">Table title</h4>
  <section class="bx--table-toolbar">
      <div class="bx--batch-actions" aria-label="Table Action Bar">
        <div class="bx--action-list">
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
            <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
              Ghost
              
  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>

            </button>
        </div>
        <div class="bx--batch-summary">
          <p class="bx--batch-summary__para">
          <span data-items-selected>3</span> items selected
        </p>
          <button data-event="action-bar-cancel" class="bx--batch-summary__cancel">Cancel</button>
        </div>
      </div>

    <div class="bx--toolbar-search-container">
      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
            fill-rule="nonzero" />
        </svg>
        <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
        <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
        <button class="bx--search-close bx--search-close--hidden" title="Clear search input" aria-label="Clear search input">
          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
              fill-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

      <div class="bx--toolbar-content">
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14"
    aria-label="Download" alt="Download">
    <title>Download</title>
    <path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path>
    <path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path>
  </svg>

          </button>
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16"
    aria-label="Edit" alt="Edit">
    <title>Edit</title>
    <path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path>
  </svg>

          </button>
          <button class="bx--toolbar-action">
            
  <svg class="bx--toolbar-action__icon"
    fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15"
    aria-label="Settings" alt="Settings">
    <title>Settings</title>
    <path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path>
    <path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path>
  </svg>

          </button>

        <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
      </div>
  </section>

<table class="bx--data-table-v2 bx--data-table-v2--zebra">
  <thead>
    <tr>
        <th>
            <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
            <label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name"></label>
        </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Name</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Protocol</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Port</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Rule</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Attached Groups</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
              <button class="bx--table-sort-v2" data-event="sort">
                <span class="bx--table-header-label">Status</span>
                <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5" aria-label="Sort rows by this header in descending order" alt="Sort rows by this header in descending order">
                  <title>Sort rows by this header in descending order</title>
                  <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
                </svg>
              </button>
                  </th>
        <th>
        </th>
    </tr>
  </thead>
  <tbody>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
                <label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 1</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
                <label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
                <label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
                <label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
      <tr>
              <td>
                <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
                <label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name"></label>
              </td>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                          <td class="bx--table-overflow">
                <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
                    <g fill-rule="evenodd">
                      <circle cx="1.5" cy="1.5" r="1.5" />
                      <circle cx="1.5" cy="7.5" r="1.5" />
                      <circle cx="1.5" cy="13.5" r="1.5" />
                    </g>
                  </svg>
                  <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Stop app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Restart app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Rename app</button>
                      </li>
                      <li class="bx--overflow-menu-options__option">
                        <button class="bx--overflow-menu-options__btn">Edit routes and access, use title when</button>
                      </li>
                      <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                        <button class="bx--overflow-menu-options__btn">Delete app</button>
                      </li>
                  </ul>
                </div>
              </td>
      </tr>
  </tbody>
</table>

</div>
  <div class="bx--pagination" data-pagination>
    <div class="bx--pagination__left">
      <span class="bx--pagination__text">Items per page:</span>
      <div class="bx--select bx--select--inline">
        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
        <select id="select-id-pagination" class="bx--select-input" data-items-per-page>
          <option class="bx--select-option" value="10" selected>10</option>
          <option class="bx--select-option" value="20">20</option>
          <option class="bx--select-option" value="30">30</option>
          <option class="bx--select-option" value="40">40</option>
          <option class="bx--select-option" value="50">50</option>
        </select>
        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </div>
      <span class="bx--pagination__text">
        <span>|&nbsp;</span>
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>40</span> items</span>
    </div>
    <div class="bx--pagination__right bx--pagination--inline">
      <span class="bx--pagination__text">
        <span data-displayed-page-number>1</span> of
        <span data-total-pages>4</span> pages</span>
      <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
          <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
        </svg>
      </button>
      <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
      <div class="bx--select bx--select--inline">
        <label for="select-id-pagination" class="bx--visually-hidden">Number of items per page</label>
        <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
          <option class="bx--select-option" value="1" selected>1</option>
          <option class="bx--select-option" value="2">2</option>
          <option class="bx--select-option" value="3">3</option>
          <option class="bx--select-option" value="4">4</option>
          <option class="bx--select-option" value="5">5</option>
        </select>
        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </div>
      <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
        <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
          <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
        </svg>
      </button>
    </div>
  </div>

Small data table

Name Protocol Port Rule Attached Groups Status
Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->


<table class="bx--data-table-v2 bx--data-table-v2--compact">
  <thead>
    <tr>
        <th>
              <span class="bx--table-header-label">Name</span>
                              </th>
        <th>
              <span class="bx--table-header-label">Protocol</span>
                              </th>
        <th>
              <span class="bx--table-header-label">Port</span>
                              </th>
        <th>
              <span class="bx--table-header-label">Rule</span>
                              </th>
        <th>
              <span class="bx--table-header-label">Attached Groups</span>
                              </th>
        <th>
              <span class="bx--table-header-label">Status</span>
                              </th>
    </tr>
  </thead>
  <tbody>
      <tr>
              <td>Load Balancer 1</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
      <tr>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
      <tr>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
      <tr>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
      <tr>
              <td>Load Balancer 5</td>
                          <td>HTTP</td>
                          <td>80</td>
                          <td>Round Robin</td>
                          <td>Maureen&#x27;s VM Groups</td>
                          <td>Active</td>
                  </tr>
  </tbody>
</table>


Toolbar

  • FILTER BY

  • ROW HEIGHT
  • Select table row height

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--toolbar" data-toolbar>
  <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
    <label for="search__input" class="bx--label">Search</label>
    <input type="text" class="bx--search-input" id="search__input" placeholder="Search">
    <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
            fill-rule="nonzero" />
        </svg>
    </button>
    <button class="bx--search-close bx--search-close--hidden" title="Clear search
        input" aria-label="Clear search input">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
            fill-rule="evenodd" />
        </svg>
    </button>
  </div>
  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
      <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="16" height="12" viewBox="0 0 16 12">
        <g fill-rule="nonzero">
          <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
          />
        </g>
      </svg>
    <ul class="bx--overflow-menu-options">
      <li class="bx--toolbar-menu__title">FILTER BY</li>
        <li class="bx--toolbar-menu__option">
          <input id="filter-option-1" class="bx--checkbox" type="checkbox" value="filter-option-1" name="checkbox">
          <label for="filter-option-1" class="bx--checkbox-label">
            <span class="bx--checkbox-appearance">
              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
              </svg>
            </span>
            Filter option 1
          </label>
        </li>
        <li class="bx--toolbar-menu__option">
          <input id="filter-option-2" class="bx--checkbox" type="checkbox" value="filter-option-2" name="checkbox">
          <label for="filter-option-2" class="bx--checkbox-label">
            <span class="bx--checkbox-appearance">
              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
              </svg>
            </span>
            Filter option 2
          </label>
        </li>
        <li class="bx--toolbar-menu__option">
          <input id="filter-option-3" class="bx--checkbox" type="checkbox" value="filter-option-3" name="checkbox">
          <label for="filter-option-3" class="bx--checkbox-label">
            <span class="bx--checkbox-appearance">
              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
              </svg>
            </span>
            Filter option 3
          </label>
        </li>
    </ul>
  </div>
  <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
        <circle cx="2" cy="2" r="2"></circle>
        <circle cx="2" cy="10" r="2"></circle>
        <circle cx="2" cy="18" r="2"></circle>
      </svg>
    <ul class="bx--overflow-menu-options">
      <li class="bx--overflow-menu-options__option">
        <button type="button" class="bx--overflow-menu-options__btn">Refresh table</button>
      </li>
      <hr class="bx--toolbar-menu__divider" />
      <li class="bx--toolbar-menu__title">ROW HEIGHT</li>
      <fieldset data-row-height class="bx--radio-button-group">
        <legend class="bx--visually-hidden">Select table row height</legend>
          <li class="bx--toolbar-menu__option">
            <input id="short-rows" class="bx--radio-button" type="radio" value="short" name="radio" checked>
            <label for="short-rows" class="bx--radio-button__label">
              <span class="bx--radio-button__appearance"></span>
              Short
            </label>
          </li>
          <li class="bx--toolbar-menu__option">
            <input id="tall-rows" class="bx--radio-button" type="radio" value="tall" name="radio">
            <label for="tall-rows" class="bx--radio-button__label">
              <span class="bx--radio-button__appearance"></span>
              Tall
            </label>
          </li>
      </fieldset>
    </ul>
  </div>
</div>

Documentation

SCSS

The update to tables splits out the scss files into multiple partial files with specific functionality, with a main index file bringing them together.

Files

Name Description
data-tables index file, brings in all functionality
data-table-v2-core Core styles and base modifiers, required
data-table-v2-action Action bar styles
data-table-v2-expandable Expandable row styles
data-table-v2-sort Sortable header styles

Modifiers

Name Description
bx--data-table-v2--compact Change table row height to 24
bx--data-table-v2--short Change table row height to 32
bx--data-table-v2--tall Change table row height to 64
bx--data-table-v2--zebra Toggle on zebra striping
bx--data-table-v2--static Change default table width from 100% to auto
bx--data-table-v2--no-border Remove default border on table cells

JavaScript

Getting component class reference

ES2015
import { DataTableV2 } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var DataTableV2 = CarbonComponents.DataTableV2;

Instantiating

// `#my-data-table-v2` is an element with `[data-data-table-v2]` attribute
DataTableV2.create(document.getElementById('my-data-table-v2'));

Public Methods

Name Params Descriptions
release Deletes the instance and removes document event listeners
refreshRows When adding in new table rows, reinitialize parent-child relationships. Not required if not using expandable rows
Example - Keeping data table in sync with dynamic change in rows list (For expantable table)
// `#my-data-table-v2` is an element with `[data-data-table-v2]` attribute
var dataTableV2Instance = DataTableV2.create(document.getElementById('my-data-table-v2'));
dataTableV2Instance.refreshRows();

Events

Key Value Description
eventBeforeExpand data-table-v2-beforetoggleexpand Row expansion event
eventAfterExpand data-table-v2-aftertoggleexpand Row expansion event
eventBeforeSort data-table-v2-beforetogglesort Sort event
eventAfterSort data-table-v2-aftertogglesort Sort event
eventTrigger [data-event] Data attribute for clickable events
eventParentContainer [data-parent-row] Data attribute for event container
Example - Preventing a table expando from being toggled in a certain condition
document.addEventListener('data-table-v2-beforetoggleexpand', function(evt) {
  if (!myApplication.shouldToggleExpando(evt.target)) {
    evt.preventDefault();
  }
});
Example - Sorting table content
document.addEventListener('data-table-v2-aftertogglesort', function(evt) {
  // `evt.target` will be `div.bx--data-table-v2-container`
  // `evt.detail.element` will be `button.bx--table-sort-v2` whose sorting is changed,
  // and will have `bx--table-sort-v2--ascending` class or not depending on the sorting state
  evt.target.querySelector('tbody').innerHTML = myApplication.resortTableContent(evt.target, evt.detail.element);
});

Options

Key Value Description
selectorInit [data-table-v2] Required css class to target table element
selectorToolbar .bx--table--toolbar Toolbar parent selector
selectorActions .bx--batch-actions Action bar parent selector
selectorCount [data-items-selected] Selected count span selector
selectorActionCancel .bx--batch-summary__cancel Action cancel button selector
selectorCheckbox .bx--checkbox Checkbox class selector
selectorExpandCells .bx--table-expand-v2 Expand td selector
selectorExpandableRows .bx--expandable-row-v2 Expand tr selector
selectorParentRows .bx--parent-row-v2 Parent row selector
selectorChildRow [data-child-row] Child row selector
selectorTableBody tbody Generic tbody selector
classExpandableRow bx--expandable-row-v2 Expandable Row parent class
classExpandableRowHidden bx--expandable-row--hidden-v2 Initial hidden class
classExpandableRowHover bx--expandable-row--hover-v2 Hover styles class
classTableSortAscending bx--table-sort-v2--ascending Ascending sort icon class
classTableSortActive bx--table-sort-v2--active Active sort icon class

FAQ

How do I sort the tables The table component does not sort the table for you, rather it emits an event and toggles the sort UI. It is up to the user to re-render the table rows sorted; you can see this in action in the React Storybook.

How do I use the expandable rows If you would like to programmatically expand table rows, you can add the bx--expandable-row-v2 to the selectorParentRows elements.

How do I activate the batch actions pane If you would like to programmatically activate the batch actions pane, you can add bx--batch-actions--active to the bx--batch-actions element.