This might be similar to On re-render, cell meta data lost.
I am using React with typescript. I have a functional component wrapper HotTableComponent that wraps the HotTable component. The intent is to use this wrapper in different pages with minimum configuration:
export const HotTableComponent = forwardRef<HotTableClass, HotTableComponentProps>(function HotTableComponent(
props,
forwardedRef
) {
…
return (
<HotTable
ref={hotRef}
colWidths={props.colWidths}
…
The validation logic is all encompassed within HotTableComponent and the idea is that it will validate the data, and call some setters for:
- the data
- cells that have errors
- boolean if any cell is faulty (so that I disable some high level Upload button accordingly)
- …
A higher level component is rendering HotTableComponent and passing those setters. Those setters are basically useState setters. When the user copy/pastes data, HotTableComponent validates it, and calls setData, setDataValidity, setErrors, etc. and the higher level component will display those errors and enable/disable Upload button
The problem is changing state on the higher level component is re-rendering HotTableComponent, which is re-rendering HotTable, and that’s causing the cell meta objects to be lost and the red highlighting of the cells to disappear
I tried calling re-rendering in different places (hotRef.current?.hotInstance?.render()), validating upon load on HotTableComponent, etc. and nothing worked. I even tried to manually save the cell meta in afterValidate function, and then restoring the cell meta upon load and even that didn’t fix the highlighting issue
afterValidate =(…) =>
{
props.setCellMeta?.(hotRef.current?.hotInstance?.getCellsMeta());
}
and during load:
export const HotTableComponent = forwardRef<HotTableClass, HotTableComponentProps>(function HotTableComponent(
props,
forwardedRef
) {
const hotRef = useRef<HotTableClass | null>(null);
useImperativeHandle(forwardedRef, () => hotRef.current as HotTableClass);
const inst = hotRef.current?.hotInstance;
props.cellMeta?.forEach((cell) => {
hotRef.current?.hotInstance?.setCellMetaObject(cell.row, cell.col, cell);
});
hotRef.current?.hotInstance?.render();
I have the code here https://stackblitz.com/edit/vitejs-vite-vkutwe?file=src%2FApp.tsx but I think I’m using different versions so I can’t get this to compile and run properly…
Please advise
Thanks
Raffi