React Data GridColumnSummary

Description

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/
Boolean
- Rounds summary result
customFunction No Function - Lets you add a custom summary function

Example

<HotTable data={getData()} colHeaders={true} rowHeaders={true} columnSummary={[ { type: 'min', destinationRow: 4, destinationColumn: 1, }, { type: 'max', destinationRow: 0, destinationColumn: 3, reversedRowCoords: true }, { type: 'sum', destinationRow: 4, destinationColumn: 5, forceNumeric: true } ]} /> 

Options

columnSummary

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
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; } } ], 

Methods

disablePlugin

Source code

columnSummary.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code

columnSummary.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

isEnabled

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.

updatePlugin

Source code

columnSummary.updatePlugin()

Updates the plugin's state.

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