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

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table md-data-table--dividers testContainerClass" style="width: 60%;">
  <div class="md-data-table__wrapper">
    <table class="testTableClass">
      <thead class="md-data-table__thead">
        <tr>
          <th style="width: 8rem">Full Name</th>
          <th style="width: 10rem">Email</th>
          <th style="width: 6rem">Last Updated</th>
          <th style="width: 5rem">ID Number</th>
        </tr>
      </thead>

      <tbody class="md-data-table__tbody">
        <tr class="md-data-table__row" tabindex="0">
          <td> John Jones </td>
          <td> jjones@cisco.com </td>
          <td> 02-July-2019 </td>
          <td> 1547852158 </td>
        </tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Paul Baltes </td>
          <td> pbaltes@cisco.com </td>
          <td> 03-June-2019 </td>
          <td> 4673165849 </td>
        </tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Caleb Valdez </td>
          <td> cvaldez@cisco.com </td>
          <td> 07-May-2019 </td>
          <td> 9432165975 </td>
        </tr>
        <tr class="md-data-table__row md-data-table__row--selected" tabindex="0">
          <td> Corelia Ball </td>
          <td> cball@cisco.com </td>
          <td> 04-July-2019 </td>
          <td> 8561346581 </td>
        </tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Mike Snow </td>
          <td> msnow@cisco.com </td>
          <td> 05-April-2019 </td>
          <td> 1245731648 </td>
        </tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Joe Johnson </td>
          <td> jjohnson@cisco.com </td>
          <td> 05-July-2019 </td>
          <td> 3674162849 </td></tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Robert McGregor </td>
          <td> rmcgregor@cisco.com </td>
          <td> 01-July-2019 </td>
          <td> 8412596312 </td></tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Greg Dmritov </td>
          <td> gdmritov@cisco.com </td>
          <td> 05-March-2019 </td>
          <td> 1245731648 </td></tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Thomas Campbell </td>
          <td> tcampbell@cisco.com </td>
          <td> 07-July-2019 </td>
          <td> 6777658497 </td>
        </tr>
        <tr class="md-data-table__row" tabindex="0">
          <td> Derek Nelson </td>
          <td> dnelson@cisco.com </td>
          <td> 07-June-2019 </td>
          <td> 9432548164 </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>