fix(ui-commons): use props values to calculate the height

webapp/src/components/common/DataGrid.tsx

@@ -26,6 +26,8 @@ import { useCallback, useState } from "react";
 import { voidFn } from "@/utils/fnUtils";
 import { darkTheme } from "./Matrix/styles";
 import { useUpdateEffect } from "react-use";
+import * as RA from "ramda-adjunct";
+import { hasGroup } from "@/utils/dataGridUtils";
 
 interface StringRowMarkerOptions {
   kind: "string" | "clickable-string";
@@ -75,11 +77,6 @@ function DataGrid({
   const isStringRowMarkers = isStringRowMarkerOptions(rowMarkersOptions);
   const adjustedFreezeColumns = isStringRowMarkers ? (freezeColumns || 0) + 1 : freezeColumns;
 
-  // Manually calculate the height allows to remove the blank space at the bottom of the grid
-  // when there is no scrollbar. Header is included in the height calculation.
-  //! Group header is not included, fix it when needed.
-  const height = ROW_HEIGHT * (rows + 1) + OVERSCROLL;
-
   const [columns, setColumns] = useState(initColumns);
   const [gridSelection, setGridSelection] = useState<GridSelection>({
     rows: CompactSelection.empty(),
@@ -284,9 +281,7 @@ function DataGrid({
       overscrollX={OVERSCROLL}
       overscrollY={OVERSCROLL}
       width="100%"
-      height={height}
       theme={darkTheme}
-      {...rest}
       rows={rows}
       columns={columns}
       rowMarkers={isStringRowMarkers ? "none" : rowMarkersOptions}
@@ -299,6 +294,7 @@ function DataGrid({
       gridSelection={gridSelection}
       onGridSelectionChange={handleGridSelectionChange}
       freezeColumns={adjustedFreezeColumns}
+      {...rest}
     />
   );
 }

webapp/src/utils/dataGridUtils.ts

@@ -14,6 +14,7 @@
 
 import type { GridColumn } from "@glideapps/glide-data-grid";
 import { measureTextWidth } from "./domUtils";
+import * as RA from "ramda-adjunct";
 
 /**
  * Gets the width of the given column.