update React 16 to React 19

docs/examples/animation.tsx

@@ -11,7 +11,7 @@ type MotionBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
   const nodeList = toArray(children);
-  const nodesRef = React.useRef<Record<string, React.ReactElement>>({});
+  const nodesRef = React.useRef<Record<string, React.ReactElement<any>>>({});
 
   // Better apply clean up logic to avoid OOM
   const keys: React.Key[] = [];
@@ -26,7 +26,7 @@ const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
       <CSSMotionList keys={keys} component={false} motionName="move">
         {({ key, className }) => {
           const node = nodesRef.current[key];
-          return React.cloneElement(node, {
+          return React.cloneElement<any>(node, {
             className: classNames(node.props.className, className),
           });
         }}

docs/examples/fixedColumnsAndHeaderRtl.tsx

@@ -37,7 +37,7 @@ const useColumn = (
   ellipsis: boolean,
   percentage: boolean,
 ) => {
-  const columns: ColumnsType<RecordType> = React.useMemo(
+  const columns = React.useMemo<ColumnsType<RecordType>>(
     () => [
       {
         title: 'title1',

docs/examples/jsx.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-named-as-default-member */
 import React from 'react';
 import Table from 'rc-table';
 import '../../assets/index.less';

docs/examples/scrollY.tsx

@@ -13,7 +13,7 @@ for (let i = 0; i < 20; i += 1) {
 }
 
 const Test = () => {
-  const tblRef = React.useRef<Reference>();
+  const tblRef = React.useRef<Reference>(null);
   const [showBody, setShowBody] = React.useState(true);
 
   const toggleBody = () => {
@@ -94,7 +94,7 @@ const Test = () => {
         data={data}
         scroll={{ y: 300 }}
         rowKey={record => record.key}
-        onRow={(record, index) => ({ style: { backgroundColor: 'red' } })}
+        onRow={() => ({ style: { backgroundColor: 'red' } })}
       />
       <h3>Column align issue</h3>
       <p>https://github.com/ant-design/ant-design/issues/54889</p>

docs/examples/shadow.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import type { ColumnsType } from '@/interface';

docs/examples/stickyHeader.tsx

@@ -166,7 +166,7 @@ const columns3: ColumnType<RecordType>[] = [
 ];
 
 const Demo = () => {
-  const container = useRef();
+  const container = useRef(null);
   return (
     <div>
       <h2>Sticky</h2>

docs/examples/virtual-list-grid.tsx

@@ -23,7 +23,7 @@ for (let i = 0; i < 100000; i += 1) {
   });
 }
 const Demo = () => {
-  const gridRef = React.useRef<any>();
+  const gridRef = React.useRef<any>(null);
   const [connectObject] = React.useState<any>(() => {
     const obj = {};
     Object.defineProperty(obj, 'scrollLeft', {

docs/examples/virtual-list.tsx

@@ -33,13 +33,10 @@ const Cell = ({ columnIndex, rowIndex, style }) => (
 );
 
 const Demo = () => {
-  const gridRef = React.useRef<any>();
+  const gridRef = React.useRef<any>(null);
 
   React.useEffect(() => {
-    gridRef.current.resetAfterIndices({
-      columnIndex: 0,
-      shouldForceUpdate: false,
-    });
+    gridRef.current.resetAfterIndices({ columnIndex: 0, shouldForceUpdate: false });
   }, []);
 
   const renderVirtualList = (rawData: object[], { scrollbarSize }: any) => (

docs/examples/virtual.tsx

@@ -189,7 +189,7 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
 }));
 
 const Demo: React.FC = () => {
-  const tableRef = React.useRef<Reference>();
+  const tableRef = React.useRef<Reference>(null);
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
       <button onClick={() => tableRef.current?.scrollTo({ top: 9999999999999 })}>

package.json

@@ -48,25 +48,23 @@
     "now-build": "npm run docs:build",
     "prepare": "husky"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
   "dependencies": {
     "@rc-component/context": "^1.4.0",
+    "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.1.0",
     "classnames": "^2.2.5",
-    "@rc-component/resize-observer": "^1.0.0",
     "rc-virtual-list": "^3.14.2"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.3",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.4.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^19.0.4",
+    "@types/node": "^24.4.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/responselike": "^1.0.0",
     "@types/styled-components": "^5.1.32",
     "@umijs/fabric": "^4.0.1",
@@ -88,10 +86,10 @@
     "rc-dropdown": "~4.0.1",
     "rc-menu": "~9.16.1",
     "rc-tooltip": "^6.2.0",
-    "react": "^16.0.0",
+    "react": "^19.1.1",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "^19.1.1",
     "react-resizable": "^3.0.5",
     "react-virtualized": "^9.12.0",
     "react-window": "^1.8.5",
@@ -100,6 +98,10 @@
     "typescript": "~5.9.2",
     "vitest": "^3.2.4"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,md,json}": [
       "prettier --write"

script/update-content.js

@@ -18,12 +18,12 @@ paths.forEach(path => {
 <code src="../examples/${name}.tsx">
 `,
     'utf8',
-    function(error) {
-      if(error){
+    function (error) {
+      if (error) {
         console.log(error);
         return false;
       }
       console.log(`${name} 更新成功~`);
-    }
-  )
+    },
+  );
 });

src/Body/BodyRow.tsx

@@ -6,6 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes';
 import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent } from '../interface';
 import ExpandedRow from './ExpandedRow';
+import type { ExpandedRowProps } from './ExpandedRow';
 import { computedExpandedClassName } from '../utils/expandUtil';
 import type { TableProps } from '..';
 
@@ -115,9 +116,9 @@ export function getCellProps<RecordType>(
 // ==================================================================================
 // ==                                 getCellProps                                 ==
 // ==================================================================================
-function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
+const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
   props: BodyRowProps<RecordType>,
-) {
+) => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
@@ -224,7 +225,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   );
 
   // ======================== Expand Row =========================
-  let expandRowNode: React.ReactElement;
+  let expandRowNode: React.ReactElement<ExpandedRowProps>;
   if (rowSupportExpand && (expandedRef.current || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
@@ -254,7 +255,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
       {expandRowNode}
     </>
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   BodyRow.displayName = 'BodyRow';

src/Body/ExpandedRow.tsx

@@ -17,7 +17,7 @@ export interface ExpandedRowProps {
   stickyOffset?: number;
 }
 
-function ExpandedRow(props: ExpandedRowProps) {
+const ExpandedRow: React.FC<ExpandedRowProps> = props => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
@@ -59,17 +59,12 @@ function ExpandedRow(props: ExpandedRowProps) {
   }
 
   return (
-    <Component
-      className={className}
-      style={{
-        display: expanded ? null : 'none',
-      }}
-    >
+    <Component className={className} style={{ display: expanded ? null : 'none' }}>
       <Cell component={cellComponent} prefixCls={prefixCls} colSpan={colSpan}>
         {contentNode}
       </Cell>
     </Component>
   );
-}
+};
 
 export default ExpandedRow;

src/Body/MeasureCell.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import ResizeObserver from '@rc-component/resize-observer';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import type { ColumnType } from '../interface';
 
 export interface MeasureCellProps {
   columnKey: React.Key;
   onColumnResize: (key: React.Key, width: number) => void;
-  column?: ColumnType<any>;
+  title?: React.ReactNode;
 }
 
-export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) {
-  const cellRef = React.useRef<HTMLTableCellElement>();
+const MeasureCell: React.FC<MeasureCellProps> = props => {
+  const { columnKey, onColumnResize, title } = props;
+
+  const cellRef = React.useRef<HTMLTableCellElement>(null);
 
   useLayoutEffect(() => {
     if (cellRef.current) {
@@ -24,10 +25,10 @@ export default function MeasureCell({ columnKey, onColumnResize, column }: Measu
         ref={cellRef}
         style={{ paddingTop: 0, paddingBottom: 0, borderTop: 0, borderBottom: 0, height: 0 }}
       >
-        <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}>
-          {column?.title || '\xa0'}
-        </div>
+        <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}>{title || '\xa0'}</div>
       </td>
     </ResizeObserver>
   );
-}
+};
+
+export default MeasureCell;

src/Body/MeasureRow.tsx

@@ -13,13 +13,14 @@ export interface MeasureRowProps {
   columns: readonly ColumnType<any>[];
 }
 
-export default function MeasureRow({
+const MeasureRow: React.FC<MeasureRowProps> = ({
   prefixCls,
   columnsKey,
   onColumnResize,
   columns,
-}: MeasureRowProps) {
+}) => {
   const ref = React.useRef<HTMLTableRowElement>(null);
+
   const { measureRowRender } = useContext(TableContext, ['measureRowRender']);
 
   const measureRow = (
@@ -40,13 +41,15 @@ export default function MeasureRow({
               key={columnKey}
               columnKey={columnKey}
               onColumnResize={onColumnResize}
-              column={column}
+              title={column?.title}
             />
           );
         })}
       </ResizeObserver.Collection>
     </tr>
   );
 
-  return measureRowRender ? measureRowRender(measureRow) : measureRow;
-}
+  return typeof measureRowRender === 'function' ? measureRowRender(measureRow) : measureRow;
+};
+
+export default MeasureRow;

src/Body/index.tsx

@@ -16,7 +16,7 @@ export interface BodyProps<RecordType> {
   measureColumnWidth: boolean;
 }
 
-function Body<RecordType>(props: BodyProps<RecordType>) {
+const Body = <RecordType,>(props: BodyProps<RecordType>) => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
@@ -64,9 +64,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
   const rowKeys = React.useMemo(() => flattenData.map(item => item.rowKey), [flattenData]);
 
   // =================== Performance ====================
-  const perfRef = React.useRef<PerfRecord>({
-    renderWithProps: false,
-  });
+  const perfRef = React.useRef<PerfRecord>({ renderWithProps: false });
 
   // ===================== Expanded =====================
   // `expandedRowOffset` data is same for all the rows.
@@ -137,8 +135,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
   return (
     <PerfContext.Provider value={perfRef.current}>
       <WrapperComponent
-        className={cls(`${prefixCls}-tbody`, bodyCls.wrapper)}
         style={bodyStyles.wrapper}
+        className={cls(`${prefixCls}-tbody`, bodyCls.wrapper)}
       >
         {/* Measure body column width with additional hidden col */}
         {measureColumnWidth && (
@@ -149,12 +147,11 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
             columns={flattenColumns}
           />
         )}
-
         {rows}
       </WrapperComponent>
     </PerfContext.Provider>
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   Body.displayName = 'Body';

src/Cell/index.tsx

@@ -68,14 +68,17 @@ const getTitleFromCellRenderChildren = ({
   if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
     if (typeof children === 'string' || typeof children === 'number') {
       title = children.toString();
-    } else if (React.isValidElement(children) && typeof children.props.children === 'string') {
-      title = children.props.children;
+    } else if (
+      React.isValidElement<any>(children) &&
+      typeof (children.props as any)?.children === 'string'
+    ) {
+      title = (children.props as any)?.children;
     }
   }
   return title;
 };
 
-function Cell<RecordType>(props: CellProps<RecordType>) {
+const Cell = <RecordType,>(props: CellProps<RecordType>) => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
@@ -247,7 +250,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
 
   // The order is important since user can overwrite style.
   // For example ant-design/ant-design#51763
-  const mergedStyle = {
+  const mergedStyle: React.CSSProperties = {
     ...legacyCellProps?.style,
     ...fixedStyle,
     ...alignStyle,
@@ -291,6 +294,6 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       {mergedChildNode}
     </Component>
   );
-}
+};
 
 export default React.memo(Cell) as typeof Cell;