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

webapp/src/components/common/DataGrid.tsx

@@ -26,6 +26,7 @@ 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";
 
 interface StringRowMarkerOptions {
   kind: "string" | "clickable-string";
@@ -66,6 +67,10 @@ function DataGrid({
   onGridSelectionChange,
   enableColumnResize = true,
   freezeColumns,
+  height: heightFromProps,
+  headerHeight = ROW_HEIGHT,
+  rowHeight = ROW_HEIGHT,
+  overscrollY = OVERSCROLL,
   rows,
   ...rest
 }: DataGridProps) {
@@ -78,7 +83,10 @@ function DataGrid({
   // 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 height =
+    RA.isUndefined(heightFromProps) && RA.isNumber(rowHeight)
+      ? rowHeight * rows + headerHeight + overscrollY
+      : heightFromProps;
 
   const [columns, setColumns] = useState(initColumns);
   const [gridSelection, setGridSelection] = useState<GridSelection>({
@@ -277,16 +285,15 @@ function DataGrid({
   return (
     <DataEditor
       groupHeaderHeight={ROW_HEIGHT}
-      headerHeight={ROW_HEIGHT}
-      rowHeight={ROW_HEIGHT}
+      headerHeight={headerHeight}
+      rowHeight={rowHeight}
       smoothScrollX
       smoothScrollY
       overscrollX={OVERSCROLL}
-      overscrollY={OVERSCROLL}
+      overscrollY={overscrollY}
       width="100%"
       height={height}
       theme={darkTheme}
-      {...rest}
       rows={rows}
       columns={columns}
       rowMarkers={isStringRowMarkers ? "none" : rowMarkersOptions}
@@ -299,6 +306,7 @@ function DataGrid({
       gridSelection={gridSelection}
       onGridSelectionChange={handleGridSelectionChange}
       freezeColumns={adjustedFreezeColumns}
+      {...rest}
     />
   );
 }