feat: table support auto index

components/table/InternalTable.tsx

@@ -62,10 +62,10 @@ import type {
   TablePaginationPosition,
   TableRowSelection,
 } from './interface';
-import TableMeasureRowContext from './TableMeasureRowContext';
 import RcTable from './RcTable';
 import RcVirtualTable from './RcTable/VirtualTable';
 import useStyle from './style';
+import TableMeasureRowContext from './TableMeasureRowContext';
 
 export type { ColumnsType, TablePaginationConfig };
 
@@ -317,27 +317,6 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     nativeElement: rootRef.current!,
   }));
 
-  // ============================ RowKey ============================
-  const rowKey = customizeRowKey || table?.rowKey || 'key';
-
-  if (process.env.NODE_ENV !== 'production') {
-    warning(
-      !(typeof rowKey === 'function' && rowKey.length > 1),
-      'usage',
-      '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
-    );
-  }
-
-  const getRowKey = React.useMemo<GetRowKey<RecordType>>(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-
-    return (record: RecordType) => record?.[rowKey as string];
-  }, [rowKey]);
-
-  const [getRecordByKey] = useLazyKVMap(rawData, childrenColumnName, getRowKey);
-
   // ============================ Events =============================
   const changeEventInfo: Partial<ChangeEventInfo<RecordType>> = {};
 
@@ -507,6 +486,35 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     mergedPagination?.total,
   ]);
 
+  // ============================ RowKey ============================
+  const rowKey = customizeRowKey || table?.rowKey || 'key';
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !(typeof rowKey === 'function' && rowKey.length > 1),
+      'usage',
+      '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
+    );
+  }
+
+  const getRowKey = React.useMemo<GetRowKey<RecordType>>(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+
+    return (record, index) => {
+      if (typeof customizeRowKey === 'undefined') {
+        if (mergedPagination) {
+          return `${mergedPagination.current}-${index}`;
+        }
+        return index;
+      }
+      return record?.[rowKey as string];
+    };
+  }, [rowKey, mergedPagination.current]);
+
+  const [getRecordByKey] = useLazyKVMap(rawData, childrenColumnName, getRowKey);
+
   // ========================== Selections ==========================
   const [transformSelectionColumns, selectedKeySet] = useSelection<RecordType>(
     {

components/table/demo/row-selection-custom.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { Table } from 'antd';
+import { Input, Table } from 'antd';
 import type { TableColumnsType, TableProps } from 'antd';
 
 type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
 
 interface DataType {
-  key: React.Key;
+  key?: React.Key;
   name: string;
   age: number;
   address: string;
@@ -15,6 +15,11 @@ const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
+    render: () => (
+      <>
+        <Input />
+      </>
+    ),
   },
   {
     title: 'Age',
@@ -27,7 +32,7 @@ const columns: TableColumnsType<DataType> = [
 ];
 
 const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
-  key: i,
+  // key: i,
   name: `Edward King ${i}`,
   age: 32,
   address: `London, Park Lane no. ${i}`,
@@ -42,6 +47,7 @@ const App: React.FC = () => {
   };
 
   const rowSelection: TableRowSelection<DataType> = {
+    preserveSelectedRowKeys: true,
     selectedRowKeys,
     onChange: onSelectChange,
     selections: [
@@ -79,7 +85,12 @@ const App: React.FC = () => {
     ],
   };
 
-  return <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />;
+  return (
+    <div>
+      {JSON.stringify(selectedRowKeys)}
+      <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
+    </div>
+  );
 };
 
 export default App;