fix #2812 (#2875)

components/table/Table.jsx

@@ -756,8 +756,8 @@ export default class Table extends React.Component {
   }
 
   render() {
-    const { style, className, rowKey, ...restProps } = this.props;
+    const { style, className, ...restProps } = this.props;
-    let data = this.getCurrentPageData();
+    const data = this.getCurrentPageData();
     let columns = this.renderRowSelection();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
     const locale = this.getLocale();
@@ -765,6 +765,7 @@ export default class Table extends React.Component {
     const classString = classNames({
       [`ant-table-${this.props.size}`]: true,
       'ant-table-bordered': this.props.bordered,
+      'ant-table-empty': !data.length,
     });
 
     columns = this.renderColumnsDropdown(columns);
@@ -774,23 +775,6 @@ export default class Table extends React.Component {
       return newColumn;
     });
 
-    // Empty Data
-    let emptyRowKey;
-    if (!data || data.length === 0) {
-      columns.forEach((column, index) => {
-        column.render = () => ({
-          children: !index ? <div className="ant-table-placeholder">{locale.emptyText}</div> : null,
-          props: {
-            colSpan: !index ? columns.length : 0,
-          },
-        });
-      });
-      emptyRowKey = 'key';
-      data = [{
-        [emptyRowKey]: 'empty',
-      }];
-    }
-
     let table = (
       <RcTable {...restProps}
         data={data}
@@ -798,7 +782,7 @@ export default class Table extends React.Component {
         className={classString}
         expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
         expandIconAsCell={expandIconAsCell}
-        rowKey={emptyRowKey || rowKey}
+        emptyText={() => locale.emptyText}
       />
     );
     // if there is no pagination or no data,

components/table/style/index.less

@@ -68,6 +68,7 @@
     padding: 16px 8px;
     background: @table-head-background-color;
     position: relative;
+    z-index: 2;
     top: -1px;
     border-radius: 0 0 @border-radius-base @border-radius-base;
   }
@@ -245,12 +246,19 @@
       .@{table-prefix-cls}-fixed-right {
         border-left: 1px solid @border-color-split;
       }
+      .@{table-prefix-cls}-placeholder {
+        border-bottom: 0;
+      }
     }
 
     .@{table-prefix-cls}-thead > tr > th {
       border-bottom: 1px solid @border-color-split;
     }
 
+    &.@{table-prefix-cls}-empty .@{table-prefix-cls}-thead > tr > th {
+      border-bottom: 0;
+    }
+
     .@{table-prefix-cls}-tbody tr:last-child {
       > th,
       > td {
@@ -268,9 +276,12 @@
   }
 
   &-placeholder {
-    height: 65px;
+    padding: 16px 8px;
-    line-height: 65px;
+    background: #fff;
+    border-bottom: 1px solid @border-color-split;;
     text-align: center;
+    position: relative;
+    z-index: 2;
     font-size: 12px;
     color: #999;
     .anticon {

package.json

@@ -60,7 +60,7 @@
     "rc-slider": "~4.0.0",
     "rc-steps": "~2.1.5",
     "rc-switch": "~1.4.2",
-    "rc-table": "~4.4.0",
+    "rc-table": "~4.6.0",
     "rc-tabs": "~5.9.2",
     "rc-time-picker": "~1.1.6",
     "rc-tooltip": "~3.4.2",