React Data Grid Column hiding

React Data GridColumn hiding

Hide individual columns to reduce screen clutter and improve the grid's performance.

On this page

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:

      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:

      TIP

      If you use both the NestedHeaders plugin and the HiddenColumns plugin, you also need to set the colHeaders property to true. Otherwise, indicators won't work.

        Step 3: Set up context menu items

        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.

          You can also add the column hiding menu items individually, by adding the hidden_columns_show and hidden_columns_hide strings to thecontextMenu parameter:

            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:

              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:

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

              Hide a single column

              To hide a single column, use the hideColumn() method:

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

plugin.hideColumn(4);

// re-render your Handsontable instance
hot.render();

              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
              const plugin = hot.getPlugin('hiddenColumns');

plugin.hideColumn(0, 4, 6);
// or
plugin.hideColumns([0, 4, 6]);

// re-render your Handsontable instance
hot.render();

              Unhide a single column

              To unhide a single column, use the showColumn() method:

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

plugin.showColumn(4);

// re-render your Handsontable instance
hot.render();

              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
              const plugin = hot.getPlugin('hiddenColumns');

plugin.showColumn(0, 4, 6);
// or
plugin.showColumns([0, 4, 6]);

// re-render your Handsontable instance
hot.render();