fix(TableVirtualized): support row height (#1909)

mondaycom · Jan 21, 2024 · 9e4cfa0 · 9e4cfa0
1 parent fc126ff
commit 9e4cfa0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/components/Table/Table/Table.module.scss b/src/components/Table/Table/Table.module.scss
@@ -1,7 +1,4 @@
 .table {
-  --row-size-medium: 40px;
-  --row-size-large: 48px;
-
   background-color: var(--primary-background-color);
   overflow: auto;
   width: 100%;

diff --git a/src/components/Table/Table/Table.tsx b/src/components/Table/Table/Table.tsx
@@ -6,7 +6,7 @@ import { ITableBodyProps } from "../TableBody/TableBody";
 import { getTableRowLayoutStyles } from "./tableHelpers";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import { RowSizes } from "./TableConsts";
+import { RowHeights, RowSizes } from "./TableConsts";
 import styles from "./Table.module.scss";
 
 export type TableLoadingStateType = "long-text" | "medium-text" | "circle" | "rectangle";
@@ -44,6 +44,7 @@ interface ITableContext {
   dataState?: ITableProps["dataState"];
   emptyState: ITableProps["emptyState"];
   errorState: ITableProps["errorState"];
+  size: ITableProps["size"];
 }
 
 export const TableContext = React.createContext<ITableContext>(null);
@@ -76,14 +77,14 @@ const Table: VibeComponent<ITableProps, HTMLDivElement> & {
      */
     const calculatedStyle = {
       "--table-grid-template-columns": gridTemplateColumns,
-      "--table-row-size": size == Table.sizes.MEDIUM ? "var(--row-size-medium)" : "var(--row-size-large)",
+      "--table-row-size": `${RowHeights[size]}px`,
       ...style
     } as React.CSSProperties;
 
     const testId = dataTestId || getTestId(ComponentDefaultTestId.TABLE, id);
 
     return (
-      <TableContext.Provider value={{ columns, emptyState, errorState, dataState }}>
+      <TableContext.Provider value={{ columns, emptyState, errorState, dataState, size }}>
         <div ref={ref} id={id} className={classNames} data-testid={testId} role="table" style={calculatedStyle}>
           {children}
         </div>

diff --git a/src/components/Table/Table/TableConsts.ts b/src/components/Table/Table/TableConsts.ts
@@ -5,4 +5,7 @@ export enum RowSizes {
   LARGE = "large"
 }
 
-export type RowSize = typeof RowSizes | number;
+export const RowHeights = {
+  [RowSizes.MEDIUM]: 40,
+  [RowSizes.LARGE]: 48
+};
diff --git a/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx b/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx
@@ -1,9 +1,11 @@
-import React, { ComponentProps, CSSProperties, FC, useCallback } from "react";
+import React, { ComponentProps, CSSProperties, FC, useCallback, useContext } from "react";
 import { VibeComponentProps } from "../../../types";
 import VirtualizedList, { VirtualizedListItem } from "../../VirtualizedList/VirtualizedList";
 import TableBody from "../TableBody/TableBody";
 import styles from "./TableVirtualizedBody.module.scss";
 import { ScrollDirection } from "react-window";
+import { TableContext } from "../Table/Table";
+import { RowHeights } from "../Table/TableConsts";
 
 export interface ITableVirtualizedBodyProps extends VibeComponentProps {
   items: ComponentProps<typeof VirtualizedList>["items"];
@@ -19,13 +21,14 @@ const TableVirtualizedBody: FC<ITableVirtualizedBodyProps> = ({ items, rowRender
     },
     [rowRenderer]
   );
+  const { size } = useContext(TableContext);
 
   return (
     <TableBody className={styles.tableBody}>
       <VirtualizedList
         items={items}
         itemRenderer={itemRenderer}
-        getItemHeight={() => 40}
+        getItemHeight={() => RowHeights[size]}
         layout="vertical"
         onScroll={onScroll}
       />