JavaScript Data Grid ColumnSummary

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

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  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 (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 | 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 (opens new window)

columnSummary.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

enablePlugin

Source code (opens new window)

columnSummary.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

isEnabled

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.

updatePlugin

Source code (opens new window)

columnSummary.updatePlugin()

Updates the plugin's state.

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

Last update: Mar 6, 2024