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,15 +48,11 @@
     "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": {
@@ -65,8 +61,8 @@
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^19.0.4",
+    "@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 +84,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 +96,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"

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 '..';
 
@@ -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);
 

src/Body/ExpandedRow.tsx

@@ -59,12 +59,7 @@ 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>

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

@@ -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.
@@ -149,7 +147,6 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
             columns={flattenColumns}
           />
         )}
-
         {rows}
       </WrapperComponent>
     </PerfContext.Provider>

src/Cell/index.tsx

@@ -68,7 +68,10 @@ 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') {
+    } else if (
+      React.isValidElement<React.PropsWithChildren<any>>(children) &&
+      typeof children.props.children === 'string'
+    ) {
       title = children.props.children;
     }
   }
@@ -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,

src/ColGroup.tsx

@@ -13,7 +13,7 @@ export interface ColGroupProps<RecordType> {
 function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<RecordType>) {
   const { tableLayout } = useContext(TableContext, ['tableLayout']);
 
-  const cols: React.ReactElement[] = [];
+  const cols: React.ReactElement<any>[] = [];
   const len = columCount || columns.length;
 
   // Only insert col with width & additional props

src/FixedHolder/index.tsx

@@ -75,6 +75,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     'isSticky',
     'getComponent',
   ]);
+
   const TableComponent = getComponent(['header', 'table'], 'table');
 
   const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;

src/Footer/Row.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
 export interface FooterRowProps {
-  children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
 }
 
-export default function FooterRow({ children, ...props }: FooterRowProps) {
-  return <tr {...props}>{children}</tr>;
-}
+const FooterRow: React.FC<React.PropsWithChildren<FooterRowProps>> = props => {
+  const { children, ...restProps } = props;
+  return <tr {...restProps}>{children}</tr>;
+};
+
+export default FooterRow;

src/Footer/Summary.tsx

@@ -4,17 +4,16 @@ import Row from './Row';
 
 export interface SummaryProps {
   fixed?: boolean | 'top' | 'bottom';
-  children?: React.ReactNode;
 }
 
 /**
  * Syntactic sugar. Do not support HOC.
  */
-function Summary({ children }: SummaryProps) {
-  return children as React.ReactElement;
-}
+const Summary: React.FC<React.PropsWithChildren<SummaryProps>> = ({ children }) => {
+  return children as React.ReactElement<any>;
+};
 
-Summary.Row = Row;
-Summary.Cell = Cell;
+(Summary as any).Row = Row;
+(Summary as any).Cell = Cell;
 
 export default Summary;