carbon-components/html/data-table/data-table--row-header.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  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 -->
  <table class="bx--data-table   " >
    <thead>
      <tr>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Name</span>
                                        </th>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Protocol</span>
                                        </th>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Port</span>
                                        </th>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Rule</span>
                                        </th>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Attached Groups</span>
                                        </th>
          <th   >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Status</span>
                                        </th>
      </tr>
    </thead>
  <tbody>
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr >
              <th  scope="row">
                <!-- truncated new markup -->
                  Load Balancer 1
              </th>
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
              <td >
                <!-- truncated new markup -->
                  80
              </td>
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups Testing a really long text here
              </td>
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
      </tr>
      <!-- Expandable child row -->
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr >
              <th  scope="row">
                <!-- truncated new markup -->
                  Load Balancer 5
              </th>
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
              <td >
                <!-- truncated new markup -->
                  80
              </td>
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
      </tr>
      <!-- Expandable child row -->
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr >
              <th  scope="row">
                <!-- truncated new markup -->
                  Load Balancer 5
              </th>
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
              <td >
                <!-- truncated new markup -->
                  80
              </td>
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
      </tr>
      <!-- Expandable child row -->
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr >
              <th  scope="row">
                <!-- truncated new markup -->
                  Load Balancer 5
              </th>
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
              <td >
                <!-- truncated new markup -->
                  80
              </td>
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
      </tr>
      <!-- Expandable child row -->
      <!-- the first cell of each row is a th[scope="row"], otherwise it is a td -->
      <tr >
              <th  scope="row">
                <!-- truncated new markup -->
                  Load Balancer 5
              </th>
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
              <td >
                <!-- truncated new markup -->
                  80
              </td>
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
      </tr>
      <!-- Expandable child row -->
    </tbody>
  </table>

 </div>