feat: remove columnResizable

Author: linxianxi

README.md

@@ -118,7 +118,6 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
 | summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
 | rowHoverable | boolean | true | Table hover interaction |
-| columnResizable | boolean | false | Column resizable |
 
 ## Column Props
 

docs/examples/column-resize.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Table from 'rc-table';
+import type { ColumnType } from 'rc-table';
 import '../../assets/index.less';
 
 const data = [
@@ -22,8 +23,9 @@ const Demo = () => {
     { title: 'title2', dataIndex: 'bbb', key: 'bbb', width: 100 },
   ].map(i => ({
     ...i,
+    resizable: true,
     width: widthMap.get(i.key ?? i.dataIndex) ?? i.width,
-  }));
+  })) as ColumnType<any>[];
 
   const columns2 = [
     { title: 'title1', dataIndex: 'a', key: 'a', fixed: 'left' },
@@ -40,16 +42,16 @@ const Demo = () => {
     { title: 'title12', dataIndex: 'b', key: 'l', fixed: 'right' },
   ].map(i => ({
     ...i,
+    resizable: true,
     width: widthMap.get(i.key ?? i.dataIndex) ?? 150,
-  }));
+  })) as ColumnType<any>[];
 
   return (
     <div>
       table width: 800px {'columns=[{width: 100, width: 100}]'} 情况
       <Table
-        columnResizable
         style={{ width: 800 }}
-        scroll={{ y: 300, x: columns1.reduce((t, c) => t + c.width, 0) }}
+        scroll={{ y: 300, x: columns1.reduce((t, c) => t + (c.width as number), 0) }}
         columns={columns1}
         data={data}
         onColumnResizeComplete={({ columnKeyWidths }) => {
@@ -65,9 +67,8 @@ const Demo = () => {
       <br />
       大多数情况
       <Table
-        columnResizable
         style={{ width: 800 }}
-        scroll={{ y: 300, x: columns2.reduce((t, c) => t + c.width, 0) }}
+        scroll={{ y: 300, x: columns2.reduce((t, c) => t + (c.width as number), 0) }}
         columns={columns2}
         data={data}
         onColumnResizeComplete={({ columnKeyWidths }) => {

docs/examples/virtual.tsx

@@ -188,6 +188,24 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
   // ],
 }));
 
+const Row = React.forwardRef((props, ref) => {
+  console.log('render Row');
+  return (
+    <div
+      {...props}
+      ref={r => {
+        if (r) {
+          if (typeof ref === 'function') {
+            ref(r);
+          } else {
+            // ref.current = r;
+          }
+        }
+      }}
+    />
+  );
+});
+
 const Demo = () => {
   const tblRef = React.useRef<Reference>();
 
@@ -218,6 +236,11 @@ const Demo = () => {
         // expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1300, y: 200 }}
         data={data}
+        components={{
+          body: {
+            row: Row,
+          },
+        }}
         // data={[]}
         rowKey="indexKey"
         expandable={{

src/Cell/useCellResize.tsx

@@ -10,7 +10,6 @@ export default function useCelResize(
   resizable?: boolean | { minWidth?: number },
 ) {
   const {
-    columnResizable,
     colsWidths,
     colsKeys,
     colWidths,
@@ -19,7 +18,6 @@ export default function useCelResize(
     onColumnResizeComplete,
     onResizingChange,
   } = useContext(TableContext, [
-    'columnResizable',
     'colWidths',
     'colsKeys',
     'colsWidths',
@@ -109,7 +107,7 @@ export default function useCelResize(
     setIsResizing(true);
   };
 
-  const resizeHandle = columnResizable && resizable !== false && (
+  const resizeHandle = resizable && (
     <>
       <div
         className={`${cellPrefixCls}-resize-handle`}

src/Table.tsx

@@ -94,7 +94,6 @@ export interface TableProps<RecordType = any>
   columns?: ColumnsType<RecordType>;
   rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
   tableLayout?: TableLayout;
-  columnResizable?: boolean;
 
   // Fixed Columns
   scroll?: { x?: number | true | string; y?: number | string };
@@ -200,7 +199,6 @@ function Table<RecordType extends DefaultRecordType>(
     scroll,
     tableLayout,
     direction,
-    columnResizable,
 
     // Additional Part
     title,
@@ -855,7 +853,6 @@ function Table<RecordType extends DefaultRecordType>(
       colsWidths,
       colsKeys,
       colWidths,
-      columnResizable,
       onColumnResizeComplete,
       onResizingChange: setIsResizing,
     }),
@@ -895,7 +892,6 @@ function Table<RecordType extends DefaultRecordType>(
       columns,
       flattenColumns,
       onColumnWidthChange,
-      columnResizable,
       colsWidths,
       colsKeys,
       colWidths,

src/context/TableContext.tsx

@@ -69,7 +69,6 @@ export interface TableContextProps<RecordType = any> {
 
   rowHoverable?: boolean;
   fullTableRef: React.MutableRefObject<HTMLDivElement>;
-  columnResizable?: boolean;
   colsWidths: Map<React.Key, number>;
   colWidths: number[];
   colsKeys: React.Key[];

tests/Resizable.spec.jsx

@@ -35,13 +35,12 @@ describe('Table.resizable', () => {
       const [widthMap, setWidthMap] = React.useState(new Map());
 
       const columns = [
-        { key: 'a', dataIndex: 'a', width: 400 },
-        { key: 'b', dataIndex: 'b', width: 400 },
+        { key: 'a', dataIndex: 'a', width: 400, resizable: true },
+        { key: 'b', dataIndex: 'b', width: 400, resizable: true },
       ].map(col => ({ ...col, width: widthMap.get(col.key ?? col.dataIndex) || col.width }));
 
       return (
         <Table
-          columnResizable
           data={[{ a: '123', b: '123', key: '1' }]}
           columns={columns}
           scroll={{ x: columns.reduce((t, c) => t + c.width, 0) }}
@@ -117,13 +116,12 @@ describe('Table.resizable', () => {
       const [widthMap, setWidthMap] = React.useState(new Map());
 
       const columns = [
-        { key: 'a', dataIndex: 'a', width: 100 },
-        { key: 'b', dataIndex: 'b', width: 100 },
+        { key: 'a', dataIndex: 'a', width: 100, resizable: true },
+        { key: 'b', dataIndex: 'b', width: 100, resizable: true },
       ].map(col => ({ ...col, width: widthMap.get(col.key ?? col.dataIndex) || col.width || 100 }));
 
       return (
         <Table
-          columnResizable
           style={{ width: 800 }}
           data={[{ a: '123', b: 'xxxxxxxx', key: '1' }]}
           columns={columns}
@@ -203,12 +201,11 @@ describe('Table.resizable', () => {
 
       const columns = [
         { key: 'a', dataIndex: 'a', width: 800, resizable: { minWidth: 400 } },
-        { key: 'b', dataIndex: 'b', width: 800 },
+        { key: 'b', dataIndex: 'b', width: 800, resizable: true },
       ].map(col => ({ ...col, width: widthMap.get(col.key ?? col.dataIndex) || col.width }));
 
       return (
         <Table
-          columnResizable
           data={[{ a: '123', b: '123', key: '1' }]}
           columns={columns}
           scroll={{ x: columns.reduce((t, c) => t + c.width, 0) }}