React Data Grid Row trimming


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.


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

// enable the `TrimRows` plugin


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

  trimRows={[5, 10, 15]}

See the examples section for a live demo.


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

    API examples


    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:


    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(0, 4, 6);
    plugin.untrimRows([0, 4, 6]);

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