diff --git a/components/table/demo/small.md b/components/table/demo/size.md similarity index 59% rename from components/table/demo/small.md rename to components/table/demo/size.md index b89cb6b022..847358f870 100644 --- a/components/table/demo/small.md +++ b/components/table/demo/size.md @@ -1,8 +1,8 @@ -# 小型列表 +# 中小型列表 - order: 9 -`size="small"`, 用在对话框等空间较小的地方。 +紧凑型的列表, 中型列表用于需要数据紧凑展示的情况,小型列表只用于对话框内。 --- @@ -36,6 +36,8 @@ const data = [{ address: '西湖区湖底公园1号' }]; -ReactDOM.render( -, document.getElementById('components-table-demo-small')); +ReactDOM.render(
+
+
+, document.getElementById('components-table-demo-size')); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 2eecc3fe78..4b0da03309 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -8,6 +8,7 @@ import Pagination from '../pagination'; import Icon from '../icon'; import objectAssign from 'object-assign'; import Spin from '../spin'; +import classNames from 'classnames'; function noop() { } @@ -72,7 +73,7 @@ let AntTable = React.createClass({ useFixedHeader: false, rowSelection: null, className: '', - size: 'default', + size: 'large', loading: false, bordered: false, onChange: noop, @@ -461,10 +462,10 @@ let AntTable = React.createClass({ if (!this.hasPagination()) { return null; } - let classString = 'ant-table-pagination'; - if (this.props.size === 'small') { - classString += ' mini'; - } + let classString = classNames({ + 'ant-table-pagination': true, + 'mini': this.props.size === 'middle' || this.props.size === 'small', + }); let total = this.state.pagination.total; if (!total && this.isLocalDataSource()) { total = this.getLocalData().length; @@ -613,14 +614,14 @@ let AntTable = React.createClass({ render() { let data = this.getCurrentPageData(); let columns = this.renderRowSelection(); - let classString = this.props.className; let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; - if (this.props.size === 'small') { - classString += ' ant-table-small'; - } - if (this.props.bordered) { - classString += ' ant-table-bordered'; - } + + let classString = classNames({ + [`ant-table-${this.props.size}`]: true, + 'ant-table-bordered': this.props.bordered, + [this.props.className]: !!this.props.className, + }); + columns = this.renderColumnsDropdown(columns); columns = columns.map((column, i) => { column.key = column.dataIndex || i; diff --git a/style/components/table.less b/style/components/table.less index 2b70639615..e17edd5c1e 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -98,6 +98,12 @@ } } + &-middle { + th, td { + padding: 10px 8px; + } + } + &-small { table { border: 1px solid #e9e9e9;