performance tweak for frozen

Author: mckervinc

src/Footer.tsx

@@ -6,10 +6,10 @@ import { cx, findTableByUuid } from "./util";
 interface InnerFooterCellProps<T> {
   width: number;
   column: ColumnProps<T>;
-  prevWidths: number[];
+  prevWidth: number;
 }
 
-const FooterCell = React.memo(function <T>({ prevWidths, ...rest }: InnerFooterCellProps<T>) {
+const FooterCell = React.memo(function <T>({ prevWidth, ...rest }: InnerFooterCellProps<T>) {
   // hooks
   const { rows } = useContext(TableContext);
 
@@ -19,7 +19,7 @@ const FooterCell = React.memo(function <T>({ prevWidths, ...rest }: InnerFooterC
     width: width || undefined,
     minWidth: width || undefined,
     padding: !column.footer ? 0 : undefined,
-    left: column.frozen ? prevWidths.reduce((pv, c) => pv + c, 0) : undefined
+    left: column.frozen ? prevWidth : undefined
   };
 
   const FooterCellComponent = column.footer;
@@ -113,7 +113,7 @@ const Footer = () => {
               key={c.key}
               column={c}
               width={pixelWidths[i]}
-              prevWidths={pixelWidths.slice(0, i)}
+              prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
             />
           ))}
         </div>

src/Header.tsx

@@ -7,15 +7,15 @@ import { cx } from "./util";
 interface HeaderCellProps<T> {
   width: number;
   column: ColumnProps<T>;
-  prevWidths: number[];
+  prevWidth: number;
 }
 
 interface HeaderProps {
   children: React.ReactNode;
   style: React.CSSProperties;
 }
 
-const HeaderCell = React.memo(function <T>({ column, width, prevWidths }: HeaderCellProps<T>) {
+const HeaderCell = React.memo(function <T>({ column, width, prevWidth }: HeaderCellProps<T>) {
   // hooks
   const { dispatch, sortColumn: col, sortDirection, onSort } = useContext(TableContext);
 
@@ -26,7 +26,7 @@ const HeaderCell = React.memo(function <T>({ column, width, prevWidths }: Header
     cursor: column.sortable ? "pointer" : undefined,
     width: width || undefined,
     minWidth: width || undefined,
-    left: column.frozen ? prevWidths.reduce((pv, c) => pv + c, 0) : undefined
+    left: column.frozen ? prevWidth : undefined
   };
 
   // function(s)
@@ -112,7 +112,7 @@ const Header = forwardRef(({ children, ...rest }: HeaderProps, ref: any) => {
                 key={c.key}
                 column={c}
                 width={pixelWidths[i]}
-                prevWidths={pixelWidths.slice(0, i)}
+                prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
               />
             ))}
           </div>

src/Row.tsx

@@ -10,7 +10,7 @@ interface TableCellProps<T> {
   row: T;
   index: number;
   width?: number;
-  prevWidths: number[];
+  prevWidth: number;
   column: ColumnProps<T>;
   isExpanded: boolean;
   clearSizeCache: CacheFunction;
@@ -70,15 +70,15 @@ const TableCell = React.memo(function <T>({
   width,
   column,
   isExpanded,
-  prevWidths,
+  prevWidth,
   clearSizeCache,
   onExpanderClick
 }: TableCellProps<T>) {
   // cell style
   const style: React.CSSProperties = {
     width: width || undefined,
     minWidth: width || undefined,
-    left: column.frozen ? prevWidths.reduce((pv, c) => pv + c, 0) : undefined
+    left: column.frozen ? prevWidth : undefined
   };
 
   // expander
@@ -275,7 +275,7 @@ function Row<T>({
             isExpanded={isExpanded}
             clearSizeCache={clearSizeCache}
             onExpanderClick={onExpanderClick}
-            prevWidths={pixelWidths.slice(0, i)}
+            prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
           />
         ))}
       </RowContainer>