JavaScript Data Grid Row trimming

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
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
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:

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(10, 4),
  colHeaders: true,
  rowHeaders: true,
  trimRows: [1, 2, 5],
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

API examples

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.

Related API reference

• Options:
  • trimRows
• Hooks:
  • afterTrimRow
  • afterUntrimRow
  • beforeTrimRow
  • beforeUntrimRow
• Plugins:
  • TrimRows