carbon-components/src/components/data-table-v2/data-table-v2--pagination.html

Carbon Components is a component library for IBM Cloud

<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" fill-rule="evenodd">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
          </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" fill-rule="evenodd">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
          </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" fill-rule="evenodd">
            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
          </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" role="search">
        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
        </svg>
        <label id="search-input-label-10" class="bx--label" for="search__input-10">Filter table</label>
        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Filter table" aria-labelledby="search-input-label-10">
        <svg class="bx--search-close bx--search-close--hidden" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
        </svg>
      </div>
    </div>

    <div class="bx--toolbar-content">
      <button class="bx--toolbar-action">
        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
        </svg>
      </button>

      <button class="bx--toolbar-action">
        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
        </svg>
      </button>

      <button class="bx--toolbar-action">
        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
          />
        </svg>
      </button>

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


  </section>
  <table class="bx--data-table-v2">
    <thead>
      <tr>
        <th>
          <input data-event="select-all" id="bx--checkbox-90" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
          <label for="bx--checkbox-90" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </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' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="bx--table-sort-v2" data-event="sort">
            <span>Protocol</span>
            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="bx--table-sort-v2" data-event="sort">
            <span>Something</span>
            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="bx--table-sort-v2" data-event="sort">
            <span>Rule</span>
            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="bx--table-sort-v2" data-event="sort">
            <span>Attached Groups</span>
            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="bx--table-sort-v2" data-event="sort">
            <span>Status</span>
            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
              <path d='M10 0L5 5 0 0z'></path>
            </svg>
          </button>
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input data-event="select" id="bx--checkbox-91" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
          <label for="bx--checkbox-91" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </label>
        </td>
        <td>Load Balancer 1</td>
        <td>HTTP</td>
        <td>80</td>
        <td>Round Robin</td>
        <td>Maureen'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="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 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 class="expandable-row">
        <td>
          <input data-event="select" id="bx--checkbox-92" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
          <label for="bx--checkbox-92" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </label>
        </td>
        <td>Load Balancer 5</td>
        <td>HTTP</td>
        <td>80</td>
        <td>Round Robin</td>
        <td>Maureen'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="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 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-93" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
          <label for="bx--checkbox-93" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </label>
        </td>
        <td>Load Balancer 5</td>
        <td>HTTP</td>
        <td>80</td>
        <td>Round Robin</td>
        <td>Maureen'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="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 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-94" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
          <label for="bx--checkbox-94" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </label>
        </td>
        <td>Load Balancer 5</td>
        <td>HTTP</td>
        <td>80</td>
        <td>Round Robin</td>
        <td>Maureen'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="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 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-95" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
          <label for="bx--checkbox-95" class="bx--checkbox-label" aria-label="Label name">
            <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>
          </label>
        </td>
        <td>Load Balancer 5</td>
        <td>HTTP</td>
        <td>80</td>
        <td>Round Robin</td>
        <td>Maureen'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="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 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" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </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="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
      </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" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </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="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
      </svg>
    </button>
  </div>
</div>