This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# 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 - 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 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 than the ColumnSummary#enablePlugin method is called.

Last Updated: Apr 12, 2024