nopaque/app/templates/users/users.html.j2

{% extends "base.html.j2" %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <table class="" id="users"></table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}


{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script>
  const updateUrl = (prev, query) => {
    return prev + (prev.indexOf('?') >= 0 ? '&' : '?') + new URLSearchParams(query).toString();
  };

  new gridjs.Grid({
    columns: [
      { id: 'username', name: 'Username' },
      { id: 'email', name: 'Email' },
    ],
    server: {
      url: '/users/api_users',
      then: results => results.data,
      total: results => results.total,
    },
    search: {
      enabled: true,
      server: {
        url: (prev, search) => {
          return updateUrl(prev, {search});
        },
      },
    },
    sort: {
      enabled: true,
      multiColumn: true,
      server: {
        url: (prev, columns) => {
          const columnIds = ['username', 'email'];
          const sort = columns.map(col => (col.direction === 1 ? '+' : '-') + columnIds[col.index]);
          return updateUrl(prev, {sort});
        },
      },
    },
    pagination: {
      enabled: true,
      server: {
        url: (prev, page, limit) => {
          return updateUrl(prev, {offset: page * limit, limit: limit});
        },
      },
    }
  }).render(document.getElementById('users'));
</script>
{% endblock scripts %}