/ S

React Data Grid Row trimming

Table of contents

Overview

The Trim Rows plugin allows the trimming of specific rows from the table. Rows being trimmed aren't rendered and aren't included in a DataMap, which can be retrieved by calling the getData method.

Setup

To enable row trimming, set the trimRows option to true.

// enable the `TrimRows` plugin

<HotTable
  trimRows={true}
/>

To both enable row trimming and trim selected rows at Handsontable's initialization, set the trimRows option to an array of physical row indexes.

// enable the `TrimRows` plugin
// at Handsontable's initialization, trim rows 5, 10, and 15

<HotTable
  trimRows={[5, 10, 15]}
/>

See the examples section for a live demo.

Example

Note that the second, third, and sixth rows are missing in the following example:

    API examples

    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 hotIntance property.

    For more information, see the Instance Methods page.

    The plugin instance can be accessed by calling:

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

    To trim a single row, call the trimRow() method of the plugin object:

    plugin.trimRow(4);

    To trim multiple rows, either pass them as arguments to the trimRow() method, or pass an array of physical row indexes to the trimRows() method:

    plugin.trimRow(0, 4, 6);
// or
plugin.trimRows([0, 4, 6]);

    To restore the trimmed row(s), use the following methods:

    plugin.untrimRow(4);

    plugin.untrimRow(0, 4, 6);

    plugin.untrimRows([0, 4, 6]);

    To see the changes made, call hot.render(); to re-render the table.

    ← Row pre-populating →