Column hiding Hide individual columns to avoid rendering them as DOM elements. It helps you reduce screen clutter
and improve the grid's performance.
Overview "Hiding a column" means that the hidden column doesn't get rendered as a DOM element.
When you're hiding a column:
The source data doesn't get modified. The HiddenColumns
plugin doesn't participate in data
transformation (the shape of the data returned by the
getData*()
methods stays intact). Enable column hiding To enable column hiding, use the hiddenColumns
option.
Set up column hiding To set up your column hiding configuration, follow the steps below.
Step 1: Specify columns hidden by default To both enable column hiding and specify columns hidden by default, set the
hiddenColumns
configuration option to an object.
In the object, add a columns
configuration option, and set it to an
array of column indexes.
Now, those columns are hidden by default:
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example2');
const hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: [
['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
],
height: 'auto',
colHeaders: true,
rowHeaders: true,
// enable the `HiddenColumns` plugin
hiddenColumns: {
// specify columns hidden by default
columns: [3, 5, 9],
},
});
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>
<div id="example2" class="hot "></div>
Step 2: Show UI indicators To easily see which columns are currently hidden, display UI indicators.
To enable the UI indicators, in the hiddenColumns
object, set
the indicators
property to true
:
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example3');
const hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: [
['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
],
height: 'auto',
colHeaders: true,
rowHeaders: true,
hiddenColumns: {
columns: [3, 5, 9],
// show UI indicators to mark hidden columns
indicators: true,
},
});
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>
<div id="example3" class="hot "></div>
To easily hide and unhide columns, add column hiding items to Handsontable's
context menu .
Enable both the ContextMenu
plugin and the
HiddenColumns
plugin. Now, the context menu automatically displays
additional items for hiding and unhiding columns.
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example4');
const hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: [
['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
],
height: 'auto',
colHeaders: true,
rowHeaders: true,
// enable the context menu
contextMenu: true,
// enable the `HiddenColumns` plugin
// automatically adds the context menu's column hiding items
hiddenColumns: {
columns: [3, 5, 9],
indicators: true,
},
});
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>
<div id="example4" class="hot "></div>
You can also add the column hiding menu items individually, by adding the
hidden_columns_show
and
hidden_columns_hide
strings to thecontextMenu
parameter:
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example5');
const hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: [
['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
],
height: 'auto',
colHeaders: true,
rowHeaders: true,
// individually add column hiding context menu items
contextMenu: [`hidden_columns_show`, `hidden_columns_hide`],
hiddenColumns: {
columns: [3, 5, 9],
indicators: true,
},
});
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>
<div id="example5" class="hot "></div>
Step 4: Set up copy and paste behavior By default, hidden columns are included in copying and pasting.
To exclude hidden columns from copying and pasting, in the hiddenColumns
object, set the copyPasteEnabled
property to false
:
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example6');
const hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: [
['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],
['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],
['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],
['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],
['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],
],
height: 'auto',
colHeaders: true,
rowHeaders: true,
contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
hiddenColumns: {
columns: [3, 5, 9],
indicators: true,
// exclude hidden columns from copying and pasting
copyPasteEnabled: false,
},
});
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script>
<div id="example6" class="hot "></div>
Column hiding API methods For the most popular column hiding tasks, use the API methods below.
To see your changes, re-render your Handsontable instance with the
render()
method.
Access the HiddenColumns
plugin instance To access the HiddenColumns
plugin instance, use the
getPlugin()
method:
Hide a single column To hide a single column, use the hideColumn()
method:
Hide multiple columns To hide multiple columns:
Either pass column indexes as arguments to the hideColumn()
method Or pass an array of column indexes to the hideColumns()
method Unhide a single column To unhide a single column, use the showColumn()
method:
Unhide multiple columns To unhide multiple columns:
Either pass column indexes as arguments to the showColumn()
method Or pass an array of column indexes to the showColumns()
method Configuration options:
Hooks:
Plugins: