@vcl/vcl/table/demo/example.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<table class="table no-border fixed alt-row-color v-align-middle row-hover-highlight row-selectability" role="listbox">
  <thead>
    <tr>
      <th class="w-50p sortable-col clear-fix" tabindex="0" role="button">
        <span class="float-left">Default Column</span>
        <div class="float-right icon fas fa-sort"></div>
      </th>
      <th class="w-20p sortable-col sort-asc" tabindex="0" role="button">
        <span class="float-left">Right aligned Column</span>
        <div class="float-right icon fas fa-sort-up"></div>
      </th>
      <th class="w-20p">
        <span>Centered Column</span>
      </th>
      <th class="w-10p">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">Sent</td>
      <td class="align-centered"></td>
    </tr>
    <tr>
      <td><a href="#table0">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">Sent</td>
      <td class="align-centered"></td>
    </tr>
    <tr>
      <td class="overflow-ellipsis">Truncated content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">N/A</td>
      <td class="align-centered"></td>
    </tr>
    <tr class="disabled">
      <td>Disabled row.</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">On hold</td>
      <td class="align-centered"></td>
    </tr>
    <tr class="selected">
      <td>Selected row.</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">N/A</td>
      <td class="align-centered"></td>
    </tr>
    <tr>
      <td>Normal row.</td>
      <td class="align-right">11.000</td>
      <td class="align-centered cell-highlight">On hold</td>
      <td class="align-centered"></td>
    </tr>
  </tbody>
</table>