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

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table md-data-table--resizable md-data-table--dividers" style="width: 60%;">
  <div class="md-data-table__wrapper">
    <table>
      <thead class="md-data-table__thead">
        <tr>
          <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" style="width: 181px;">
            State
            <span class="md-data-table__column-resizer"></span>
          </th><th mdresizablecolumn="" class="md-data-table__resizable-column" style="width: 143px;">
            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">
          <tr>
            <td class="md-data-table__resizable-column"> John </td>
            <td class="md-data-table__resizable-column"> Texas </td>
            <td class="md-data-table__resizable-column"> 32 </td>
            <td class="md-data-table__resizable-column"> Orange </td>
          </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Paul </td>
            <td class="md-data-table__resizable-column"> California </td>
            <td class="md-data-table__resizable-column"> 12 </td>
            <td class="md-data-table__resizable-column"> Black </td>
          </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Ben </td>
            <td class="md-data-table__resizable-column"> Florida </td>
            <td class="md-data-table__resizable-column"> 23 </td>
            <td class="md-data-table__resizable-column"> Gray </td></tr>
          <tr>
            <td class="md-data-table__resizable-column"> Dan </td>
            <td class="md-data-table__resizable-column"> Kansas </td>
            <td class="md-data-table__resizable-column"> 75 </td>
            <td class="md-data-table__resizable-column"> Blue </td>
          </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Mike </td>
            <td class="md-data-table__resizable-column"> New York </td>
            <td class="md-data-table__resizable-column"> 45 </td>
            <td class="md-data-table__resizable-column"> Orange </td>
            </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Joe </td>
            <td class="md-data-table__resizable-column"> Texas </td>
            <td class="md-data-table__resizable-column"> 86 </td>
            <td class="md-data-table__resizable-column"> Black </td>
            </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Robert </td>
            <td class="md-data-table__resizable-column"> New Mexico </td>
            <td class="md-data-table__resizable-column"> 34 </td>
            <td class="md-data-table__resizable-column"> Yellow </td>
          </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Greg </td>
            <td class="md-data-table__resizable-column"> Arizona </td>
            <td class="md-data-table__resizable-column"> 29 </td>
            <td class="md-data-table__resizable-column"> Orange </td>
          </tr>
          <tr>
            <td class="md-data-table__resizable-column"> Thomas </td>
            <td class="md-data-table__resizable-column"> Texas </td>
            <td class="md-data-table__resizable-column"> 32 </td>
            <td class="md-data-table__resizable-column"> Black </td>
          </tr>
          <tr>
          <td class="md-data-table__resizable-column"> Derek </td>
            <td class="md-data-table__resizable-column"> Montana </td>
            <td class="md-data-table__resizable-column"> 27 </td>
            <td class="md-data-table__resizable-column"> Red </td>
          </tr>
          </tbody>
        </table>
      </div>
  <div class="md-data-table__resizer--helper md-data-table__resizer--highlight"
    style="display: none; height: 495px; top: 0px; left: 339px;">
  </div>
</div>