support variable row height in UITable

Author: gimmixAT

public/themes/basti.css

@@ -64,7 +64,7 @@
   --radiobutton-size:20px;
   --tab-padding:0rem 1rem;
   --table-header-padding: 0.6rem 0.75rem;
-  --table-cell-padding-top-bottom: 0.2rem;
+  --table-cell-padding-top-bottom: 0.25rem;
   --table-cell-padding-left-right: 0.75rem;
   --table-data-height:27px;
   --label-padding:calc(var(--input-padding-tb) + var(--input-border-width));
@@ -308,6 +308,11 @@ body {
   padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right) var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
   height: calc(8px + var(--table-data-height));
 }
+.basti .rc-table.variable-row-height .p-datatable-tbody > tr > td {
+  min-height: calc(8px + var(--table-data-min-height));
+  max-height: calc(8px + var(--table-data-max-height));
+  height: auto;
+}
 .basti .rc-label > span {
   padding: var(--label-padding) 0px;
 }

src/main/components/table/UITable.scss

@@ -253,6 +253,11 @@
                     &.cancel-padding {
                         padding: var(--table-cell-padding-top-bottom, .2rem) var(--table-cell-padding-left-right, .4rem);
                     }
+
+                    @at-root .variable-row-height#{&} {
+                        min-height: var(--table-data-min-height);
+                        max-height: var(--table-data-max-height);
+                    }
                 }
 
                 &.ChoiceCellEditor, &.CheckBoxCellEditor {

src/main/components/table/UITable.tsx

@@ -236,15 +236,28 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
     const updateRowHeight = useCallback(() => {
         clearTimeout(updateRowHeightTimeout.current);
         updateRowHeightTimeout.current = window.setTimeout(() => {
-            let max = 0;
-            for(let v of cellHeights.current.values()) {
-                max = Math.max(max, v);
+            if (props.sameRowHeight === false && !props.rowHeight) {
+                let sum = 0;
+                for(let v of cellHeights.current.values()) {
+                    sum += v;
+                }
+                const mean = Math.ceil(sum / cellHeights.current.size);
+                setRowHeight(negotiateRowHeight(
+                    props.minRowHeight,
+                    mean,
+                    props.maxRowHeight
+                ));
+            } else {
+                let max = 0;
+                for(let v of cellHeights.current.values()) {
+                    max = Math.max(max, v);
+                }
+                setRowHeight(negotiateRowHeight(
+                    props.minRowHeight,
+                    max,
+                    props.maxRowHeight
+                ));
             }
-            setRowHeight(negotiateRowHeight(
-                props.minRowHeight,
-                max,
-                props.maxRowHeight
-            ));
         }, 1);
     }, [props.maxRowHeight])
 
@@ -1030,7 +1043,7 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
             const isEditable = getCellIsEditable(rowData);
             const elementRef = useRef<any>(null);
             useEffect(() => {
-                if (tableInfo.rowIndex < 100 && props.sameRowHeight && !props.rowHeight) {
+                if (tableInfo.rowIndex < 100 && (props.sameRowHeight === true || props.sameRowHeight === false) && !props.rowHeight) {
                     const h = (elementRef.current?.querySelector('.cell-data-content').scrollHeight ?? 0) + 8;
                     const k = `${colName}-${tableInfo.rowIndex}`;
                     cellHeights.current.set(k, h);
@@ -1546,9 +1559,12 @@ const UITable: FC<TableProps & IExtendableTable & IComponentConstants> = (props)
                     ref={tableRef}
                     style={{
                         "--table-data-height": `${rowHeight - 8}px`,
+                        ...(props.minRowHeight ? {"--table-data-min-height": `${props.minRowHeight - 8}px`} : {}),
+                        ...(props.maxRowHeight ? {"--table-data-max-height": `${props.maxRowHeight - 8}px`} : {}),
                     } as React.CSSProperties}
                     className={concatClassnames(
                         "rc-table",
+                        props.sameRowHeight === false && !props.rowHeight ? "variable-row-height" : '',
                         props.autoResize === false ? "no-auto-resize" : "",
                         getNavTableClassName(props.parent),
                         props.styleClassNames