Better empty text in fixed columns table

close ant-design/ant-design#7298

close ant-design/ant-design#7142

Author: afc163

assets/index.less

@@ -66,6 +66,13 @@
     border-bottom: 1px solid @table-border-color;
     text-align: center;
     position: relative;
+    &-fixed-columns {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: transparent;
+      pointer-events: none;
+    }
   }
 
   table {
@@ -82,6 +89,10 @@
 
   td {
     border-bottom: 1px solid @table-border-color;
+    &:empty:after {
+      content: '.'; // empty cell placeholder
+      visibility: hidden;
+    }
   }
 
   tr {

examples/fixedColumns.js

@@ -19,25 +19,13 @@ const columns = [
   { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
 ];
 
-const data = [
-  { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
-  { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
-  { a: '133', c: 'edd12221', d: 2, key: '3' },
-  { a: '133', c: 'edd12221', d: 2, key: '4' },
-  { a: '133', c: 'edd12221', d: 2, key: '5' },
-  { a: '133', c: 'edd12221', d: 2, key: '6' },
-  { a: '133', c: 'edd12221', d: 2, key: '7' },
-  { a: '133', c: 'edd12221', d: 2, key: '8' },
-  { a: '133', c: 'edd12221', d: 2, key: '9' },
-];
+const data = [];
 
 ReactDOM.render(
   <div style={{ width: 800 }}>
     <h2>Fixed columns</h2>
     <Table
       columns={columns}
-      expandedRowRender={record => record.title}
-      expandIconAsCell
       scroll={{ x: 1200 }}
       data={data}
     />

examples/fixedColumnsAndHeader.js

@@ -19,17 +19,7 @@ const columns = [
   { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
 ];
 
-const data = [
-  { a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '1' },
-  { a: 'aaa', b: 'bbb', c: '内容内容内容内容内容', d: 3, key: '2' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '3' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '4' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '5' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '6' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '7' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '8' },
-  { a: 'aaa', c: '内容内容内容内容内容', d: 2, key: '9' },
-];
+const data = [];
 
 ReactDOM.render(
   <div>

src/Table.jsx

@@ -294,7 +294,7 @@ export default class Table extends React.Component {
     );
   }
 
-  getRowsByData(data, visible, indent, columns, fixed) {
+  getRowsByData(originalData, visible, indent, columns, fixed) {
     const props = this.props;
     const {
       childrenColumnName,
@@ -315,7 +315,10 @@ export default class Table extends React.Component {
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
-
+    let data = originalData;
+    if (this.columnManager.isAnyColumnsFixed() && data.length === 0) {
+      data = [{ key: 'empty-placeholder-data' }];
+    }
     for (let i = 0; i < data.length; i++) {
       const record = data[i];
       const key = this.getRowKey(record, i);
@@ -571,11 +574,17 @@ export default class Table extends React.Component {
 
   getEmptyText() {
     const { emptyText, prefixCls, data } = this.props;
-    return !data.length ? (
-      <div className={`${prefixCls}-placeholder`} key="emptyText">
+    if (data.length) {
+      return null;
+    }
+    const fixed = this.columnManager.isAnyColumnsFixed();
+    const emptyClassName =
+     `${prefixCls}-placeholder${fixed ? ` ${prefixCls}-placeholder-fixed-columns` : ''}`;
+    return (
+      <div className={emptyClassName} key="emptyText">
         {(typeof emptyText === 'function') ? emptyText() : emptyText}
       </div>
-    ) : null;
+    );
   }
 
   getHeaderRowStyle(columns, rows) {