users-list.html

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">
          Users
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="d-flex">
          <form action="/users" method="get" autocomplete="off" class="d-inline-block me-3" novalidate>
            <div class="input-icon">
              <span class="input-icon-addon">
                <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                  <path d="M21 21l-6 -6" />
                </svg>
              </span>
              <input type="text" name="k" value="{{GET.k}}" class="form-control" placeholder="Search users…" aria-label="Search users…">
            </div>
          </form>
          <a href="/users/edit/new" class="btn btn-primary">
            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M12 5l0 14"></path>
              <path d="M5 12l14 0"></path>
            </svg>
            New user
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12">
        <div class="card">
          <div class="table-responsive">
            <table id="users-list" class="table card-table table-striped">
              <thead>
                <tr>
                  <th><button class="table-sort" data-sort="sort-screenname">Screen Name</button></th>
                  <th><button class="table-sort" data-sort="sort-name">Name</button></th>
                  <th><button class="table-sort" data-sort="sort-email">Email</button></th>
                  <th><button class="table-sort" data-sort="sort-date-created">Date Created</button></th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody class="table-tbody">
              {{#each users}}
                <tr>
                  <td class="sort-screenname">{{screenname}}</td>
                  <td class="sort-name text-muted" data-lastname="{{last_name}}">{{first_name}} {{last_name}}</td>
                  <td class="sort-email text-muted"><a href="/users/edit/{{_id}}" class="text-reset">{{email}}</a></td>
                  <td class="sort-date-created text-muted" data-date="{{date date_created "m-d-y" "convert"}}">{{date date_created "M j, Y" "convert"}}</td>
                  <td><a href="/users/edit/{{_id}}">Edit</a></td>
                </tr>
              {{/each}}                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="/js/lib/list.min.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const list = new List('users-list', {
      sortClass: 'table-sort',
      listClass: 'table-tbody',
      valueNames: [
        'sort-screenname',
        { attr: 'data-lastname', name: 'sort-name' },
        'sort-email', 
        { attr: 'data-date', name: 'sort-date-created' },
      ]
    });
  });
</script>