Material-table: Material Table is adding the tableData element to the Data

[orestes22]

Describe the bug
A clear and concise description of what the bug is.

Hi, I have this code:

data={this.state.rooms}

where this.state.rooms, is an array of rooms.

but for some reason the Material Table added to my this.state.rooms , the element TableData.
I checked very well this, and checked that I dont have anything in my code that could adding TableData like an extra element in my array of object.

Im using the version 1.27.2
Best Regards

[spazzarama]

@orestes22 that property is used internally by material-table (track selections and the like).

I use something like this to strip out the tableData when committing changes from onUpdate/onSelected events:

rows.map(r => {
  const {tableData, ...record} = r;
  return record;
});

[orestes22]

Hi, Im agreed that TableData is an important assent and Im not talking to delete it.

I just saying that the component is adding this element automatically inside my object, and for that reason I had some problems during my remote connection, exactly when I doing PATCH.

I finded a solutions to avoid this problem but I will aprecciate a lot if you can take a look and comment if Im doing something wrong or if the problem is real.

Please check the Console of this codesanbox and you will see the TableData inside my object. Select a row and please check the console Log, you will se TableDate at the end.
https://codesandbox.io/s/lx2v9pn91m

Best Regards and thanks in advance for your time.
Regards

[mbrn]

Yes @orestes22 . it add a tableData field to your rows. You should remove them when you send rows to server. What is the problem.

[orestes22]

About your shared code @spazzarama , it is a solution, I implemented another way, but I will want understand why a child component can add that to my state in my component

[mbrn]

Because i dont want to lose selected state of a row after a render. There is another option to do this. I could keep selected in another field of table state. But by this way i need a id field to map data.

[orestes22]

ok, noted, sorry for misunderstand, and thanks again for your time to answer me. Regards

[mbrn]

Uwc

[orestes22]

@mbrn Kindly ask help,
Could tell me how eliminated the error that appear telling me that tableData it isnt part of my object, I dont want add to my model the "tableData" only to deleted later. Im using Typescript.

TableData is appearing in every object that use some value of the table, I dont know how it could happen but it happens, and when I tried to eliminated from every object it telling me that TableData doesnt exist in that object.

Best Regards

[orestes22]

Hi, good day, I create only an object to work with the table.

For some reason your table jump my deep copy and appeared in my original object that doesnt have to do with the table.

I tried with conventional deep copy, nothing works, right now Im using a deep copy created by my own, that create a new elelement and I initialize the object elelement by element, but still not working

Do you have any advice ? Above I showed where appear the tableData. For the property data I used my data={object.elelementArray}

my object is={
element1
element2
.
.
.
elelementArray[
elementInsideArray1
elementInsideArray2
objectInsideArray{
elementA,
elementB
}
tableData // here is where appear
]
}

[orestes22]

I found a solutions, Im posting here because I noted there people following this case. I hope it could help to someone.

In my case I did others things but in general way this is a solutions to avoid the Material-Table change things in the same reference. It is passing a clone of the object in data. So the material table lose the reference of the object and it cant modify it.

data={MyRealObject.map(x => Object.assign({}, x))}

Best Regards

[mbrn]

Thanks @orestes22

[plourenco]

@mbrn Sorry for the necro, but I just stumbled upon this and it seems quite important.
Couldn't material-table clone the data element before applying the tableData transformations?

Because in the componentDidUpdate comparison, fastDeepEqual(this.props.data, prevProps.data), if we pass an array that is completely equal to the previous data, however without the tableData property, equality will be false.

[kenberkeley]

It would be better if we could use Symbol('tableData') instead of tableData...

[DmitryKandratsenka]

Because i dont want to lose selected state of a row after a render. There is another option to do this. I could keep selected in another field of table state. But by this way i need a id field to map data.

Why do you want to store selected values? selected values should be controllable outside of material-table.
for example i can't make selectable some rows, which i want to select by default.

So, you could just make it controllable introducing new field.

it's better to rely on ID field.
or even better, make new field - comparator - so developer decide itself how to compare two rows between each other. and by default it will be comparison by IDs. Check material-ui Autocomplete#getOptionSelected as an example.
or we can introduce function property isRowSelected, we will compare some local state with every table row and decide if it's selected or not ourselves.

mutation of rows which user of component passed as properties is very bad practice.

what do you think, @mbrn?

P.S. very thanks for your work and for this library, i like it, but want to improve some things. i appreciate it!