updateSettings::mergeCells very slow

Tags: #<Tag:0x00007f8b18c5b840>
#1

We have a table with approx. 5000 rows and 50 cols. Some cells should merged. After ajax and

hot.loadData()

I start a function that build the mergeCells-array. I can merge one col, but after try to merge two cols the browser runs into anr.

Here the code snippet for generating array and start merging.

function mergeCells(hot, groupby, fields) {
        var Nrs = {};
        let lastNr, mergeCells = [];
        hot.getDataAtProp(groupby).forEach(function (g, i) {
            if (lastNr === g) {
                if (!!Nrs[g]) {
                    Nrs[g].rowspan++;
                } else {
                    Nrs[g] = {
                        "row": i - 1,
                        "rowspan": 2
                    };
                }
            } else lastNr = g;
        });
        // convert "a,b" into [1,2]
        const cols = fields.split(',').map(function (prop) {
            return hot.propToCol(prop);
        });
        cols.forEach(function (col) {
            Object.keys(Nrs).forEach(function (h) {
                mergeCells.push({
                    row: Nrs[h].row,
                    col: col,
                    rowspan: Nrs[h].rowspan,
                    colspan: 1
                });
            });
        });
      hot.updateSettings({
            mergeCells: mergeCells,
        });
}

Call:

  mergeCells(hot, "group","group,firstname,city,address") {

How can I avoid the anr?

#2

Hi @Knoeterich

The following method seems to work fine https://jsfiddle.net/5fvueLy9/
Maybe it a matter of some columns being loaded between the columns that are defined in the method? Or there are some other settings that interact with the table.

#3

Thanks for quick answer. in my app after all the ajax request will started and after loaddata() with it the merge will started. I guess in this moment this is the only action on table.
Your code on jsfiddl freezes the app. This my dirty (but working) solution:

const mergerPlugin = hot.getPlugin('MergeCells');
mergerPlugin.enablePlugin();
cols.forEach(function (col) {
            Object.keys(Nrs).forEach(function (h, i) {
                const mc = {
                    row: Nrs[h].row,
                    col: col,
                    rowspan: Nrs[h].rowspan,
                    colspan: 1
                }
                setTimeout(function () {
                    mergerPlugin.merge(mc.row, mc.col, mc.row + mc.rowspan - 1, mc.col + mc.colspan - 1);
                }, i * 50);
            });
        });

These little pauses gives the app time to breath :slight_smile:

#4

Ou… that should not happen and it works well on my Chrome 91/Windows 10.

reproduction_

But I can image that with more rows/columns it might get heavy for the browser.

#5