Quickstart: Build a product comparison table

Fetch and render

Map the product array into rows and add a click-to-sort header. The data is already structured for a table:

const { data } = await (await fetch(`${BASE}/products`)).json();
data.sort((a, b) => a.representative_apr - b.representative_apr);
table.tBodies[0].innerHTML = data.map(p =>
  `<tr><td>${p.name}</td>` +
  `<td data-sort="${p.max_amount}">\u00a3${p.max_amount.toLocaleString()}</td>` +
  `<td data-sort="${p.representative_apr}">${p.representative_apr}%</td></tr>`
).join('');

Keep it honest

Label representative figures clearly and link each row to a firm quote or to apply. A comparison table is a signpost, not an offer.