fixed: 修改示例中的引用和增加列排序示例

demo/TableDemo.scss

@@ -76,3 +76,47 @@
     position: absolute;
   }
 }
+
+.bee-table-column-sorter {
+  position: relative;
+  margin-left: 4px;
+  display: inline-block;
+  width: 14px;
+  height: 1em;
+  vertical-align: middle;
+  text-align: center;
+  & > .bee-table-column-sorter-down,
+  & > .bee-table-column-sorter-up {
+    line-height: 6px;
+    display: block;
+    width: 14px;
+    cursor: pointer;
+  }
+}
+.bee-table-column-sorter-down.on .uf-triangle-down,
+.bee-table-column-sorter-down.on .uf-triangle-up,
+.bee-table-column-sorter-up.on .uf-triangle-down,
+.bee-table-column-sorter-up.on .uf-triangle-up {
+  color: #108ee9;
+}
+.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
+    -webkit-filter: none;
+    filter: none;
+    font-size: 12px;
+}
+.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
+    display: inline-block;
+    padding: 0;
+    font-size: 12px;
+    font-size: 8px\9;
+    -webkit-transform: scale(.66666667) rotate(0deg);
+    -ms-transform: scale(.66666667) rotate(0deg);
+    transform: scale(.66666667) rotate(0deg);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+    zoom: 1;
+    line-height: 4px;
+    height: 4px;
+    color: #999;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+}

demo/demolist/Demo1.js

@@ -5,10 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Table from '../../src';
-
 
 const columns = [
   { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
@@ -27,7 +23,7 @@ const data = [
   { a: '郭靖', b: '男', c: 25, key: '3' },
 ];
 
-class Demo1 extends Component {
+export class Demo1 extends Component {
     render () {
         return (
               <Table
@@ -40,5 +36,3 @@ class Demo1 extends Component {
     }
 }
 
-
-export default Demo1;

demo/demolist/Demo10.js

@@ -5,9 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-
 const columns10 = [
     {
       title: "Name",
@@ -34,11 +31,9 @@ const columns10 = [
 
   const emptyFunc = () => <span>这里没有数据！</span>
   
-  class Demo10 extends Component {
+  export class Demo10 extends Component {
     render() {
       return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
     }
   }
 
-  export default Demo10;
-

demo/demolist/Demo11.js

@@ -0,0 +1,142 @@
+/**
+*
+* @title 列排序
+* @description 列排序
+*
+*/
+
+const columns11 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "操作",
+    dataIndex: "",
+    key: "d",
+    render() {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+const data11 = [
+  { a: "杨过", b: "男", c: 30, key: "2" },
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+const defaultProps = {
+  prefixCls: "bee-table"
+};
+class Demo11 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sortOrder: "",
+      data: data11
+    };
+  }
+  toggleSortOrder(order, column) {
+    let { sortOrder, data, oldData } = this.state;
+    let ascend_sort = function(key) {
+      return function(a, b) {
+        return a.key - b.key;
+      };
+    };
+    let descend_sort = function(key) {
+      return function(a, b) {
+        return b.key - a.key;
+      };
+    };
+    if (sortOrder === order) {
+      // 切换为未排序状态
+      order = "";
+    }
+    debugger;
+    console.log(oldData);
+    if (!oldData) {
+      oldData = data.concat();
+    }
+    if (order === "ascend") {
+      data = data.sort(function(a, b) {
+        return column.sorter(a, b);
+      });
+    } else if (order === "descend") {
+      data = data.sort(function(a, b) {
+        return column.sorter(b, a);
+      });
+    } else {
+      data = oldData.concat();
+    }
+    this.setState({
+      sortOrder: order,
+      data: data,
+      oldData: oldData
+    });
+  }
+  renderColumnsDropdown(columns) {
+    const { sortOrder } = this.state;
+    const { prefixCls } = this.props;
+
+    return columns.map(originColumn => {
+      let column = Object.assign({}, originColumn);
+      let sortButton;
+      if (column.sorter) {
+        const isAscend = sortOrder === "ascend";
+        const isDescend = sortOrder === "descend";
+        sortButton = (
+          <div className={`${prefixCls}-column-sorter`}>
+            <span
+              className={`${prefixCls}-column-sorter-up ${isAscend
+                ? "on"
+                : "off"}`}
+              title="↑"
+              onClick={() => this.toggleSortOrder("ascend", column)}
+            >
+              <Icon type="uf-triangle-up" />
+            </span>
+            <span
+              className={`${prefixCls}-column-sorter-down ${isDescend
+                ? "on"
+                : "off"}`}
+              title="↓"
+              onClick={() => this.toggleSortOrder("descend", column)}
+            >
+              <Icon type="uf-triangle-down" />
+            </span>
+          </div>
+        );
+      }
+      column.title = (
+        <span>
+          {column.title}
+          {sortButton}
+        </span>
+      );
+      return column;
+    });
+  }
+  render() {
+    let columns = this.renderColumnsDropdown(columns11);
+    return <Table columns={columns} data={this.state.data} />;
+  }
+}
+Demo11.defaultProps = defaultProps;
+
+export default Demo11;

demo/demolist/Demo2.js

@@ -5,13 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Button from 'bee-button';
-import Table from '../../src';
-import Animate from 'bee-animate';
-import Icon from "bee-icon";
-import Input from 'bee-form-control';
-import Popconfirm from 'bee-popconfirm';
 
 class EditableCell extends React.Component {
   state = {
@@ -69,7 +62,7 @@ class EditableCell extends React.Component {
   }
 }
 
-export default class Demo2 extends React.Component {
+export class Demo2 extends React.Component {
   constructor(props) {
     super(props);
     this.columns = [{

demo/demolist/Demo3.js

@@ -5,13 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Button from 'bee-button';
-import Table from '../../src';
-import Animate from 'bee-animate';
-import Icon from "bee-icon";
-import Input from 'bee-form-control';
-import Popconfirm from 'bee-popconfirm';
 
 const { ColumnGroup, Column } = Table;
 
@@ -19,7 +12,7 @@ const data3 = [
   { a: '北京', b: '北京', c: '250', d: 2, key: '1' },
 ];
 
-class Demo3 extends Component {
+export class Demo3 extends Component {
     render () {
         return (
 
@@ -59,5 +52,3 @@ class Demo3 extends Component {
         )
     }
 }
-
-export default Demo3;

demo/demolist/Demo4.js

@@ -5,10 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
 
 const columns4 = [
   {
@@ -94,10 +90,8 @@ const data4 = [
     address: "Sidney No. 1 Lake Park"
   }
 ];
-class Demo4 extends Component {
+export class Demo4 extends Component {
   render() {
     return <Table columns={columns4} data={data4} />;
   }
 }
-
-export default Demo4;

demo/demolist/Demo5.js

@@ -5,9 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-
 
 
 const columns5 = [
@@ -56,10 +53,8 @@ const data5 = [
   }
 ];
 
-class Demo5 extends Component {
+export class Demo5 extends Component {
   render() {
     return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;
   }
 }
-
-export default Demo5;

demo/demolist/Demo6.js

@@ -5,9 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-
 
 
 const columns6 = [
@@ -78,10 +75,8 @@ const data6 = [
   }
 ];
 
-class Demo6 extends Component {
+export class Demo6 extends Component {
   render() {
     return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;
   }
-}
-
-export default Demo6;
+}

demo/demolist/Demo7.js

@@ -5,10 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-
-
 
 const columns7 = [
   { title: "用户名", dataIndex: "a", key: "a"},
@@ -36,7 +32,7 @@ const columns7_1 = [
   { title: "系别", dataIndex: "c", key: "c"}
 ];
 
-class Demo7 extends Component {
+export class Demo7 extends Component {
   constructor(props){
     super(props);
     this.state = {
@@ -85,5 +81,3 @@ class Demo7 extends Component {
   }
 }
 
-export default Demo7;
-

demo/demolist/Demo8.js

@@ -5,11 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-import Pagination from 'bee-pagination';
-
-
 const columns8 = [
   { title: "用户名", dataIndex: "a", key: "a", width: 100 },
   { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
@@ -24,7 +19,7 @@ const columns8 = [
   }
 ];
 
-class Demo8 extends Component {
+export class Demo8 extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -73,6 +68,4 @@ class Demo8 extends Component {
       </div>
     );
   }
-}
-
-export default Demo8;
+}

demo/demolist/Demo9.js

@@ -5,13 +5,6 @@
 *
 */
 
-import React, { Component } from 'react';
-import Table from '../../src';
-import Icon from "bee-icon";
-import InputGroup from 'bee-input-group';
-import FormControl from 'bee-form-control';
-
-
 
 class Search extends Component {
   state = {
@@ -99,7 +92,7 @@ const columns9 = [
   }
 ];
 
-class Demo9 extends Component {
+export class Demo9 extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -129,5 +122,3 @@ class Demo9 extends Component {
   }
 }
 
-export default Demo9;
-