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

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<table class="table vertical-border row-selectability" role="listbox">
  <thead>
    <tr>
      <th><span>Col 1</span></th>
      <th><span>Col 2</span></th>
      <th><span>Col 3</span></th>
      <th><span>Col 4</span></th>
    </tr>
    <tr class="table-tool-bar">
      <th colspan="4">
        <button type="button" class="button transparent" disabled>
          <div class="icogram">
            <div class="icon fas fa-trash-o" aria-hidden="true" role="img"></div>
          </div>
        </button>
        <button type="button" class="button transparent">
          <div class="icogram">
            <div class="icon fas fa-refresh" aria-hidden="true" role="img"></div>
          </div>
        </button>
        <button type="button" class="button transparent">
          <div class="icogram">
            <div class="icon fas fa-plus" aria-hidden="true" role="img"></div>
          </div>
        </button>
      </th>
    </tr>
    <tr class="table-filter-bar">
      <th><input autocomplete="off" placeholder="Filter" type="text"></th>
      <th><input autocomplete="off" placeholder="Filter" type="text"></th>
      <th><input autocomplete="off" placeholder="Filter" type="text"></th>
      <th><input autocomplete="off" placeholder="Filter" type="text"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>