Filter and Summarize

Totals Footer

Quantity and price columns are multiplied per row and then reduced into a table footer total.

Program

CSV-backed tables can show both source rows and computed summaries. The footer should come from data, not hand-entered totals.

totals_footer.html
Visuals: captured from real browser rendering
<script>
  const rows = [
    { item: "Cable", qty: 3, price: 12.50 },
    { item: "Hub", qty: 1, price: 39.00 }
  ];
  const lineTotals = rows.map(row => row.qty * row.price);
  const total = lineTotals.reduce((sum, value) => sum + value, 0);
  renderWithFooter(rows, total);
</script>

  1. Start with two invoice rows.

    The table shows item, quantity, and price.
    Rows hold the source values for the summary.

  2. Multiply quantity by price per row.

    A line total column can be shown for each item.
    map derives one computed value for each source row.

  3. Add line totals into one total.

    The footer total is ready before it is rendered.
    reduce combines the line totals into one summary value.

  4. Render rows with a computed footer.

    The browser table displays a Total footer row.
    The footer is derived from data and stays consistent with rows.
map map derives one computed value for each source row.
reduce reduce combines many values into one summary value.