carbon-components/src/components/data-table-v2/data-table-v2-expandable.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>
  <div class="bx--table-toolbar">
    <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">Search</label>
        <input class="bx--search-input" type="text" id="search__input-10" role="search" placeholder="Search" 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>

  <table class="bx--data-table-v2">
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Protocol</th>
        <th>Ports</th>
        <th>Rule</th>
        <th>Attached Groups</th>
        <th>Status</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="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>
        </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>
      </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="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>
            </butto>
        </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>
      </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>