material-table: Browser Freezes in Version 1.69.0 on material table render

We noticed strange freezes in our application, which we were able to trace back to Material Table.

The freeze is caused by the new introduced function `reducePercentsInCalc’ from PR #2351

the calc parameter is growing exponentially, so that the indexOf call takes huge amount of time on that large string.

Here couple of screenshots form the cpu profiler.

further analysis makes me sure, that the really cause for that input parameter growing is following code in data-manager.js

in my opinion the undefinedWidthColumns is missing check for tableData.width, which is assigned few lines later, once the column gets rendered.

this is the possible cause for already reported bugs #2451 and #2453

@Domino987, @mbrn what is your thought about that?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 15

Most upvoted comments

Any updates on this? I’m having the same issue.

yhaelopez on Dec 3, 2020

I believe the problem is in (perhaps “also in”) data-manager#setColumns.

At the top of that method it finds all the columns that do not have defined widths, using:

columns.filter(function (c) {
   return c.width === undefined && !c.hidden;
});

It then proceeds to calculate a width and assign it to columnDef.tableData.width.

When setColumns gets called again (which happens frequently), it doesn’t recognize that the column width has now been set for those columns because it is only checking c.width. So it recalculates but builds the new width based on the old columnDef.tableData.width. So columnDef.tableData.width keeps growing indefinitely.

It seems like the correct fix is to change the check at the top of setColumns to be:

columns.filter(function (c) {
   return c.width === undefined && c.columnDef.tableData?.width === undefined && !c.hidden;
});

RobertGardner on Sep 23, 2020