Hi,
I have a handsontable which bind with dynamic table. And the HOT has formulas on cells, Cell event , afterChange , events for validation. if the table have more than 100 columns and 500 rows , gets hanged on mentioned events.
its fine when the table is smaller.
<HotTable
ref={hotTableComponentRef}
data={data}
colHeaders={Object.keys(sampleData || [])}
columns={columnSettings}
cells={(row) => {
const cellProperties: CellProperties = {};
data.forEach((item: data) => {
if (some condition) {
cellProperties.readOnly = true;
cellProperties.className = "classname";
}
});
return cellProperties;
}}
formulas={{
engine: HyperFormula,
}}
rowHeaders={true}
width="100%"
height={700}
filters={true}
dropdownMenu={["alignment", "---------", "filter_by_condition", "filter_by_value", "filter_action_bar"]}
stretchH={"all"}
contextMenu={[
"alignment",
"freeze_column",
"unfreeze_column",
"hidden_columns_hide",
"hidden_columns_show",
]}
hiddenColumns={{
columns: columns,
indicators: true,
}}
manualColumnFreeze={true}
rowHeights={80}
manualRowResize={true}
autoWrapRow={true}
autoWrapCol={true}
undo={true}
licenseKey={LICENSE_KEY}
afterChange={handleChange}
beforeColumnFreeze={(currentCol) => {
tableIndex = currentCol; // Store the original index of the column being frozen
}}
afterColumnUnfreeze={(currentCol) => {
if (tableIndex !== undefined) {
// Move the column back to its original position
const hotInstance = hotTableComponentRef?.current?.hotInstance;
hotInstance.getPlugin("manualColumnMove").moveColumn(currentCol, tableIndex);
hotInstance.render(); // Refresh the table
}
}}
/>
The below is handleChange
const handleChange = async (changes: CellChange[] | null, source: ChangeSource) => {
const hotInstance = hotTableComponentRef?.current?.hotInstance;
if (source === "loadData") {
return;
}
if (Array.isArray(changes)) {
changes.forEach(async ([row, col, oldValue, newValue]) => {
if (row !== undefined && col !== undefined && oldValue !== newValue) {
const a = hotInstance?.getPlugin("hiddenColumns");
const b = a.getHiddenColumns();
setState(b);
const response = await backendCall(newvalue);
}
}
});
}
};
And I’m also I’m having a dropdown based on which I’ll filtering the data and passing it to the HotTable, when the filtered data is passed it creates a lag to update the table with new data, and when I’m editing a cell the table gets stuck unless and until the backend response is returned
Please suggest me an idea to reduce time since on every change all the cells are rendering again.
This lag creates a bad user experience on the library and does not encourage to work more data which will the major use case here.
Thanks in advance.
#Performance issue