diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss
index 46d630d..533d2e4 100644
--- a/demo/TableDemo.scss
+++ b/demo/TableDemo.scss
@@ -7,6 +7,7 @@
 @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
 @import "../node_modules/bee-form-control/src/FormControl.scss";
 @import "../node_modules/bee-pagination/src/Pagination.scss";
+@import "../node_modules/bee-checkbox/src/Checkbox.scss";
 
 .editable-cell {
   position: relative;
diff --git a/demo/demolist/Demo11.js b/demo/demolist/Demo11.js
index 65ae0e6..192e4fb 100644
--- a/demo/demolist/Demo11.js
+++ b/demo/demolist/Demo11.js
@@ -41,10 +41,10 @@ const data11 = [
   { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
-const defaultProps = {
+const defaultProps11 = {
   prefixCls: "bee-table"
 };
-class Demo11 extends Component {
+export class Demo11 extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -52,7 +52,7 @@ class Demo11 extends Component {
       data: data11
     };
   }
-  toggleSortOrder(order, column) {
+  toggleSortOrder=(order, column)=> {
     let { sortOrder, data, oldData } = this.state;
     let ascend_sort = function(key) {
       return function(a, b) {
@@ -68,8 +68,6 @@ class Demo11 extends Component {
       // 切换为未排序状态
       order = "";
     }
-    debugger;
-    console.log(oldData);
     if (!oldData) {
       oldData = data.concat();
     }
@@ -137,6 +135,4 @@ class Demo11 extends Component {
     return <Table columns={columns} data={this.state.data} />;
   }
 }
-Demo11.defaultProps = defaultProps;
-
-export default Demo11;
+Demo11.defaultProps = defaultProps11;
\ No newline at end of file
diff --git a/demo/demolist/Demo12.js b/demo/demolist/Demo12.js
new file mode 100644
index 0000000..446e86c
--- /dev/null
+++ b/demo/demolist/Demo12.js
@@ -0,0 +1,162 @@
+/**
+*
+* @title 全选功能
+* @description 全选功能
+*
+*/
+
+const columns12 = [
+  {
+    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 data12 = [
+  { a: "杨过", b: "男", c: 30, key: "2" },
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+const defaultProps12 = {
+  prefixCls: "bee-table",
+  multiSelect: {
+    type: "checkbox",
+    param: "key"
+  }
+};
+export class Demo12 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checkedAll:false,
+      checkedArray: [
+        false,
+        false,
+        false,
+      ],
+      data: data12
+    };
+  }
+  onAllCheckChange = () => {
+    let self = this;
+    let checkedArray = [];
+    let listData = self.state.data.concat();
+    let selIds = [];
+    // let id = self.props.multiSelect.param;
+    for (var i = 0; i < self.state.checkedArray.length; i++) {
+      checkedArray[i] = !self.state.checkedAll;
+    }
+    // if (self.state.checkedAll) {
+    //   selIds = [];
+    // } else {
+    //   for (var i = 0; i < listData.length; i++) {
+    //     selIds[i] = listData[i][id];
+    //   }
+    // }
+    self.setState({
+      checkedAll: !self.state.checkedAll,
+      checkedArray: checkedArray,
+      // selIds: selIds
+    });
+    // self.props.onSelIds(selIds);
+  };
+  onCheckboxChange = (text, record, index) => {
+    let self = this;
+    let allFlag = false;
+    // let selIds = self.state.selIds;
+    // let id = self.props.postId;
+    let checkedArray = self.state.checkedArray.concat();
+    // if (self.state.checkedArray[index]) {
+      // selIds.remove(record[id]);
+    // } else {
+      // selIds.push(record[id]);
+    // }
+    debugger;
+    checkedArray[index] = !self.state.checkedArray[index];
+    for (var i = 0; i < self.state.checkedArray.length; i++) {
+      if (!checkedArray[i]) {
+        allFlag = false;
+        break;
+      } else {
+        allFlag = true;
+      }
+    }
+    self.setState({
+      checkedAll: allFlag,
+      checkedArray: checkedArray,
+      // selIds: selIds
+    });
+    // self.props.onSelIds(selIds);
+  };
+  renderColumnsMultiSelect(columns) {
+    // const { data,checkedArray } = this.state;
+    const { multiSelect } = this.props;
+    let select_column = {};
+    // let indeterminate_bool = false;
+    // let indeterminate_bool1 = true;
+    if (multiSelect && multiSelect.type === "checkbox") {
+      // let i = checkedArray.length;
+      // while(i--){
+      //     if(checkedArray[i]){
+      //       indeterminate_bool = true;
+      //       break;
+      //     }
+      // }
+      let defaultColumns = [
+        {
+          title: (
+            <Checkbox
+              className="table-checkbox"
+              checked={this.state.checkedAll}
+              
+              onHandleChange={this.onAllCheckChange}
+            />
+          ),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          width: "5%",
+          render: (text, record, index) => {
+            return (
+              <Checkbox
+                className="table-checkbox"
+                checked={this.state.checkedArray[index]}
+                onHandleChange={this.onCheckboxChange.bind(this, text, record, index)}
+              />
+            );
+          }
+        }
+      ];
+      columns = defaultColumns.concat(columns);
+    }
+    return columns;
+  }
+  render() {
+    let columns = this.renderColumnsMultiSelect(columns12);
+    return <Table columns={columns} data={data12} />;
+  }
+}
+Demo12.defaultProps = defaultProps12;
diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js
index dd12b32..4e2ee9c 100644
--- a/demo/index-demo-base.js
+++ b/demo/index-demo-base.js
@@ -8,6 +8,7 @@ import Table from '../src';
 import Animate from 'bee-animate';
 import Pagination from "bee-pagination";
 import Icon from "bee-icon";
+import Checkbox from "bee-checkbox";
 import InputGroup from 'bee-input-group';
 import FormControl from 'bee-form-control';
 import Input from 'bee-form-control';
diff --git a/demo/index.js b/demo/index.js
index a293d21..068d3f6 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -8,6 +8,7 @@ import Table from '../src';
 import Animate from 'bee-animate';
 import Pagination from "bee-pagination";
 import Icon from "bee-icon";
+import Checkbox from "bee-checkbox";
 import InputGroup from 'bee-input-group';
 import FormControl from 'bee-form-control';
 import Input from 'bee-form-control';
@@ -138,10 +139,10 @@ const data11 = [
   { a: "郭靖", b: "男", c: 25, key: "3" }
 ];
 
-const defaultProps = {
+const defaultProps11 = {
   prefixCls: "bee-table"
 };
-class Demo11 extends Component {
+export class Demo11 extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -149,7 +150,7 @@ class Demo11 extends Component {
       data: data11
     };
   }
-  toggleSortOrder(order, column) {
+  toggleSortOrder=(order, column)=> {
     let { sortOrder, data, oldData } = this.state;
     let ascend_sort = function(key) {
       return function(a, b) {
@@ -165,8 +166,6 @@ class Demo11 extends Component {
       // 切换为未排序状态
       order = "";
     }
-    debugger;
-    console.log(oldData);
     if (!oldData) {
       oldData = data.concat();
     }
@@ -234,9 +233,168 @@ class Demo11 extends Component {
     return <Table columns={columns} data={this.state.data} />;
   }
 }
-Demo11.defaultProps = defaultProps;
+Demo11.defaultProps = defaultProps11;/**
+*
+* @title 全选功能
+* @description 全选功能
+*
+*/
 
-export default Demo11;
+const columns12 = [
+  {
+    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 data12 = [
+  { a: "杨过", b: "男", c: 30, key: "2" },
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+const defaultProps12 = {
+  prefixCls: "bee-table",
+  multiSelect: {
+    type: "checkbox",
+    param: "key"
+  }
+};
+export class Demo12 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checkedAll:false,
+      checkedArray: [
+        false,
+        false,
+        false,
+      ],
+      data: data12
+    };
+  }
+  onAllCheckChange = () => {
+    let self = this;
+    let checkedArray = [];
+    let listData = self.state.data.concat();
+    let selIds = [];
+    // let id = self.props.multiSelect.param;
+    for (var i = 0; i < self.state.checkedArray.length; i++) {
+      checkedArray[i] = !self.state.checkedAll;
+    }
+    // if (self.state.checkedAll) {
+    //   selIds = [];
+    // } else {
+    //   for (var i = 0; i < listData.length; i++) {
+    //     selIds[i] = listData[i][id];
+    //   }
+    // }
+    self.setState({
+      checkedAll: !self.state.checkedAll,
+      checkedArray: checkedArray,
+      // selIds: selIds
+    });
+    // self.props.onSelIds(selIds);
+  };
+  onCheckboxChange = (text, record, index) => {
+    let self = this;
+    let allFlag = false;
+    // let selIds = self.state.selIds;
+    // let id = self.props.postId;
+    let checkedArray = self.state.checkedArray.concat();
+    // if (self.state.checkedArray[index]) {
+      // selIds.remove(record[id]);
+    // } else {
+      // selIds.push(record[id]);
+    // }
+    debugger;
+    checkedArray[index] = !self.state.checkedArray[index];
+    for (var i = 0; i < self.state.checkedArray.length; i++) {
+      if (!checkedArray[i]) {
+        allFlag = false;
+        break;
+      } else {
+        allFlag = true;
+      }
+    }
+    self.setState({
+      checkedAll: allFlag,
+      checkedArray: checkedArray,
+      // selIds: selIds
+    });
+    // self.props.onSelIds(selIds);
+  };
+  renderColumnsMultiSelect(columns) {
+    // const { data,checkedArray } = this.state;
+    const { multiSelect } = this.props;
+    let select_column = {};
+    // let indeterminate_bool = false;
+    // let indeterminate_bool1 = true;
+    if (multiSelect && multiSelect.type === "checkbox") {
+      // let i = checkedArray.length;
+      // while(i--){
+      //     if(checkedArray[i]){
+      //       indeterminate_bool = true;
+      //       break;
+      //     }
+      // }
+      let defaultColumns = [
+        {
+          title: (
+            <Checkbox
+              className="table-checkbox"
+              checked={this.state.checkedAll}
+              
+              onHandleChange={this.onAllCheckChange}
+            />
+          ),
+          key: "checkbox",
+          dataIndex: "checkbox",
+          width: "5%",
+          render: (text, record, index) => {
+            return (
+              <Checkbox
+                className="table-checkbox"
+                checked={this.state.checkedArray[index]}
+                onHandleChange={this.onCheckboxChange.bind(this, text, record, index)}
+              />
+            );
+          }
+        }
+      ];
+      columns = defaultColumns.concat(columns);
+    }
+    return columns;
+  }
+  render() {
+    let columns = this.renderColumnsMultiSelect(columns12);
+    return <Table columns={columns} data={data12} />;
+  }
+}
+Demo12.defaultProps = defaultProps12;
 /**
 *
 * @title 增删改表格
@@ -979,7 +1137,7 @@ export class Demo9 extends Component {
   }
 }
 
-var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\n\nconst columns = [\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n  {\n    title: '操作', dataIndex: '', key: 'd', render() {\n      return <a href=\"#\">一些操作</a>;\n    },\n  },\n];\n\nconst data = [\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\n  { a: '杨过', b: '男', c: 67, key: '2' },\n  { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nexport class Demo1 extends Component {\n    render () {\n        return (\n              <Table\n              columns={columns}\n              data={data}\n              title={currentData => <div>标题: 这是一个标题</div>}\n              footer={currentData => <div>表尾: 我是小尾巴</div>}\n              />\n        )\n    }\n}\n\n","desc":""},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n*\n*/\n\nconst columns10 = [\n    {\n      title: \"Name\",\n      dataIndex: \"name\",\n      key: \"name\",\n      width: \"40%\"\n    },\n    {\n      title: \"Age\",\n      dataIndex: \"age\",\n      key: \"age\",\n      width: \"30%\"\n    },\n    {\n      title: \"Address\",\n      dataIndex: \"address\",\n      key: \"address\"\n    }\n  ];\n  \n  const data10 = [\n    \n  ];\n\n  const emptyFunc = () => <span>这里没有数据！</span>\n  \n  export class Demo10 extends Component {\n    render() {\n      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;\n    }\n  }\n\n","desc":" 无数据时显示效果展示"},{"example":<Demo11 />,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\nconst columns11 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: 100\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 100\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 200,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nconst data11 = [\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps = {\n  prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      sortOrder: \"\",\n      data: data11\n    };\n  }\n  toggleSortOrder(order, column) {\n    let { sortOrder, data, oldData } = this.state;\n    let ascend_sort = function(key) {\n      return function(a, b) {\n        return a.key - b.key;\n      };\n    };\n    let descend_sort = function(key) {\n      return function(a, b) {\n        return b.key - a.key;\n      };\n    };\n    if (sortOrder === order) {\n      // 切换为未排序状态\n      order = \"\";\n    }\n    debugger;\n    console.log(oldData);\n    if (!oldData) {\n      oldData = data.concat();\n    }\n    if (order === \"ascend\") {\n      data = data.sort(function(a, b) {\n        return column.sorter(a, b);\n      });\n    } else if (order === \"descend\") {\n      data = data.sort(function(a, b) {\n        return column.sorter(b, a);\n      });\n    } else {\n      data = oldData.concat();\n    }\n    this.setState({\n      sortOrder: order,\n      data: data,\n      oldData: oldData\n    });\n  }\n  renderColumnsDropdown(columns) {\n    const { sortOrder } = this.state;\n    const { prefixCls } = this.props;\n\n    return columns.map(originColumn => {\n      let column = Object.assign({}, originColumn);\n      let sortButton;\n      if (column.sorter) {\n        const isAscend = sortOrder === \"ascend\";\n        const isDescend = sortOrder === \"descend\";\n        sortButton = (\n          <div className={`${prefixCls}-column-sorter`}>\n            <span\n              className={`${prefixCls}-column-sorter-up ${isAscend\n                ? \"on\"\n                : \"off\"}`}\n              title=\"↑\"\n              onClick={() => this.toggleSortOrder(\"ascend\", column)}\n            >\n              <Icon type=\"uf-triangle-up\" />\n            </span>\n            <span\n              className={`${prefixCls}-column-sorter-down ${isDescend\n                ? \"on\"\n                : \"off\"}`}\n              title=\"↓\"\n              onClick={() => this.toggleSortOrder(\"descend\", column)}\n            >\n              <Icon type=\"uf-triangle-down\" />\n            </span>\n          </div>\n        );\n      }\n      column.title = (\n        <span>\n          {column.title}\n          {sortButton}\n        </span>\n      );\n      return column;\n    });\n  }\n  render() {\n    let columns = this.renderColumnsDropdown(columns11);\n    return <Table columns={columns} data={this.state.data} />;\n  }\n}\nDemo11.defaultProps = defaultProps;\n\nexport default Demo11;\n","desc":" 列排序"},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\n\nclass EditableCell extends React.Component {\n  state = {\n    value: this.props.value,\n    editable: false,\n  }\n  handleChange = (e) => {\n    const value = e.target.value;\n    this.setState({ value });\n  }\n  check = () => {\n    this.setState({ editable: false });\n    if (this.props.onChange) {\n      this.props.onChange(this.state.value);\n    }\n  }\n  edit = () => {\n    this.setState({ editable: true });\n  }\n  handleKeydown = (event) => {\n      console.log(event.keyCode);\n      if(event.keyCode == 13){\n          this.check();\n      }\n\n  }\n  render() {\n    const { value, editable } = this.state;\n    return (<div className=\"editable-cell\">\n      {\n        editable ?\n        <div className=\"editable-cell-input-wrapper\">\n          <Input\n            value={value}\n            onChange={this.handleChange}\n            onKeyDown = {this.handleKeydown}\n          />\n          <Icon\n            type=\"uf-correct\"\n            className=\"editable-cell-icon-check\"\n            onClick={this.check}\n          />\n        </div>\n        :\n        <div className=\"editable-cell-text-wrapper\">\n          {value || ' '}\n          <Icon\n            type=\"uf-pencil\"\n            className=\"editable-cell-icon\"\n            onClick={this.edit}\n          />\n        </div>\n      }\n    </div>);\n  }\n}\n\nexport class Demo2 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.columns = [{\n      title: '姓名',\n      dataIndex: 'name',\n      key:'name',\n      width: '30%',\n      render: (text, record, index) => (\n        <EditableCell\n          value={text}\n          onChange={this.onCellChange(index, 'name')}\n        />\n      ),\n    }, {\n      title: '年龄',\n      dataIndex: 'age',\n       key:'age',\n    }, {\n      title: '你懂的',\n      dataIndex: 'address',\n       key:'address',\n    }, {\n      title: '操作',\n      dataIndex: 'operation',\n      key: 'operation',\n      render: (text, record, index) => {\n        return (\n          this.state.dataSource.length > 1 ?\n          (\n            <Popconfirm content=\"确认删除?\" id='aa' onClose={this.onDelete(index)}>\n              <Icon type=\"uf-del\"></Icon>\n            </Popconfirm>\n          ) : null\n        );\n      },\n    }];\n\n    this.state = {\n      dataSource: [{\n        key: '0',\n        name: '沉鱼',\n        age: '18',\n        address: '96, 77, 89',\n      }, {\n        key: '1',\n        name: '落雁',\n        age: '16',\n        address: '90, 70, 80',\n      }, {\n        key: '2',\n        name: '闭月',\n        age: '17',\n        address: '80, 60, 80',\n      }, {\n        key: '3',\n        name: '羞花',\n        age: '20',\n        address: '120, 60, 90',\n      }],\n      count: 4,\n    };\n  }\n  onCellChange = (index, key) => {\n    return (value) => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  }\n  onDelete = (index) => {\n    return () => {\n      const dataSource = [...this.state.dataSource];\n      dataSource.splice(index, 1);\n      this.setState({ dataSource });\n    };\n  }\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData = {\n      key: count,\n      name: `凤姐 ${count}`,\n      age: 32,\n      address: `100 100 100`,\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1,\n    });\n  }\n\n  getBodyWrapper = (body) => {\n    return (\n      <Animate transitionName=\"move\" component=\"tbody\" className={body.props.className}>\n        {body.props.children}\n      </Animate>\n    );\n  }\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (<div>\n      <Button className=\"editable-add-btn\" type=\"ghost\" onClick={this.handleAdd}>添加</Button>\n      <Table bordered data={dataSource} columns={columns} getBodyWrapper={this.getBodyWrapper} />\n    </div>);\n  }\n}\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo3 />,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n  { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nexport class Demo3 extends Component {\n    render () {\n        return (\n\n  <Table data={data3}>\n    <ColumnGroup title=\"地址\">\n      <Column\n        title=\"省\"\n        dataIndex=\"a\"\n        key=\"a\"\n        width={100}\n      />\n      <Column\n        id=\"123\"\n        title=\"市\"\n        dataIndex=\"b\"\n        key=\"b\"\n        width={100}\n      />\n    </ColumnGroup>\n    <Column\n      title=\"数量\"\n      dataIndex=\"c\"\n      key=\"c\"\n      width={200}\n    />\n    <Column\n      title=\"操作\"\n      dataIndex=\"\"\n      key=\"d\"\n      render={(text, record, index) => {\n        return (\n            <Button size=\"sm\" colors=\"info\" style={{ minWidth: 50 }}>增加</Button>\n        );\n      }}\n    />\n  </Table>\n        )\n    }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nconst columns4 = [\n  {\n    title: \"Name\",\n    dataIndex: \"name\",\n    key: \"name\",\n    width: \"40%\"\n  },\n  {\n    title: \"Age\",\n    dataIndex: \"age\",\n    key: \"age\",\n    width: \"30%\"\n  },\n  {\n    title: \"Address\",\n    dataIndex: \"address\",\n    key: \"address\"\n  }\n];\n\nconst data4 = [\n  {\n    key: 1,\n    name: \"John Brown sr.\",\n    age: 60,\n    address: \"New York No. 1 Lake Park\",\n    children: [\n      {\n        key: 11,\n        name: \"John Brown\",\n        age: 42,\n        address: \"New York No. 2 Lake Park\"\n      },\n      {\n        key: 12,\n        name: \"John Brown jr.\",\n        age: 30,\n        address: \"New York No. 3 Lake Park\",\n        children: [\n          {\n            key: 121,\n            name: \"Jimmy Brown\",\n            age: 16,\n            address: \"New York No. 3 Lake Park\"\n          }\n        ]\n      },\n      {\n        key: 13,\n        name: \"Jim Green sr.\",\n        age: 72,\n        address: \"London No. 1 Lake Park\",\n        children: [\n          {\n            key: 131,\n            name: \"Jim Green\",\n            age: 42,\n            address: \"London No. 2 Lake Park\",\n            children: [\n              {\n                key: 1311,\n                name: \"Jim Green jr.\",\n                age: 25,\n                address: \"London No. 3 Lake Park\"\n              },\n              {\n                key: 1312,\n                name: \"Jimmy Green sr.\",\n                age: 18,\n                address: \"London No. 4 Lake Park\"\n              }\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    key: 2,\n    name: \"Joe Black\",\n    age: 32,\n    address: \"Sidney No. 1 Lake Park\"\n  }\n];\nexport class Demo4 extends Component {\n  render() {\n    return <Table columns={columns4} data={data4} />;\n  }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo5 />,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nconst columns5 = [\n  {\n    title: \"Full Name\",\n    width: 100,\n    dataIndex: \"name\",\n    key: \"name\",\n    fixed: \"left\"\n  },\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  }\n];\n\nexport class Demo5 extends Component {\n  render() {\n    return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;\n  }\n}\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\n\n\nconst columns6 = [\n  {\n    title: \"Full Name\",\n    width: 100,\n    dataIndex: \"name\",\n    key: \"name\"\n  },\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },{\n    key: \"11\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"12\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"13\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"14\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  }\n];\n\nexport class Demo6 extends Component {\n  render() {\n    return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;\n  }\n}","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":<Demo7 />,"title":" 主子表","code":"/**\n*\n* @title 主子表\n* @description 主表点击子表联动\n*\n*/\n\n\nconst columns7 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nconst data7 = [\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst columns7_1 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n  { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\n  { title: \"系别\", dataIndex: \"c\", key: \"c\"}\n];\n\nexport class Demo7 extends Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      children_data : []\n    }\n  }\n  rowclick = (record, index) => {\n    console.log(record)\n    console.log(index)\n    if(record.a === '令狐冲'){\n      this.setState({\n        children_data: [\n          { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\n        ]\n      })\n    }else if(record.a === '杨过'){\n      this.setState({\n        children_data: [\n          { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\n        ]\n      })\n    }else if(record.a === '郭靖'){\n      this.setState({\n        children_data: [\n          { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\n        ]\n      })\n    }\n  }\n  render() {\n    return (\n      <div>\n        <Table\n          columns={columns7_1}\n          data={data7}\n          onRowClick={this.rowclick}\n          title={currentData => <div>标题: 我是主表</div>}\n        />\n        <Table\n          columns={columns7}\n          data={this.state.children_data}\n          title={currentData => <div>标题: 我是子表</div>}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\n*/\n\nconst columns8 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nexport class Demo8 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data8: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n      ],\n      activePage: 1\n    };\n  }\n  handleSelect(eventKey) {\n    if(eventKey === 1){\n      this.setState({\n        data8: [\n          { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n          { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n          { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n        ],\n        activePage: eventKey\n      });\n    }else{\n      this.setState({\n        data8: [\n          { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\n        ],\n        activePage: eventKey\n      });\n    }\n    \n  }\n  render() {\n    return (\n      <div>\n        <Table columns={columns8} data={this.state.data8} />\n       <Pagination\n\t        \tfirst\n\t        \tlast\n\t        \tprev\n\t        \tnext\n\t        \tboundaryLinks\n\t\t        items={2}\n\t\t        maxButtons={5}\n\t\t        activePage={this.state.activePage}\n\t\t        onSelect={this.handleSelect.bind(this)} />\n      </div>\n    );\n  }\n}","desc":" 点击分页联动表格"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\n*/\n\n\nclass Search extends Component {\n  state = {\n    searchValue: \"\",\n    empty: false\n  };\n\n  /**\n   * 搜索\n   */\n  handleSearch = () => {\n    let { onSearch,handleToChange } = this.props;\n    handleToChange && handleToChange();\n    onSearch && onSearch(this.state.searchValue);\n  };\n\n  /**\n   * 捕获回车\n   * @param e\n   */\n  handleKeyDown = e => {\n    if (e.keyCode === 13) {\n      this.handleSearch();\n    }\n  };\n\n  /**\n   * 输入框改变\n   * @param e\n   */\n  handleChange = e => {\n    this.setState({\n      searchValue: e.target.value\n    });\n  };\n\n  /**\n   * 清空输入框\n   */\n  emptySearch = () => {\n    let { onEmpty } = this.props;\n    this.setState({\n      searchValue: \"\",\n      empty: false\n    });\n    onEmpty && onEmpty();\n  };\n\n  render() {\n    return (\n      <InputGroup simple className=\"search-component\">\n        <FormControl\n          onChange={this.handleChange}\n          value={this.state.searchValue}\n          onKeyDown={this.handleKeyDown}\n          type=\"text\"\n        />\n        {this.state.empty\n          ? <Icon\n              type=\"uf-close-c\"\n              onClick={this.emptySearch}\n              className=\"empty-search\"\n            />\n          : null}\n\n        <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\n          <Icon type=\"uf-search\" />\n        </InputGroup.Button>\n      </InputGroup>\n    );\n  }\n}\n\nconst columns9 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nexport class Demo9 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n      ]\n    };\n  }\n  handleSearchToTable=()=>{\n    this.setState({\n      data: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\n      ]\n    })\n  }\n  render() {\n    return (\n      <div>\n        <div className=\"clearfix\">\n          <Search handleToChange={this.handleSearchToTable}/>\n        </div>\n        <Table columns={columns9} data={this.state.data} />\n      </div>\n    );\n  }\n}\n\n","desc":" 搜索刷新表格数据"}]
+var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\n\nconst columns = [\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n  {\n    title: '操作', dataIndex: '', key: 'd', render() {\n      return <a href=\"#\">一些操作</a>;\n    },\n  },\n];\n\nconst data = [\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\n  { a: '杨过', b: '男', c: 67, key: '2' },\n  { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nexport class Demo1 extends Component {\n    render () {\n        return (\n              <Table\n              columns={columns}\n              data={data}\n              title={currentData => <div>标题: 这是一个标题</div>}\n              footer={currentData => <div>表尾: 我是小尾巴</div>}\n              />\n        )\n    }\n}\n\n","desc":""},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示\n*\n*/\n\nconst columns10 = [\n    {\n      title: \"Name\",\n      dataIndex: \"name\",\n      key: \"name\",\n      width: \"40%\"\n    },\n    {\n      title: \"Age\",\n      dataIndex: \"age\",\n      key: \"age\",\n      width: \"30%\"\n    },\n    {\n      title: \"Address\",\n      dataIndex: \"address\",\n      key: \"address\"\n    }\n  ];\n  \n  const data10 = [\n    \n  ];\n\n  const emptyFunc = () => <span>这里没有数据！</span>\n  \n  export class Demo10 extends Component {\n    render() {\n      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;\n    }\n  }\n\n","desc":" 无数据时显示效果展示"},{"example":<Demo11 />,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 列排序\n*\n*/\n\nconst columns11 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: 100\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 100\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 200,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nconst data11 = [\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps11 = {\n  prefixCls: \"bee-table\"\n};\nexport class Demo11 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      sortOrder: \"\",\n      data: data11\n    };\n  }\n  toggleSortOrder=(order, column)=> {\n    let { sortOrder, data, oldData } = this.state;\n    let ascend_sort = function(key) {\n      return function(a, b) {\n        return a.key - b.key;\n      };\n    };\n    let descend_sort = function(key) {\n      return function(a, b) {\n        return b.key - a.key;\n      };\n    };\n    if (sortOrder === order) {\n      // 切换为未排序状态\n      order = \"\";\n    }\n    if (!oldData) {\n      oldData = data.concat();\n    }\n    if (order === \"ascend\") {\n      data = data.sort(function(a, b) {\n        return column.sorter(a, b);\n      });\n    } else if (order === \"descend\") {\n      data = data.sort(function(a, b) {\n        return column.sorter(b, a);\n      });\n    } else {\n      data = oldData.concat();\n    }\n    this.setState({\n      sortOrder: order,\n      data: data,\n      oldData: oldData\n    });\n  }\n  renderColumnsDropdown(columns) {\n    const { sortOrder } = this.state;\n    const { prefixCls } = this.props;\n\n    return columns.map(originColumn => {\n      let column = Object.assign({}, originColumn);\n      let sortButton;\n      if (column.sorter) {\n        const isAscend = sortOrder === \"ascend\";\n        const isDescend = sortOrder === \"descend\";\n        sortButton = (\n          <div className={`${prefixCls}-column-sorter`}>\n            <span\n              className={`${prefixCls}-column-sorter-up ${isAscend\n                ? \"on\"\n                : \"off\"}`}\n              title=\"↑\"\n              onClick={() => this.toggleSortOrder(\"ascend\", column)}\n            >\n              <Icon type=\"uf-triangle-up\" />\n            </span>\n            <span\n              className={`${prefixCls}-column-sorter-down ${isDescend\n                ? \"on\"\n                : \"off\"}`}\n              title=\"↓\"\n              onClick={() => this.toggleSortOrder(\"descend\", column)}\n            >\n              <Icon type=\"uf-triangle-down\" />\n            </span>\n          </div>\n        );\n      }\n      column.title = (\n        <span>\n          {column.title}\n          {sortButton}\n        </span>\n      );\n      return column;\n    });\n  }\n  render() {\n    let columns = this.renderColumnsDropdown(columns11);\n    return <Table columns={columns} data={this.state.data} />;\n  }\n}\nDemo11.defaultProps = defaultProps11;","desc":" 列排序"},{"example":<Demo12 />,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 全选功能\n*\n*/\n\nconst columns12 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: 100\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 100\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 200,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nconst data12 = [\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst defaultProps12 = {\n  prefixCls: \"bee-table\",\n  multiSelect: {\n    type: \"checkbox\",\n    param: \"key\"\n  }\n};\nexport class Demo12 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      checkedAll:false,\n      checkedArray: [\n        false,\n        false,\n        false,\n      ],\n      data: data12\n    };\n  }\n  onAllCheckChange = () => {\n    let self = this;\n    let checkedArray = [];\n    let listData = self.state.data.concat();\n    let selIds = [];\n    // let id = self.props.multiSelect.param;\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\n      checkedArray[i] = !self.state.checkedAll;\n    }\n    // if (self.state.checkedAll) {\n    //   selIds = [];\n    // } else {\n    //   for (var i = 0; i < listData.length; i++) {\n    //     selIds[i] = listData[i][id];\n    //   }\n    // }\n    self.setState({\n      checkedAll: !self.state.checkedAll,\n      checkedArray: checkedArray,\n      // selIds: selIds\n    });\n    // self.props.onSelIds(selIds);\n  };\n  onCheckboxChange = (text, record, index) => {\n    let self = this;\n    let allFlag = false;\n    // let selIds = self.state.selIds;\n    // let id = self.props.postId;\n    let checkedArray = self.state.checkedArray.concat();\n    // if (self.state.checkedArray[index]) {\n      // selIds.remove(record[id]);\n    // } else {\n      // selIds.push(record[id]);\n    // }\n    debugger;\n    checkedArray[index] = !self.state.checkedArray[index];\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\n      if (!checkedArray[i]) {\n        allFlag = false;\n        break;\n      } else {\n        allFlag = true;\n      }\n    }\n    self.setState({\n      checkedAll: allFlag,\n      checkedArray: checkedArray,\n      // selIds: selIds\n    });\n    // self.props.onSelIds(selIds);\n  };\n  renderColumnsMultiSelect(columns) {\n    // const { data,checkedArray } = this.state;\n    const { multiSelect } = this.props;\n    let select_column = {};\n    // let indeterminate_bool = false;\n    // let indeterminate_bool1 = true;\n    if (multiSelect && multiSelect.type === \"checkbox\") {\n      // let i = checkedArray.length;\n      // while(i--){\n      //     if(checkedArray[i]){\n      //       indeterminate_bool = true;\n      //       break;\n      //     }\n      // }\n      let defaultColumns = [\n        {\n          title: (\n            <Checkbox\n              className=\"table-checkbox\"\n              checked={this.state.checkedAll}\n              \n              onHandleChange={this.onAllCheckChange}\n            />\n          ),\n          key: \"checkbox\",\n          dataIndex: \"checkbox\",\n          width: \"5%\",\n          render: (text, record, index) => {\n            return (\n              <Checkbox\n                className=\"table-checkbox\"\n                checked={this.state.checkedArray[index]}\n                onHandleChange={this.onCheckboxChange.bind(this, text, record, index)}\n              />\n            );\n          }\n        }\n      ];\n      columns = defaultColumns.concat(columns);\n    }\n    return columns;\n  }\n  render() {\n    let columns = this.renderColumnsMultiSelect(columns12);\n    return <Table columns={columns} data={data12} />;\n  }\n}\nDemo12.defaultProps = defaultProps12;\n","desc":" 全选功能"},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\n\nclass EditableCell extends React.Component {\n  state = {\n    value: this.props.value,\n    editable: false,\n  }\n  handleChange = (e) => {\n    const value = e.target.value;\n    this.setState({ value });\n  }\n  check = () => {\n    this.setState({ editable: false });\n    if (this.props.onChange) {\n      this.props.onChange(this.state.value);\n    }\n  }\n  edit = () => {\n    this.setState({ editable: true });\n  }\n  handleKeydown = (event) => {\n      console.log(event.keyCode);\n      if(event.keyCode == 13){\n          this.check();\n      }\n\n  }\n  render() {\n    const { value, editable } = this.state;\n    return (<div className=\"editable-cell\">\n      {\n        editable ?\n        <div className=\"editable-cell-input-wrapper\">\n          <Input\n            value={value}\n            onChange={this.handleChange}\n            onKeyDown = {this.handleKeydown}\n          />\n          <Icon\n            type=\"uf-correct\"\n            className=\"editable-cell-icon-check\"\n            onClick={this.check}\n          />\n        </div>\n        :\n        <div className=\"editable-cell-text-wrapper\">\n          {value || ' '}\n          <Icon\n            type=\"uf-pencil\"\n            className=\"editable-cell-icon\"\n            onClick={this.edit}\n          />\n        </div>\n      }\n    </div>);\n  }\n}\n\nexport class Demo2 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.columns = [{\n      title: '姓名',\n      dataIndex: 'name',\n      key:'name',\n      width: '30%',\n      render: (text, record, index) => (\n        <EditableCell\n          value={text}\n          onChange={this.onCellChange(index, 'name')}\n        />\n      ),\n    }, {\n      title: '年龄',\n      dataIndex: 'age',\n       key:'age',\n    }, {\n      title: '你懂的',\n      dataIndex: 'address',\n       key:'address',\n    }, {\n      title: '操作',\n      dataIndex: 'operation',\n      key: 'operation',\n      render: (text, record, index) => {\n        return (\n          this.state.dataSource.length > 1 ?\n          (\n            <Popconfirm content=\"确认删除?\" id='aa' onClose={this.onDelete(index)}>\n              <Icon type=\"uf-del\"></Icon>\n            </Popconfirm>\n          ) : null\n        );\n      },\n    }];\n\n    this.state = {\n      dataSource: [{\n        key: '0',\n        name: '沉鱼',\n        age: '18',\n        address: '96, 77, 89',\n      }, {\n        key: '1',\n        name: '落雁',\n        age: '16',\n        address: '90, 70, 80',\n      }, {\n        key: '2',\n        name: '闭月',\n        age: '17',\n        address: '80, 60, 80',\n      }, {\n        key: '3',\n        name: '羞花',\n        age: '20',\n        address: '120, 60, 90',\n      }],\n      count: 4,\n    };\n  }\n  onCellChange = (index, key) => {\n    return (value) => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  }\n  onDelete = (index) => {\n    return () => {\n      const dataSource = [...this.state.dataSource];\n      dataSource.splice(index, 1);\n      this.setState({ dataSource });\n    };\n  }\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData = {\n      key: count,\n      name: `凤姐 ${count}`,\n      age: 32,\n      address: `100 100 100`,\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1,\n    });\n  }\n\n  getBodyWrapper = (body) => {\n    return (\n      <Animate transitionName=\"move\" component=\"tbody\" className={body.props.className}>\n        {body.props.children}\n      </Animate>\n    );\n  }\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (<div>\n      <Button className=\"editable-add-btn\" type=\"ghost\" onClick={this.handleAdd}>添加</Button>\n      <Table bordered data={dataSource} columns={columns} getBodyWrapper={this.getBodyWrapper} />\n    </div>);\n  }\n}\n\n\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo3 />,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n  { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nexport class Demo3 extends Component {\n    render () {\n        return (\n\n  <Table data={data3}>\n    <ColumnGroup title=\"地址\">\n      <Column\n        title=\"省\"\n        dataIndex=\"a\"\n        key=\"a\"\n        width={100}\n      />\n      <Column\n        id=\"123\"\n        title=\"市\"\n        dataIndex=\"b\"\n        key=\"b\"\n        width={100}\n      />\n    </ColumnGroup>\n    <Column\n      title=\"数量\"\n      dataIndex=\"c\"\n      key=\"c\"\n      width={200}\n    />\n    <Column\n      title=\"操作\"\n      dataIndex=\"\"\n      key=\"d\"\n      render={(text, record, index) => {\n        return (\n            <Button size=\"sm\" colors=\"info\" style={{ minWidth: 50 }}>增加</Button>\n        );\n      }}\n    />\n  </Table>\n        )\n    }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nconst columns4 = [\n  {\n    title: \"Name\",\n    dataIndex: \"name\",\n    key: \"name\",\n    width: \"40%\"\n  },\n  {\n    title: \"Age\",\n    dataIndex: \"age\",\n    key: \"age\",\n    width: \"30%\"\n  },\n  {\n    title: \"Address\",\n    dataIndex: \"address\",\n    key: \"address\"\n  }\n];\n\nconst data4 = [\n  {\n    key: 1,\n    name: \"John Brown sr.\",\n    age: 60,\n    address: \"New York No. 1 Lake Park\",\n    children: [\n      {\n        key: 11,\n        name: \"John Brown\",\n        age: 42,\n        address: \"New York No. 2 Lake Park\"\n      },\n      {\n        key: 12,\n        name: \"John Brown jr.\",\n        age: 30,\n        address: \"New York No. 3 Lake Park\",\n        children: [\n          {\n            key: 121,\n            name: \"Jimmy Brown\",\n            age: 16,\n            address: \"New York No. 3 Lake Park\"\n          }\n        ]\n      },\n      {\n        key: 13,\n        name: \"Jim Green sr.\",\n        age: 72,\n        address: \"London No. 1 Lake Park\",\n        children: [\n          {\n            key: 131,\n            name: \"Jim Green\",\n            age: 42,\n            address: \"London No. 2 Lake Park\",\n            children: [\n              {\n                key: 1311,\n                name: \"Jim Green jr.\",\n                age: 25,\n                address: \"London No. 3 Lake Park\"\n              },\n              {\n                key: 1312,\n                name: \"Jimmy Green sr.\",\n                age: 18,\n                address: \"London No. 4 Lake Park\"\n              }\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    key: 2,\n    name: \"Joe Black\",\n    age: 32,\n    address: \"Sidney No. 1 Lake Park\"\n  }\n];\nexport class Demo4 extends Component {\n  render() {\n    return <Table columns={columns4} data={data4} />;\n  }\n}\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo5 />,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nconst columns5 = [\n  {\n    title: \"Full Name\",\n    width: 100,\n    dataIndex: \"name\",\n    key: \"name\",\n    fixed: \"left\"\n  },\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  }\n];\n\nexport class Demo5 extends Component {\n  render() {\n    return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;\n  }\n}\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\n*\n*/\n\n\n\nconst columns6 = [\n  {\n    title: \"Full Name\",\n    width: 100,\n    dataIndex: \"name\",\n    key: \"name\"\n  },\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },{\n    key: \"11\",\n    name: \"John Brown\",\n    age: 32,\n    address: \"New York Park\"\n  },\n  {\n    key: \"12\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"13\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  },\n  {\n    key: \"14\",\n    name: \"Jim Green\",\n    age: 40,\n    address: \"London Park\"\n  }\n];\n\nexport class Demo6 extends Component {\n  render() {\n    return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;\n  }\n}","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":<Demo7 />,"title":" 主子表","code":"/**\n*\n* @title 主子表\n* @description 主表点击子表联动\n*\n*/\n\n\nconst columns7 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nconst data7 = [\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nconst columns7_1 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\n  { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\n  { title: \"系别\", dataIndex: \"c\", key: \"c\"}\n];\n\nexport class Demo7 extends Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      children_data : []\n    }\n  }\n  rowclick = (record, index) => {\n    console.log(record)\n    console.log(index)\n    if(record.a === '令狐冲'){\n      this.setState({\n        children_data: [\n          { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\n        ]\n      })\n    }else if(record.a === '杨过'){\n      this.setState({\n        children_data: [\n          { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\n        ]\n      })\n    }else if(record.a === '郭靖'){\n      this.setState({\n        children_data: [\n          { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\n        ]\n      })\n    }\n  }\n  render() {\n    return (\n      <div>\n        <Table\n          columns={columns7_1}\n          data={data7}\n          onRowClick={this.rowclick}\n          title={currentData => <div>标题: 我是主表</div>}\n        />\n        <Table\n          columns={columns7}\n          data={this.state.children_data}\n          title={currentData => <div>标题: 我是子表</div>}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\n*\n* @title 表格+分页\n* @description 点击分页联动表格\n*\n*/\n\nconst columns8 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nexport class Demo8 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data8: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n      ],\n      activePage: 1\n    };\n  }\n  handleSelect(eventKey) {\n    if(eventKey === 1){\n      this.setState({\n        data8: [\n          { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n          { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n          { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n        ],\n        activePage: eventKey\n      });\n    }else{\n      this.setState({\n        data8: [\n          { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\n        ],\n        activePage: eventKey\n      });\n    }\n    \n  }\n  render() {\n    return (\n      <div>\n        <Table columns={columns8} data={this.state.data8} />\n       <Pagination\n\t        \tfirst\n\t        \tlast\n\t        \tprev\n\t        \tnext\n\t        \tboundaryLinks\n\t\t        items={2}\n\t\t        maxButtons={5}\n\t\t        activePage={this.state.activePage}\n\t\t        onSelect={this.handleSelect.bind(this)} />\n      </div>\n    );\n  }\n}","desc":" 点击分页联动表格"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\n*\n* @title 表格+搜索\n* @description 搜索刷新表格数据\n*\n*/\n\n\nclass Search extends Component {\n  state = {\n    searchValue: \"\",\n    empty: false\n  };\n\n  /**\n   * 搜索\n   */\n  handleSearch = () => {\n    let { onSearch,handleToChange } = this.props;\n    handleToChange && handleToChange();\n    onSearch && onSearch(this.state.searchValue);\n  };\n\n  /**\n   * 捕获回车\n   * @param e\n   */\n  handleKeyDown = e => {\n    if (e.keyCode === 13) {\n      this.handleSearch();\n    }\n  };\n\n  /**\n   * 输入框改变\n   * @param e\n   */\n  handleChange = e => {\n    this.setState({\n      searchValue: e.target.value\n    });\n  };\n\n  /**\n   * 清空输入框\n   */\n  emptySearch = () => {\n    let { onEmpty } = this.props;\n    this.setState({\n      searchValue: \"\",\n      empty: false\n    });\n    onEmpty && onEmpty();\n  };\n\n  render() {\n    return (\n      <InputGroup simple className=\"search-component\">\n        <FormControl\n          onChange={this.handleChange}\n          value={this.state.searchValue}\n          onKeyDown={this.handleKeyDown}\n          type=\"text\"\n        />\n        {this.state.empty\n          ? <Icon\n              type=\"uf-close-c\"\n              onClick={this.emptySearch}\n              className=\"empty-search\"\n            />\n          : null}\n\n        <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\n          <Icon type=\"uf-search\" />\n        </InputGroup.Button>\n      </InputGroup>\n    );\n  }\n}\n\nconst columns9 = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  {\n    title: \"操作\",\n    dataIndex: \"\",\n    key: \"d\",\n    render() {\n      return <a href=\"#\">一些操作</a>;\n    }\n  }\n];\n\nexport class Demo9 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n      ]\n    };\n  }\n  handleSearchToTable=()=>{\n    this.setState({\n      data: [\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\n      ]\n    })\n  }\n  render() {\n    return (\n      <div>\n        <div className=\"clearfix\">\n          <Search handleToChange={this.handleSearchToTable}/>\n        </div>\n        <Table columns={columns9} data={this.state.data} />\n      </div>\n    );\n  }\n}\n\n","desc":" 搜索刷新表格数据"}]
 
 
 class Demo extends Component {
diff --git a/package.json b/package.json
index 09946e2..0aacec8 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "devDependencies": {
     "bee-animate": "latest",
     "bee-button": "latest",
+    "bee-checkbox": "^0.2.2",
     "bee-form-control": "^0.1.8",
     "bee-icon": "0.0.5",
     "bee-input-group": "^0.1.12",