Using `cells(row, col, prop)` on large data set crashes the system

Tags: #<Tag:0x00007efc72f8adc0>
#1

I’m using cells(row, col, prop) to get the cells properties and add more, but on large data set the system crashes

Angular 12, handsontable 12.0.1

#2

Hi @kducante

Can you please tell me how large exactly is your data set? Also, did you try any of those performance improvement tips described here?

https://handsontable.com/docs/performance/
https://handsontable.com/docs/batch-operations/

#3

Hi Adrian, thank you for the support.

I dont think the problem is in the data set size.

Right now I have 1000+ rows and 46 columns, and works fine without the cells(row, col, prop) {}.

I havent try the performance improvement, below is my cells function, can any of these lines be causing this issue?

cells(row, col, prop) {

    const index = this.instance.toVisualRow(row);

    const excelData = this.instance.getData();

    const cellProperties: any = {};

    const status = excelData[index][3]; // get status col

    const executed = excelData[index][42]; // executed column value

    const approved = excelData[index][3]; // Approved budget p3 consensus;

    let cellsClasses = this.columns[col]?.className ?? '';

    if (row >= ctx.fullData.length) {

      cellsClasses += ' display-none';

    }

    if (executed && col === 0) {

      cellsClasses += ' display-none';

    }

    if (executed && col !== 42) {

      cellProperties.readOnly = true;

    }

    if (col === 42) {

      cellProperties.readOnly = true;

      if (approved === 'Approved') {

        cellProperties.readOnly = false;

      }

    }

    if (row >= totalRows) {

      cellProperties.readOnly = true;

      cellProperties.className = 'htCenter';

    }

    if (index % 2 === 0) {

      cellsClasses += ' odd';

    }

    if (this.columns[col]?.readOnly || (executed && col !== 42)) {

      cellsClasses += ' readOnlyCell';

    } else {

      cellsClasses += ' editableCell';

    }

    if (col && col === 3) {

      cellsClasses += {

        Submitted: ' submitted',

        Approved: ' approved',

        Rejected: ' rejected'

      }[status];

    }

    cellProperties.className = cellsClasses;

    return cellProperties;

  },
#4

Hi @kducante

It seems that the reading from data process might be the most demanding here. I can recommend one solution for you to try.

You can try to pass the data to the variable outside the cells, for example in the afterLoadData() hook and then use afterChange() hook.

#5

Hi @adrian.szymanski,

Thank you for the hint, I created a variable outside the cells with all the data, and updated on the afterChange. Now the table is loading.

#6

That’s great! I’m closing this topic then.

#7