React Data Grid ColumnSummary


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 (opens new window)

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 Round summary result
customFunction A function Custom summary function

Read more:

Default: undefined Example

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 (opens new window)


Disables the plugin functionality for this Handsontable instance.


Source code (opens new window)


Enables the plugin functionality for this Handsontable instance.


Source code (opens new window)

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.

Last Updated: Apr 19, 2024