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;