This page covers a non-latest version of Handsontable.
# CustomBorders
# Description
This plugin enables an option to apply custom borders through the context menu (configurable with context menu key
borders
).
To initialize Handsontable with predefined custom borders, provide cell coordinates and border styles in a form of an array.
See Custom Borders demo for more examples.
Example
customBorders: [
{
range: {
from: {
row: 1,
col: 1
},
to: {
row: 3,
col: 4
},
},
left: {},
right: {},
top: {},
bottom: {},
},
],
// or
customBorders: [
{ row: 2,
col: 2,
left: {
width: 2,
color: 'red',
},
right: {
width: 1,
color: 'green',
},
top: '',
bottom: '',
}
],
# Options
# customBorders
Source code (opens new window)customBorders.customBorders : boolean | Array<object>
If true
, enables the CustomBorders plugin, which enables an option to apply custom borders through the context
menu (configurable with context menu key borders
). To initialize Handsontable with predefined custom borders,
provide cell coordinates and border styles in a form of an array.
See Custom Borders demo for examples.
Default: false
Example
// enable custom borders
customBorders: true,
// or
// enable custom borders and start with predefined left border
customBorders: [
{
range: {
from: {
row: 1,
col: 1
},
to: {
row: 3,
col: 4
}
},
left: {
width: 2,
color: 'red'
},
right: {},
top: {},
bottom: {}
}
],
// or
customBorders: [
{
row: 2,
col: 2,
left: {
width: 2,
color: 'red'
},
right: {
width: 1,
color: 'green'
},
top: '',
bottom: ''
}
],
# Methods
# clearBorders
Source code (opens new window)customBorders.clearBorders(selectionRanges)
Clear custom borders.
Example
const customBordersPlugin = hot.getPlugin('customBorders');
// Using an array of arrays (produced by `.getSelected()` method).
customBordersPlugin.clearBorders([[1, 1, 2, 2], [6, 2, 0, 2]]);
// Using an array of CellRange objects (produced by `.getSelectedRange()` method).
customBordersPlugin.clearBorders(hot.getSelectedRange());
// Using without param - clear all customBorders.
customBordersPlugin.clearBorders();
Param | Type | Description |
---|---|---|
selectionRanges | Array<Array> Array<CellRange> | Array of selection ranges. |
# destroy
Source code (opens new window)customBorders.destroy()
Destroys the plugin instance.
# disablePlugin
Source code (opens new window)customBorders.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
# enablePlugin
Source code (opens new window)customBorders.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
# getBorders
Source code (opens new window)customBorders.getBorders(selectionRanges) ⇒ Array<object>
Get custom borders.
Example
const customBordersPlugin = hot.getPlugin('customBorders');
// Using an array of arrays (produced by `.getSelected()` method).
customBordersPlugin.getBorders([[1, 1, 2, 2], [6, 2, 0, 2]]);
// Using an array of CellRange objects (produced by `.getSelectedRange()` method).
customBordersPlugin.getBorders(hot.getSelectedRange());
// Using without param - return all customBorders.
customBordersPlugin.getBorders();
Param | Type | Description |
---|---|---|
selectionRanges | Array<Array> Array<CellRange> | Array of selection ranges. |
Returns: Array<object>
- Returns array of border objects.
# isEnabled
Source code (opens new window)customBorders.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 CustomBorders#enablePlugin method is called.
# setBorders
Source code (opens new window)customBorders.setBorders(selectionRanges, borderObject)
Set custom borders.
Example
const customBordersPlugin = hot.getPlugin('customBorders');
// Using an array of arrays (produced by `.getSelected()` method).
customBordersPlugin.setBorders([[1, 1, 2, 2], [6, 2, 0, 2]], {left: {width: 2, color: 'blue'}});
// Using an array of CellRange objects (produced by `.getSelectedRange()` method).
// Selecting a cell range.
hot.selectCell(0, 0, 2, 2);
// Returning selected cells' range with the getSelectedRange method.
customBordersPlugin.setBorders(hot.getSelectedRange(), {left: {hide: false, width: 2, color: 'blue'}});
Param | Type | Description |
---|---|---|
selectionRanges | Array<Array> Array<CellRange> | Array of selection ranges. |
borderObject | object | Object with top , right , bottom and left properties. |
# updatePlugin
Source code (opens new window)customBorders.updatePlugin()
Updates the plugin state. This method is executed when Core#updateSettings is invoked.