Row hiding

Hide individual rows to avoid rendering them as DOM elements. It helps you reduce screen clutter and improve the grid’s performance.

Overview

“Hiding a row” means that the hidden row doesn’t get rendered as a DOM element.

When you’re hiding a row:

• The source data doesn’t get modified.
• The HiddenRows plugin doesn’t participate in data transformation
  (the shape of the data returned by the getData*() methods stays intact).

Enable row hiding

To enable row hiding, use the hiddenRows option.

Source code

JavaScript

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      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 rows
        indicators: true,
      }}
    />
  );
};

export default ExampleComponent;

TypeScript

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      autoWrapRow={true}
      autoWrapCol={true}
      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 rows
        indicators: true,
      }}
    />
  );
};

export default ExampleComponent;

Set up row hiding

To set up your row hiding configuration, follow the steps below.

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.

   Now, those rows are hidden by default:

   Source code

   JavaScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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={{
           // specify rows hidden by default
           rows: [3, 5, 9],
         }}
       />
     );
   };
   
   export default ExampleComponent;

   TypeScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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={{
           // specify rows hidden by default
           rows: [3, 5, 9],
         }}
       />
     );
   };
   
   export default ExampleComponent;

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:

   Source code

   JavaScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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 rows
           indicators: true,
         }}
       />
     );
   };
   
   export default ExampleComponent;

   TypeScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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 rows
           indicators: true,
         }}
       />
     );
   };
   
   export default ExampleComponent;

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.

   Source code

   JavaScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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={true}
         hiddenRows={{
           rows: [3, 5, 9],
           indicators: true,
         }}
       />
     );
   };
   
   export default ExampleComponent;

   TypeScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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={true}
         hiddenRows={{
           rows: [3, 5, 9],
           indicators: true,
         }}
       />
     );
   };
   
   export default ExampleComponent;

   You can also add the row hiding menu items individually, by adding the hidden_rows_show and hidden_rows_hide strings to the contextMenu parameter:

   Source code

   JavaScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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,
         }}
       />
     );
   };
   
   export default ExampleComponent;

   TypeScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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,
         }}
       />
     );
   };
   
   export default ExampleComponent;

4. Set up copy and paste behavior

   By default, hidden rows are included in copying and pasting.

   To exclude hidden rows from copying and pasting, in the hiddenRows object, set the copyPasteEnabled property to false:

   Source code

   JavaScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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 pasting
           copyPasteEnabled: false,
         }}
       />
     );
   };
   
   export default ExampleComponent;

   TypeScript

   import { HotTable } from '@handsontable/react-wrapper';
   import { registerAllModules } from 'handsontable/registry';
   
   // register Handsontable's modules
   registerAllModules();
   
   const ExampleComponent = () => {
     return (
       <HotTable
         autoWrapRow={true}
         autoWrapCol={true}
         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 pasting
           copyPasteEnabled: false,
         }}
       />
     );
   };
   
   export default ExampleComponent;

Row hiding API methods

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.

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.

Access the HiddenRows plugin instance

To access the HiddenRows plugin instance, use the getPlugin() method:

const plugin = hot.getPlugin('hiddenRows');

Hide a single row

To hide a single row, use the hideRow() method:

const plugin = hot.getPlugin('hiddenRows');

plugin.hideRow(4);

Hide multiple rows

To hide multiple rows:

• Either pass row indexes as arguments to the hideRow() method
• Or pass an array of row indexes to the hideRows() method

const plugin = hot.getPlugin('hiddenRows');

plugin.hideRow(0, 4, 6);
// or
plugin.hideRows([0, 4, 6]);

Unhide a single row

To unhide a single row, use the showRow() method:

const plugin = hot.getPlugin('hiddenRows');

plugin.showRow(4);

Unhide multiple rows

To unhide multiple rows:

• Either pass row indexes as arguments to the showRow() method
• Or pass an array of row indexes to the showRows() method

const plugin = hot.getPlugin('hiddenRows');

plugin.showRow(0, 4, 6);
// or
plugin.showRows([0, 4, 6]);

Related API reference

Configuration options

hiddenRows→

Hooks

afterHideRows→

afterUnhideRows→

beforeHideRows→

beforeUnhideRows→

Plugins

HiddenRows→