I have a default table of 10 rows, and then I add extra rows, lets suppose 5 extra rows. Now the total number of rows becomes 15.
After filling up all the data and uploading it to database. I regenerate the table with default 10 rows.
Now the problem is, after is regenerates the table. The row headers of the extra 5 rows are still there. Check image here.
[![enter image description here][1]][1]
I am surprised, even after regenerating the table why there are still rowHeaders for the extra rows.
Table generating code,
generateTable = () => {
var container = document.getElementById("bulkUploadChassisOwner");
hotTable = createHandsonTable(
container,
this.bulkData,
this.props.isOnBoarding,
this.height,
this.Headers,
this.columns,
[],
true,
this.state.trimRows
);
for (let i = 0; i < 10; i++) {
this.addRowToTable();
}
console.log(hotTable.getRowHeader());
Handsontable.hooks.add(
"afterColumnMove", () => {
this.getColHeader()
},
hotTable
)
Handsontable.hooks.add(
"afterChange",
() => {
if (!this.props.valModified && this.props.onValModified)
this.props.onValModified(true);
this.showTooltip();
this.resizeTable();
},
hotTable
);
Handsontable.hooks.add(
"afterScrollHorizontally",
() => {
this.showTooltip();
},
hotTable
);
Handsontable.hooks.add(
"afterScrollVertically",
() => {
this.showTooltip();
},
hotTable
);
Handsontable.hooks.add(
"afterCreateRow",
() => {
this.resizeTable();
},
hotTable
);
hotTable.render();
hotTable.updateSettings({
beforeKeyDown(e) {
const { row } = hotTable.getActiveEditor();
if(e.keyCode === 40 && (row + 1) === hotTable.countRows()) {
hotTable.alter("insert_row", hotTable.countRows(), 1, {});
}
}
});
}
I have tried trimming rows after uploading data, but did not work. [1]: https://i.stack.imgur.com/Lj78d.png