React Data GridColumnSummary


The ColumnSummary plugin lets you easily summarize your columns.

You can use the built-in summary functions, or implement a custom summary function.

For each column summary, you can set the following configuration options:

Option Required Type Default Description
sourceColumn No Number Same as destinationColumn Selects a column to summarize
ranges No Array - Selects ranges of rows to summarize
type Yes String - Sets a summary function
destinationRow Yes Number - Sets the destination cell's row coordinate
destinationColumn Yes Number - Sets the destination cell's column coordinate
forceNumeric No Boolean false Forces the summary to treat non-numerics as numerics
reversedRowCoords No Boolean false Reverses row coordinates
suppressDataTypeErrors No Boolean true Suppresses data type errors
readOnly No Boolean true Makes summary cell read-only
roundFloat No Number/
- Rounds summary result
customFunction No Function - Lets you add a custom summary function


      type: 'min',
      destinationRow: 4,
      destinationColumn: 1,
      type: 'max',
      destinationRow: 0,
      destinationColumn: 3,
      reversedRowCoords: true
      type: 'sum',
      destinationRow: 4,
      destinationColumn: 5,
      forceNumeric: true



Source code

columnSummary.columnSummary : Array<object> | function

The columnSummary option configures the ColumnSummary plugin.

You can set the columnSummary option to an array of objects. Each object configures a single column summary, using the following properties:

Property Possible values Description
sourceColumn A number Column to summarize
ranges An array Ranges of rows to summarize
type 'sum' | 'min' | 'max' | 'count' | 'average' | 'custom' Summary function
destinationRow A number Destination cell's row coordinate
destinationColumn A number Destination cell's column coordinate
forceNumeric true | false Treat non-numerics as numerics
reversedRowCoords true | false Reverse row coordinates
suppressDataTypeErrors true | false Suppress data type errors
readOnly true | false Make summary cell read-only
roundFloat true | false | A number Round summary result
customFunction A function Custom summary function

Read more:

Default: undefined

columnSummary: [
    sourceColumn: 0,
    ranges: [
      [0, 2], [4], [6, 8]
    type: 'custom',
    destinationRow: 4,
    destinationColumn: 1,
    forceNumeric: true,
    reversedRowCoords: true,
    suppressDataTypeErrors: false,
    readOnly: true,
    roundFloat: false,
    customFunction(endpoint) {
       return 100;



Source code


Disables the plugin functionality for this Handsontable instance.


Source code


Enables the plugin functionality for this Handsontable instance.


Source code

columnSummary.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true then the ColumnSummary#enablePlugin method is called.


Source code


Updates the plugin's state.

This method is executed when updateSettings() is invoked with any of the following configuration options: