docs/content/guides/rows/row-trimming/row-trimming.md
Hide individual rows from your interface and exclude them from the rendering process and DataMap.
[[toc]]
Row trimming is similar to row hiding, but works a bit differently.
The TrimRows plugin allows the trimming of specific rows from the table. Rows being trimmed aren't rendered and aren't included in the DataMap, which can be retrieved by calling the getData method.
To enable row trimming, set the trimRows option to true.
::: only-for javascript
// enable the `TrimRows` plugin
trimRows: true,
:::
::: only-for react
// enable the `TrimRows` plugin
<HotTable
trimRows={true}
/>
:::
::: only-for angular
// 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.
::: only-for javascript
// enable the `TrimRows` plugin
// at Handsontable's initialization, trim rows 5, 10, and 15
trimRows: [5, 10, 15],
:::
::: only-for react
// enable the `TrimRows` plugin
// at Handsontable's initialization, trim rows 5, 10, and 15
<HotTable
trimRows={[5, 10, 15]}
/>
:::
::: only-for angular
// enable the `TrimRows` plugin
// at Handsontable's initialization, trim rows 5, 10, and 15
trimRows: [5, 10, 15],
:::
Note that the second, third, and sixth rows are missing in the following example:
::: only-for javascript
::: example #example1 --js 1 --ts 2
:::
:::
::: only-for react
::: example #example1 :react --js 1 --ts 2
:::
:::
::: only-for angular
::: example #example1 :angular --ts 1 --html 2
:::
:::
After completing this guide, rows you specify are excluded from rendering and from DataMap. You can trim rows at initialization or dynamically at runtime using the plugin API.
::: only-for react
::: 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.
:::
:::
::: only-for angular
To obtain the Handsontable instance from the Angular wrapper component, you can use Angular's @ViewChild decorator to reference the HotTableComponent and then access its hotInstance property.
@ViewChild(HotTableComponent, {static: false})
hotTable!: HotTableComponent;
ngAfterViewInit() {
// The Handsontable instance is available through the hotInstance property
const hot = this.hotTable.hotInstance;
// You can now use the "hot" instance to call Handsontable's API methods
// ...
}
:::
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.
Options
<div class="boxes-list"> </div>Hooks
<div class="boxes-list"> </div>Plugins
<div class="boxes-list"> </div>