awesome-python/website/templates/_projects_table.html

{% macro projects_table(count, scope, editorial=false) %}
  <div class="controls section-shell">
    <h2 class="sr-only">Search and filter</h2>
    <div class="search-wrap">
      <svg
        class="search-icon"
        aria-hidden="true"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </svg>
      <input
        type="search"
        class="search"
        placeholder="Search {{ count }} project{{ "s" if count != 1 }} {{ scope }}…"
        data-short-placeholder="Search {{ count }} project{{ "s" if count != 1 }}…"
        aria-label="Search projects"
      />
    </div>
  </div>

  <h2 class="sr-only">Results</h2>
  <div
    class="table-wrap"
    tabindex="0"
    role="region"
    aria-label="Projects table"
  >
    <table class="table"{% if editorial %} data-default-sort="editorial"{% endif %}>
      <thead>
        <tr>
          <th class="col-num"><span class="sr-only">Row number</span></th>
          <th class="col-name" data-sort="name">
            <button type="button" class="sort-btn">Project Name</button>
          </th>
          <th class="col-downloads" data-sort="downloads">
            <button type="button" class="sort-btn" title="PyPI downloads, last 30 days">PyPI Downloads</button>
          </th>
          <th class="col-stars" data-sort="stars">
            <button type="button" class="sort-btn">GitHub Stars</button>
          </th>
          <th class="col-commit" data-sort="commit-time">
            <button type="button" class="sort-btn">Last Commit</button>
          </th>
          <th class="col-cat">Tags</th>
          <th class="col-arrow">
            <button class="back-to-top" aria-label="Back to top">
              <span class="back-to-top-label">Top</span> &uarr;
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
{{ caller() }}
      </tbody>
    </table>
  </div>

  <div class="no-results" hidden>
    <p>No projects match your search.</p>
    <p class="no-results-hint">
      Try a broader term, or
      <button class="no-results-clear">browse all projects</button>.
    </p>
  </div>
{% endmacro %}