I'm running into an issue where when using a custom renderer, it keeps showing old data. We have a refresh button in the grid that fetches the new values from the database and then updates the grid. So I change a value in the backend and click that button. I can see that the custom renderer function on each column does get triggered because a console.log in that function gets triggered, and the log shows that the custom renderer does have the new values. However, even after the custom renderer gets triggered the relevant cells still show the old values. If I remove the custom renderer from the column then this problem doesn't happen, it'll show the updated values properly.
For example, here's how the columns are defined in one of our grids:
const columns = [
{
text: TranslationService.trans("Name"),
field: "text",
htmlEncode: false,
renderer: ({ value = "", record }) => {
return (
<Link relative="path" to={`../categories/edit/${record.id}`}>
{value}
</Link>
);
},
},
{
text: TranslationService.trans("Icon"),
field: "icon",
renderer: ({ value = "" }) => {
if (!value) {
return null;
}
console.log(value);
return <FontAwesomeIcon icon={value as IconName} size="lg" />;
},
},
];The console.log in the icon renderer will show the updated values, but the grid will still show the old values. If I remove the renderer entirely then the grid does show the updated values. The only way to get the custom renderers to show the new values is by reloading the entire page.
