@momentum-ui/react-collaboration/scss/components/data-table/examples/multi-select.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table">
  <div class="md-data-table__wrapper">
    <table>
      <thead class="md-data-table__thead">
        <tr>
          <th style="width: 4rem">
            <md-data-table-header-checkbox>
              <div class="md-data-table__checkbox--wrapper">
            <md-checkbox class="md-input-container md-checkbox">
              <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-header-checkbox-1-checkbox" tabindex="0">
              <label class="md-checkbox__label" for="md-data-table-header-checkbox-1-checkbox">
              <span></span>
              </label>
            </md-checkbox>
          </div></md-data-table-header-checkbox>
          </th>
          <th> Name </th>
          <th> State </th>
          <th> Age </th>
          <th> Color </th>
        </tr>
      </thead>
      <tbody class="md-data-table__tbody">

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-2-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-2-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> John </td>
          <td> Texas </td>
          <td> 32 </td>
          <td> Orange </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-3-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-3-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Paul </td>
          <td> California </td>
          <td> 12 </td>
          <td> Black </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-4-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-4-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Ben </td>
          <td> Florida </td>
          <td> 23 </td>
          <td> Gray </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-5-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-5-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Dan </td>
          <td> Kansas </td>
          <td> 75 </td>
          <td> Blue </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-6-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-6-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Mike </td>
          <td> New York </td>
          <td> 45 </td>
          <td> Orange </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-7-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-7-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Joe </td>
          <td> Texas </td>
          <td> 86 </td>
          <td> Black </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-8-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-8-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Robert </td>
          <td> New Mexico </td>
          <td> 34 </td>
          <td> Yellow </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-9-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-9-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Greg </td>
          <td> Arizona </td>
          <td> 29 </td>
          <td> Orange </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-10-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-10-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Thomas </td>
          <td> Texas </td>
          <td> 32 </td>
          <td> Black </td>
        </tr>

        <tr>
          <td>
            <md-data-table-checkbox>
              <div class="md-data-table__checkbox--wrapper">
                <md-checkbox class="md-input-container md-checkbox">
                  <input class="md-input md-checkbox__input" type="checkbox" id="md-data-table-checkbox-11-checkbox" tabindex="0">
                  <label class="md-checkbox__label" for="md-data-table-checkbox-11-checkbox">
                  <span></span>
                  </label>
                </md-checkbox>
              </div>
            </md-data-table-checkbox>
          </td>
          <td> Derek </td>
          <td> Montana </td>
          <td> 27 </td>
          <td> Red </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>