Handsontable renderer performance

Tags: #<Tag:0x00007efc61e65e88>
#1

Hi! I have a table of size 55 rows x 9 columns (495 cell in total).

Here is table settings:

hot = new Handsontable(container, {
    data: getData(),
    manualRowMove: true,
    contextMenu: true,
    outsideClickDeselects: false,
    fixedColumnsLeft: fixedColumns,
    cells: function (row, col, prop) {
        var cellProperties = {};
        cellProperties.renderer = myRenderer;
        return cellProperties;
    },
    columns: getColumnHeaders(),
    colWidths: getColumnsWidths(),
    autoRowSize: {syncLimit: 100},
    rowHeaders: true,
    colHeaders: function (index) {
        var fixedHeaders = ['Type', 'Name', 'Skill', 'Info'];
        if (index < fixedColumns) {
            return fixedHeaders[index];
        } else {
            return depWeekData[0][index - fixedColumns + currentPage * weeksPerPage];
        }
    }
});

Here is renderer code:

function myRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (value == null) {
        return;
    }

    if (instance && instance.getData()[row][0] == 'S') {
        td.style.background = '#D9D9D9';
        if (col != 0) {
            td.style.fontWeight = 'bold';
        }
        if (col > 2) {
            cellProperties.readOnly = true;
        }
    }

    if (col < fixedColumns) {
        return;
    }

    if (value.indexOf('?') != -1) {
        td.style.background = '#FFD902';
    } 
}

If I put console.log inside myRenderer I can see that renderer called on selection of any cell for 715 times, on loading table for 766 time. On entering cell edit mode for 1430 times, on finish editing after pressing Enter key for 1435 times.

So it causes freezengs for 1-2 seconds.

What am I doing wrong? How to decrease amount of renderer calls? Or maybe it’s possible to make rendering async?

I need to have a table with conditional formatting almost for every cell, and I will probably have bigger table in future.

When I disable renderer, performance is OK.

Custom Renderer Getting Called multiple Times # Performance issue and UI Hangs
#2

Hi @dmitriy.vovney

currently cell renderer is called for each cell even in situations where only one cell was changed.

If you could put the code into JSfiddle I’ll be able to take a look if there’s something we can do with the performance.

#3

Hi @aleksandra_budnik
I already figured out that problem was bacause I called instance.getData() each time in renderer function.
Since I need to format cell depending on first column value, I decided to get meta data from cell and format this cell depending on it.

1 Like
#4

Thanks for keeping me updated.

#5