Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@13.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.1/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@13.1/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

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

SCSS

.controls {
  margin: 10px 0;
}

Babel + JSX

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

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  const data = [
      [ 1, 2],
      [3, null],
      [null, 4],
      [null, null],
      [5, null],
      [6, 7],
      [null, null],
      [9, null],
  ];
  const hotTableComponentRef = useRef(null);

  const filterAllEmpty = () => {
    let hot = hotTableComponentRef.current.hotInstance;
    let hidePlugin = hot.getPlugin('HiddenRows');
    
    const nullRowsIndexes = data
      .map((row, index) => [row.every((value) => value === null), index])
      .filter(([isNull]) => isNull)
      .map(([, index]) => index);

    hidePlugin.hideRows(nullRowsIndexes);
    hot.render()
  };

  return (
    <>
       <div className="controls">
        <button onClick={filterAllEmpty}>At least one filled</button>
      </div>
      <HotTable
        ref={hotTableComponentRef}
        data={data}
        hiddenRows={true}
        colHeaders={true}
        height="auto"
        licenseKey="non-commercial-and-evaluation"
      />
    </>
  );
}

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