JavaScript Data Grid ColumnSummary

Description
Options
- columnSummary
Methods

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

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

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.

← ColumnSorting Comments →