Add Table tableLayout prop

ant-design · Sep 3, 2019 · ad4247c · ad4247c
1 parent 18e57e9
commit ad4247c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
@@ -122,6 +122,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     showHeader: true,
     sortDirections: ['ascend', 'descend'],
     childrenColumnName: 'children',
+    tableLayout: 'auto',
   };
 
   CheckboxPropsCache: {
@@ -866,6 +867,26 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return getColumnKey(sortColumn) === getColumnKey(column);
   }
 
+  isTableLayoutFixed() {
+    const { tableLayout, columns = [], rowSelection, useFixedHeader, scroll = {} } = this.props;
+    if (tableLayout === 'fixed') {
+      return true;
+    }
+    // if one column fixed, use fixed table layout to fix align issue
+    if (columns.some(({ fixed }) => !!fixed)) {
+      return true;
+    }
+    // if selection column fixed, use fixed table layout to fix align issue
+    if (rowSelection && rowSelection.fixed) {
+      return true;
+    }
+    // if header fixed, use fixed table layout to fix align issue
+    if (useFixedHeader || scroll.y) {
+      return true;
+    }
+    return false;
+  }
+
   // Get pagination, filters, sorter
   prepareParamsArguments(state: any): PrepareParamsArgumentsReturn<T> {
     const pagination = { ...state.pagination };
@@ -1217,7 +1238,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
   }) => {
     const { showHeader, locale, getPopupContainer, ...restTableProps } = this.props;
     // do not pass prop.style to rc-table, since already apply it to container div
-    const restProps = omit(restTableProps, ['style']);
+    const restProps = omit(restTableProps, ['style', 'tableLayout']);
     const data = this.getCurrentPageData();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
 
@@ -1230,11 +1251,11 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       mergedLocale.emptyText = renderEmpty('Table');
     }
 
-    const classString = classNames({
-      [`${prefixCls}-${this.props.size}`]: true,
+    const classString = classNames(`${prefixCls}-${this.props.size}`, {
       [`${prefixCls}-bordered`]: this.props.bordered,
       [`${prefixCls}-empty`]: !data.length,
       [`${prefixCls}-without-column-header`]: !showHeader,
+      [`${prefixCls}-layout-fixed`]: this.isTableLayoutFixed(),
     });
 
     const columnsWithRowSelection = this.renderRowSelection({

diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
@@ -59,6 +59,7 @@ const columns = [
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| tableLayout | [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) attribute of table element  | 'auto' \| 'fixed' | 'auto', `fixed` when header or columns are fixed` | 3.24.0 |
 | bordered | Whether to show all table borders | boolean | `false` |  |
 | childrenColumnName | The column contains children to display | string\[] | children | 3.4.2 |
 | columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - |  |

diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
@@ -64,6 +64,7 @@ const columns = [
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性 | 'auto' \| 'fixed' | 'auto'，当固定头或固定列时默认值为 `fixed` | 3.24.0 |
 | bordered | 是否展示外边框和列边框 | boolean | false |  |
 | childrenColumnName | 指定树形结构的列名 | string\[] | children | 3.4.2 |
 | columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - |  |

diff --git a/components/table/interface.tsx b/components/table/interface.tsx
@@ -190,6 +190,7 @@ export interface TableProps<T> {
   bodyStyle?: React.CSSProperties;
   className?: string;
   style?: React.CSSProperties;
+  tableLayout?: React.CSSProperties['tableLayout'];
   children?: React.ReactNode;
   sortDirections?: SortOrder[];
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;

diff --git a/components/table/style/index.less b/components/table/style/index.less
@@ -37,6 +37,10 @@
     border-spacing: 0;
   }
 
+  &-layout-fixed table {
+    table-layout: fixed;
+  }
+
   &-thead > tr > th {
     color: @table-header-color;
     font-weight: 500;