Tables: Sorting & Pagination

Code

js/views/collection.js — the table and pagination

In the code column — js/views/collection.js. renderCollection() gets an already sorted and filtered list from getFilteredFavorites(), works out the pages, and slices out the current one.

The pagination maths is three lines:

const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
const page = Math.min(currentPage, totalPages);          // guard: page may be stale
const pageRows = rows.slice(start, start + pageSize);

Math.min(currentPage, totalPages) matters: if you were on page 5 and a search leaves only 2 pages, currentPage would still be 5 and the table would be empty. We "clamp" it to the real maximum.

The sort headers and initCollection are the delegation pattern again (lesson 3): one listener per header, calling setSort(column). The arrows (▲/▼) update from the current sortKey/sortDir.

Notice what's not here: not a single renderCollection() call after setSort/setPage. It isn't needed — they call notify(), and the main.js subscription (lesson 9) re-renders. The table only describes how the current state looks.

Tip. renderPagination draws a button per page — fine for a few dozen. For thousands of rows you'd show only "1 … 5 6 7 … 40". But the principle is the same: page controls are a derived view of state (currentPage, totalPages), not separately stored state.

collection.js CREATE

Create this file in js/views/

// "My Collection" — a sortable, searchable, paginated table.
// It reads getState() and calls state actions (setSort/setPage), which notify()
// → this view re-renders itself. No manual wiring (thanks to lesson 9).
// (Thumbnail / notes / actions columns trimmed here to focus on sort+paginate.)

import { getState, getFilteredFavorites, setPage, setSort } from '../state.js';
import { formatDateHuman } from '../utils.js';

const tbody = document.getElementById('collection-body');
const paginationEl = document.getElementById('pagination');

export function renderCollection() {
  const { currentPage, pageSize } = getState();
  const rows = getFilteredFavorites();                  // searched + sorted (state.js)

  // --- pagination maths ---
  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
  const page = Math.min(currentPage, totalPages);       // clamp: page may be stale
  const start = (page - 1) * pageSize;
  const pageRows = rows.slice(start, start + pageSize);  // just this page's slice

  tbody.innerHTML = '';
  const frag = document.createDocumentFragment();
  pageRows.forEach(fav => frag.appendChild(createRow(fav)));
  tbody.appendChild(frag);

  renderPagination(totalPages, page);
  updateSortArrows();
}

function createRow(fav) {
  const tr = document.createElement('tr');

  const title = document.createElement('td');
  title.textContent = fav.title;

  const date = document.createElement('td');
  date.textContent = formatDateHuman(fav.date);

  const rating = document.createElement('td');
  rating.textContent = fav.rating > 0
    ? '★'.repeat(fav.rating) + '☆'.repeat(5 - fav.rating)
    : 'Not rated';

  tr.append(title, date, rating);
  return tr;
}

function renderPagination(totalPages, page) {
  paginationEl.innerHTML = '';
  if (totalPages <= 1) return;
  for (let p = 1; p <= totalPages; p++) {
    const btn = document.createElement('button');
    btn.className = 'page-btn' + (p === page ? ' active' : '');
    btn.textContent = String(p);
    btn.addEventListener('click', () => setPage(p));    // setPage → notify → re-render
    paginationEl.appendChild(btn);
  }
}

function updateSortArrows() {
  const { sortKey, sortDir } = getState();
  document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.querySelector('.arrow').textContent =
      btn.dataset.sort === sortKey ? (sortDir === 'asc' ? '▲' : '▼') : '';
  });
}

export function initCollection() {
  // One listener per sortable header → setSort(column)
  document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.addEventListener('click', () => setSort(btn.dataset.sort));
  });
}