[Table] fix column width resizable on table columns reduced (#2325)

* fix(table): resizable in custom col

* test(table): update snapshots

* chore: update snapshot

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/hooks/usePrevious.ts

@@ -6,7 +6,7 @@ export default function usePrevious<T>(state: T): T | undefined {
 
   useEffect(() => {
     ref.current = state;
-  });
+  }, [state]);
 
   return ref.current;
 }

src/table/BaseTable.tsx

@@ -96,7 +96,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((props, ref) => {
     updateTableAfterColumnResize,
     onColumnResizeChange: props.onColumnResizeChange,
   });
-  const { resizeLineRef, resizeLineStyle, setEffectColMap } = columnResizeParams;
+  const { resizeLineRef, resizeLineStyle, setEffectColMap, updateTableWidthOnColumnChange } = columnResizeParams;
 
   const dynamicBaseTableClasses = classNames(
     tableClasses.concat({
@@ -205,6 +205,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((props, ref) => {
     refreshTable,
     scrollToElement: virtualConfig.scrollToElement,
     scrollColumnIntoView,
+    updateTableWidthOnColumnChange,
   }));
 
   // used for top margin

src/table/PrimaryTable.tsx

@@ -19,6 +19,7 @@ import EditableCell, { EditableCellProps } from './EditableCell';
 import { StyledProps } from '../common';
 import { useEditableRow } from './hooks/useEditableRow';
 import { primaryTableDefaultProps } from './defaultProps';
+import { CheckboxGroupValue } from '../checkbox';
 
 export { BASE_TABLE_ALL_EVENTS } from './BaseTable';
 
@@ -30,7 +31,7 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((props, ref
   const { classPrefix, tableDraggableClasses, tableBaseClass, tableSelectedClasses, tableSortClasses } = useClassName();
   const { sizeClassNames } = useStyle(props);
   // 自定义列配置功能
-  const { tDisplayColumns, renderColumnController } = useColumnController(props);
+  const { tDisplayColumns, renderColumnController } = useColumnController(props, { onColumnReduce });
   // 展开/收起行功能
   const { showExpandedRow, showExpandIconColumn, getExpandColumn, renderExpandedRow, onInnerExpandRowClick } =
     useRowExpand(props);
@@ -91,6 +92,12 @@ const PrimaryTable = forwardRef<PrimaryTableRef, TPrimaryTableProps>((props, ref
     ...primaryTableRef.current,
   }));
 
+  function onColumnReduce(reduceKeys: CheckboxGroupValue) {
+    if (props.resizable) {
+      primaryTableRef.current.updateTableWidthOnColumnChange(reduceKeys);
+    }
+  }
+
   // 1. 影响列数量的因素有：自定义列配置、展开/收起行、多级表头；2. 影响表头内容的因素有：排序图标、筛选图标
   const getColumns = (columns: PrimaryTableCol<TableRowData>[]) => {
     const arr: PrimaryTableCol<TableRowData>[] = [];

src/table/_example/custom-col.jsx

@@ -60,8 +60,9 @@ export default function TableCustomCol() {
     console.log(params);
   };
 
+  // Do not use `resizable` and `tableLayout=auto` at the same time !
   return (
-    <Space direction="vertical" size="large">
+    <Space direction="vertical" size="large" style={{ maxWidth: '100%' }}>
       <Button onClick={() => setColumnControllerVisible(true)}>显示列配置弹窗</Button>
       <Table
         displayColumns={displayColumns}
@@ -77,8 +78,8 @@ export default function TableCustomCol() {
           hideTriggerButton: true,
         }}
         pagination={{ defaultPageSize: 5, defaultCurrent: 1, total: 100 }}
-        tableLayout="auto"
         stripe
+        resizable
         onColumnChange={onColumnChange}
       ></Table>
     </Space>

src/table/hooks/useColumnController.tsx

@@ -4,6 +4,7 @@
 import React, { useEffect, ChangeEvent, useRef } from 'react';
 import { SettingIcon as TdSettingIcon } from 'tdesign-icons-react';
 import intersection from 'lodash/intersection';
+import xorWith from 'lodash/xorWith';
 import classNames from 'classnames';
 import Checkbox, { CheckboxGroupValue, CheckboxOptionObj, CheckboxGroupChangeContext } from '../../checkbox';
 import { DialogPlugin } from '../../dialog/plugin';
@@ -29,10 +30,15 @@ export function getColumnKeys(columns: PrimaryTableCol[], keys = new Set<string>
   return keys;
 }
 
-export default function useColumnController(props: TdPrimaryTableProps) {
+export default function useColumnController(
+  props: TdPrimaryTableProps,
+  extra?: {
+    onColumnReduce?: (reduceKeys: CheckboxGroupValue) => void;
+  },
+) {
   const { classPrefix, table } = useConfig();
   const { SettingIcon } = useGlobalIcon({ SettingIcon: TdSettingIcon });
-  const { columns, columnController, displayColumns, columnControllerVisible } = props;
+  const { columns, columnController, displayColumns = [], columnControllerVisible } = props;
   const dialogInstance = useRef<DialogInstance>();
 
   const enabledColKeys = (() => {
@@ -144,6 +150,10 @@ export default function useColumnController(props: TdPrimaryTableProps) {
       cancelBtn: table.cancelText,
       width: 612,
       onConfirm: () => {
+        if (columnCheckboxKeys.current.length < displayColumns.length) {
+          const reduceKeys = xorWith(displayColumns, columnCheckboxKeys.current);
+          extra?.onColumnReduce?.(reduceKeys);
+        }
         setTDisplayColumns([...columnCheckboxKeys.current]);
         // 此处逻辑不要随意改动，涉及到 内置列配置按钮 和 不包含列配置按钮等场景
         if (columnControllerVisible === undefined) {

src/table/hooks/useColumnResize.tsx

@@ -311,11 +311,26 @@ export default function useColumnResize(params: {
     document.ondragstart = () => false;
   };
 
+  /**
+   * 对外暴露函数：更新列数量减少时的表格宽度
+   * @params colKeys 减少的列
+   */
+  const updateTableWidthOnColumnChange = (colKeys: string[]) => {
+    const thWidthList = getThWidthList('calculate');
+    let reduceWidth = 0;
+    colKeys.forEach((key) => {
+      reduceWidth += thWidthList[key] || 0;
+    });
+    const oldTotalWidth = Object.values(thWidthList).reduce((r = 0, n) => r + n);
+    setTableElmWidth(oldTotalWidth - reduceWidth);
+  };
+
   return {
     resizeLineRef,
     resizeLineStyle,
     onColumnMouseover,
     onColumnMousedown,
     setEffectColMap,
+    updateTableWidthOnColumnChange,
   };
 }

test/snap/__snapshots__/csr.test.jsx.snap

@@ -194646,7 +194646,7 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
     <div>
       <div
         class="t-space t-space-vertical"
-        style="gap: 24px;"
+        style="gap: 24px; max-width: 100%;"
       >
         <div
           class="t-space-item"
@@ -194666,14 +194666,14 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
           class="t-space-item"
         >
           <div
-            class="t-table t-table--striped"
+            class="t-table t-table--striped t-table--column-resizable"
             style="position: relative;"
           >
             <div
               class="t-table__content"
             >
               <table
-                class="t-table--layout-auto"
+                class="t-table--layout-fixed"
               >
                 <colgroup>
                   <col
@@ -194685,8 +194685,12 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
                   <col
                     style="width: 120px;"
                   />
-                  <col />
-                  <col />
+                  <col
+                    style="min-width: 80px;"
+                  />
+                  <col
+                    style="min-width: 80px;"
+                  />
                 </colgroup>
                 <thead
                   class="t-table__header"
@@ -195194,7 +195198,7 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
   "container": <div>
     <div
       class="t-space t-space-vertical"
-      style="gap: 24px;"
+      style="gap: 24px; max-width: 100%;"
     >
       <div
         class="t-space-item"
@@ -195214,14 +195218,14 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
         class="t-space-item"
       >
         <div
-          class="t-table t-table--striped"
+          class="t-table t-table--striped t-table--column-resizable"
           style="position: relative;"
         >
           <div
             class="t-table__content"
           >
             <table
-              class="t-table--layout-auto"
+              class="t-table--layout-fixed"
             >
               <colgroup>
                 <col
@@ -195233,8 +195237,12 @@ exports[`csr snapshot test > csr test src/table/_example/custom-col.jsx 1`] = `
                 <col
                   style="width: 120px;"
                 />
-                <col />
-                <col />
+                <col
+                  style="min-width: 80px;"
+                />
+                <col
+                  style="min-width: 80px;"
+                />
               </colgroup>
               <thead
                 class="t-table__header"