Guidelines
-
Please include a demo of the issue/behavior/question you have
As I just had to revert my code and fall back to the TABLE from material-ui, I don't have the actual code but can explain in detail what happened and what is expected
-
Please try to be as detailed as possible
So, here I have a Dialog form which pops-up when user clicks a button to add notes\remarks. The form receives all current persisted remarks as PROPS. I use this PROPS JSON element to extract REMARKS JSON
e.g. the PROPS would look like ..
{
applicationID: 1234,
remarks: [
{remarkID: 1, remark: 'Remark details 01', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
{remarkID: 2, remark: 'Remark details 02', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
{remarkID: 3, remark: 'Remark details 03', createdAt: '2021-02-10', createdBy: 'TEST_USER'},
]
}
let remarks = props.remarks;
below array is my column definition ...
const columns = [
{ field: "remark",
title: "Remark",
cellStyle: {
width: 650,
minWidth: 650,
},
headerStyle: {
width: 650,
minWidth: 650,
//whiteSpace: 'nowrap',
} },
{ field: "createdAt", title: "Added On",
cellStyle: {
width: 30,
minWidth: 30,
whiteSpace: 'nowrap',
},
headerStyle: {
width: 30,
minWidth: 30,
whiteSpace: 'nowrap',
} },
{ field: "createdBy", title: "Added By",
cellStyle: {
width: 30,
minWidth: 30,
whiteSpace: 'nowrap',
},
headerStyle: {
width: 30,
minWidth: 30,
whiteSpace: 'nowrap',
} },
];
I use the remarks element from the above JSON object as my input to the MaterialTable
<MaterialTable
title="Remarks"
icons={tableIcons}
columns={columns}
data={remarks}
options={{
showTitle: true,
isLoading: true,
headerStyle: {
backgroundColor: "#01579b",
color: "#FFF",
}
}}
/>
The have a FORMIK form which is a simple one textEdit style element for user to add new REMARK with an OK and CANCEL button. Once user add a new Remark and press the 'OK' button. I make an API call to save the new remark ..everything works fine up to here..
The issue is when I PUSH the new remark in the REMARKS array as a new JSON object, the MaterialTable doesn't reflect that change. I even tried to use REMARKS as a state variable with hooks e.g.
const [remarks, setRemarks] = useState(props.remarks)
and tried to set the new element in the remarks using the setRemarks() in the form submit event post API call. Still the table won't refresh. It seems like the table is just independent by itself post rendering and won't bother to listen to data changes.
I know that I can use the 'EDITABLE' feature of the MaterialTable and allow user to directly add\update row like the one below but that's not how I want my UI to look\behave...
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
setData([...remarks, newData]);
resolve();
}, 1000);
}),
}}
-
You may fork one of the following starter templates if you would like:
Describe the bug
Simple. MaterialTable fails to re-render itself when the underlying data changes.
To Reproduce
Steps to reproduce the behavior:
Try to use above snippets of code to create a React functional element to reproduce the issue or simply you can see this in your own MaterialTable implementation by updating the data values.
Expected behavior
All I expect MaterialTable to do is to reflect changes to the underlying data when the data gets updated. A stale data table doesn't serve much purpose.
Screenshots
don't have any as I created this bug AFTER I had reverted my code to use simple Material Table from material-ui
Desktop (please complete the following information):
- OS: [e.g. iOS] Mac Os Mojave
- Browser [e.g. chrome, safari] Chrome
- Version [e.g. 22] Version 88.0.4324.96 (Official Build) (x86_64)
Smartphone (please complete the following information):
N/A
Additional context
Hope someone has an answer or a workaround else it's a bug and needs be addressed as it is a basic requirement for any data table to refresh itself