fix: 7.x header blank when using sticky or scroll.y

src/Body/MeasureCell.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 export interface MeasureCellProps {
  columnKey: React.Key;
@@ -9,7 +10,7 @@ export interface MeasureCellProps {
 export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
  const cellRef = React.useRef<HTMLTableCellElement>();
 
-React.useEffect(() => {
+useLayoutEffect(() => {
  if (cellRef.current) {
  onColumnResize(columnKey, cellRef.current.offsetWidth);
  }

src/Body/MeasureRow.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import MeasureCell from './MeasureCell';
+import isVisible from 'rc-util/lib/Dom/isVisible';
 
 export interface MeasureCellProps {
  prefixCls: string;
@@ -9,17 +10,22 @@ export interface MeasureCellProps {
 }
 
 export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+ const ref = React.useRef<HTMLTableRowElement>(null);
+
  return (
  <tr
  aria-hidden="true"
  className={`${prefixCls}-measure-row`}
  style={{ height: 0, fontSize: 0 }}
+ ref={ref}
  >
  <ResizeObserver.Collection
  onBatchResize={infoList => {
- infoList.forEach(({ data: columnKey, size }) => {
- onColumnResize(columnKey, size.offsetWidth);
- });
+ if (isVisible(ref.current)) {
+ infoList.forEach(({ data: columnKey, size }) => {
+ onColumnResize(columnKey, size.offsetWidth);
+ });
+ }
  }}
  >
  {columnsKey.map(columnKey => (

src/Table.tsx

@@ -27,7 +27,6 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import isVisible from 'rc-util/lib/Dom/isVisible';
 import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
 import useEvent from 'rc-util/lib/hooks/useEvent';
@@ -48,7 +47,7 @@ import Header from './Header/Header';
 import useColumns from './hooks/useColumns';
 import useExpand from './hooks/useExpand';
 import useFixedInfo from './hooks/useFixedInfo';
-import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
+import { useTimeoutLock } from './hooks/useFrame';
 import useHover from './hooks/useHover';
 import useSticky from './hooks/useSticky';
 import useStickyOffsets from './hooks/useStickyOffsets';
@@ -76,6 +75,7 @@ import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
 import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 
 export const DEFAULT_PREFIX = 'rc-table';
 
@@ -349,7 +349,7 @@ function Table<RecordType extends DefaultRecordType>(
  const scrollSummaryRef = React.useRef<HTMLDivElement>();
  const [pingedLeft, setPingedLeft] = React.useState(false);
  const [pingedRight, setPingedRight] = React.useState(false);
- const [colsWidths, updateColsWidths] = useLayoutState(new Map<React.Key, number>());
+ const [colsWidths, updateColsWidths] = React.useState(new Map<React.Key, number>());
 
  // Convert map to number width
  const colsKeys = getColumnsKey(flattenColumns);
@@ -403,16 +403,14 @@ function Table<RecordType extends DefaultRecordType>(
  }
 
  const onColumnResize = React.useCallback((columnKey: React.Key, width: number) => {
- if (isVisible(fullTableRef.current)) {
- updateColsWidths(widths => {
- if (widths.get(columnKey) !== width) {
- const newWidths = new Map(widths);
- newWidths.set(columnKey, width);
- return newWidths;
- }
- return widths;
- });
- }
+ updateColsWidths(widths => {
+ if (widths.get(columnKey) !== width) {
+ const newWidths = new Map(widths);
+ newWidths.set(columnKey, width);
+ return newWidths;
+ }
+ return widths;
+ });
  }, []);
 
  const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
@@ -524,7 +522,7 @@ function Table<RecordType extends DefaultRecordType>(
  const [scrollbarSize, setScrollbarSize] = React.useState(0);
  const [supportSticky, setSupportSticky] = React.useState(true); // Only IE not support, we mark as support first
 
-React.useEffect(() => {
+useLayoutEffect(() => {
  if (!tailor || !useInternalHooks) {
  if (scrollBodyRef.current instanceof Element) {
  setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);