Lattice Grid Buy a licence

demo D67

The aggregations in htmx

sum, avg, min, max, count, countValues, first, last, one column each

total: 'sum'

This grid shows the built-in aggregations one per column: sum, average, min, max, count, count of values, first and last. It reduces a column, or a group, to the single figure someone asked for, so a footer answers the question without a separate calculation.

Building…
Loading a live grid…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="aggregations-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="team">Team</th>
      <th data-field="service">Service</th>
      <th data-field="instances">sum</th>
      <th data-field="p95Ms">avg</th>
      <th data-field="p50Ms">min</th>
      <th data-field="p99Ms">max</th>
      <th data-field="owner">countValues</th>
      <th data-field="region">first</th>
      <th data-field="tier">last</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>Search</td><td>svc-00001</td><td>49</td><td>140</td><td>27</td><td>3906</td><td>k.yilmaz</td><td>Malmö</td><td>silver</td></tr>
    <tr data-id="2"><td>Mobile</td><td>svc-00002</td><td>162</td><td>427</td><td>9</td><td>1281</td><td>m.svensson</td><td>Leeds</td><td>bronze</td></tr>
    <tr data-id="3"><td>Identity</td><td>svc-00003</td><td>20</td><td>476</td><td>57</td><td>2637</td><td>j.okafor</td><td>Zürich</td><td>silver</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('aggregations-table'), {
    // A grand total row along the bottom, and a different reduction on each
    // column, so one grid shows sum, average, minimum, maximum and count side
    // by side, rolled up per group and again for the whole table.
    grandTotalRow: 'bottom',
    columns: [
      { field: 'team', title: 'Team', group: { enabled: true, index: 0 } },
      { field: 'service', title: 'Service', total: 'count' },
      { field: 'instances', title: 'sum', type: 'number', total: 'sum' },
      { field: 'p95Ms', title: 'avg', type: 'number', total: 'avg' },
      { field: 'p50Ms', title: 'min', type: 'number', total: 'min' },
      { field: 'p99Ms', title: 'max', type: 'number', total: 'max' },
      { field: 'owner', title: 'countValues', total: 'countValues' },
      { field: 'region', title: 'first', total: 'first' },
      { field: 'tier', title: 'last', total: 'last' },
    ],
  });
</script>

Summarising a column with sum, avg, min, max, count and more

An aggregation reduces every value in a column, or every value within a group, down to a single figure: a sum of “Revenue”, the average of “Response time”, the earliest “first” value or the latest “last” one. A developer reaches for it wherever a column of raw numbers needs a headline figure alongside it, whether that is a grand total row, a per-group subtotal, or a pivoted summary table. Lattice Grid assigns the function per column with total: 'sum', and the same setting accepts 'avg', 'min', 'max', 'count', 'countValues', 'first' or 'last', so a column of currency values and a column of timestamps can each carry the aggregation that actually suits their data rather than sharing one formula. Because this is a JavaScript data grid built around incremental state rather than repeated full-table scans, adding or removing a row updates the affected totals directly instead of walking every row again, which keeps aggregation cost proportional to the change rather than to the size of the dataset. Grouping, group footers and the grand total row all read from these same per-column definitions, so a sum defined once is reused everywhere a total for that column is displayed, with no separate calculation to keep in sync.

How do I calculate a sum or average for a column in a data grid?

Set total: 'sum' on the column definition, or 'avg', 'min', 'max', 'count', 'countValues', 'first', 'last' for the other built-in reducers. Lattice Grid applies the chosen function to the column’s values, and reuses that same definition for group footers, the grand total row and pivot summaries, so the aggregation only needs to be declared once per column.

Related demos