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();
+ });
});