@momentum-ui/react-collaboration/scss/components/data-table/examples/multiselect-scroll-resize.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table md-data-table--resizable">
  <div class="md-data-table__scrollable--wrappper">
    <div class="md-data-table__scrollable--view">
      <div class="md-data-table__scrollable--header">
        <div style="margin-right: 0px; margin-left: 0px;">
          <table class="md-data-table__scrollable--header-table">
            <colgroup>
              <col style="width: 4rem">
              <col>
              <col>
              <col>
              <col>
            </colgroup>
            <thead class="md-data-table__thead">
              <tr>
                <th mdresizablecolumn="" style="width: 4rem" class="md-data-table__resizable-column">
                  <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" value="" name="" 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>
                  <span class="md-data-table__column-resizer"></span>
                </th>
                <th mdresizablecolumn="" class="md-data-table__resizable-column"> Name <span class="md-data-table__column-resizer"></span></th>
                <th mdresizablecolumn="" class="md-data-table__resizable-column"> State <span class="md-data-table__column-resizer"></span></th>
                <th mdresizablecolumn="" class="md-data-table__resizable-column"> Age <span class="md-data-table__column-resizer"></span></th>
                <th mdresizablecolumn="" class="md-data-table__resizable-column"> Color <span class="md-data-table__column-resizer"></span></th>
              </tr>
            </thead>
            <tbody class="md-data-table__tbody"></tbody>
          </table>
        </div>
      </div>

      <div class="md-data-table__scrollable--body" style="max-height: 200px;">
        <table class="md-data-table__scrollable--body-table">
          <colgroup>
            <col style="width: 4rem">
            <col>
            <col>
            <col>
            <col>
          </colgroup>
          <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" value="" name="" 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" value="" name="" 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" value="" name="" 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" value="" name="" 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" value="" name="" 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" value="" name="" 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="checkb ox" value="" name="" 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="checkb ox" value="" name="" 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-in  put md-checkbox__input" type="checkbox" value="" name="" 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="checkb ox" value="" name="" 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><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="checkb ox" value="" name="" id="md-data-table-checkbox-12-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-12-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="checkb ox" value="" name="" id="md-data-table-checkbox-13-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-13-checkbox">
                        <span></span>
                      </label>
                      </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>
              <td> Sarah </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="checkb ox" value="" name="" id="md-data-table-checkbox-14-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-14-checkbox">
                        <span></span>
                      </label>
                    </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>
              <td> Michelle </td><td> Montana </td><td> 24 </td><td> Red </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="checkb ox" value="" name="" id="md-data-table-checkbox-15-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-15-checkbox">
                        <span></span>
                      </label>
                    </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>

              <td> Jennifer </td><td> New Mexico </td><td> 34 </td><td> Purple </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="checkb ox" value="" name="" id="md-data-table-checkbox-16-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-16-checkbox">
                        <span></span>
                      </label>
                    </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>
              <td> Alex </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="checkb ox" value="" name="" id="md-data-table-checkbox-17-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-17-checkbox">
                        <span></span>
                      </label>
                    </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>
              <td> Lizzy </td>
              <td> Texas </td>
              <td> 22 </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="checkb ox" value="" name="" id="md-data-table-checkbox-18-checkbox" tabindex="0">
                      <label class="md-checkbox__label" for="md-data-table-checkbox-18-checkbox">
                        <span></span>
                      </label>
                    </md-checkbox>
                  </div>
                </md-data-table-checkbox>
              </td>
              <td> Olivia </td>
              <td> Montana </td>
              <td> 27 </td>
              <td> Red </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="md-data-table__resizer--helper md-data-table__resizer--highlight" style="display: none; height: 249px; top: 0px; left: 470px;"></div>
</div>