carbon-components/html/data-table-v2/data-table-v2--editable.html

Carbon Components is a component library for IBM Cloud

<!--
  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--zebra">
    <thead>
      <tr>
          <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>
      </tr>
    </thead>
    <tbody>
        <tr>
                <td class="bx--data-table-cell--editable bx--data-table-cell--editing">
                  <div class="bx--data-table__edit-field">
                    <label class="bx--label" for="edit-cell:row-id-15:name">Edit Name: Load Balancer 3</label>
                    <input type="text" class="bx--text-input" id="edit-cell:row-id-15:name" value="Load Balancer 3">
                  </div>
                  <div class="bx--data-table__edit-actions">
                    <button class="bx--btn bx--btn--secondary bx--btn--sm">Cancel</button>
                    <button class="bx--btn bx--btn--primary bx--btn--sm">Save</button>
                  </div>
                </td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">3000</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Round Robin</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Kevins VM Groups</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Disabled</span></td>
        </tr>
        <tr>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 1</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">443</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Round Robin</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Maureens VM Groups</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Starting</span></td>
        </tr>
        <tr>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Load Balancer 2</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">HTTP</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">80</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">DNS delegation</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Andrews VM Groups</span></td>
                <td class="bx--data-table-cell--editable"><span class="bx--data-table-cell__content">Active</span></td>
        </tr>
    </tbody>
  </table>

  </div>

<!-- v10 Data Table -->