Material-table TypeError: Cannot add property tableData, object is not extensible
This has nothing to do with material-table
or React
. Most probably this is related to your api response having Object.preventExtensions()
applied on it for some reason, maybe this is an Axios
behavior. So when material-table
is trying to add an id
field to each object, it's facing this error.
Although not optimal, try to copy your api data to a new array of objects so material-table
can modify them, e.g:
const editable = rows.map(o => ({ ...o }));
<MaterialTable
columns={columns}
data={editable}
...
/>
Note that I didn't use
rows.map(o => o)
as this will copy the array with the same objects references
EDIT:
It's worth mentioning that using spread operator or Object.assign will only give a shallow copy, i.e. will not copy nested objects. One work-around for this is to use JSON.parse(JSON.stringify(object))
. Please note that this would cause some data loss, other alternatives are on this answer:
What is the most efficient way to deep clone an object in JavaScript?
You are most likely using immer
or a library that uses immer
under the hood (like @reduxjs/toolkit
). immer
uses Object.freeze
to make the objects it produces immutable.
material-table
modifies its own props (which is a very ugly antipattern). When libraries break rules, they won't work with libraries that try to enforce them.
There is no way to unfreeze an object that has been frozen, but you have a couple of options:
Find a way to disable freezing in the immer instance (check out the API docs of whatever you think might have frozen your state).
Override
Object.freeze
making it do nothing (very hacky, should be avoided - and yet it might be your best shot here):
window.Object.freeze = function(obj) { return obj }
- Clone/deep copy your state before passing it to
MaterialTable
. This is also far from ideal, especially if you have a lot of data.