Merge branch 'master' of github.com:ant-design/ant-design

components/table/demo/ajax.md

+# 动态加载数据
+
+- order: 7
+
+远程读取的表格是**更为常见的模式**，下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配，并具有筛选、排序等功能以及页面 loading 效果。
+
+此示例是静态数据模拟，数据可能不准确，请打开网络面板查看请求。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }]
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  sorter: true
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+function resolve(result) {
+  return result.data;
+}
+
+var dataSource = {
+  url: "/components/table/demo/data.json",
+  resolve: function(result) {
+    return result.data;
+  },
+  // 和后台接口返回的分页数据进行适配
+  getPagination: function(result) {
+    return {
+      total: result.totalCount,
+      pageSize: result.pageSize
+    }
+  },
+  // 和后台接口接收的参数进行适配
+  // 参数里提供了分页、筛选、排序的信息
+  getParams: function(pagination, filters, sorters) {
+    console.log(pagination, filters, sorters);
+    var params = {
+      pageSize: pagination.pageSize,
+      currentPage: pagination.current,
+      sort: sorters
+    };
+    for (let key in filters) {
+      params[key] = filters[key];
+    }
+    console.log(params);
+    return params;
+  }
+};
+
+React.render(<Table columns={columns} dataSource={dataSource} />
+, document.getElementById('components-table-demo-ajax'));
+````

components/table/demo/basic.md

+# 基本用法
+
+- order: 0
+
+简单的表格，最后一列是各种操作。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}, {
+  title: '操作',
+  dataIndex: '',
+  render: function(text, record) {
+    return <span>
+      <a href="#">删除</a>
+      <span className="ant-divider">|</span>
+      <a href="#">操作</a>
+      <span className="ant-divider">|</span>
+      <a href="#" className="ant-dropdown-link">
+        更多 <i className="anticon anticon-down"></i>
+      </a>
+    </span>;
+  }
+}];
+var data = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+React.render(<Table columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-basic'));
+````

components/table/demo/data.json

+{
+  "data": [{
+    "name": "胡彦斌ajax1",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "胡彦祖ajax2",
+    "age": 42,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax3",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax4",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax5",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax6",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax7",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax8",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax9",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }, {
+    "name": "李大嘴ajax10",
+    "age": 32,
+    "address": "西湖区湖底公园1号"
+  }],
+  "totalCount": 35,
+  "pageSize": 10,
+  "currentPage": 1
+}

components/table/demo/head.md

+# 筛选和排序
+
+- order: 3
+
+对某一列数据进行筛选，使用列的 `filter` 属性来指定筛选的列表。
+
+对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  filters: [{
+    text: '姓李的',
+    value: '李'
+  }, {
+    text: '姓胡的',
+    value: '胡'
+  }],
+  // 指定确定筛选的条件函数
+  // 这里是名字中第一个字是 value
+  onFilter: function(value, record) {
+    return record.name.indexOf(value) === 0;
+  }
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  sorter: function(a, b) {
+    return a.age - b.age;
+  }
+}, {
+  title: '地址',
+  dataIndex: 'address',
+  sorter: function(a, b) {
+    return a.address.length - b.address.length;
+  }
+}];
+
+var data = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园12号'
+}, {
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园123号'
+}];
+
+React.render(<Table columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-head'));
+````

components/table/demo/paging.md

+# 分页
+
+- order: 2
+
+数据项较多时显示分页。
+
+---
+
+````jsx
+var Table = antd.Table;
+
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}];
+var data = [];
+
+for (let i=0; i<18; i++) {
+  data.push({
+    name: '李大嘴' + i,
+    age: 32,
+    address: '西湖区湖底公园' + i + '号'
+  });
+}
+
+var pagination = {
+  total: data.length
+};
+
+React.render(<Table columns={columns} dataSource={data} pagination={pagination} />
+, document.getElementById('components-table-demo-paging'));
+````

components/table/demo/row-selection.md

+# 选择
+
+- order: 1
+
+第一列是联动的选择框。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  render: function(text) {
+    return <a href="#">{text}</a>;
+  }
+}];
+var data = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+// 通过 rowSelection 对象表明需要行选择
+var rowSelection = {
+  onSelect: function(record, selected) {
+    console.log(record, selected);
+  },
+  onSelectAll: function(selected) {
+    console.log(selected);
+  }
+};
+
+React.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+, document.getElementById('components-table-demo-row-selection'));
+````

components/table/demo/small.md

+# 小型列表
+
+- order: 10
+
+`size="small"`, 用在对话框等空间较小的地方。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+var data = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '李大嘴',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}];
+
+React.render(<Table columns={columns} dataSource={data} size="small" />
+, document.getElementById('components-table-demo-small'));
+````

components/table/index.jsx

+'use strict';
+
+import React from 'react';
+import jQuery from 'jquery';
+import Table from 'rc-table';
+import Menu from 'rc-menu';
+import Dropdown from '../dropdown';
+import Pagination from '../pagination';
+import objectAssign from 'object-assign';
+
+let AntTable = React.createClass({
+  getInitialState() {
+    // 支持两种模式
+    if (Array.isArray(this.props.dataSource)) {
+      this.mode = 'local';
+      // 保留原来的数据
+      this.originDataSource = this.props.dataSource.slice(0);
+    } else {
+      this.mode = 'remote';
+      this.props.dataSource = objectAssign({
+        resolve: function(data) {
+          return data || [];
+        },
+        getParams: function() {},
+        getPagination: function() {}
+      }, this.props.dataSource);
+    }
+    var pagination;
+    if (this.props.pagination === false) {
+      pagination = false;
+    } else {
+      pagination = objectAssign({
+        pageSize: 10,
+        total: this.props.dataSource.length
+      }, this.props.pagination);
+    }
+    return {
+      selectedRowKeys: [],
+      loading: false,
+      pagination: pagination,
+      data: []
+    };
+  },
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-table',
+      useFixedHeader: false,
+      rowSelection: null,
+      size: 'normal'
+    };
+  },
+  renderMenus(items) {
+    let menuItems = items.map((item) => {
+      return <Menu.Item key={item.value}>{item.text}</Menu.Item>;
+    });
+    return menuItems;
+  },
+  toggleSortOrder(order, column) {
+    if (column.sortOrder === order) {
+      column.sortOrder = '';
+    } else {
+      column.sortOrder = order;
+    }
+    if (this.mode === 'local') {
+      let sorter = function() {
+        let result = column.sorter.apply(this, arguments);
+        if (column.sortOrder === 'ascend') {
+          return result;
+        } else if (column.sortOrder === 'descend') {
+          return -result;
+        }
+      };
+      if (column.sortOrder) {
+        this.props.dataSource = this.props.dataSource.sort(sorter);
+      } else {
+        this.props.dataSource = this.originDataSource.slice();
+      }
+    }
+    this.fetch();
+  },
+  handleFilter(column) {
+    if (this.mode === 'local') {
+      this.props.dataSource = this.originDataSource.slice().filter(function(record) {
+        if (column.selectedFilters.length === 0) {
+          return true;
+        }
+        return column.selectedFilters.some(function(value) {
+          return column.onFilter.call(this, value, record);
+        });
+      });
+    }
+    this.fetch();
+  },
+  handleSelectFilter(column, selected) {
+    column.selectedFilters.push(selected);
+  },
+  handleDeselectFilter(column, key) {
+    var index = column.selectedFilters.indexOf(key);
+    if (index !== -1) {
+      column.selectedFilters.splice(index, 1);
+    }
+  },
+  handleClearFilters(column) {
+    column.selectedFilters = [];
+    this.fetch();
+  },
+  handleSelect(e) {
+    let checked = e.currentTarget.checked;
+    let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
+    let selectedRow = this.state.data[currentRowIndex - 1];
+    if (checked) {
+      this.state.selectedRowKeys.push(currentRowIndex);
+    } else {
+      this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i){
+        return currentRowIndex !== i;
+      });
+    }
+    this.setState({
+      selectedRowKeys: this.state.selectedRowKeys
+    });
+    if (this.props.rowSelection.onSelect) {
+      this.props.rowSelection.onSelect(selectedRow, checked);
+    }
+  },
+  handleSelectAllRow(e) {
+    let checked = e.currentTarget.checked;
+    this.setState({
+      selectedRowKeys: checked ? this.state.data.map(function(item, i) {
+        return i + 1;
+      }) : []
+    });
+    if (this.props.rowSelection.onSelectAll) {
+      this.props.rowSelection.onSelectAll(checked);
+    }
+  },
+  handlePageChange: function(current) {
+    this.state.pagination.current = current || 1;
+    this.fetch();
+  },
+  renderSelectionCheckBox(value, record, index) {
+    let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
+    let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
+    return checkbox;
+  },
+  renderRowSelection() {
+    var columns = this.props.columns;
+    if (this.props.rowSelection) {
+      let checked = this.state.data.every(function(item, i) {
+        return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
+      }, this);
+      let checkboxAll = <input type="checkbox" checked={checked} onChange={this.handleSelectAllRow} />;
+      let selectionColumn = {
+        key: 'selection-column',
+        title: checkboxAll,
+        width: 60,
+        render: this.renderSelectionCheckBox
+      };
+      if (columns[0] &&
+          columns[0].key === 'selection-column') {
+        columns[0] = selectionColumn;
+      } else {
+        columns.unshift(selectionColumn);
+      }
+    }
+    return columns;
+  },
+  renderColumnsDropdown() {
+    return this.props.columns.map((column) => {
+      if (!column.originTitle) {
+        column.originTitle = column.title;
+      }
+      let filterDropdown, menus, sortButton;
+      if (column.filters && column.filters.length > 0) {
+        column.selectedFilters = column.selectedFilters || [];
+        menus = <Menu multiple={true}
+          className="ant-table-filter-dropdown"
+          onSelect={this.handleSelectFilter.bind(this, column)}
+          onDeselect={this.handleDeselectFilter.bind(this, column)}
+          selectedKeys={column.selectedFilters}>
+          {this.renderMenus(column.filters)}
+          <Menu.Divider />
+          <Menu.Item disabled>
+            <a className="ant-table-filter-dropdown-link confirm"
+              style={{
+                cursor: 'pointer',
+                pointerEvents: 'visible'
+              }}
+              onClick={this.handleFilter.bind(this, column)}>
+              确定
+            </a>
+            <a className="ant-table-filter-dropdown-link clear"
+              style={{
+                cursor: 'pointer',
+                pointerEvents: 'visible'
+              }}
+              onClick={this.handleClearFilters.bind(this, column)}>
+              清空
+            </a>
+          </Menu.Item>
+        </Menu>;
+        let dropdownSelectedClass = '';
+        if (column.selectedFilters && column.selectedFilters.length > 0) {
+          dropdownSelectedClass = 'ant-table-filter-selected';
+        }
+        filterDropdown = <Dropdown trigger="click"
+          closeOnSelect={false}
+          overlay={menus}>
+          <i title="筛选" className={'anticon anticon-bars ' + dropdownSelectedClass}></i>
+        </Dropdown>;
+      }
+      if (column.sorter) {
+        sortButton = <div className="ant-table-column-sorter">
+          <span className={'ant-table-column-sorter-up ' +
+                           (column.sortOrder === 'ascend' ? 'on' : 'off')}
+            title="升序排序"
+            onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
+            <i className="anticon anticon-caret-up"></i>
+          </span>
+          <span className={'ant-table-column-sorter-down ' +
+                           (column.sortOrder === 'descend' ? 'on' : 'off')}
+            title="降序排序"
+            onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
+            <i className="anticon anticon-caret-down"></i>
+          </span>
+        </div>;
+      }
+      column.title = [
+        column.originTitle,
+        sortButton,
+        filterDropdown
+      ];
+      return column;
+    });
+  },
+  renderPagination() {
+    // 强制不需要分页
+    if (this.state.pagination === false) {
+      return '';
+    }
+    let classString = 'ant-table-pagination';
+    if (this.props.size === 'small') {
+      classString += ' mini';
+    }
+    return <Pagination className={classString}
+      onChange={this.handlePageChange}
+      {...this.state.pagination} />;
+  },
+  prepareParamsArguments() {
+    // 准备筛选、排序、分页的参数
+    let pagination;
+    let filters = {};
+    let sorters = {};
+    pagination = this.state.pagination;
+    this.props.columns.forEach(function(column) {
+      if (column.dataIndex && column.selectedFilters &&
+          column.selectedFilters.length > 0) {
+        filters[column.dataIndex] = column.selectedFilters;
+      }
+      if (column.dataIndex && column.sorter &&
+          column.sortOrder) {
+        sorters[column.dataIndex] = column.sortOrder;
+      }
+    });
+    return [pagination, filters, sorters];
+  },
+  fetch: function() {
+    let dataSource = this.props.dataSource;
+    if (this.mode === 'remote') {
+      this.setState({
+        loading: true
+      });
+      jQuery.ajax({
+        url: dataSource.url,
+        data: dataSource.getParams.apply(this, this.prepareParamsArguments()) || {},
+        headers: dataSource.headers,
+        dataType: 'json',
+        success: (result) => {
+          if (this.isMounted()) {
+            let pagination = objectAssign(
+              this.state.pagination,
+              dataSource.getPagination.call(this, result)
+            );
+            this.setState({
+              data: dataSource.resolve.call(this, result),
+              pagination: pagination,
+              loading: false
+            });
+          }
+        },
+        error: () => {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    } else {
+      let pageSize = this.state.pagination.pageSize;
+      let current = this.state.pagination.current;
+      this.setState({
+        data: this.props.dataSource.filter(function(item, i) {
+          if (i >= (current - 1) * pageSize &&
+              i < current * pageSize) {
+            return item;
+          }
+        }),
+        pagination: this.state.pagination
+      });
+    }
+  },
+  componentDidMount() {
+    this.handlePageChange();
+  },
+  render() {
+    this.props.columns = this.renderRowSelection();
+
+    var classString = '';
+    if (this.state.loading) {
+      classString += ' ant-table-loading';
+    }
+    if (this.props.size === 'small') {
+      classString += ' ant-table-small';
+    }
+
+    return <div className="clearfix">
+      <Table data={this.state.data}
+      columns={this.renderColumnsDropdown()}
+      className={classString}
+      {...this.props} />
+      {this.renderPagination()}
+    </div>;
+  }
+});
+
+export default AntTable;

components/table/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 表格
+- cols: 1
 
 ---
 
@@ -11,3 +12,76 @@
 
 - 当有大量结构化的数据需要展现时；
 - 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
+
+## API
+
+Table 有两种模式，本地数据和远程数据模式。
+
+本地数据是指数据一次性载入内存，纯前端进行分页、筛选、排序等功能。
+
+通过指定表格的数据源 `dataSource` 为一个数据数组。
+
+```jsx
+var dataSource = [{
+  name: '胡彦斌',
+  age: 32,
+  address: '西湖区湖底公园1号'
+}, {
+  name: '胡彦祖',
+  age: 42,
+  address: '西湖区湖底公园1号'
+}];
+
+<Table dataSource={dataSource} />
+```
+
+远程数据模式是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。
+
+通过指定表格的数据源 `dataSource` 为一个对象如下。
+
+```jsx
+var dataSource = {
+  url: '/api/users',
+  resolve: function(result) {
+    return result.data;
+  },
+  getParams: function(column) {},
+  getPagination: function(result) {}
+};
+<Table dataSource={dataSource} />
+```
+
+### Table
+
+| 参数          | 说明                     | 类型            |  可选值             | 默认值  |
+|---------------|--------------------------|-----------------|---------------------|---------|
+| rowSelection  | 列表项是否可选择         | Object          |                     | false   |
+| pagenation    | 分页器                   | React.Element   | 参考 [pagination](/components/pagination)，设为 false 时不显示分页 |         |
+| size          | 正常或迷你类型           | string          | `normal` or `small` | normal  |
+| dataSource    | 数据源，可以为数组（本地模式）或一个数据源描述对象（远程模式） | Array or Object |                     |         |
+| columns       | 表格列的配置描述，具体项见下表 | Array |                     |         |
+
+### Column
+
+列描述数据对象，是 columns 中的一项。
+
+| 参数       | 说明                       | 类型            |  可选值             | 默认值  |
+|------------|----------------------------|-----------------|---------------------|---------|
+| title      | 列头显示文字               | String or React.Element |             |         |
+| dataIndex  | 列数据在 data 中对应的 key | React.Element   |                     |         |
+| key        | React 需要的 key           | String          |                     |         |
+| render     | 生成复杂数据的渲染函数     | Function        |                     |         |
+| filters    | 表头的筛选菜单项           | Array           |                     |         |
+| onFilter   | 本地模式下，确定筛选的运行函数 | Functioni   |                     |         |
+| sorter     | 排序函数，本地模式下为一个函数，远程模式下为布尔值 | Function or Boolean | | |
+
+### dataSource
+
+远程数据源配置对象。
+
+| 参数          | 说明                     | 类型            |  可选值             | 默认值  |
+|---------------|--------------------------|-----------------|---------------------|---------|
+| url           | 数据源地址               | String          |                     |         |
+| resolve       | 获得数据的解析函数，接收参数为远程数据返回的 result  | Function  |    |    |
+| getPagination | 和后台接口返回的分页数据进行适配的函数，返回值会传给表格中的分页器 | Function |  |  |
+| getParams     | 和后台接口接收的参数进行适配，返回值会作为请求的参数发送 | Function |  |   |

index.js

@@ -16,6 +16,7 @@ var antd = {
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),
+  Table: require('./components/table'),
   Switch: require('./components/switch'),
   Collapse: require('./components/Collapse'),
   message: require('./components/message'),

package.json

@@ -17,7 +17,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~3.0.0",
     "rc-calendar": "~3.10.0",
-    "rc-collapse": "~1.2.0",
+    "rc-collapse": "~1.2.2",
     "rc-dialog": "~4.4.0",
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.1",
@@ -28,6 +28,7 @@
     "rc-select": "~4.2.1",
     "rc-slider": "~1.2.6",
     "rc-steps": "~1.1.4",
+    "rc-table": "~3.0.1",
     "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0"

style/components/collapse.less

 @prefixCls: ant-collapse;
-@borderStyle: 1px solid #d9d9d9;
+@borderStyle: 1px solid #e9e9e9;
 
 #arrow {
   .common(){
@@ -22,53 +22,64 @@
 }
 
 .@{prefixCls} {
-  background-color: #f3f5f7;
+  background-color: #fbfbfb;
   border-radius: 3px;
   border-top: @borderStyle;
   border-left: @borderStyle;
   border-right: @borderStyle;
 
+  & > &-item {
+    > .@{prefixCls}-header {
+      height: 38px;
+      line-height: 38px;
+      text-indent: 16px;
+      color: #666;
+      border-bottom: @borderStyle;
+      &:before {
+        display: inline-block;
+        content: '\20';
+        #arrow > .common();
+        #arrow > .right(3px, 4px, #666);
+        vertical-align: middle;
+        margin-right: 8px;
+      }
+    }
+  }
+
   &-content {
     height: 0;
-    opacity: 0;
-    transition-property: all;
-    transition-duration: .2s;
-    transition-timing-function: ease-in;
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     overflow: hidden;
     color: #999;
     padding: 0 16px;
-    background-color: #fbfbfb;
-    > p, > div {
-      margin-top: 10px;
-      margin-bottom: 10px;
+    background-color: #f4f4f4;
+
+    & > &-box {
+      margin-top: 16px;
+      margin-bottom: 16px;
     }
   }
 
-  &-content-active {
-    opacity: 1;
-    height: auto;
-    border-bottom: @borderStyle;
+  &-item:last-child {
+    > .@{prefixCls}-content {
+      border-radius: 0 0 3px 3px;
+    }
   }
 
-  &-header {
-    height: 38px;
-    line-height: 38px;
-    text-indent: 16px;
-    color: #666;
+  &-content-active {
     border-bottom: @borderStyle;
-    &:before {
-      display: inline-block;
-      content: '\20';
-      #arrow > .common();
-      #arrow > .right(3px, 4px, #666);
-      vertical-align: middle;
-      margin-right: 8px;
-    }
   }
 
-  &-item-active {
-    .@{prefixCls}-header::before {
-      #arrow > .bottom(3px, 4px, #666);
+  & > &-item-active {
+    > .@{prefixCls}-header {
+      border-bottom: none;
+
+      &:before {
+        #arrow > .bottom(3px, 4px, #666);
+        margin-right: 6px;
+      }
     }
   }
 }
+

style/components/divider.less

+.ant-divider {
+  margin: 0 4px;
+  color: #999;
+  display: inline-block;
+  .scale(0.8);
+}

style/components/dropdown.less

@@ -59,12 +59,13 @@
     }
 
     & > &-item {
-      padding: 7px 10px;
+      padding: 7px 16px;
       clear: both;
       font-size: 12px;
       font-weight: normal;
       color: #666;
       white-space: nowrap;
+      cursor: pointer;
 
       a {
         color: #666;
@@ -98,11 +99,33 @@
 
       &-divider {
         height: 1px;
-        margin: 1px 0;
         overflow: hidden;
         background-color: #e5e5e5;
         line-height: 0;
       }
+
+      &-selected {
+        background-color: tint(@primary-color, 90%);
+        position: relative;
+        &:after {
+          content: '\e613';
+          font-family: 'anticon';
+          font-weight: bold;
+          position: absolute;
+          top: 6px;
+          right: 16px;
+          color: @primary-color;
+          background-color: tint(@primary-color, 90%);
+        }
+      }
     }
   }
 }
+
+.@{dropdownPrefixCls}-link {
+  .anticon-down {
+    font-size: ~"60% \9"; // ie8-9
+    .scale(0.6);
+    font-weight: bold;
+  }
+}

style/components/index.less

@@ -7,6 +7,7 @@
 @import "dialog";
 @import "confirm";
 @import "tabs";
+@import "table";
 @import "tooltip";
 @import "popover";
 @import "pagination";
@@ -18,4 +19,5 @@
 @import "inputNumber";
 @import "collapse";
 @import "message";
+@import "divider";
 @import "slider";

style/components/select.less

@@ -242,14 +242,14 @@
     & > &-item {
       position: relative;
       display: block;
-      padding: 7px 10px;
+      padding: 7px 16px;
       font-weight: normal;
       color: #666666;
       white-space: nowrap;
       cursor: pointer;
 
       &:hover, &-active, &-selected {
-        background-color: rgba(142, 200, 249, 0.1) !important;
+        background-color: tint(@primary-color, 90%) !important;
       }
 
       &-selected {

style/components/table.less

+@import "../mixins/index";
+@tablePrefixClass: ~"@{css-prefix}table";
+@table-border-color: #e9e9e9;
+@table-head-background-color: #f3f3f3;
+
+.@{tablePrefixClass} {
+  font-size: @font-size-base;
+  color: @text-color;
+  border-radius: 6px;
+  transition: opacity 0.3s ease;
+
+  table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: separate;
+  }
+
+  th {
+    background: @table-head-background-color;
+    text-align: left;
+    font-weight: bold;
+
+    .anticon-bars {
+      margin-left: 8px;
+      font-size: ~"10px \9"; // ie8-9
+      .scale(0.83);
+      cursor: pointer;
+      color: #aaa;
+      transition: all 0.3s ease;
+      &:hover {
+        color: #666;
+      }
+    }
+
+    .@{tablePrefixClass}-filter-dropdown {
+      min-width: 88px;
+      .ant-dropdown-menu-item {
+        overflow: hidden;
+        padding: 7px 8px;
+        &.ant-dropdown-menu-item-selected:after {
+          right: 8px;
+        }
+      }
+    }
+
+    a.@{tablePrefixClass}-filter-dropdown-link {
+      color: @link-color;
+      &:hover {
+        color: @link-hover-color;
+      }
+      &:active {
+        color: @link-active-color;
+      }
+      &.confirm {
+        float: left;
+      }
+      &.clear {
+        float: right;
+      }
+    }
+
+    .@{tablePrefixClass}-filter-selected.anticon-bars {
+      color: @primary-color;
+    }
+
+    &:first-child {
+      border-radius: 6px 0 0 0;
+    }
+    &:last-child {
+      border-radius: 0 6px 0 0;
+    }
+  }
+
+  td {
+    border-bottom: 1px solid @table-border-color;
+  }
+
+  tr {
+    transition: all .3s ease;
+    &:hover {
+      background: tint(@primary-color, 90%);
+    }
+  }
+
+  th, td {
+    padding: 16px 8px;
+  }
+
+  &-loading {
+    opacity: 0.42;
+  }
+
+  &-small {
+    border: 1px solid #e9e9e9;
+    padding: 0 8px;
+
+    th {
+      padding: 10px 8px;
+      background: #fff;
+      border-bottom: 1px solid #e9e9e9;
+    }
+
+    td {
+      padding: 6px 8px;
+    }
+    .ant-table-row:last-child td {
+      border-bottom: 0;
+    }
+  }
+
+  &-column-sorter {
+    margin-left: 8px;
+    display: inline-block;
+    width: 12px;
+    height: 14px;
+    vertical-align: middle;
+    text-align: center;
+    &-up,
+    &-down {
+      line-height: 4px;
+      height: 6px;
+      display: block;
+      width: 12px;
+      cursor: pointer;
+      &:hover .anticon {
+        color: #666;
+      }
+      &.on {
+        .anticon-caret-up,
+        .anticon-caret-down {
+          color: @primary-color;
+        }
+      }
+    }
+    .anticon-caret-up,
+    .anticon-caret-down {
+      font-size: ~"6px \9"; // ie8-9
+      .scale(0.5);
+      line-height: 6px;
+      height: 6px;
+      color: #aaa;
+      &:before {
+        -moz-transform-origin: 53% 50%; /* fix firefox position */
+      }
+    }
+  }
+}
+
+.@{tablePrefixClass}-pagination {
+  margin: 16px 0;
+  float: right;
+}

style/core/base.less

@@ -54,6 +54,10 @@ a {
     color: @link-hover-color;
   }
 
+  &:active {
+    color: @link-active-color;
+  }
+
   &:active,
   &:hover {
     outline: 0;

style/themes/default/custom.less

@@ -25,6 +25,7 @@
 // LINK
 @link-color             : @primary-color;
 @link-hover-color       : tint(@link-color, 20%);
+@link-active-color      : shade(@link-color, 5%);
 @link-hover-decoration  : none;
 
 // Disabled cursor for form controls and buttons.

webpack.config.js

@@ -21,7 +21,8 @@ module.exports = {
   },
 
   externals: {
-    react: "React"
+    react: "React",
+    jquery: 'jQuery'
   },
 
   module: {