diff --git a/README.md b/README.md index ad889ead2..5adb71f89 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,7 @@ React.render(, 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 | diff --git a/src/ColGroup.tsx b/src/ColGroup.tsx index 656e33551..a20e58c28 100644 --- a/src/ColGroup.tsx +++ b/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 { colWidths: readonly (number | string)[]; @@ -9,6 +11,8 @@ export interface ColGroupProps { } function ColGroup({ colWidths, columns, columCount }: ColGroupProps) { + const { tableLayout } = useContext(TableContext, ['tableLayout']); + const cols: React.ReactElement[] = []; const len = columCount || columns.length; @@ -18,11 +22,20 @@ function ColGroup({ 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(); + cols.unshift(); mustInsert = true; } } diff --git a/src/interface.ts b/src/interface.ts index 06213c043..051ac57ae 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -70,7 +70,11 @@ export type Direction = 'ltr' | 'rtl'; // SpecialString will be removed in antd@6 export type SpecialString = T | (string & {}); -export type DataIndex = DeepNamePath | SpecialString | number | (SpecialString | number)[]; +export type DataIndex = + | DeepNamePath + | SpecialString + | number + | (SpecialString | number)[]; export type CellEllipsisType = { showTitle?: boolean } | boolean; @@ -109,6 +113,7 @@ export interface ColumnType extends ColumnSharedType { shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean; rowSpan?: number; width?: number | string; + minWidth?: number; onCell?: GetComponentProps; /** @deprecated Please use `onCell` instead */ onCellClick?: (record: RecordType, e: React.MouseEvent) => void; diff --git a/tests/Colgroup.spec.jsx b/tests/Colgroup.spec.jsx index e112721a6..802044da0 100644 --- a/tests/Colgroup.spec.jsx +++ b/tests/Colgroup.spec.jsx @@ -26,4 +26,29 @@ describe('Table.ColGroup', () => { const wrapper = mount(
); expect(String(wrapper.find('colgroup col').key())).toEqual('0'); }); + + it('minWidth should be worked', () => { + const columns = [ + { + key: 0, + minWidth: 100, + }, + ]; + + const wrapper = mount(
); + 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(
); + expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toBeFalsy(); + }); });