fix(data-table): correct data-table rendering in react 18 (uber#5170)

vmatthes · Sep 22, 2022 · d02e6e4 · d02e6e4
1 parent ec8a62f
commit d02e6e4
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx
@@ -841,13 +841,16 @@ export function DataTable({
           }
         }
         result.push(gridProps.width - sum(result) - scrollbarWidth);
-        resetAfterColumnIndex(0);
         return result;
       }
     }
     return resizedWidths;
   }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
 
+  React.useEffect(() => {
+    resetAfterColumnIndex(0);
+  }, [normalizedWidths]);
+
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
     if (!selectedRowIds) {
@@ -1005,7 +1008,7 @@ export function DataTable({
           >
             <VariableSizeGrid
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ref={setGridRef as any}
+              ref={(node) => setGridRef(node)}
               overscanRowCount={10}
               overscanColumnCount={5}
               innerElementType={InnerTableElement}