Aquí hay un ejemplo en React basado en la muestra de documentación de Handsontable de aquí: https://handsontable.com/docs/row-prepopulating/

https://jsfiddle.net/js_ziggle/ydv8k1hq/

 import React, { useRef, useState } from 'react'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; // register Handsontable's modules registerAllModules(); const templateValues = ['one', 'two', 'three']; const hotData = [ ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'], ['2017', 10, 11, 12, 13], ['2018', 20, 11, 14, 13], ['2019', 30, 15, 12, 13] ]; const App = () => { function isEmptyRow(instance, row) { var rowData = instance.countRows(); for (var i = 0, ilen = rowData.length; i < ilen; i++) { if (rowData[i] !== null) { return false; } } return true; } function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) { const args = arguments; if (args[5] === null && isEmptyRow(instance, row)) { args[5] = templateValues[col]; td.style.color = '#999'; } else { td.style.color = ''; } Handsontable.renderers.TextRenderer.apply(this, args); } const cellsFunc = function(row, col, prop) { const cellProperties = {}; cellProperties.renderer = defaultValueRenderer; return cellProperties; } const beforeChangeFunc = function(changes) { const instance = this; const columns = instance.countCols(); const rowColumnSeen = {}; const rowsToFill = {}; for (let i = 0; i < changes.length; i++) { // if oldVal is empty if (changes[i][2] === null && changes[i][3] !== null) { if (isEmptyRow(instance, changes[i][0])) { // add this row/col combination to the cache so it will not be overwritten by the template rowColumnSeen[changes[i][0] + '/' + changes[i][1]] = true; rowsToFill[changes[i][0]] = true; } } } for (var r in rowsToFill) { if (rowsToFill.hasOwnProperty(r)) { for (let c = 0; c < columns; c++) { // if it is not provided by user in this change set, take the value from the template if (!rowColumnSeen[r + '/' + c]) { changes.push([r, c, null, templateValues[c]]); } } } } } const onAfterInit = function() { this.loadData(hotData); } return ( <div> <HotTable data={hotData} cells={cellsFunc} beforeChange={beforeChangeFunc} colHeaders={true} rowHeaders={true} contextMenu={true} height='auto' startRows='8' startCols='5' minSpareRows='1' licenseKey="non-commercial-and-evaluation" afterInit={onAfterInit} /> </div> ) } ReactDOM.render(<App />, document.getElementById('example1'));