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 simply enable column hiding (without further configuration), set the hiddenColumns
configuration option to true
:
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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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]
}}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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
}}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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
}}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example4'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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
}}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example5'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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
}}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example6'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.2/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.2/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.2/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.
TIP
To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the HotTable
component, and reading its hotInstance
property.
For more information, see the Instance Methods
page.
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: