React Data GridRow trimming

Hide individual rows from your interface and exclude them from the rendering process and DataMap.

Overview
Setup
Example
API examples
Related API reference

Overview

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.

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]}
/>

Example

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

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "hyperformula": "^2.4.0",
    "handsontable": "14.6",
    "@handsontable/react": "14.6"
  },
  
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handsontable</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ExampleComponent />
  </StrictMode>
);

import React from "react";
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1'],
        ['A2', 'B2', 'C2', 'D2'],
        ['A3', 'B3', 'C3', 'D3'],
        ['A4', 'B4', 'C4', 'D4'],
        ['A5', 'B5', 'C5', 'D5'],
        ['A6', 'B6', 'C6', 'D6'],
        ['A7', 'B7', 'C7', 'D7'],
        ['A8', 'B8', 'C8', 'D8'],
        ['A9', 'B9', 'C9', 'D9'],
      ]}
      colHeaders={true}
      rowHeaders={true}
      trimRows={[1, 2, 5]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['A1', 'B1', 'C1', 'D1'],
        ['A2', 'B2', 'C2', 'D2'],
        ['A3', 'B3', 'C3', 'D3'],
        ['A4', 'B4', 'C4', 'D4'],
        ['A5', 'B5', 'C5', 'D5'],
        ['A6', 'B6', 'C6', 'D6'],
        ['A7', 'B7', 'C7', 'D7'],
        ['A8', 'B8', 'C8', 'D8'],
        ['A9', 'B9', 'C9', 'D9'],
      ]}
      colHeaders={true}
      rowHeaders={true}
      trimRows={[1, 2, 5]}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};



ReactDOM.render(<ExampleComponent />, document.getElementById("example1"));

<script src="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.6/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.6/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot "></div>

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.