Fixed height bug

src/Gridler/GridlerDataGrid.tsx

@@ -23,7 +23,6 @@ import { useGridTheme } from './hooks/use-grid-theme';
 export const GridlerDataGrid = () => {
   const ref = React.useRef<DataEditorRef | null>(null);
   const refContextActivated = React.useRef<boolean>(false);
-  const { ref: refWrapper, width } = useElementSize();
 
   const {
     _gridSelection,
@@ -51,6 +50,8 @@ export const GridlerDataGrid = () => {
     setState,
     setStateFN,
     total_rows,
+    heightProp,
+    widthProp,
   } = useGridlerStore((s) => ({
     _gridSelection: s._gridSelection,
     focused: s.focused,
@@ -77,6 +78,8 @@ export const GridlerDataGrid = () => {
     setState: s.setState,
     setStateFN: s.setStateFN,
     total_rows: s.total_rows,
+    heightProp: s.height,
+    widthProp: s.width,
   }));
 
   const refMerged = useMergedRef(ref, (r) => {
@@ -96,7 +99,13 @@ export const GridlerDataGrid = () => {
     );
   }
   return (
-    <Stack align="stretch" gap={0} h="100%" justify="stretch" w="100%">
+    <Stack
+      align="stretch"
+      gap={0}
+      h={heightProp ?? '100%'}
+      justify="stretch"
+      w={widthProp ?? '100%'}
+    >
       {sections?.top}
       <div
         className={classes.container}
@@ -112,7 +121,6 @@ export const GridlerDataGrid = () => {
             }, 100);
           }
         }}
-        ref={refWrapper}
       >
         {sections?.left}
         <DataEditor
@@ -127,7 +135,6 @@ export const GridlerDataGrid = () => {
           gridSelection={_gridSelection}
           headerHeight={headerHeight ?? 32}
           headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
-          height={width}
           onCellContextMenu={(cell, event) => {
             event.preventDefault();
             if (!refContextActivated.current) {
@@ -212,8 +219,7 @@ export const GridlerDataGrid = () => {
           width="100%"
           {...glideProps}
         />
-        {/* <Portal> */}
+
-        <div id="portal" />
         {/* </Portal> */}
         <Computer />
         {!hasLocalData && <Pager />}
@@ -221,6 +227,7 @@ export const GridlerDataGrid = () => {
       </div>
       <BottomBar />
       {sections?.bottom}
+      {/* <Portal> */}
     </Stack>
   );
 };

src/Gridler/components/Store.tsx

@@ -64,10 +64,13 @@ export interface GridlerProps extends PropsWithChildren {
 
   glideProps?: Partial<DataEditorProps>;
   headerHeight?: number;
+  height?: number | string;
   hideMenu?: (id: string) => void;
   keyField?: string;
   maxConcurrency?: number;
   onChange?: (values: Array<Record<string, any>>) => void;
+  onMounted?: (getState: GridlerState['getState'], setState: GridlerState['setState']) => void;
+  onUnMounted?: () => void;
   pageSize?: number;
   progressiveScroll?: boolean;
   RenderCell?: <TRowType extends Record<string, string>>(
@@ -92,6 +95,7 @@ export interface GridlerProps extends PropsWithChildren {
   uniqueid: string;
   useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
   values?: Array<Record<string, any>>;
+  width?: number | string;
 }
 
 export interface GridlerState {
@@ -680,8 +684,28 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     const menus = useMantineBetterMenus();
 
     useEffect(() => {
+      const onMounted = getState('onMounted');
+      if (typeof onMounted === 'function') {
+        onMounted(getState, setState);
+      }
       setState('mounted', true);
-    }, [setState]);
+      if (window && window.document) {
+        const portalElement = window.document.getElementById('portal');
+        if (!portalElement) {
+          const div = window.document.createElement('div');
+          div.id = 'portal';
+          div.setAttribute('data-gridler-portal', props.uniqueid);
+          window.document.body.appendChild(div);
+        }
+      }
+      return () => {
+        const onUnMounted = getState('onUnMounted');
+        setState('mounted', false);
+        if (typeof onUnMounted === 'function') {
+          onUnMounted();
+        }
+      };
+    }, [setState, getState]);
 
     /// logic to apply the selected row.
     useEffect(() => {

src/Gridler/stories/Examples.goapi.tsx

@@ -44,12 +44,13 @@ export const GridlerGoAPIExampleEventlog = () => {
   ];
 
   return (
-    <Stack h="80vh">
+    <Stack h="60vh">
       <h2>Demo Using Go API Adaptor</h2>
       <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
       <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
       <Divider />
       <Gridler
+        height="100%"
         columns={columns}
         getMenuItems={(id, _state, row, col, defaultItems) => {
           return [