Material-table: Poor performance. Page gets unresponsive

Created on 9 Sep 2020 · 3Comments · Source: mbrn/material-table

In my functional component, I've a simple table which gets populated via axios call to my NodeJs(Express) based API with minimal data. In my table I don't do any fancy rendering etc. I am getting severe lagging in page rendering. I've debugged the code and can confirm that there are no issues with my APIs as they work perfectly fine with native Material UI table. For now I am switching back to MUI native tables.

My package details are as per below ...

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"material-table": "^1.69.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",

Browser : Chrome Version 85.0.4183.83 (Official Build) (64-bit)

Env. : MacOS Mojave 10.14.5

bug wontfix

Source

DewangS

Most helpful comment

I think it may work to remove the tableData attribute of each item of the columns of props at render function like this.

<Table
    columns={columns.map((c) => ({ ...c, tableData: undefined }))} 
    data={data} />

JongtaekChoi on 10 Sep 2020

🎉9 👍4

All 3 comments

I am also getting the same issue from tomorrow.

riyaarora65 on 10 Sep 2020

I think it may work to remove the tableData attribute of each item of the columns of props at render function like this.

<Table
    columns={columns.map((c) => ({ ...c, tableData: undefined }))} 
    data={data} />

JongtaekChoi on 10 Sep 2020

🎉9 👍4

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.