Rows are modified with a new property tableData

Describe the bug Might be related to #269 as I have exactly the same pb. When rendering rows in the grid, the property tableData is added to every row. This is a big problem with redux as its state MUST never be changed. Therefore, issue mentioning a readonly property may come from the fact that immutability frameworks like immer lock objects from the state for them not to be amended afterwards (as redux demands reducers and components to be pure).

To Reproduce render a list of value in the grid

Expected behavior at the moment, before the rendering, business objects are directly manipulated by adding a tableData metadata on them:

{
  ...businessRow,
  tableData:{
    id:0
  }
}

what may be better instead would be to keep on behaving this way by default, but to permit to get the identifier from the row. If such an option is given, then, instead of getting/setting this “tableData” on the row itself, it can be recovered from a dictionary that is stored in the state.

This way, the input business row is never touched and stored as is in the object that is used by the rendered, and as a sibling property you have all the useful metadata for the rendering purpose.

As ideally, react component should be pure (not modifying its properties), this amendment would help a lot, at moreover it would permit your grid to work with react in any situation.

[cyberprodigy]

Same here, material table seems to be incompatible with immer. I guess material table should not mutate original state anyways

[GalumphingCallooh]

Ha! This issue might have cost me a job interview in a demo project, but the good news is that I have a fix for this in my local branch. I’ve used ES6 Symbols to decorate the data object with a [tableData] symbol that’s only used internally in material-table. To support older browsers I’ve also included a polyfill. Let me submit a pull, give me a little time to clean up & check it as I was fixing it haphazardly.