I started splitting my React application into several bundles using React.lazy. For some reason though, if I do this the Handsontable starts to render funny.
If I undo the React.lazy component imports, the render is fine…
Any ideas what is causing this?
Hey @aya.sugimura
it looks like the container is put in a parent or it has been given new padding, margin or position settings.
Headers are an extra layer of data that is why you see them doubled.
Any ideas why this is not an issue when I am not lazy loading the component?
All I really changed was how the parent component was loaded:
BEFORE: import Design from '../Design';
AFTER: const Design = lazy(() => import('../Design'));
It’s hard to propose anything when I do not have a demo.
So I actually figured it out. We had the old react-handsontable package installed along with new @handsontable/react.
Since CSS was removed from the new React wrapper (@handsontable/react), I needed to add
import 'handsontable/dist/handsontable.full.css'; to get the Handsontable styling.
I’m glad that you found the cause and was able to fix it. Thanks for an update.
