Homework
Homework — your table
Homework — your collection table.
- Build the table. Create
js/views/collection.jswithrenderCollection(fromgetFilteredFavorites+ pagination). AddgetFilteredFavorites,setSort,setPagetostate.js. Subscribe (if you haven't) — the table re-renders itself. - Sort. Click columns; the same column flips the direction. The arrow (
▲/▼) shows the current order. - Paginate. With more than
pageSizeentries, page buttons appear; they change the slice. - Reproduce the
sorttrap. Temporarily change[...rows].sort(...)torows.sort(...)(directly onstate.favorites). Sort, reload — the collection stays reordered (the stored order is corrupted). Restore[...rows]. - Search + page. The collection search should reset to page 1 (so you don't get stuck on an empty page).
Required tests:
- Sort test: clicking a column sorts; re-clicking flips it.
- Mutation test: with
[...rows], the original order survives a reload.
To submit: screenshots: (1) the sorted table with the arrow, (2) pagination, (3) proof that state.favorites is unchanged after sorting (DevTools).
Next. The table works. In lesson 11 — forms and validation: reusable rules, real settings (that persist and change the app), and the subtle validation progression (submit → blur → keystroke), plus a real CSS trap with
input[type].