import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example1');const hot =newHandsontable(container,{licenseKey:'non-commercial-and-evaluation',data:[['A1','B1','C1','D1','E1'],['A2','B2','C2','D2','E2'],['A3','B3','C3','D3','E3'],['A4','B4','C4','D4','E4'],['A5','B5','C5','D5','E5'],['A6','B6','C6','D6','E6'],['A7','B7','C7','D7','E7'],['A8','B8','C8','D8','E8'],['A9','B9','C9','D9','E9'],['A10','B10','C10','D10','E10'],['A11','B11','C11','D11','E11'],['A12','B12','C12','D12','E12'],],height:'auto',colHeaders:true,rowHeaders:true,// enable the `HiddenRows` pluginhiddenRows:{rows:[3,5,9],// show UI indicators to mark hidden rowsindicators:true}});
Set up row hiding
To set up your row hiding configuration, follow the steps below.
Step 1: Specify rows hidden by default
To both enable row hiding and specify rows hidden by default, set the hiddenRows configuration option to an object.
In the object, add a rows property, and set it to an array of row indexes.
import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example2');const hot =newHandsontable(container,{licenseKey:'non-commercial-and-evaluation',data:[['A1','B1','C1','D1','E1'],['A2','B2','C2','D2','E2'],['A3','B3','C3','D3','E3'],['A4','B4','C4','D4','E4'],['A5','B5','C5','D5','E5'],['A6','B6','C6','D6','E6'],['A7','B7','C7','D7','E7'],['A8','B8','C8','D8','E8'],['A9','B9','C9','D9','E9'],['A10','B10','C10','D10','E10'],['A11','B11','C11','D11','E11'],['A12','B12','C12','D12','E12'],],height:'auto',colHeaders:true,rowHeaders:true,// enable the `HiddenRows` pluginhiddenRows:{// specify rows hidden by defaultrows:[3,5,9]}});
Step 2: Show UI indicators
To easily see which rows are currently hidden, display UI indicators.
To enable the UI indicators, in the hiddenRows object, set the indicators property to true:
TIP
If you use both the NestedHeaders plugin and the HiddenRows plugin, you also need to set the colHeaders property to true. Otherwise, indicators won't work.
import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example3');const hot =newHandsontable(container,{licenseKey:'non-commercial-and-evaluation',data:[['A1','B1','C1','D1','E1'],['A2','B2','C2','D2','E2'],['A3','B3','C3','D3','E3'],['A4','B4','C4','D4','E4'],['A5','B5','C5','D5','E5'],['A6','B6','C6','D6','E6'],['A7','B7','C7','D7','E7'],['A8','B8','C8','D8','E8'],['A9','B9','C9','D9','E9'],['A10','B10','C10','D10','E10'],['A11','B11','C11','D11','E11'],['A12','B12','C12','D12','E12'],],height:'auto',colHeaders:true,rowHeaders:true,hiddenRows:{rows:[3,5,9],// show UI indicators to mark hidden rowsindicators:true}});
Step 3: Set up context menu items
To easily hide and unhide rows, add row hiding items to Handsontable's context menu.
Enable both the ContextMenu plugin and the HiddenRows plugin. Now, the context menu automatically displays additional items for hiding and unhiding rows.
import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example6');const hot =newHandsontable(container,{licenseKey:'non-commercial-and-evaluation',data:[['A1','B1','C1','D1','E1'],['A2','B2','C2','D2','E2'],['A3','B3','C3','D3','E3'],['A4','B4','C4','D4','E4'],['A5','B5','C5','D5','E5'],['A6','B6','C6','D6','E6'],['A7','B7','C7','D7','E7'],['A8','B8','C8','D8','E8'],['A9','B9','C9','D9','E9'],['A10','B10','C10','D10','E10'],['A11','B11','C11','D11','E11'],['A12','B12','C12','D12','E12'],],height:'auto',colHeaders:true,rowHeaders:true,contextMenu:[`hidden_rows_show`,`hidden_rows_hide`],hiddenRows:{rows:[3,5,9],indicators:true,// exclude hidden rows from copying and pastingcopyPasteEnabled:false}});
Row hiding API methods
For the most popular row hiding tasks, use the API methods below.
To see your changes, re-render your Handsontable instance with the render() method.