Frozen summary row

In this tutorial, you will pin a read-only totals row at the bottom of the grid. You will learn how to use fixedRowsBottom, recalculate aggregates on afterChange, and style the summary row with the cells callback.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import './example1.css';
4

5
registerAllModules();
6

7
const SUMMARY_SOURCE = 'updateSummary';
8

9
function parseNumeric(value) {
10
  if (typeof value === 'number' && Number.isFinite(value)) {
11
    return value;
12
  }
13

14
  if (typeof value === 'string' && value.trim() !== '') {
15
    const n = Number(value);
16

17
    if (Number.isFinite(n)) {
18
      return n;
19
    }
20
  }
21

22
  return null;
23
}
24

25
const data = [
26
  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },
27
  { item: 'Module B', units: 8, price: 120, tax: 8 },
28
  { item: 'Module C', units: 3, price: 200, tax: '\u2014' },
29
  { item: 'Module D', units: 15, price: 35, tax: 4.1 },
30
  { item: 'Module E', units: 0, price: 75, tax: 6 },
31
  { item: '', units: '', price: '', tax: '' },
32
];
33

34
const numericProps = ['units', 'price', 'tax'];
35
const summaryRowIndex = data.length - 1;
36

37
function formatSummary(prop) {
38
  const numbers = [];
39

40
  for (let row = 0; row < summaryRowIndex; row += 1) {
41
    const n = parseNumeric(data[row][prop]);
42

43
    if (n !== null) {
44
      numbers.push(n);
45
    }
46
  }
47

48
  if (numbers.length === 0) {
49
    return '\u2014';
50
  }
51

52
  const sum = numbers.reduce((acc, n) => acc + n, 0);
53
  const avg = sum / numbers.length;
54

55
  return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;
56
}
57

58
function refreshSummary(hot) {
59
  hot.batch(() => {
60
    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);
61

62
    numericProps.forEach((prop) => {
63
      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);
64
    });
65
  });
66
}
67

68
const ExampleComponent = () => {
69
  return (
70
    <HotTable
71
      data={data}
72
      licenseKey="non-commercial-and-evaluation"
73
      rowHeaders={true}
74
      colHeaders={['Item', 'Units', 'Price', 'Tax']}
75
      fixedRowsBottom={1}
76
      height="auto"
77
      width="100%"
78
      columns={[
79
        { data: 'item', type: 'text', readOnly: false },
80
        { data: 'units', type: 'numeric', numericFormat: { pattern: '0' } },
81
        { data: 'price', type: 'numeric', numericFormat: { pattern: '0.00' } },
82
        { data: 'tax', type: 'numeric', numericFormat: { pattern: '0.00' } },
83
      ]}
84
      cells={function (row, _col, prop) {
85
        if (row !== summaryRowIndex) {
86
          return {};
87
        }
88

89
        const meta = {
90
          readOnly: true,
91
          className: 'htSummaryRow',
92
        };
93

94
        if (prop !== 'item') {
95
          meta.type = 'text';
96
          meta.className = 'htSummaryRow htRight';
97
        }
98

99
        return meta;
100
      }}
101
      afterInit={function () {
102
        refreshSummary(this);
103
      }}
104
      afterChange={function (changes, source) {
105
        if (!changes || source === SUMMARY_SOURCE) {
106
          return;
107
        }
108

109
        if (changes.every(([row]) => row === summaryRowIndex)) {
110
          return;
111
        }
112

113
        refreshSummary(this);
114
      }}
115
      beforeUndoStackChange={function (_doneActions, source) {
116
        if (source === SUMMARY_SOURCE) {
117
          return false;
118
        }
119
      }}
120
    />
121
  );
122
};
123

124
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import type Handsontable from 'handsontable/base';
4
import './example1.css';
5

6
registerAllModules();
7

8
type Row = {
9
  item: string;
10
  units: number | string;
11
  price: number | string;
12
  tax: number | string;
13
};
14

15
const SUMMARY_SOURCE = 'updateSummary';
16

17
function parseNumeric(value: unknown): number | null {
18
  if (typeof value === 'number' && Number.isFinite(value)) {
19
    return value;
20
  }
21

22
  if (typeof value === 'string' && value.trim() !== '') {
23
    const n = Number(value);
24

25
    if (Number.isFinite(n)) {
26
      return n;
27
    }
28
  }
29

30
  return null;
31
}
32

33
const data: Row[] = [
34
  { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },
35
  { item: 'Module B', units: 8, price: 120, tax: 8 },
36
  { item: 'Module C', units: 3, price: 200, tax: '\u2014' },
37
  { item: 'Module D', units: 15, price: 35, tax: 4.1 },
38
  { item: 'Module E', units: 0, price: 75, tax: 6 },
39
  { item: '', units: '', price: '', tax: '' },
40
];
41

42
const numericProps: (keyof Row)[] = ['units', 'price', 'tax'];
43
const summaryRowIndex = data.length - 1;
44

45
function formatSummary(prop: keyof Row): string {
46
  const numbers: number[] = [];
47

48
  for (let row = 0; row < summaryRowIndex; row += 1) {
49
    const n = parseNumeric(data[row][prop]);
50

51
    if (n !== null) {
52
      numbers.push(n);
53
    }
54
  }
55

56
  if (numbers.length === 0) {
57
    return '\u2014';
58
  }
59

60
  const sum = numbers.reduce((acc, n) => acc + n, 0);
61
  const avg = sum / numbers.length;
62

63
  return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;
64
}
65

66
function refreshSummary(hot: Handsontable): void {
67
  hot.batch(() => {
68
    hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);
69

70
    numericProps.forEach((prop) => {
71
      hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);
72
    });
73
  });
74
}
75

76
const ExampleComponent = () => {
77
  return (
78
    <HotTable
79
      data={data}
80
      licenseKey="non-commercial-and-evaluation"
81
      rowHeaders={true}
82
      colHeaders={['Item', 'Units', 'Price', 'Tax']}
83
      fixedRowsBottom={1}
84
      height="auto"
85
      width="100%"
86
      columns={[
87
        { data: 'item', type: 'text', readOnly: false },
88
        { data: 'units', type: 'numeric', numericFormat: { pattern: '0' } },
89
        { data: 'price', type: 'numeric', numericFormat: { pattern: '0.00' } },
90
        { data: 'tax', type: 'numeric', numericFormat: { pattern: '0.00' } },
91
      ]}
92
      cells={function (
93
        this: Handsontable.CellProperties,
94
        row: number,
95
        _col: number,
96
        prop: string | number,
97
      ): Handsontable.CellMeta {
98
        if (row !== summaryRowIndex) {
99
          return {};
100
        }
101

102
        const meta: Handsontable.CellProperties = {
103
          readOnly: true,
104
          className: 'htSummaryRow',
105
        };
106

107
        if (prop !== 'item') {
108
          meta.type = 'text';
109
          meta.className = 'htSummaryRow htRight';
110
        }
111

112
        return meta;
113
      }}
114
      afterInit={function (this: Handsontable): void {
115
        refreshSummary(this);
116
      }}
117
      afterChange={function (
118
        this: Handsontable,
119
        changes: Handsontable.CellChange[] | null,
120
        source: Handsontable.ChangeSource,
121
      ): void {
122
        if (!changes || source === SUMMARY_SOURCE) {
123
          return;
124
        }
125

126
        if (changes.every(([row]) => row === summaryRowIndex)) {
127
          return;
128
        }
129

130
        refreshSummary(this);
131
      }}
132
      beforeUndoStackChange={function (
133
        _doneActions: Handsontable.UndoRedoAction[],
134
        source: string | undefined,
135
      ): boolean | void {
136
        if (source === SUMMARY_SOURCE) {
137
          return false;
138
        }
139
      }}
140
    />
141
  );
142
};
143

144
export default ExampleComponent;

1
.htSummaryRow {
2
  font-weight: 600;
3
  background-color: var(--ht-background-color-extra-light, #f2f3f5);
4
}

Overview

This recipe pins a single summary row to the bottom of the grid so it stays visible while you scroll. The row shows sum, average, and count for each numeric column, skips non-numeric values, stays read-only, and updates whenever data changes.

Difficulty: Intermediate Time: ~20 minutes Libraries: None (core Handsontable only)

What you will build

A grid with at least five data rows and three numeric columns, plus one frozen bottom row.
Aggregates that ignore the summary row and ignore values that are not finite numbers.
Distinct styling (weight and background) applied through the cells callback.

Prerequisites

Basic Handsontable setup with registerAllModules.
Familiarity with fixedRowsBottom and afterChange.

Include the summary row in your data

Add one extra row at the end of your dataset. That row is both the last logical row and the row you freeze with fixedRowsBottom: 1. Keeping it in data lets you use normal APIs (setDataAtRowProp, renderers, validators) like any other row.
Freeze the bottom row

Set fixedRowsBottom: 1 so the summary row is always visible at the bottom of the viewport.
Compute sum, average, and count

For each numeric column, scan only data rows above the summary row. Use a small helper that returns a number for numeric strings and finite numbers, and null for everything else - so stray text does not break the aggregation.

For each column, compute:
- Sum - sum of parsed values.
- Avg - sum divided by how many numeric values you counted.
- Count - number of numeric values (not including blanks or non-numeric text).
Write the formatted string into the summary cells with setDataAtRowProp.
Recalculate on load and on edits
- Call your refresh function from afterInit so the summary is correct on first render.
- Call it from afterChange whenever a data cell changes.
Pass a custom source string (for example updateSummary) into setDataAtRowProp so your afterChange handler can ignore changes that only update the summary row. That avoids extra refresh passes or feedback loops.
Make the summary row read-only and styled

Use the cells callback (row, column, prop) to return metadata only for the summary row:
- Set readOnly: true so users cannot edit totals.
- Set className (for example htSummaryRow, and htRight on numeric columns) and define those classes in a small CSS file.
- For summary cells that display text aggregates, set type: 'text' so Handsontable does not run the numeric cell renderer on those strings.
Prefer Handsontable theme variables (for example --ht-background-color-extra-light) so the row still looks correct with different themes.

Row freezing - fixed rows top and bottom.
Column summary - built-in ColumnSummary plugin when you want declarative summaries instead of a custom row.

What you learned

How fixedRowsBottom pins the last N rows at the bottom of the grid so they stay visible during scrolling.
How to recalculate summary values in afterChange and afterInit and write them back with hot.setDataAtRowProp().
How to use the cells callback to mark only the summary row as readOnly and apply a custom className for styling.
Why you should use Handsontable theme CSS variables (such as --ht-background-color-extra-light) in your summary row styles so the row stays visually consistent across themes.

Next steps

Explore conditional row coloring to style data rows based on cell values while keeping the summary row fixed.
Explore the ColumnSummary plugin for a declarative, built-in alternative to a custom summary row.