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

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-data-table testContainerClass" style="width: 60%;">
  <div class="md-data-table__wrapper">
    <table class="testTableClass">
      <thead class="md-data-table__thead">
        <tr>
          <th style="width: 4rem">
          </th>
          <th> Full Name </th>
          <th> Email </th>
          <th> Last Updated </th>
          <th> ID Number </th>
        </tr>
      </thead>
      <tbody class="md-data-table__tbody">
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="John Jones">
              <span class="md-avatar__letter">JJ</span>
            </md-avatar>
          </td>
          <td> John Jones </td>
          <td> jjones@cisco.com </td>
          <td> 02-July-2019 </td>
          <td> 1547852158 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Paul Baltes">
              <span class="md-avatar__letter">PB</span>
            </md-avatar>
          </td>
          <td> Paul Baltes
          </td><td> pbaltes@cisco.com </td>
          <td> 03-June-2019 </td>
          <td> 4673165849 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Caleb Valdez">
              <span class="md-avatar__letter">CV</span>
            </md-avatar>
          </td>
          <td> Caleb Valdez </td>
          <td> cvaldez@cisco.com </td>
          <td> 07-May-2019 </td>
          <td> 9432165975 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Corelia Ball">
              <span class="md-avatar__letter">CB</span>
            </md-avatar>
          </td>
          <td> Corelia Ball </td>
          <td> cball@cisco.com </td>
          <td> 04-July-2019 </td>
          <td> 8561346581 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Mike Snow">
              <span class="md-avatar__letter">MS</span>
            </md-avatar>
          </td>
          <td> Mike Snow </td>
          <td> msnow@cisco.com </td>
          <td> 05-April-2019 </td>
          <td> 1245731648 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Joe Johnson">
              <span class="md-avatar__letter">JJ</span>
            </md-avatar>
          </td>
          <td> Joe Johnson </td>
          <td> jjohnson@cisco.com </td>
          <td> 05-July-2019 </td>
          <td> 3674162849 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Robert McGregor">
              <span class="md-avatar__letter">RM</span>
            </md-avatar>
          </td>
          <td> Robert McGregor </td><td> rmcgregor@cisco.com </td>
          <td> 01-July-2019 </td>
          <td> 8412596312 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Greg Dmritov">
              <span class="md-avatar__letter">GD</span>
            </md-avatar>
          </td>
          <td> Greg Dmritov </td><td> gdmritov@cisco.com </td><td> 05-March-2019 </td><td> 1245731648 </td></tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Thomas Campbell">
              <span class="md-avatar__letter">TC</span>
            </md-avatar>
          </td>
          <td> Thomas Campbell </td>
          <td> tcampbell@cisco.com </td>
          <td> 07-July-2019 </td>
          <td> 6777658497 </td>
        </tr>
        <tr>
          <td>
            <md-avatar class="md-avatar md-avatar--medium" title="Derek Nelson">
              <span class="md-avatar__letter">DN</span>
            </md-avatar>
          </td>
          <td> Derek Nelson </td>
          <td> dnelson@cisco.com </td>
          <td> 07-June-2019 </td>
          <td> 9432548164 </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>