React Data GridHiddenColumns
Description
The HiddenColumns
plugin lets you hide specified columns.
"Hiding a column" means that the hidden column doesn't get rendered as a DOM element.
The HiddenColumns
plugin doesn't modify the source data,
and doesn't participate in data transformation
(the shape of the data returned by the getData*()
methods stays intact).
You can set the following configuration options:
Option | Required | Type | Default | Description |
---|---|---|---|---|
columns | No | Array | - | Hides specified columns by default |
indicators | No | Boolean | false | Shows UI indicators |
copyPasteEnabled | No | Boolean | true | Sets up copy/paste behavior |
Example
const hotRef = useRef(null);
...
<HotTable
ref={hotRef}
data={getData()}
hiddenColumns={{
copyPasteEnabled: true,
indicators: true,
columns: [1, 2, 5]
}}
/>
// access the `HiddenColumns` plugin's instance
const hot = hotRef.current.hotInstance;
const hiddenColumnsPlugin = hot.getPlugin('hiddenColumns');
// hide a single column
hiddenColumnsPlugin.hideColumn(1);
// hide multiple columns
hiddenColumnsPlugin.hideColumn(1, 2, 9);
// hide multiple columns as an array
hiddenColumnsPlugin.hideColumns([1, 2, 9]);
// unhide a single column
hiddenColumnsPlugin.showColumn(1);
// unhide multiple columns
hiddenColumnsPlugin.showColumn(1, 2, 9);
// unhide multiple columns as an array
hiddenColumnsPlugin.showColumns([1, 2, 9]);
// to see your changes, re-render your Handsontable instance
hot.render();
Options
hiddenColumns
Source codehiddenColumns.hiddenColumns : boolean | object
The hiddenColumns
option configures the HiddenColumns
plugin.
You can set the hiddenColumns
option to one of the following:
Setting | Description |
---|---|
false | Disable the HiddenColumns plugin |
true | Enable the HiddenColumns plugin with the default plugin options |
An object | - Enable the HiddenColumns plugin- Modify the plugin options |
If you set the hiddenColumns
to an object, you can set the following HiddenColumns
plugin options:
Property | Possible values | Description |
---|---|---|
columns | An array of indexes | An array of indexes of columns that are hidden at initialization |
copyPasteEnabled | true | false | true : when copying or pasting data, take hidden columns into accountfalse : when copying or pasting data, don't take hidden columns into account |
indicators | true | false | true : display UI markers to indicate the presence of hidden columnsfalse : display UI markers |
Read more:
Default: undefined
Example
// enable the `HiddenColumns` plugin
hiddenColumns: true,
// enable `HiddenColumns` plugin, and modify the plugin options
hiddenColumns: {
// set columns that are hidden by default
columns: [5, 10, 15],
// when copying or pasting data, take hidden columns into account
copyPasteEnabled: true,
// show where hidden columns are
indicators: true
}
Methods
destroy
Source codehiddenColumns.destroy()
Destroys the plugin instance.
disablePlugin
Source codehiddenColumns.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
enablePlugin
Source codehiddenColumns.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
getHiddenColumns
Source codehiddenColumns.getHiddenColumns() ⇒ Array<number>
Returns an array of visual indexes of hidden columns.
hideColumn
Source codehiddenColumns.hideColumn(...column)
Hides a single column.
Param | Type | Description |
---|---|---|
...column | number | Visual column index. |
hideColumns
Source codehiddenColumns.hideColumns(columns)
Hides the columns provided in the array.
Param | Type | Description |
---|---|---|
columns | Array<number> | Array of visual column indexes. |
isEnabled
Source codehiddenColumns.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 HiddenColumns#enablePlugin method is called.
isHidden
Source codehiddenColumns.isHidden(column) ⇒ boolean
Checks if the provided column is hidden.
Param | Type | Description |
---|---|---|
column | number | Visual column index. |
isValidConfig
Source codehiddenColumns.isValidConfig(hiddenColumns) ⇒ boolean
Get if trim config is valid. Check whether all of the provided column indexes are within the bounds of the table.
Param | Type | Description |
---|---|---|
hiddenColumns | Array | List of hidden column indexes. |
showColumn
Source codehiddenColumns.showColumn(...column)
Shows a single column.
Param | Type | Description |
---|---|---|
...column | number | Visual column index. |
showColumns
Source codehiddenColumns.showColumns(columns)
Shows the provided columns.
Param | Type | Description |
---|---|---|
columns | Array<number> | Array of visual column indexes. |
updatePlugin
Source codehiddenColumns.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings()
is invoked with any of the following configuration options: