Skip to content

Commit

Permalink
feat: column minWidth (#1125)
Browse files Browse the repository at this point in the history
* feat: column minWidth

* chore: simplify code
  • Loading branch information
linxianxi authored Jun 6, 2024
1 parent 9662833 commit 0078a39
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 4 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
19 changes: 16 additions & 3 deletions src/ColGroup.tsx
Original file line number Diff line number Diff line change
@@ -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)[];
Expand All @@ -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;

Expand All @@ -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;
}
}
Expand Down
7 changes: 6 additions & 1 deletion src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
25 changes: 25 additions & 0 deletions tests/Colgroup.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});

0 comments on commit 0078a39

Please sign in to comment.