Chained css `calc` statement in the styles width attribute. `calc((818px - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2...`

[behrooz-tahanzadeh]

material-table: ^1.69.3 At the moment I have no explanation why following bug is happening. But in one of many instances of MaterialTables we have in our projects, the width attribute of tables cells keeps expanding on each render and eventually leads to tab crashing.

I've tested in Chrome and Firefox and this issue only occurs in Chrome 101.0.4951.54

After the first data fetch and render:

<td
  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft"
  value="229740"
  style="color: inherit; width: calc((818px - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2); box-sizing: border-box; font-size: inherit; font-family: inherit; font-weight: inherit;">
  229740
</td>

After the second data fetch and render:

<td
  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft"
  value="229725"
  style="color: inherit; width: calc((658px - (0px + (100% - (0px + (100% - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2 + (100% - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2)) / 2 + (100% - (0px + (100% - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2 + (100% - (0px + (100% - 0px) / 2 + (100% - 0px) / 2)) / 2)) / 2)) / 2); box-sizing: border-box; font-size: inherit; font-family: inherit; font-weight: inherit;">
  229725
</td>

We are using a very basic MaterialTable implementation.

<MaterialTable
      columns={columns} // Array of {title: string, field: string}
      data={enrichedData} // Fetched from server
      isLoading={status === 'FETCHING'}
  />

[ecoant]

We are seeing this bug as well, we've been on version 1.69.3 for about a year and just now seeing this cause Chrome to fill up its RAM allocation trying to store a massive list of width strings (nested component produces 1 table per item, each item has an enormous string for the width attribute). We see the width calculation working properly for certain cases of nested tables. Presumably, there is a magic threshold where nested width calculations breaks.

[JayantkrSingh]

I also faced this, but I degraded my table version to 1.69.0. this version works for me. Make sure to pass width in headerStyle as well. It's not a permanent solution but we can go for 1.69.0 until they fix the bug.

[behrooz-tahanzadeh]

We fixed the issue by redefining the columns property in each render, instead of memorising it. Basically we changed the following lines:

function YourComponent() {
  const columns = useMemo(() => [
    // You columns definition...
  ], [])
}

To:

function YourComponent() {
  const columns = [
    // You columns definition...
  ]
}

[stale[bot]]

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.