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

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table" style="width: 60%;">
  <div class="md-data-table__wrapper">
    <table>
      <thead class="md-data-table__thead">
        <tr>
          <th class="md-data-table__sortable-column">
            Name
            <md-sorticon>
            <i class="md-icon icon md-sortIcon icon-arrow-filled-up_12"></i>
            </md-sorticon>
          </th>
          <th class="md-data-table__sortable-column">
            State
            <md-sorticon>
              <i class="md-icon icon md-sortIcon icon-arrow-filled-up_12"></i>
            </md-sorticon>
          </th>
          <th class="md-data-table__sortable-column">
            Age
            <md-sorticon>
              <i class="md-icon icon md-sortIcon icon-arrow-filled-up_12"></i>
            </md-sorticon>
          </th>
          <th class="md-data-table__sortable-column">
            Color
            <md-sorticon>
              <i class="md-icon icon md-sortIcon icon-arrow-filled-up_12"></i>
            </md-sorticon>
          </th>
        </tr>
      </thead>

      <tbody class="md-data-table__tbody">
        <tr>
          <td> John </td>
          <td> Texas </td>
          <td> 32 </td>
          <td> Orange </td>
        </tr>
        <tr>
          <td> Paul </td>
          <td> California </td>
          <td> 12 </td>
          <td> Black </td>
        </tr>
        <tr>
          <td> Ben </td>
          <td> Florida </td>
          <td> 23 </td>
          <td> Gray </td>
        </tr>
        <tr>
          <td> Dan </td>
          <td> Kansas </td>
          <td> 75 </td>
          <td> Blue </td>
        </tr>
        <tr>
          <td> Mike </td>
          <td> New York </td>
          <td> 45 </td>
          <td> Orange </td>
        </tr>
        <tr>
          <td> Joe </td>
          <td> Texas </td>
          <td> 86 </td>
          <td> Black </td>
        </tr>
        <tr>
          <td> Robert </td>
          <td> New Mexico </td>
          <td> 34 </td>
          <td> Yellow </td>
        </tr>
        <tr>
          <td> Greg </td>
          <td> Arizona </td>
          <td> 29 </td>
          <td> Orange </td>
        </tr>
        <tr>
          <td> Thomas </td>
          <td> Texas </td>
          <td> 32 </td>
          <td> Black </td>
        </tr>
        <tr>
          <td> Derek </td>
          <td> Montana </td>
          <td> 27 </td>
          <td> Red </td>
        </tr>
        <tr>
          <td> Bill </td>
          <td> Texas </td>
          <td> 86 </td>
          <td> Black </td>
        </tr>
        <tr>
          <td> Harris </td>
          <td> New Mexico </td>
          <td> 24 </td>
          <td> Cyan </td>
        </tr>
        <tr>
          <td> Brian </td>
          <td> Arizona </td>
          <td> 99 </td>
          <td> Orange </td>
        </tr>
        <tr>
          <td> Thomas </td>
          <td> Alaska </td>
          <td> 22 </td>
          <td> Crimson </td>
        </tr>
        <tr>
          <td> Marcus </td>
          <td> Montana </td>
          <td> 18 </td>
          <td> Red </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>