Performance down when more than 100 columns and 500 rows

Tags: #<Tag:0x00007f51b8ac1960> #<Tag:0x00007f51b8ac1758>
#1

Hi,

I have a handsontable which bind with dynamic table. And the HOT has formulas on cells, Cell event , afterChange , events for data updation. if the table have more than 100 columns and 500 rows , gets hanged on mentioned events and table render.
its fine when the table is smaller.

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 response = await backendCall(newValue);
       }
    }
  });
}

};

this is my afterChange hook where I’m updating a cell along with backend response.

      <HotTable
        ref={hotTableComponentRef}
        data={tableData}
        colHeaders={columnHeaders}
        columns={columnSettings}
        cells={(row) => {
          const cellProperties: CellProperties = {};

          data.forEach((data) => {
            if (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; 
        }}
        afterColumnUnfreeze={(currentCol) => {
          if (tableIndex !== undefined) {
            const hotInstance = hotTableComponentRef?.current?.hotInstance;
            hotInstance.getPlugin("manualColumnMove").moveColumn(currentCol, tableIndex);
            hotInstance.render();
          }
        }}
      />

the above is my component. I’m having a dropdown based on the dropdown value a filter is applied to the tableData and passed everytime but it creates a performance lag even for the loading the data. and if the afterUpdate is called unless backend response is received the table gets stuck I cannot even scroll the table. This is only for data with 100 columns and 500 rows.

The lag in the table’s performance creates a bad user experience of this library. Can you kindly post any solution and help me out as this will create a significant importance.

Thanks in advance !!!

#2

Closed as a duplicate of: Performance issue when handling multiple rendering in handsontable

#3