feat: column minWidth (#1125)

* feat: column minWidth

* chore: simplify code

Author: linxianxi

README.md

@@ -129,6 +129,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | title | React Node |  | title of this column |
 | dataIndex | String |  | display field of the data record |
 | width | String \| Number |  | width of the specific proportion calculation according to the width of the columns |
+| minWidth | Number |  | the minimum width of the column, only worked when tableLayout is auto |
 | fixed | String \| Boolean |  | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
 | align | String |  | specify how cell content is aligned |
 | ellipsis | Boolean |  | specify whether cell content be ellipsized |

src/ColGroup.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { ColumnType } from './interface';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
+import { useContext } from '@rc-component/context';
+import TableContext from './context/TableContext';
 
 export interface ColGroupProps<RecordType> {
   colWidths: readonly (number | string)[];
@@ -9,6 +11,8 @@ export interface ColGroupProps<RecordType> {
 }
 
 function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<RecordType>) {
+  const { tableLayout } = useContext(TableContext, ['tableLayout']);
+
   const cols: React.ReactElement[] = [];
   const len = columCount || columns.length;
 
@@ -18,11 +22,20 @@ function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<
   for (let i = len - 1; i >= 0; i -= 1) {
     const width = colWidths[i];
     const column = columns && columns[i];
-    const additionalProps = column && column[INTERNAL_COL_DEFINE];
+    let additionalProps;
+    let minWidth: number;
+    if (column) {
+      additionalProps = column[INTERNAL_COL_DEFINE];
+
+      // fixed will cause layout problems
+      if (tableLayout === 'auto') {
+        minWidth = column.minWidth;
+      }
+    }
 
-    if (width || additionalProps || mustInsert) {
+    if (width || minWidth || additionalProps || mustInsert) {
       const { columnType, ...restAdditionalProps } = additionalProps || {};
-      cols.unshift(<col key={i} style={{ width }} {...restAdditionalProps} />);
+      cols.unshift(<col key={i} style={{ width, minWidth }} {...restAdditionalProps} />);
       mustInsert = true;
     }
   }

src/interface.ts

@@ -70,7 +70,11 @@ export type Direction = 'ltr' | 'rtl';
 // SpecialString will be removed in antd@6
 export type SpecialString<T> = T | (string & {});
 
-export type DataIndex<T = any> = DeepNamePath<T> | SpecialString<T> | number | (SpecialString<T> | number)[];
+export type DataIndex<T = any> =
+  | DeepNamePath<T>
+  | SpecialString<T>
+  | number
+  | (SpecialString<T> | number)[];
 
 export type CellEllipsisType = { showTitle?: boolean } | boolean;
 
@@ -109,6 +113,7 @@ export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
   shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
   rowSpan?: number;
   width?: number | string;
+  minWidth?: number;
   onCell?: GetComponentProps<RecordType>;
   /** @deprecated Please use `onCell` instead */
   onCellClick?: (record: RecordType, e: React.MouseEvent<HTMLElement>) => void;

tests/Colgroup.spec.jsx

@@ -26,4 +26,29 @@ describe('Table.ColGroup', () => {
     const wrapper = mount(<Table columns={columns} />);
     expect(String(wrapper.find('colgroup col').key())).toEqual('0');
   });
+
+  it('minWidth should be worked', () => {
+    const columns = [
+      {
+        key: 0,
+        minWidth: 100,
+      },
+    ];
+
+    const wrapper = mount(<Table columns={columns} />);
+    expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toEqual(100);
+  });
+
+  it('should not have minWidth when tableLayout is fixed', () => {
+    const columns = [
+      {
+        key: 0,
+        width: 100,
+        minWidth: 100,
+      },
+    ];
+
+    const wrapper = mount(<Table columns={columns} tableLayout="fixed" />);
+    expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toBeFalsy();
+  });
 });