fix table fixed size rendering

finos · Oct 1, 2024 · ecc6a96 · ecc6a96
1 parent 313c8df
commit ecc6a96
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 48 deletions.
diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts b/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts
@@ -2,3 +2,4 @@ export * from "./get-data-item-edit-control";
 export * from "./EditForm";
 export * from "./edit-rule-validation-checker";
 export * from "./UnsavedChangesReport";
+export * from "./useEditForm";
diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts
@@ -233,7 +233,6 @@ export class Viewport {
     this.aggregations = aggregations;
     this.bufferSize = bufferSize;
     this.#clientRange = range;
-    console.log(`Viewport clientRange initialised to ${JSON.stringify(range)}`);
     this.clientViewportId = viewport;
     this.columns = columns;
     this.filter = filter;

diff --git a/vuu-ui/packages/vuu-table/src/Row.css b/vuu-ui/packages/vuu-table/src/Row.css
@@ -1,13 +1,17 @@
 .vuuTableRow {
   background: var(--row-background, var(--table-background));
-  color: var(--salt-content-secondary-foreground);
   border-bottom: 1px solid var(--row-borderColor, var(--table-background));
   box-sizing: border-box;
+  color: var(--salt-content-secondary-foreground);
+  contain: strict;
+  contain-intrinsic-height: var(--row-height);
+  content-visibility: auto;
   height: var(--row-height);
   line-height: var(--row-height);
   position: absolute;
   top: 0;
   white-space: nowrap;
+  width: 100%;
 }
 
 .vuuTableRow-proxy {

diff --git a/vuu-ui/packages/vuu-table/src/Table.tsx b/vuu-ui/packages/vuu-table/src/Table.tsx
@@ -338,6 +338,7 @@ export const Table = forwardRef(function Table(
     customHeader,
     dataSource,
     disableFocus,
+    height,
     highlightedIndex,
     id,
     navigationStyle,
@@ -357,6 +358,7 @@ export const Table = forwardRef(function Table(
     showColumnHeaderMenus,
     showPaginationControls,
     style: styleProp,
+    width,
     ...htmlAttributes
   }: TableProps,
   forwardedRef: ForwardedRef<HTMLDivElement>,
@@ -397,6 +399,7 @@ export const Table = forwardRef(function Table(
       className={cx(classBase, classNameProp, {
         [`${classBase}-pagination`]: showPaginationControls,
       })}
+      height={height}
       id={id}
       onResize={setSize}
       ref={useForkRef(containerRef, forwardedRef)}
@@ -405,6 +408,7 @@ export const Table = forwardRef(function Table(
           "--row-height-prop": rowHeight > 0 ? `${rowHeight}px` : undefined,
         } as CSSProperties
       }
+      width={width}
     >
       <RowProxy ref={rowRef} height={rowHeightProp} />
       {size && rowHeight && (footerHeight || showColumnHeaders !== true) ? (

diff --git a/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts b/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts
@@ -6,7 +6,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState
+  useState,
 } from "react";
 import { MeasuredContainerProps } from "./MeasuredContainer";
 import { useResizeObserver, ResizeHandler } from "./useResizeObserver";
@@ -42,8 +42,6 @@ interface MeasuredState {
 
 const isNumber = (val: unknown): val is number => Number.isFinite(val);
 
-const FULL_SIZE: CssSize = { height: "100%", width: "auto" };
-
 export interface MeasuredContainerHookResult {
   containerRef: RefObject<HTMLDivElement>;
   cssSize: CssSize;
@@ -53,18 +51,31 @@ export interface MeasuredContainerHookResult {
 
 export const reduceSizeHeight = (
   size: MeasuredSize,
-  value: number
+  value: number,
 ): MeasuredSize => {
   if (value === 0) {
     return size;
   } else {
     return {
       height: size.height - value,
-      width: size.width
+      width: size.width,
     };
   }
 };
 
+const getInitialValue = (
+  value: number | string | undefined,
+  defaultValue: "auto" | "100%",
+) => {
+  if (isValidNumber(value)) {
+    return `${value}px`;
+  } else if (typeof value === "string") {
+    return value;
+  } else {
+    return defaultValue;
+  }
+};
+
 // If (outer) height and width are known at initialisation (i.e. they
 // were passed as props), use as initial values for inner size. If there
 // is no border on Table, these values will not change. If there is a border,
@@ -73,19 +84,10 @@ const getInitialCssSize = (
   height?: number | string,
   width?: number | string,
 ): CssSize => {
-  if (isValidNumber(height) && isValidNumber(width)) {
-    return {
-      height: `${height}px`,
-      width: `${width}px`
-    };
-  } else if (typeof height === "string" || typeof width === "string") {
-    return {
-      height: height ?? "100%",
-      width: width ?? "auto"
-    };
-  } else {
-    return FULL_SIZE;
-  }
+  return {
+    height: getInitialValue(height, "100%"),
+    width: getInitialValue(width, "auto"),
+  };
 };
 
 const getInitialInnerSize = (
@@ -95,7 +97,7 @@ const getInitialInnerSize = (
   if (isValidNumber(height) && isValidNumber(width)) {
     return {
       height,
-      width
+      width,
     };
   }
 };
@@ -105,16 +107,16 @@ export const useMeasuredContainer = ({
   defaultWidth = 0,
   height,
   onResize: onResizeProp,
-  width
+  width,
 }: MeasuredProps): MeasuredContainerHookResult => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState<MeasuredState>({
     css: getInitialCssSize(height, width),
     inner: getInitialInnerSize(height, width),
     outer: {
       height: height ?? "100%",
-      width: width ?? "auto"
-    }
+      width: width ?? "auto",
+    },
   });
   const fixedHeight = typeof height === "number";
   const fixedWidth = typeof width === "number";
@@ -148,7 +150,7 @@ export const useMeasuredContainer = ({
           return {
             ...currentSize,
             outer: { height, width },
-            inner: { height: height - heightDiff, width: width - widthDiff }
+            inner: { height: height - heightDiff, width: width - widthDiff },
           };
         }
       }
@@ -171,8 +173,8 @@ export const useMeasuredContainer = ({
           outer,
           inner: {
             width: Math.floor(clientWidth) || defaultWidth,
-            height
-          }
+            height,
+          },
         };
       } else if (
         fixedWidth &&
@@ -184,8 +186,8 @@ export const useMeasuredContainer = ({
           outer,
           inner: {
             height: Math.floor(clientHeight) || defaultHeight,
-            width
-          }
+            width,
+          },
         };
       } else if (
         isNumber(clientHeight) &&
@@ -197,8 +199,8 @@ export const useMeasuredContainer = ({
           outer,
           inner: {
             width: Math.floor(clientWidth) || defaultWidth,
-            height: Math.floor(clientHeight) || defaultHeight
-          }
+            height: Math.floor(clientHeight) || defaultHeight,
+          },
         };
       }
 
@@ -221,6 +223,6 @@ export const useMeasuredContainer = ({
     containerRef,
     cssSize: size.css,
     outerSize: size.outer,
-    innerSize: size.inner
+    innerSize: size.inner,
   };
 };
diff --git a/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx b/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx
@@ -5,7 +5,7 @@ import { Table, TableProps } from "@finos/vuu-table";
 import type {
   ColumnDescriptor,
   ColumnLayout,
-  DefaultColumnConfiguration
+  DefaultColumnConfiguration,
 } from "@finos/vuu-table-types";
 import { applyDefaultColumnConfig } from "@finos/vuu-utils";
 import { useCallback, useMemo } from "react";
@@ -18,7 +18,7 @@ let displaySequence = 1;
 
 const getDefaultColumnConfig = (
   tableName: string,
-  columnName: string
+  columnName: string,
 ): Partial<ColumnDescriptor> | undefined => {
   switch (columnName) {
     case "ask":
@@ -28,10 +28,10 @@ const getDefaultColumnConfig = (
           name: "number",
           renderer: {
             name: "vuu.price-move-background",
-            flashStyle: "arrow-bg"
+            flashStyle: "arrow-bg",
           },
-          formatting: { decimals: 2, zeroPad: true }
-        }
+          formatting: { decimals: 2, zeroPad: true },
+        },
       };
     case "askSize":
     case "bidSize":
@@ -40,10 +40,10 @@ const getDefaultColumnConfig = (
           name: "number",
           renderer: {
             name: "vuu.price-move-background",
-            flashStyle: "bg-only"
+            flashStyle: "bg-only",
           },
-          formatting: { decimals: 0 }
-        }
+          formatting: { decimals: 0 },
+        },
       };
 
     case "last":
@@ -52,8 +52,8 @@ const getDefaultColumnConfig = (
       return {
         type: {
           name: "number",
-          formatting: { decimals: 2, zeroPad: true }
-        }
+          formatting: { decimals: 2, zeroPad: true },
+        },
       };
     case "wishlist":
       return { editable: true };
@@ -64,7 +64,7 @@ export const SimulTable = ({
   columnLayout,
   getDefaultColumnConfig,
   height = 625,
-  renderBufferSize = 0,
+  renderBufferSize = 10,
   rowClassNameGenerators,
   tableName = "instruments",
   ...props
@@ -83,25 +83,26 @@ export const SimulTable = ({
         columns: applyDefaultColumnConfig(schema, getDefaultColumnConfig),
         rowClassNameGenerators,
         rowSeparators: true,
-        zebraStripes: true
+        zebraStripes: true,
       },
-      dataSource: vuuModule<SimulTableName>("SIMUL").createDataSource(tableName)
+      dataSource:
+        vuuModule<SimulTableName>("SIMUL").createDataSource(tableName),
     }),
     [
       columnLayout,
       getDefaultColumnConfig,
       rowClassNameGenerators,
       schema,
-      tableName
-    ]
+      tableName,
+    ],
   );
 
   const handleConfigChange = useCallback(() => {
     // console.log(JSON.stringify(config, null, 2));
   }, []);
 
   const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({
-    dataSource: tableProps.dataSource
+    dataSource: tableProps.dataSource,
   });
 
   return (