Column summary

Calculate sum, min, max, count, average or custom aggregates of individual columns’ data, using Handsontable’s aggregate functions.

Overview

The ColumnSummary plugin lets you quickly calculate and display a column summary.

To customize your column summaries, you can:

Decide how a summary is calculated:
- Either select one of the built-in summary functions
- Or implement a custom summary function
Select columns and ranges of rows that you want to summarize
Display your summary result in a specific cell

Column summary example

This example calculates and displays five different column summaries:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    [1, 2, 3, 4, 5],
18
    [6, 7, 8, 9, 10],
19
    [11, 12, 13, 14, 15],
20
    // add an empty row
21
    [null]
22
  ];
23

24
  readonly hotSettings: GridSettings = {
25
    colHeaders: ['sum', 'min', 'max', 'count', 'average'],
26
    rowHeaders: true,
27
    // enable and configure the `ColumnSummary` plugin
28
    columnSummary: [
29
      {
30
        sourceColumn: 0,
31
        type: 'sum',
32
        destinationRow: 3,
33
        destinationColumn: 0,
34
        // force this column summary to treat non-numeric values as numeric values
35
        forceNumeric: true,
36
      },
37
      {
38
        sourceColumn: 1,
39
        type: 'min',
40
        destinationRow: 3,
41
        destinationColumn: 1,
42
      },
43
      {
44
        sourceColumn: 2,
45
        type: 'max',
46
        destinationRow: 3,
47
        destinationColumn: 2,
48
      },
49
      {
50
        sourceColumn: 3,
51
        type: 'count',
52
        destinationRow: 3,
53
        destinationColumn: 3,
54
      },
55
      {
56
        sourceColumn: 4,
57
        type: 'average',
58
        destinationRow: 3,
59
        destinationColumn: 4,
60
      },
61
    ],
62
    autoWrapRow: true,
63
    autoWrapCol: true,
64
    height: 'auto',
65
  };
66
}
67
/* end-file */
68

69

70
/* file: app.module.ts */
71
import { NgModule, ApplicationConfig } from '@angular/core';
72
import { BrowserModule } from '@angular/platform-browser';
73
import { registerAllModules } from 'handsontable/registry';
74
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
75
import { CommonModule } from '@angular/common';
76
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
77

78
/* start:skip-in-compilation */
79
import { AppComponent } from './app.component';
80
/* end:skip-in-compilation */
81

82
// register Handsontable's modules
83
registerAllModules();
84

85
export const appConfig: ApplicationConfig = {
86
  providers: [
87
    {
88
      provide: HOT_GLOBAL_CONFIG,
89
      useValue: {
90
        license: NON_COMMERCIAL_LICENSE,
91
      } as HotGlobalConfig
92
    }
93
  ],
94
};
95

96
@NgModule({
97
  imports: [ BrowserModule, HotTableModule, CommonModule ],
98
  declarations: [ AppComponent ],
99
  providers: [...appConfig.providers],
100
  bootstrap: [ AppComponent ]
101
})
102

103
export class AppModule { }
104
/* end-file */

1
<div>
2
    <app-example1></app-example1>
3
</div>

Built-in summary functions

To decide how a column summary is calculated, you can use one of the following summary functions:

Function	Description
`sum`	Returns the sum of all values in a column.
`min`	Returns the lowest value in a column.
`max`	Returns the highest value in a column.
`count`	Returns the number of all non-empty cells in a column.
`average`	Returns the sum of all values in a column, divided by the number of non-empty cells in that column.
`custom`	Lets you implement a custom summary function.

Column summary options

You can customize each of your column summaries with configuration options.

For the full list of available options, see the API reference.

Set up a column summary

To set up a column summary, follow the steps below.

Enable the `ColumnSummary` plugin

To enable the ColumnSummary plugin, set the columnSummary configuration option to an array of objects. Each object represents a single column summary.

1
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";
2

3
const data = [
4
  [1, 2, 3, 4, 5],
5
  [6, 7, 8, 9, 10],
6
  [11, 12, 13, 14, 15],
7
];
8
const configurationOptions: GridSettings = {
9
  licenseKey: "non-commercial-and-evaluation",
10
  colHeaders: true,
11
  rowHeaders: true,
12
  // set the `columnSummary` configuration option to an array of objects
13
  columnSummary: [{}, {}],
14
};

1
<hot-table [data]="data" [settings]="configurationOptions"></hot-table>

You can also set the columnSummary option to a function.

Select cells that you want to summarize

By default, a column summary takes all cells of the column in which it displays its result (see the destinationColumn option in step 4).

To summarize any other column, use the sourceColumn option:

1
columnSummary: [
2
  {
3
    // set this column summary to summarize the first column
4
    // (i.e. a column with physical index `0`)
5
    sourceColumn: 0,
6
  },
7
  {
8
    // set this column summary to summarize the second column
9
    // (i.e. a column with physical index `1`)
10
    sourceColumn: 1,
11
  },
12
];

You can also summarize individual ranges of rows (rather than a whole column). To do this, set the ranges option to an array of arrays, where each array represents a single row range.

1
columnSummary: [
2
  {
3
    sourceColumn: 0,
4
    // set this column summary to only summarize rows with physical
5
    // indexes 0-2, 4, and 6-8
6
    ranges: [[0, 2], [4], [6, 8]],
7
  },
8
  {
9
    sourceColumn: 0,
10
    // set this column summary to only summarize rows with physical
11
    // indexes 0-5
12
    ranges: [[0, 5]],
13
  },
14
];

Calculate your summary

Now, decide how you want to calculate your column summary.

You can:

Either select one of the built-in summary functions
Or implement a custom summary function

1
columnSummary: [
2
  {
3
    sourceColumn: 0,
4
    // set this column summary to return the sum all values in the
5
    // summarized column
6
    type: "sum",
7
  },
8
  {
9
    sourceColumn: 1,
10
    // set this column summary to return the lowest value in the
11
    // summarized column
12
    type: "min",
13
  },
14
];

Provide the destination cell’s coordinates

To display your column summary result in a cell, provide the destination cell’s coordinates.

Set the destinationRow and destinationColumn options to the physical coordinates of your required cell.
```
1
columnSummary: [
2
  {
3
    sourceColumn: 0,
4
    type: "sum",
5
    // set this column summary to display its result in cell (4, 0)
6
    destinationRow: 4,
7
    destinationColumn: 0,
8
  },
9
  {
10
    sourceColumn: 1,
11
    type: "min",
12
    // set this column summary to display its result in cell (4, 1)
13
    destinationRow: 4,
14
    destinationColumn: 1,
15
  },
16
];
```
Don't change the className metadata of the summary row.
If you need to style the summary row, use the class name assigned automatically by the ColumnSummary plugin: columnSummaryResult.
Make room for the destination cell

The ColumnSummary plugin doesn’t automatically add new rows to display its summary results.

So, if you always want to display your column summary result below your existing rows, you need to:
1. Add an empty row to the bottom of your grid (to avoid overwriting your existing rows).
2. Reverse row coordinates for your column summary (to always display your summary result at the bottom).
To reverse row coordinates for your column summary, set the reversedRowCoords option to true, and adjust the destinationRow coordinate.
TypeScript
```
1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    [1, 2, 3, 4, 5],
18
    [6, 7, 8, 9, 10],
19
    [11, 12, 13, 14, 15],
20
    // add an empty row
21
    [null],
22
  ];
23

24
  readonly hotSettings: GridSettings = {
25
    colHeaders: true,
26
    rowHeaders: true,
27
    columnSummary: [
28
      {
29
        sourceColumn: 0,
30
        type: 'sum',
31
        // for this column summary, count row coordinates backward
32
        reversedRowCoords: true,
33
        // now, to always display this column summary in the bottom row,
34
        // set `destinationRow` to `0` (i.e. the last possible row)
35
        destinationRow: 0,
36
        destinationColumn: 0,
37
      },
38
      {
39
        sourceColumn: 1,
40
        type: 'min',
41
        // for this column summary, count row coordinates backward
42
        reversedRowCoords: true,
43
        // now, to always display this column summary in the bottom row,
44
        // set `destinationRow` to `0` (i.e. the last possible row)
45
        destinationRow: 0,
46
        destinationColumn: 1,
47
      },
48
    ],
49
    autoWrapRow: true,
50
    autoWrapCol: true,
51
    height: 'auto',
52
  };
53
}
54
/* end-file */
55

56

57
/* file: app.module.ts */
58
import { NgModule, ApplicationConfig } from '@angular/core';
59
import { BrowserModule } from '@angular/platform-browser';
60
import { registerAllModules } from 'handsontable/registry';
61
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
62
import { CommonModule } from '@angular/common';
63
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
64

65
/* start:skip-in-compilation */
66
import { AppComponent } from './app.component';
67
/* end:skip-in-compilation */
68

69
// register Handsontable's modules
70
registerAllModules();
71

72
export const appConfig: ApplicationConfig = {
73
  providers: [
74
    {
75
      provide: HOT_GLOBAL_CONFIG,
76
      useValue: {
77
        license: NON_COMMERCIAL_LICENSE,
78
      } as HotGlobalConfig
79
    }
80
  ],
81
};
82

83
@NgModule({
84
  imports: [ BrowserModule, HotTableModule, CommonModule ],
85
  declarations: [ AppComponent ],
86
  providers: [...appConfig.providers],
87
  bootstrap: [ AppComponent ]
88
})
89

90
export class AppModule { }
91
/* end-file */
```
HTML
```
1
<div>
2
  <app-example2></app-example2>
3
</div>
```

Set up column summaries, using a function

Instead of setting up the column summary options manually, you can provide the whole column summary configuration as a function that returns a required array of objects.

The example below sets up five different column summaries. To do this, it:

Defines a function named generateData which generates an array of arrays with dummy numeric data, and which lets you add an empty row at the bottom of the grid (to make room for displaying column summaries)
Sets Handsontable’s columnSummary configuration option to a function that: - Iterates over visible columns
- For each visible column, adds a column summary with a configuration
- To display the column summaries in the empty row added by generateData, sets the reversedRowCoords option to true, and the destinationRow option to 0

1
/* file: app.component.ts */
2
import { Component, OnInit } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example3',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent implements OnInit {
15

16
  hotData: number[][] = [];
17

18
  readonly hotSettings: GridSettings = {
19
    height: 'auto',
20
    rowHeaders: true,
21
    colHeaders: ['sum', 'min', 'max', 'count', 'average'],
22
    // set the `columnSummary` configuration option to a function
23
    // @ts-ignore
24
    columnSummary() {
25
      const configArray = [];
26
      const summaryTypes = ['sum', 'min', 'max', 'count', 'average'];
27

28
      for (let i = 0; i < this.hot.countCols(); i++) {
29
        // iterate over visible columns
30
        // for each visible column, add a column summary with a configuration
31
        configArray.push({
32
          sourceColumn: i,
33
          type: summaryTypes[i],
34
          // count row coordinates backward
35
          reversedRowCoords: true,
36
          // display the column summary in the bottom row (because of the reversed row coordinates)
37
          destinationRow: 0,
38
          destinationColumn: i,
39
          forceNumeric: true,
40
        });
41
      }
42

43
      return configArray;
44
    },
45
    autoWrapRow: true,
46
    autoWrapCol: true,
47
  };
48

49
  ngOnInit() {
50
    // initialize a Handsontable instance with the generated data
51
    this.hotData = this.generateData(5, 5, true);
52
  }
53

54
  private generateData = (rows = 3, columns = 7, additionalRows = true) => {
55
    let counter = 0;
56
    const array2d = [...new Array(rows)].map((_) =>
57
      [...new Array(columns)].map((_) => counter++)
58
    );
59

60
    // add an empty row at the bottom, to display column summaries
61
    if (additionalRows) {
62
      array2d.push([]);
63
    }
64

65
    return array2d;
66
  };
67
}
68
/* end-file */
69

70

71
/* file: app.module.ts */
72
import { NgModule, ApplicationConfig } from '@angular/core';
73
import { BrowserModule } from '@angular/platform-browser';
74
import { registerAllModules } from 'handsontable/registry';
75
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
76
import { CommonModule } from '@angular/common';
77
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
78

79
/* start:skip-in-compilation */
80
import { AppComponent } from './app.component';
81
/* end:skip-in-compilation */
82

83
// register Handsontable's modules
84
registerAllModules();
85

86
export const appConfig: ApplicationConfig = {
87
  providers: [
88
    {
89
      provide: HOT_GLOBAL_CONFIG,
90
      useValue: {
91
        license: NON_COMMERCIAL_LICENSE,
92
      } as HotGlobalConfig
93
    }
94
  ],
95
};
96

97
@NgModule({
98
  imports: [ BrowserModule, HotTableModule, CommonModule ],
99
  declarations: [ AppComponent ],
100
  providers: [...appConfig.providers],
101
  bootstrap: [ AppComponent ]
102
})
103

104
export class AppModule { }
105
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</div>

Using a function to provide a column summary configuration lets you set up all sorts of more complex column summaries. For example, you can sum subtotals for nested groups:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example4',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [
17
    {
18
      value: null,
19
      __children: [{ value: 5 }, { value: 6 }, { value: 7 }],
20
    },
21
    {
22
      __children: [{ value: 15 }, { value: 16 }, { value: 17 }],
23
    },
24
  ];
25

26
  readonly hotSettings: GridSettings = {
27
    columns: [{ data: 'value' }],
28
    nestedRows: true,
29
    rowHeaders: true,
30
    colHeaders: ['sum', 'min', 'max', 'count', 'average'],
31
    // @ts-ignore
32
    columnSummary() {
33
      const endpoints = [];
34
      const nestedRowsPlugin = this.hot.getPlugin('nestedRows');
35
      // @ts-ignore
36
      const getRowIndex = nestedRowsPlugin.dataManager.getRowIndex.bind(
37
        // @ts-ignore
38
        nestedRowsPlugin.dataManager
39
      );
40

41
      const resultColumn = 0;
42
      let nestedRowsCache = null;
43

44
      if (nestedRowsPlugin.isEnabled()) {
45
        // @ts-ignore
46
        nestedRowsCache = nestedRowsPlugin.dataManager.cache;
47
      } else {
48
        return [];
49
      }
50

51
      if (!nestedRowsCache) {
52
        return [];
53
      }
54

55
      for (let i = 0; i < nestedRowsCache.levels[0].length; i++) {
56
        if (
57
          !nestedRowsCache.levels[0][i].__children ||
58
          nestedRowsCache.levels[0][i].__children.length === 0
59
        ) {
60
          continue;
61
        }
62

63
        const tempEndpoint = {
64
          destinationColumn: resultColumn,
65
          destinationRow: getRowIndex(nestedRowsCache.levels[0][i]),
66
          type: 'sum',
67
          forceNumeric: true,
68
          ranges: [],
69
        };
70

71
        // @ts-ignore
72
        tempEndpoint.ranges.push([
73
          getRowIndex(nestedRowsCache.levels[0][i].__children[0]),
74
          getRowIndex(
75
            nestedRowsCache.levels[0][i].__children[
76
            nestedRowsCache.levels[0][i].__children.length - 1
77
              ]
78
          ),
79
        ] as any);
80
        endpoints.push(tempEndpoint);
81
      }
82

83
      return endpoints;
84
    },
85
    autoWrapRow: true,
86
    autoWrapCol: true,
87
    height: 'auto',
88
  };
89
}
90
/* end-file */
91

92

93
/* file: app.module.ts */
94
import { NgModule, ApplicationConfig } from '@angular/core';
95
import { BrowserModule } from '@angular/platform-browser';
96
import { registerAllModules } from 'handsontable/registry';
97
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
98
import { CommonModule } from '@angular/common';
99
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
100

101
/* start:skip-in-compilation */
102
import { AppComponent } from './app.component';
103
/* end:skip-in-compilation */
104

105
// register Handsontable's modules
106
registerAllModules();
107

108
export const appConfig: ApplicationConfig = {
109
  providers: [
110
    {
111
      provide: HOT_GLOBAL_CONFIG,
112
      useValue: {
113
        license: NON_COMMERCIAL_LICENSE,
114
      } as HotGlobalConfig
115
    }
116
  ],
117
};
118

119
@NgModule({
120
  imports: [ BrowserModule, HotTableModule, CommonModule ],
121
  declarations: [ AppComponent ],
122
  providers: [...appConfig.providers],
123
  bootstrap: [ AppComponent ]
124
})
125

126
export class AppModule { }
127
/* end-file */

1
<div>
2
  <app-example4></app-example4>
3
</div>

Implement a custom summary function

Apart from using the built-in summary functions, you can also implement your own custom function that performs any summary calculation you want.

To implement a custom summary function:

Set up your column summary.
In your column summary object, set the type option to 'custom':

1
columnSummary: [
2
  {
3
    sourceColumn: 1,
4
    // set the `type` option to `'custom'`
5
    type: "custom",
6
    destinationRow: 0,
7
    destinationColumn: 5,
8
    reversedRowCoords: true,
9
  },
10
];

In your column summary object, add your custom summary function:

1
columnSummary: [
2
  {
3
    type: "custom",
4
    destinationRow: 0,
5
    destinationColumn: 5,
6
    reversedRowCoords: true,
7
    // add your custom summary function
8
    customFunction: function (endpoint) {
9
      // implement your function here
10
    },
11
  },
12
];

This example implements a function that counts the number of even values in a column:

1
/* file: app.component.ts */
2
import { Component, OnInit } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example5',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent implements OnInit {
15

16
  hotData: number[][] = [];
17

18
  readonly hotSettings: GridSettings = {
19
    height: 'auto',
20
    colHeaders: true,
21
    rowHeaders: true,
22
    // enable the `ColumnSummary` plugin
23
    columnSummary: [
24
      // configure a column summary
25
      {
26
        // set the `type` option to `'custom'`
27
        type: 'custom',
28
        destinationRow: 0,
29
        destinationColumn: 5,
30
        reversedRowCoords: true,
31
        // add your custom summary function
32
        customFunction(endpoint) {
33
          // implement a function that counts the number of even values in the column
34
          const hotInstance = this.hot;
35
          let evenCount = 0;
36
          // a helper function
37
          const checkRange = (rowRange: any) => {
38
            let i = rowRange[1] || rowRange[0];
39
            let counter = 0;
40

41
            do {
42
              if (
43
                parseInt(
44
                  hotInstance.getDataAtCell(i, endpoint.sourceColumn),
45
                  10
46
                ) %
47
                2 ===
48
                0
49
              ) {
50
                counter++;
51
              }
52

53
              i--;
54
            } while (i >= rowRange[0]);
55

56
            return counter;
57
          };
58

59
          // go through all declared ranges
60
          for (const r in endpoint.ranges) {
61
            if (endpoint.ranges.hasOwnProperty(r)) {
62
              evenCount += checkRange(endpoint.ranges[r]);
63
            }
64
          }
65

66
          return evenCount;
67
        },
68
        forceNumeric: true,
69
      },
70
    ],
71
    autoWrapRow: true,
72
    autoWrapCol: true,
73
  };
74

75
  ngOnInit() {
76
    // initialize a Handsontable instance with the generated numeric data
77
    this.hotData = this.generateData(5, 7);
78
  }
79

80
  // generate an array of arrays with dummy numeric data
81
  private generateData = (rows = 3, columns = 7, additionalRows = true) => {
82
    let counter = 0;
83
    const array2d = [...new Array(rows)].map((_) =>
84
      [...new Array(columns)].map((_) => counter++)
85
    );
86

87
    if (additionalRows) {
88
      array2d.push([]);
89
      array2d.push([]);
90
    }
91

92
    return array2d;
93
  };
94
}
95
/* end-file */
96

97

98
/* file: app.module.ts */
99
import { NgModule, ApplicationConfig } from '@angular/core';
100
import { BrowserModule } from '@angular/platform-browser';
101
import { registerAllModules } from 'handsontable/registry';
102
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
103
import { CommonModule } from '@angular/common';
104
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
105

106
/* start:skip-in-compilation */
107
import { AppComponent } from './app.component';
108
/* end:skip-in-compilation */
109

110
// register Handsontable's modules
111
registerAllModules();
112

113
export const appConfig: ApplicationConfig = {
114
  providers: [
115
    {
116
      provide: HOT_GLOBAL_CONFIG,
117
      useValue: {
118
        license: NON_COMMERCIAL_LICENSE,
119
      } as HotGlobalConfig
120
    }
121
  ],
122
};
123

124
@NgModule({
125
  imports: [ BrowserModule, HotTableModule, CommonModule ],
126
  declarations: [ AppComponent ],
127
  providers: [...appConfig.providers],
128
  bootstrap: [ AppComponent ]
129
})
130

131
export class AppModule { }
132
/* end-file */

1
<div>
2
  <app-example5></app-example5>
3
</div>

Round a column summary result

You can round a column summary result to a specific number of digits after the decimal point.

To enable this feature, set the roundFloat option to your preferred number of digits between 0 and 100. See the following example:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example6',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [[0.5, 0.5], [0.5, 0.5], [1, 1], [], []];
17

18
  readonly hotSettings: GridSettings = {
19
    colHeaders: true,
20
    rowHeaders: true,
21
    columnSummary: [
22
      {
23
        type: 'average',
24
        destinationRow: 0,
25
        destinationColumn: 0,
26
        reversedRowCoords: true,
27
      },
28
      {
29
        type: 'average',
30
        destinationRow: 0,
31
        destinationColumn: 1,
32
        reversedRowCoords: true,
33
        // round this column summary result to two digits after the decimal point
34
        roundFloat: 2,
35
      },
36
    ],
37
    autoWrapRow: true,
38
    autoWrapCol: true,
39
    height: 'auto',
40
  };
41
}
42
/* end-file */
43

44

45
/* file: app.module.ts */
46
import { NgModule, ApplicationConfig } from '@angular/core';
47
import { BrowserModule } from '@angular/platform-browser';
48
import { registerAllModules } from 'handsontable/registry';
49
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
50
import { CommonModule } from '@angular/common';
51
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
52

53
/* start:skip-in-compilation */
54
import { AppComponent } from './app.component';
55
/* end:skip-in-compilation */
56

57
// register Handsontable's modules
58
registerAllModules();
59

60
export const appConfig: ApplicationConfig = {
61
  providers: [
62
    {
63
      provide: HOT_GLOBAL_CONFIG,
64
      useValue: {
65
        license: NON_COMMERCIAL_LICENSE,
66
      } as HotGlobalConfig
67
    }
68
  ],
69
};
70

71
@NgModule({
72
  imports: [ BrowserModule, HotTableModule, CommonModule ],
73
  declarations: [ AppComponent ],
74
  providers: [...appConfig.providers],
75
  bootstrap: [ AppComponent ]
76
})
77

78
export class AppModule { }
79
/* end-file */

1
<div>
2
    <app-example6></app-example6>
3
</div>

The roundFloat option accepts the following values:

Value	Behavior
`false` (default)	Don’t round the column summary result.
`true`	Round the result to 0 digits after the decimal point.
Integer 0-100 (n)	Round the result to n digits after the decimal point.
Integer < 0	Round the result to 0 digits after the decimal point.
Integer > 100	Round the result to 100 digits after the decimal point.
`'auto'`	Automatically adjust the number of digits after the decimal point so the entire number fits into 8 digits.

If you enable roundFloat, the data type returned by Handsontable’s data-retrieving methods (like getDataAtCell()) changes from number to string.

Handle non-numeric values

To summarize a column that contains non-numeric data, you can:

Either force your column summary to treat non-numeric values as numeric values
Or throw an error whenever a non-numeric value is passed to your column summary
Or make your column summary skip any non-numeric values

Force numeric values

You can force your column summary to treat non-numeric values as numeric values.

To enable this feature, set the forceNumeric option to true (by default, forceNumeric is set to false). For example:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example7',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];
17

18
  readonly hotSettings: GridSettings = {
19
    colHeaders: true,
20
    rowHeaders: true,
21
    columnSummary: [
22
      {
23
        type: 'sum',
24
        destinationRow: 0,
25
        destinationColumn: 0,
26
        reversedRowCoords: true,
27
        // force this column summary to treat non-numeric values as numeric values
28
        forceNumeric: true,
29
      },
30
      {
31
        type: 'sum',
32
        destinationRow: 0,
33
        destinationColumn: 1,
34
        reversedRowCoords: true,
35
        // force this column summary to treat non-numeric values as numeric values
36
        forceNumeric: true,
37
      },
38
    ],
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
    height: 'auto',
42
  };
43
}
44
/* end-file */
45

46

47
/* file: app.module.ts */
48
import { NgModule, ApplicationConfig } from '@angular/core';
49
import { BrowserModule } from '@angular/platform-browser';
50
import { registerAllModules } from 'handsontable/registry';
51
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
52
import { CommonModule } from '@angular/common';
53
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
54

55
/* start:skip-in-compilation */
56
import { AppComponent } from './app.component';
57
/* end:skip-in-compilation */
58

59
// register Handsontable's modules
60
registerAllModules();
61

62
export const appConfig: ApplicationConfig = {
63
  providers: [
64
    {
65
      provide: HOT_GLOBAL_CONFIG,
66
      useValue: {
67
        license: NON_COMMERCIAL_LICENSE,
68
      } as HotGlobalConfig
69
    }
70
  ],
71
};
72

73
@NgModule({
74
  imports: [ BrowserModule, HotTableModule, CommonModule ],
75
  declarations: [ AppComponent ],
76
  providers: [...appConfig.providers],
77
  bootstrap: [ AppComponent ]
78
})
79

80
export class AppModule { }
81
/* end-file */

1
<div>
2
    <app-example7></app-example7>
3
</div>

Throw data type errors

You can throw a data type error whenever a non-numeric value is passed to your column summary.

To throw data type errors, set the suppressDataTypeErrors option to false (by default, suppressDataTypeErrors is set to true). For example:

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example8',
7
  template: `
8
    <hot-table
9
      [settings]="hotSettings!" [data]="hotData">
10
    </hot-table>
11
  `,
12
  standalone: false
13
})
14
export class AppComponent {
15

16
  readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];
17

18
  readonly hotSettings: GridSettings = {
19
    colHeaders: true,
20
    rowHeaders: true,
21
    columnSummary: [
22
      {
23
        type: 'sum',
24
        destinationRow: 0,
25
        destinationColumn: 0,
26
        reversedRowCoords: true,
27
        // enable throwing data type errors for this column summary
28
        suppressDataTypeErrors: false,
29
      },
30
      {
31
        type: 'sum',
32
        destinationRow: 0,
33
        destinationColumn: 1,
34
        reversedRowCoords: true,
35
        // enable throwing data type errors for this column summary
36
        suppressDataTypeErrors: false,
37
      },
38
    ],
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
    height: 'auto',
42
  };
43
}
44
/* end-file */
45

46

47
/* file: app.module.ts */
48
import { NgModule, ApplicationConfig } from '@angular/core';
49
import { BrowserModule } from '@angular/platform-browser';
50
import { registerAllModules } from 'handsontable/registry';
51
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
52
import { CommonModule } from '@angular/common';
53
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
54

55
/* start:skip-in-compilation */
56
import { AppComponent } from './app.component';
57
/* end:skip-in-compilation */
58

59
// register Handsontable's modules
60
registerAllModules();
61

62
export const appConfig: ApplicationConfig = {
63
  providers: [
64
    {
65
      provide: HOT_GLOBAL_CONFIG,
66
      useValue: {
67
        license: NON_COMMERCIAL_LICENSE,
68
      } as HotGlobalConfig
69
    }
70
  ],
71
};
72

73
@NgModule({
74
  imports: [ BrowserModule, HotTableModule, CommonModule ],
75
  declarations: [ AppComponent ],
76
  providers: [...appConfig.providers],
77
  bootstrap: [ AppComponent ]
78
})
79

80
export class AppModule { }
81
/* end-file */

1
<div>
2
    <app-example8></app-example8>
3
</div>

Configuration options

columnSummary

Plugins

ColumnSummary