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

AntaresSimulatorTeam · Jan 30, 2025 · 14d0f69 · 14d0f69
1 parent be08fb8
commit 14d0f69
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/webapp/src/components/common/DataGrid.tsx b/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,11 @@ function DataGrid({
   onGridSelectionChange,
   enableColumnResize = true,
   freezeColumns,
+  height: heightFromProps,
+  groupHeaderHeight = ROW_HEIGHT,
+  headerHeight = ROW_HEIGHT,
+  rowHeight = ROW_HEIGHT,
+  overscrollY = OVERSCROLL,
   rows,
   ...rest
 }: DataGridProps) {
@@ -75,17 +81,21 @@ 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(),
     columns: CompactSelection.empty(),
   });
 
+  const hasGroup = columns.some(({ group }) => RA.isString(group));
+
+  // Manually calculate the height allows to remove the blank space at the bottom of the grid
+  // when there is no scrollbar
+  const height =
+    RA.isUndefined(heightFromProps) && RA.isNumber(rowHeight)
+      ? rowHeight * rows + headerHeight + overscrollY + (hasGroup ? groupHeaderHeight : 0)
+      : heightFromProps;
+
   useUpdateEffect(() => {
     setColumns(initColumns());
   }, [columnsFromProps, isStringRowMarkers]);
@@ -276,17 +286,16 @@ function DataGrid({
 
   return (
     <DataEditor
-      groupHeaderHeight={ROW_HEIGHT}
-      headerHeight={ROW_HEIGHT}
-      rowHeight={ROW_HEIGHT}
+      groupHeaderHeight={groupHeaderHeight}
+      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 +308,7 @@ function DataGrid({
       gridSelection={gridSelection}
       onGridSelectionChange={handleGridSelectionChange}
       freezeColumns={adjustedFreezeColumns}
+      {...rest}
     />
   );
 }

diff --git a/webapp/src/components/common/TableMode.tsx b/webapp/src/components/common/TableMode.tsx
@@ -68,7 +68,7 @@ function TableMode<T extends TableModeType>({
     setGridColumns(
       columns
         .filter((col) => columnNames.includes(col))
-        .map((col) => {
+        .map((col, index) => {
           const title = startCase(col);
           return {
             title,