Add middle size table, ref #413

components/table/demo/small.md → components/table/demo/size.md

@@ -1,8 +1,8 @@
-# 小型列表
+# 中小型列表
 
 - order: 9
 
-`size="small"`, 用在对话框等空间较小的地方。
+紧凑型的列表, 中型列表用于需要数据紧凑展示的情况，小型列表只用于对话框内。
 
 ---
 
@@ -36,6 +36,8 @@ const data = [{
   address: '西湖区湖底公园1号'
 }];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} size="small" />
-, document.getElementById('components-table-demo-small'));
+ReactDOM.render(<div>
+  <Table columns={columns} dataSource={data} size="middle" />
+  <Table columns={columns} dataSource={data} size="small" />
+</div>, document.getElementById('components-table-demo-size'));
 ````

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;

style/components/table.less

@@ -98,6 +98,12 @@
     }
   }
 
+  &-middle {
+    th, td {
+      padding: 10px 8px;
+    }
+  }
+
   &-small {
     table {
       border: 1px solid #e9e9e9;