diff --git a/assets/index.less b/assets/index.less index 2fde62b95..173d5f1eb 100644 --- a/assets/index.less +++ b/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 { diff --git a/src/Table.jsx b/src/Table.jsx index a63763f59..1a4feff23 100644 --- a/src/Table.jsx +++ b/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 ? ( -
+ if (data.length) { + return null; + } + const fixed = this.columnManager.isAnyColumnsFixed(); + const emptyClassName = + `${prefixCls}-placeholder${fixed ? ` ${prefixCls}-placeholder-fixed-columns` : ''}`; + return ( +
{(typeof emptyText === 'function') ? emptyText() : emptyText}
- ) : null; + ); } getHeaderRowStyle(columns, rows) {