respect rowHeight

mckervinc · Dec 12, 2024 · c5b91be · c5b91be
1 parent 027ca10
commit c5b91be
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 1.0.1
+
+### Bugfix
+
+- `rowHeight` is now respected
+- when there is overflow-x, borders should remain
+
 ## 1.0.0
 
 _2024-12-12_

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React table inspired by @tanstack/react-virtual",
   "author": "Mckervin Ceme <[email protected]>",
   "license": "MIT",

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -58,6 +58,7 @@ type HeaderProps<T> = {
   uuid: string;
   columns: ColumnProps<T>[];
   pixelWidths: number[];
+  showRowWrapper: boolean;
   className?: string;
   style?: React.CSSProperties;
   sortColumn?: string;
@@ -69,6 +70,7 @@ const Header = forwardRef(function <T>(
   {
     uuid,
     columns,
+    showRowWrapper,
     pixelWidths,
     className,
     style,
@@ -111,18 +113,20 @@ const Header = forwardRef(function <T>(
 
   return (
     <div ref={ref} className="rft-sticky-header" data-header-key={`${uuid}-header`}>
-      <div className={cx("rft-header", className)} style={style}>
-        {columns.map((c, i) => (
-          <HeaderCell
-            key={c.key}
-            width={pixelWidths[i]}
-            sortedCol={sortedCol}
-            sortedDir={sortedDir}
-            column={c as ColumnProps<any>}
-            onHeaderClick={onHeaderClick as any}
-            prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
-          />
-        ))}
+      <div className={cx(showRowWrapper && "rft-row-wrapper")}>
+        <div className={cx("rft-header", className)} style={style}>
+          {columns.map((c, i) => (
+            <HeaderCell
+              key={c.key}
+              width={pixelWidths[i]}
+              sortedCol={sortedCol}
+              sortedDir={sortedDir}
+              column={c as ColumnProps<any>}
+              onHeaderClick={onHeaderClick as any}
+              prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState
 } from "react";
+import { useResizeDetector } from "react-resize-detector";
 import { ColumnProps, ScrollAlignment, TableProps, TableRef } from "../..";
 import { DEFAULT_ROW_HEIGHT } from "../constants";
 import { arraysMatch, calculateColumnWidths, cx, findColumnWidthConstants } from "../util";
@@ -61,6 +62,7 @@ const List = forwardRef(function <T>(
   // hooks
   const parentRef = useRef<HTMLDivElement | null>(null);
   const headerRef = useRef<HTMLDivElement | null>(null);
+  const { ref: innerRef, width: innerWidth = 0 } = useResizeDetector<HTMLDivElement>();
   const [pixelWidths, setPixelWidths] = useState<number[]>([]);
   const [widthConstants, setWidthConstants] = useState(findColumnWidthConstants(columns));
   const [expandedCache, setExpandedCache] = useState<Record<string | number, boolean>>({});
@@ -76,6 +78,7 @@ const List = forwardRef(function <T>(
   });
 
   // constants
+  const showRowWrapper = (innerRef.current?.scrollWidth || 0) > innerWidth;
   const items = virtualizer.getVirtualItems();
   const { fixedWidth, remainingCols } = widthConstants;
 
@@ -157,6 +160,7 @@ const List = forwardRef(function <T>(
       <Header
         ref={headerRef}
         uuid={uuid}
+        showRowWrapper={showRowWrapper}
         pixelWidths={pixelWidths}
         columns={columns as ColumnProps<any>[]}
         className={headerClassname}
@@ -167,12 +171,13 @@ const List = forwardRef(function <T>(
       />
       <div className="rft-outer-container" style={{ height: virtualizer.getTotalSize() }}>
         <div
+          ref={innerRef}
           className="rft-inner-container"
           style={{
             transform: `translateY(${items[0]?.start ?? 0}px)`
           }}
         >
-          <div className="rft-row-wrapper">
+          <div className={cx(showRowWrapper && "rft-row-wrapper")}>
             {items.map(item => {
               const row = data[item.index];
               const key = generateKeyFromRow(row, item.index);
@@ -182,6 +187,8 @@ const List = forwardRef(function <T>(
               const style = typeof rowStyle === "function" ? rowStyle(item.index) : rowStyle;
               return (
                 <Row
+                  ref={virtualizer.measureElement}
+                  rowHeight={rowHeight}
                   key={key}
                   row={row}
                   uuid={uuid}
@@ -196,7 +203,6 @@ const List = forwardRef(function <T>(
                   columns={columns as any}
                   pixelWidths={pixelWidths}
                   subComponent={subComponent as any}
-                  ref={virtualizer.measureElement}
                 />
               );
             })}

diff --git a/src/components/Row.tsx b/src/components/Row.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, memo, useCallback } from "react";
+import React, { forwardRef, JSX, memo, useCallback } from "react";
 import { ColumnProps, RowRenderProps, SubComponentProps } from "../..";
 import Minus from "../svg/minus-circle.svg";
 import Plus from "../svg/plus-circle.svg";
-import { cx } from "../util";
+import { cx, positive } from "../util";
 
 type TableCellProps<T> = {
   row: T;
@@ -138,6 +138,7 @@ type RowProps<T> = {
   pixelWidths: number[];
   columns: ColumnProps<T>[];
   isExpanded: boolean;
+  rowHeight?: number;
   onExpand: (
     row: T,
     index: number,
@@ -162,12 +163,13 @@ const Row = forwardRef(function <T>(
     row,
     rowKey,
     columns,
+    rowHeight,
     pixelWidths,
     isExpanded,
     onExpand,
     onRowClick,
     className,
-    style,
+    style = {},
     rowRenderer,
     subComponent: SubComponent
   }: RowProps<T>,
@@ -184,7 +186,7 @@ const Row = forwardRef(function <T>(
         row={row}
         index={index}
         className={cx("rft-row", className)}
-        style={style}
+        style={{ height: positive(rowHeight) ? rowHeight : undefined, ...style }}
         onRowClick={onRowClick}
         rowRenderer={rowRenderer}
       >