fix(Table): fix flexGrow is invalid when the table is hidden and then shown

docs/examples/FluidColumnTable.md

@@ -5,44 +5,55 @@
 ```js
 const data = mockUsers(20);
 
-const App = () => {
+const CustomTable = ({ flexGrow }) => {
   return (
-    <Table
-      height={400}
-      data={data}
-      onSortColumn={(sortColumn, sortType) => {
-        console.log(sortColumn, sortType);
-      }}
-    >
-      <Column width={50} align="center" fixed>
-        <HeaderCell>Id</HeaderCell>
-        <Cell dataKey="id" />
-      </Column>
+    <>
+      <Table
+        height={400}
+        data={data}
+        onSortColumn={(sortColumn, sortType) => {
+          console.log(sortColumn, sortType);
+        }}
+      >
+        <Column width={50} align="center" fixed>
+          <HeaderCell>Id</HeaderCell>
+          <Cell dataKey="id" />
+        </Column>
+
+        <Column width={100} fixed>
+          <HeaderCell>First Name</HeaderCell>
+          <Cell dataKey="firstName" />
+        </Column>
 
-      <Column width={100} fixed>
-        <HeaderCell>First Name</HeaderCell>
-        <Cell dataKey="firstName" />
-      </Column>
+        <Column width={100} resizable sortable>
+          <HeaderCell>Last Name</HeaderCell>
+          <Cell dataKey="lastName" />
+        </Column>
 
-      <Column width={100} resizable sortable>
-        <HeaderCell>Last Name</HeaderCell>
-        <Cell dataKey="lastName" />
-      </Column>
+        <Column flexGrow={flexGrow ? 1 : undefined} width={200} sortable>
+          <HeaderCell>City {flexGrow ? <code>(flexGrow={1})</code> : null}</HeaderCell>
+          <Cell dataKey="city" />
+        </Column>
 
-      <Column flexGrow={1} sortable>
-        <HeaderCell>
-          City <code>(flexGrow={1})</code>
-        </HeaderCell>
-        <Cell dataKey="city" />
-      </Column>
+        <Column flexGrow={flexGrow ? 2 : undefined} width={200} sortable>
+          <HeaderCell>Company {flexGrow ? <code>(flexGrow={2})</code> : null}</HeaderCell>
+          <Cell dataKey="company" />
+        </Column>
+      </Table>
+    </>
+  );
+};
 
-      <Column flexGrow={2} sortable>
-        <HeaderCell>
-          Company <code>(flexGrow={2})</code>
-        </HeaderCell>
-        <Cell dataKey="company" />
-      </Column>
-    </Table>
+const App = () => {
+  return (
+    <Tabs defaultActiveKey="1">
+      <Tabs.Tab eventKey="1" title="flexGrow">
+        <CustomTable flexGrow />
+      </Tabs.Tab>
+      <Tabs.Tab eventKey="2" title="no flexGrow">
+        <CustomTable />
+      </Tabs.Tab>
+    </Tabs>
   );
 };
 

docs/index.tsx

@@ -11,7 +11,8 @@ import {
   Divider,
   Input,
   Loader,
-  Placeholder
+  Placeholder,
+  Tabs
 } from 'rsuite';
 import clone from 'lodash/clone';
 import isFunction from 'lodash/isFunction';
@@ -40,6 +41,7 @@ import 'rsuite/Nav/styles/index.less';
 import 'rsuite/Input/styles/index.less';
 import 'rsuite/Stack/styles/index.less';
 import 'rsuite/Divider/styles/index.less';
+import 'rsuite/Tabs/styles/index.less';
 import './less/index.less';
 
 const dependencies = {
@@ -76,7 +78,8 @@ const dependencies = {
   ArrowDownIcon,
   ArrowUpIcon,
   SortIcon,
-  Placeholder
+  Placeholder,
+  Tabs
 };
 
 const examples = [

package.json

@@ -129,7 +129,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "rsuite": "^5.21.0",
+    "rsuite": "^5.64.0",
     "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",
     "style-loader": "^0.13.1",

src/utils/useIntersectionObserver.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect, RefObject } from 'react';
+
+/**
+ * useIntersectionObserver Hook
+ *
+ * @param ref - Ref object of the element to be observed
+ */
+const useIntersectionObserver = (ref?: RefObject<HTMLElement>): boolean => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if the browser supports IntersectionObserver
+    if (!('IntersectionObserver' in window)) {
+      // If not supported, optionally set to visible or handle fallback logic
+      setIsVisible(true); // Fallback: Set to visible
+      return;
+    }
+
+    // Create an IntersectionObserver instance
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        setIsVisible(entry.isIntersecting);
+      });
+    });
+
+    const element = ref?.current;
+
+    // Start observing the target element
+    if (element) {
+      observer.observe(element);
+    }
+
+    // Cleanup function to unobserve the element when the component unmounts or dependencies change
+    return () => {
+      if (element) {
+        observer.unobserve(element);
+      }
+    };
+  }, [ref]);
+
+  return isVisible;
+};
+
+export default useIntersectionObserver;

src/utils/useTableDimension.ts

@@ -6,6 +6,7 @@ import { SCROLLBAR_WIDTH } from '../constants';
 import { ResizeObserver } from '@juggle/resize-observer';
 import useMount from './useMount';
 import useUpdateLayoutEffect from './useUpdateLayoutEffect';
+import useIntersectionObserver from './useIntersectionObserver';
 import isNumberOrTrue from './isNumberOrTrue';
 import { RowDataType, ElementOffset } from '../@types/common';
 import debounce from 'lodash/debounce';
@@ -296,6 +297,17 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
     calculateTableContentWidth
   ]);
 
+  const isVisible = useIntersectionObserver(tableRef);
+
+  useUpdateLayoutEffect(() => {
+    // When the table is visible, the width of the table is recalculated.
+    // fix: https://github.com/rsuite/rsuite/issues/397
+    if (isVisible) {
+      calculateTableWidth();
+      calculateTableContentWidth();
+    }
+  }, [isVisible]);
+
   const setScrollY = useCallback((value: number) => {
     scrollY.current = value;
   }, []);

test/Table.test.tsx

@@ -4,7 +4,15 @@ import Table, { TableInstance } from '../src/Table';
 import Cell from '../src/Cell';
 import Column from '../src/Column';
 import HeaderCell from '../src/HeaderCell';
-import { ItemDataType } from 'rsuite/esm/@types/common';
+
+interface ItemDataType<T = number | string> extends Record<string, any> {
+  label?: React.ReactNode;
+  value?: T;
+  groupBy?: string;
+  parent?: ItemDataType<T>;
+  children?: ItemDataType<T>[];
+  loading?: boolean;
+}
 
 type Row = {
   id: number;