From 4049bc0ea74fab1decb83cd154781f40be83f312 Mon Sep 17 00:00:00 2001
From: zhanghy7 <zhanghy7@yonyou.com>
Date: Wed, 27 Sep 2017 10:59:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=90=88=E8=AE=A1=E7=9A=84?=
 =?UTF-8?q?=E9=AB=98=E9=98=B6=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E5=8A=A0=E5=88=B0demo13?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/lib/sum.js        | 84 +++++++++++++++++++++++++++++++++++++++++
 demo/demolist/Demo13.js |  7 ++--
 demo/index.js           |  2 +-
 src/lib/sum.js          | 57 ++++++++++++++++++++++++++++
 4 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 build/lib/sum.js
 create mode 100644 src/lib/sum.js

diff --git a/build/lib/sum.js b/build/lib/sum.js
new file mode 100644
index 0000000..8b51f1f
--- /dev/null
+++ b/build/lib/sum.js
@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _src = require('../../src');
+
+var _src2 = _interopRequireDefault(_src);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+exports["default"] = Sum = function Sum(Table) {
+    var SumTable = function (_React$Component) {
+        _inherits(SumTable, _React$Component);
+
+        function SumTable(props) {
+            var _temp, _this;
+
+            _classCallCheck(this, SumTable);
+
+            (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call(this, props)), _this), _this.currentData = function (testTitle) {
+                return _react2["default"].createElement(
+                    'div',
+                    null,
+                    testTitle
+                );
+            }, _this.currentData2 = function () {
+                data_2 = _this.state.data;
+                var obj = {};
+                if (data.isArray()) {
+                    for (var i = 0; i < data_2.length; i++) {
+                        for (var item in data[i]) {
+                            if (obj[item] === 'undefined') {
+                                obj[item] = data[i][item];
+                            } else if (typeof data[i][item] == 'Number') {
+                                obj[item] += data[i][item];
+                            }
+                        }
+                    }
+                }
+                return _react2["default"].createElement(Table, {
+                    showHeader: false,
+                    columns: _this.props.columns,
+                    data: obj,
+                    heji: true
+                });
+            }, _temp), _this.state = {
+                data: _this.props.data
+            };
+            return _this;
+        }
+
+        SumTable.prototype.render = function render() {
+            var a = this.currentData;
+            var b = this.currentData2;
+            return _react2["default"].createElement(Table, {
+                columns: this.props.columns,
+                data: this.state.data,
+                heji: true,
+                title: a,
+                footer: b
+            });
+        };
+
+        return SumTable;
+    }(_react2["default"].Component);
+
+    return SumTable;
+};
+
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/demo/demolist/Demo13.js b/demo/demolist/Demo13.js
index e391f62..2106b4e 100644
--- a/demo/demolist/Demo13.js
+++ b/demo/demolist/Demo13.js
@@ -1,7 +1,7 @@
 /**
 *
-* @title 列排序、全选功能
-* @description 列排序、全选功能
+* @title 列排序、全选功能、合计
+* @description 列排序、全选功能、合计
 *
 */
 
@@ -10,6 +10,7 @@ import Table from "../../src";
 import Checkbox from "bee-checkbox";
 import multiSelect from "../../src/lib/multiSelect.js";
 import sort from "../../src/lib/sort.js";
+import Sum from "../../src/lib/sum.js";
 
 const columns13 = [
   {
@@ -55,7 +56,7 @@ class Demo13 extends Component {
       type: "checkbox",
       param: "key"
     };
-    let ComplexTable = multiSelect(sort(Table));
+    let ComplexTable = multiSelect(Sum(sort(Table)));
     return (
       <div>
         <ComplexTable
diff --git a/demo/index.js b/demo/index.js
index c44afb4..2e01d5e 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
 const CARETUP = <i className="uf uf-arrow-up"></i>;
 
 
-var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\r\n*\r\n* @title 简单表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns = [\r\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\r\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\r\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\r\n  {\r\n    title: '操作', dataIndex: '', key: 'd', render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    },\r\n  },\r\n];\r\n\r\nconst data = [\r\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\r\n  { a: '杨过', b: '男', c: 67, key: '2' },\r\n  { a: '郭靖', b: '男', c: 25, key: '3' },\r\n];\r\n\r\nclass Demo1 extends Component {\r\n    render () {\r\n        return (\r\n              <Table\r\n              columns={columns}\r\n              data={data}\r\n              title={currentData => <div>标题: 这是一个标题</div>}\r\n              footer={currentData => <div>表尾: 我是小尾巴</div>}\r\n              />\r\n        )\r\n    }\r\n}\r\n\r\n\r\n\r\n","desc":""},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\r\n*\r\n* @title 无数据时显示\r\n* @description 无数据时显示效果展示\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns10 = [\r\n    {\r\n      title: \"Name\",\r\n      dataIndex: \"name\",\r\n      key: \"name\",\r\n      width: \"40%\"\r\n    },\r\n    {\r\n      title: \"Age\",\r\n      dataIndex: \"age\",\r\n      key: \"age\",\r\n      width: \"30%\"\r\n    },\r\n    {\r\n      title: \"Address\",\r\n      dataIndex: \"address\",\r\n      key: \"address\"\r\n    }\r\n  ];\r\n  \r\n  const data10 = [\r\n    \r\n  ];\r\n\r\n  const emptyFunc = () => <span>这里没有数据！</span>\r\n  \r\n  class Demo10 extends Component {\r\n    render() {\r\n      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;\r\n    }\r\n  }\r\n\r\n","desc":" 无数据时显示效果展示"},{"example":<Demo11 />,"title":" 列排序","code":"/**\r\n*\r\n* @title 列排序\r\n* @description 列排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\n\r\nconst columns11 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data11 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps11 = {\r\n  prefixCls: \"bee-table\"\r\n};\r\nclass Demo11 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      sortOrder: \"\",\r\n      data: data11\r\n    };\r\n  }\r\n  toggleSortOrder=(order, column)=> {\r\n    let { sortOrder, data, oldData } = this.state;\r\n    let ascend_sort = function(key) {\r\n      return function(a, b) {\r\n        return a.key - b.key;\r\n      };\r\n    };\r\n    let descend_sort = function(key) {\r\n      return function(a, b) {\r\n        return b.key - a.key;\r\n      };\r\n    };\r\n    if (sortOrder === order) {\r\n      // 切换为未排序状态\r\n      order = \"\";\r\n    }\r\n    if (!oldData) {\r\n      oldData = data.concat();\r\n    }\r\n    if (order === \"ascend\") {\r\n      data = data.sort(function(a, b) {\r\n        return column.sorter(a, b);\r\n      });\r\n    } else if (order === \"descend\") {\r\n      data = data.sort(function(a, b) {\r\n        return column.sorter(b, a);\r\n      });\r\n    } else {\r\n      data = oldData.concat();\r\n    }\r\n    this.setState({\r\n      sortOrder: order,\r\n      data: data,\r\n      oldData: oldData\r\n    });\r\n  }\r\n  renderColumnsDropdown(columns) {\r\n    const { sortOrder } = this.state;\r\n    const { prefixCls } = this.props;\r\n\r\n    return columns.map(originColumn => {\r\n      let column = Object.assign({}, originColumn);\r\n      let sortButton;\r\n      if (column.sorter) {\r\n        const isAscend = sortOrder === \"ascend\";\r\n        const isDescend = sortOrder === \"descend\";\r\n        sortButton = (\r\n          <div className={`${prefixCls}-column-sorter`}>\r\n            <span\r\n              className={`${prefixCls}-column-sorter-up ${isAscend\r\n                ? \"on\"\r\n                : \"off\"}`}\r\n              title=\"↑\"\r\n              onClick={() => this.toggleSortOrder(\"ascend\", column)}\r\n            >\r\n              <Icon type=\"uf-triangle-up\" />\r\n            </span>\r\n            <span\r\n              className={`${prefixCls}-column-sorter-down ${isDescend\r\n                ? \"on\"\r\n                : \"off\"}`}\r\n              title=\"↓\"\r\n              onClick={() => this.toggleSortOrder(\"descend\", column)}\r\n            >\r\n              <Icon type=\"uf-triangle-down\" />\r\n            </span>\r\n          </div>\r\n        );\r\n      }\r\n      column.title = (\r\n        <span>\r\n          {column.title}\r\n          {sortButton}\r\n        </span>\r\n      );\r\n      return column;\r\n    });\r\n  }\r\n  render() {\r\n    let columns = this.renderColumnsDropdown(columns11);\r\n    return <Table columns={columns} data={this.state.data} />;\r\n  }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" 列排序"},{"example":<Demo12 />,"title":" 全选功能","code":"/**\r\n*\r\n* @title 全选功能\r\n* @description 全选功能\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Checkbox from \"bee-checkbox\";\r\n\r\nconst columns12 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data12 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps12 = {\r\n  prefixCls: \"bee-table\",\r\n  multiSelect: {\r\n    type: \"checkbox\",\r\n    param: \"key\"\r\n  }\r\n};\r\nclass Demo12 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      checkedAll:false,\r\n      checkedArray: [\r\n        false,\r\n        false,\r\n        false,\r\n      ],\r\n      data: data12\r\n    };\r\n  }\r\n  onAllCheckChange = () => {\r\n    let self = this;\r\n    let checkedArray = [];\r\n    let listData = self.state.data.concat();\r\n    let selIds = [];\r\n    // let id = self.props.multiSelect.param;\r\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n      checkedArray[i] = !self.state.checkedAll;\r\n    }\r\n    // if (self.state.checkedAll) {\r\n    //   selIds = [];\r\n    // } else {\r\n    //   for (var i = 0; i < listData.length; i++) {\r\n    //     selIds[i] = listData[i][id];\r\n    //   }\r\n    // }\r\n    self.setState({\r\n      checkedAll: !self.state.checkedAll,\r\n      checkedArray: checkedArray,\r\n      // selIds: selIds\r\n    });\r\n    // self.props.onSelIds(selIds);\r\n  };\r\n  onCheckboxChange = (text, record, index) => {\r\n    let self = this;\r\n    let allFlag = false;\r\n    // let selIds = self.state.selIds;\r\n    // let id = self.props.postId;\r\n    let checkedArray = self.state.checkedArray.concat();\r\n    // if (self.state.checkedArray[index]) {\r\n      // selIds.remove(record[id]);\r\n    // } else {\r\n      // selIds.push(record[id]);\r\n    // }\r\n    checkedArray[index] = !self.state.checkedArray[index];\r\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n      if (!checkedArray[i]) {\r\n        allFlag = false;\r\n        break;\r\n      } else {\r\n        allFlag = true;\r\n      }\r\n    }\r\n    self.setState({\r\n      checkedAll: allFlag,\r\n      checkedArray: checkedArray,\r\n      // selIds: selIds\r\n    });\r\n    // self.props.onSelIds(selIds);\r\n  };\r\n  renderColumnsMultiSelect(columns) {\r\n    const { data,checkedArray } = this.state;\r\n    const { multiSelect } = this.props;\r\n    let select_column = {};\r\n    let indeterminate_bool = false;\r\n    // let indeterminate_bool1 = true;\r\n    if (multiSelect && multiSelect.type === \"checkbox\") {\r\n      let i = checkedArray.length;\r\n      while(i--){\r\n          if(checkedArray[i]){\r\n            indeterminate_bool = true;\r\n            break;\r\n          }\r\n      }\r\n      let defaultColumns = [\r\n        {\r\n          title: (\r\n            <Checkbox\r\n              className=\"table-checkbox\"\r\n              checked={this.state.checkedAll}\r\n              indeterminate={indeterminate_bool&&!this.state.checkedAll}\r\n              onChange={this.onAllCheckChange}\r\n            />\r\n          ),\r\n          key: \"checkbox\",\r\n          dataIndex: \"checkbox\",\r\n          width: \"5%\",\r\n          render: (text, record, index) => {\r\n            return (\r\n              <Checkbox\r\n                className=\"table-checkbox\"\r\n                checked={this.state.checkedArray[index]}\r\n                onChange={this.onCheckboxChange.bind(this, text, record, index)}\r\n              />\r\n            );\r\n          }\r\n        }\r\n      ];\r\n      columns = defaultColumns.concat(columns);\r\n    }\r\n    return columns;\r\n  }\r\n  render() {\r\n    let columns = this.renderColumnsMultiSelect(columns12);\r\n    return <Table columns={columns} data={data12} />;\r\n  }\r\n}\r\nDemo12.defaultProps = defaultProps12;\r\n\r\n","desc":" 全选功能"},{"example":<Demo13 />,"title":" 列排序、全选功能","code":"/**\r\n*\r\n* @title 列排序、全选功能\r\n* @description 列排序、全选功能\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport multiSelect from \"../../src/lib/multiSelect.js\";\r\nimport sort from \"../../src/lib/sort.js\";\r\n\r\nconst columns13 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data13 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\nclass Demo13 extends Component {\r\n  getSelectedDataFunc = (data) =>{\r\n    console.log(data)\r\n  }\r\n  render() {\r\n    let multiObj = {\r\n      type: \"checkbox\",\r\n      param: \"key\"\r\n    };\r\n    let ComplexTable = multiSelect(sort(Table));\r\n    return (\r\n      <div>\r\n        <ComplexTable\r\n          columns={columns13}\r\n          data={data13}\r\n          multiSelect={multiObj}\r\n          getSelectedDataFunc={this.getSelectedDataFunc}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 列排序、全选功能"},{"example":<Demo14 />,"title":" 合计表格","code":"/**\r\n*\r\n* @title 合计表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\n\r\nconst columns14 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    heji: true,\r\n    render(data) {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"d\",\r\n    key: \"d\",\r\n    render(data) {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\nconst columns14_ = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    heji: true\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"d\",\r\n    key: \"d\"\r\n  }\r\n];\r\n\r\nconst data14 = [\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n  { a: \"合计\", d: \"11\", key: \"31\" }\r\n];\r\n\r\nconst data14_ = [\r\n  { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n];\r\n\r\nclass Demo14 extends Component {\r\n  render() {\r\n    return (\r\n      <Table\r\n        columns={columns14}\r\n        data={data14}\r\n        heji={true}\r\n        title={currentData => <div>标题: 这是一个标题</div>}\r\n        footer={currentData => (\r\n          <Table\r\n            showHeader={false}\r\n            columns={columns14_}\r\n            data={data14_}\r\n            heji={true}\r\n          />\r\n        )}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo15 />,"title":" edittype表格","code":"/**\r\n*\r\n* @title edittype表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport Select from 'bee-select';\r\nimport Popconfirm from \"bee-popconfirm\";\r\nimport InputRender from \"../../src/render/InputRender.js\";\r\n\r\n//日期控件引入\r\nimport DatePicker from 'bee-datepicker';\r\nimport MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';\r\n\r\nconst format = 'YYYY-MM-DD';\r\nconst format2 = 'YYYY-MM';\r\n\r\nconst dateInputPlaceholder = '选择日期';\r\nconst dateInputPlaceholder2 = '选择年月';\r\n\r\nclass Demo15 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      dataSource: [\r\n        {\r\n          key: \"0\",\r\n          name: \"沉鱼\",\r\n          age: \"y\",\r\n          address: \"96, 77, 89\"\r\n        },\r\n        {\r\n          key: \"1\",\r\n          name: \"落雁\",\r\n          age: \"y\",\r\n          address: \"90, 70, 80\"\r\n        },\r\n        {\r\n          key: \"2\",\r\n          name: \"闭月\",\r\n          age: \"n\",\r\n          address: \"80, 60, 80\"\r\n        },\r\n        {\r\n          key: \"3\",\r\n          name: \"羞花\",\r\n          age: \"y\",\r\n          address: \"120, 60, 90\"\r\n        }\r\n      ],\r\n      count: 4\r\n    };\r\n    this.columns = [\r\n      {\r\n        title: \"姓名\",\r\n        dataIndex: \"name\",\r\n        key: \"name\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => (\r\n          <InputRender\r\n            value={text}\r\n            isclickTrigger={true}\r\n            onChange={this.onCellChange(index, \"name\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"年龄\",\r\n        dataIndex: \"age\",\r\n        key: \"age\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => (\r\n          <Checkbox\r\n            checked={record.age}\r\n            onChange={this.onCheckChange(index, \"age\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"你懂的\",\r\n        dataIndex: \"address\",\r\n        key: \"address\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => {\r\n          return (\r\n            <Select\r\n              defaultValue=\"lucy\"\r\n              style={{ width: 100, marginRight: 6 }}\r\n              onChange={this.handleChange}\r\n            >\r\n              <Option value=\"jack\">boyuzhou</Option>\r\n              <Option value=\"lucy\">renhualiu</Option>\r\n              <Option value=\"disabled\" disabled>\r\n                Disabled\r\n              </Option>\r\n              <Option value=\"yiminghe\">yuzhao</Option>\r\n            </Select>\r\n          );\r\n        }\r\n      },\r\n      { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n           <DatePicker\r\n              format={format}\r\n            \r\n              onSelect={this.onSelect}\r\n    \r\n              onChange={this.onChange}\r\n    \r\n              placeholder = {dateInputPlaceholder}>\r\n              </DatePicker>\r\n         ) \r\n        }\r\n      },\r\n      { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n           <MonthPicker\r\n              format={format2}\r\n            \r\n              onSelect={this.onSelect}\r\n    \r\n              onChange={this.onChange}\r\n    \r\n              placeholder = {dateInputPlaceholder2}>\r\n              </MonthPicker>\r\n         ) \r\n        }\r\n      },\r\n      { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n          <WeekPicker placeholder=\"选择周\"/>\r\n         ) \r\n        }\r\n      },\r\n      { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n          <RangePicker\r\n          \r\n              format={format}\r\n\r\n              onSelect={this.onSelect}\r\n\r\n              onChange={this.onChange}\r\n\r\n              placeholder={'选择年月'}\r\n\r\n          />\r\n         ) \r\n        }\r\n      }\r\n      \r\n    ];\r\n  }\r\n  handleChange = value => {\r\n    console.log(`selected ${value}`);\r\n  };\r\n  onCheckChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onCellChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onDelete = index => {\r\n    return () => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource.splice(index, 1);\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  handleAdd = () => {\r\n    const { count, dataSource } = this.state;\r\n    const newData = {\r\n      key: count,\r\n      name: `凤姐 ${count}`,\r\n      age: 32,\r\n      address: `100 100 100`\r\n    };\r\n    this.setState({\r\n      dataSource: [...dataSource, newData],\r\n      count: count + 1\r\n    });\r\n  };\r\n\r\n  getBodyWrapper = body => {\r\n    return (\r\n      <Animate\r\n        transitionName=\"move\"\r\n        component=\"tbody\"\r\n        className={body.props.className}\r\n      >\r\n        {body.props.children}\r\n      </Animate>\r\n    );\r\n  };\r\n  \r\n  onSelect = (d) =>{\r\n      console.log(d)\r\n  };\r\n\r\n  onChange = (d) => {\r\n      console.log(d)\r\n  };\r\n\r\n  render() {\r\n    const { dataSource } = this.state;\r\n    const columns = this.columns;\r\n    return (\r\n      <div>\r\n        <Button\r\n          className=\"editable-add-btn\"\r\n          type=\"ghost\"\r\n          onClick={this.handleAdd}\r\n        >\r\n          添加\r\n        </Button>\r\n        <Table\r\n          bordered\r\n          data={dataSource}\r\n          columns={columns}\r\n          getBodyWrapper={this.getBodyWrapper}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\r\n*\r\n* @title 增删改表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\n\r\nclass EditableCell extends React.Component {\r\n  state = {\r\n    value: this.props.value,\r\n    editable: false\r\n  };\r\n  handleChange = e => {\r\n    const value = e.target.value;\r\n    this.setState({ value });\r\n  };\r\n  check = () => {\r\n    this.setState({ editable: false });\r\n    if (this.props.onChange) {\r\n      this.props.onChange(this.state.value);\r\n    }\r\n  };\r\n  edit = () => {\r\n    this.setState({ editable: true });\r\n  };\r\n  handleKeydown = event => {\r\n    console.log(event.keyCode);\r\n    if (event.keyCode == 13) {\r\n      this.check();\r\n    }\r\n  };\r\n  render() {\r\n    const { value, editable } = this.state;\r\n    return (\r\n      <div className=\"editable-cell\">\r\n        {editable ? (\r\n          <div className=\"editable-cell-input-wrapper\">\r\n            <Input\r\n              value={value}\r\n              onChange={this.handleChange}\r\n              onKeyDown={this.handleKeydown}\r\n            />\r\n            <Icon\r\n              type=\"uf-correct\"\r\n              className=\"editable-cell-icon-check\"\r\n              onClick={this.check}\r\n            />\r\n          </div>\r\n        ) : (\r\n          <div className=\"editable-cell-text-wrapper\">\r\n            {value || \" \"}\r\n            <Icon\r\n              type=\"uf-pencil\"\r\n              className=\"editable-cell-icon\"\r\n              onClick={this.edit}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.columns = [\r\n      {\r\n        title: \"姓名\",\r\n        dataIndex: \"name\",\r\n        key: \"name\",\r\n        width: \"30%\",\r\n        render: (text, record, index) => (\r\n          <EditableCell\r\n            value={text}\r\n            onChange={this.onCellChange(index, \"name\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"年龄\",\r\n        dataIndex: \"age\",\r\n        key: \"age\"\r\n      },\r\n      {\r\n        title: \"你懂的\",\r\n        dataIndex: \"address\",\r\n        key: \"address\"\r\n      },\r\n      {\r\n        title: \"操作\",\r\n        dataIndex: \"operation\",\r\n        key: \"operation\",\r\n        render: (text, record, index) => {\r\n          return this.state.dataSource.length > 1 ? (\r\n            <Popconfirm content=\"确认删除?\" id=\"aa\" onClose={this.onDelete(index)}>\r\n              <Icon type=\"uf-del\" />\r\n            </Popconfirm>\r\n          ) : null;\r\n        }\r\n      }\r\n    ];\r\n\r\n    this.state = {\r\n      dataSource: [\r\n        {\r\n          key: \"0\",\r\n          name: \"沉鱼\",\r\n          age: \"18\",\r\n          address: \"96, 77, 89\"\r\n        },\r\n        {\r\n          key: \"1\",\r\n          name: \"落雁\",\r\n          age: \"16\",\r\n          address: \"90, 70, 80\"\r\n        },\r\n        {\r\n          key: \"2\",\r\n          name: \"闭月\",\r\n          age: \"17\",\r\n          address: \"80, 60, 80\"\r\n        },\r\n        {\r\n          key: \"3\",\r\n          name: \"羞花\",\r\n          age: \"20\",\r\n          address: \"120, 60, 90\"\r\n        }\r\n      ],\r\n      count: 4\r\n    };\r\n  }\r\n  onCellChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onDelete = index => {\r\n    return () => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource.splice(index, 1);\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  handleAdd = () => {\r\n    const { count, dataSource } = this.state;\r\n    const newData = {\r\n      key: count,\r\n      name: `凤姐 ${count}`,\r\n      age: 32,\r\n      address: `100 100 100`\r\n    };\r\n    this.setState({\r\n      dataSource: [...dataSource, newData],\r\n      count: count + 1\r\n    });\r\n  };\r\n\r\n  getBodyWrapper = body => {\r\n    return (\r\n      <Animate\r\n        transitionName=\"move\"\r\n        component=\"tbody\"\r\n        className={body.props.className}\r\n      >\r\n        {body.props.children}\r\n      </Animate>\r\n    );\r\n  };\r\n  render() {\r\n    const { dataSource } = this.state;\r\n    const columns = this.columns;\r\n    return (\r\n      <div>\r\n        <Button\r\n          className=\"editable-add-btn\"\r\n          type=\"ghost\"\r\n          onClick={this.handleAdd}\r\n        >\r\n          添加\r\n        </Button>\r\n        <Table\r\n          bordered\r\n          data={dataSource}\r\n          columns={columns}\r\n          getBodyWrapper={this.getBodyWrapper}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo3 />,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport Button from 'bee-button';\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n  { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n    render () {\r\n        return (\r\n\r\n  <Table data={data3}>\r\n    <ColumnGroup title=\"地址\">\r\n      <Column\r\n        title=\"省\"\r\n        dataIndex=\"a\"\r\n        key=\"a\"\r\n        width={100}\r\n      />\r\n      <Column\r\n        id=\"123\"\r\n        title=\"市\"\r\n        dataIndex=\"b\"\r\n        key=\"b\"\r\n        width={100}\r\n      />\r\n    </ColumnGroup>\r\n    <Column\r\n      title=\"数量\"\r\n      dataIndex=\"c\"\r\n      key=\"c\"\r\n      width={200}\r\n    />\r\n    <Column\r\n      title=\"操作\"\r\n      dataIndex=\"\"\r\n      key=\"d\"\r\n      render={(text, record, index) => {\r\n        return (\r\n            <Button size=\"sm\" colors=\"info\" style={{ minWidth: 50 }}>增加</Button>\r\n        );\r\n      }}\r\n    />\r\n  </Table>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns4 = [\r\n  {\r\n    title: \"Name\",\r\n    dataIndex: \"name\",\r\n    key: \"name\",\r\n    width: \"40%\"\r\n  },\r\n  {\r\n    title: \"Age\",\r\n    dataIndex: \"age\",\r\n    key: \"age\",\r\n    width: \"30%\"\r\n  },\r\n  {\r\n    title: \"Address\",\r\n    dataIndex: \"address\",\r\n    key: \"address\"\r\n  }\r\n];\r\n\r\nconst data4 = [\r\n  {\r\n    key: 1,\r\n    name: \"John Brown sr.\",\r\n    age: 60,\r\n    address: \"New York No. 1 Lake Park\",\r\n    children: [\r\n      {\r\n        key: 11,\r\n        name: \"John Brown\",\r\n        age: 42,\r\n        address: \"New York No. 2 Lake Park\"\r\n      },\r\n      {\r\n        key: 12,\r\n        name: \"John Brown jr.\",\r\n        age: 30,\r\n        address: \"New York No. 3 Lake Park\",\r\n        children: [\r\n          {\r\n            key: 121,\r\n            name: \"Jimmy Brown\",\r\n            age: 16,\r\n            address: \"New York No. 3 Lake Park\"\r\n          }\r\n        ]\r\n      },\r\n      {\r\n        key: 13,\r\n        name: \"Jim Green sr.\",\r\n        age: 72,\r\n        address: \"London No. 1 Lake Park\",\r\n        children: [\r\n          {\r\n            key: 131,\r\n            name: \"Jim Green\",\r\n            age: 42,\r\n            address: \"London No. 2 Lake Park\",\r\n            children: [\r\n              {\r\n                key: 1311,\r\n                name: \"Jim Green jr.\",\r\n                age: 25,\r\n                address: \"London No. 3 Lake Park\"\r\n              },\r\n              {\r\n                key: 1312,\r\n                name: \"Jimmy Green sr.\",\r\n                age: 18,\r\n                address: \"London No. 4 Lake Park\"\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    key: 2,\r\n    name: \"Joe Black\",\r\n    age: 32,\r\n    address: \"Sidney No. 1 Lake Park\"\r\n  }\r\n];\r\nclass Demo4 extends Component {\r\n  render() {\r\n    return <Table columns={columns4} data={data4} />;\r\n  }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo5 />,"title":" 固定列","code":"/**\r\n*\r\n* @title 固定列\r\n* @description 固定列到表格的某侧\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns5 = [\r\n  {\r\n    title: \"Full Name\",\r\n    width: 100,\r\n    dataIndex: \"name\",\r\n    key: \"name\",\r\n    fixed: \"left\"\r\n  },\r\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\r\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data5 = [\r\n  {\r\n    key: \"1\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"2\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"3\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"4\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  }\r\n];\r\n\r\nclass Demo5 extends Component {\r\n  render() {\r\n    return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;\r\n  }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns6 = [\r\n  {\r\n    title: \"Full Name\",\r\n    width: 100,\r\n    dataIndex: \"name\",\r\n    key: \"name\"\r\n  },\r\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data6 = [\r\n  {\r\n    key: \"1\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"2\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"3\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"4\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },{\r\n    key: \"11\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"12\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"13\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"14\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n  render() {\r\n    return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;\r\n  }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":<Demo7 />,"title":" 主子表","code":"/**\r\n*\r\n* @title 主子表\r\n* @description 主表点击子表联动\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns7 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data7 = [\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n  { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\r\n  { title: \"系别\", dataIndex: \"c\", key: \"c\"}\r\n];\r\n\r\nclass Demo7 extends Component {\r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n      children_data : []\r\n    }\r\n  }\r\n  rowclick = (record, index) => {\r\n    console.log(record)\r\n    console.log(index)\r\n    if(record.a === '令狐冲'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\r\n        ]\r\n      })\r\n    }else if(record.a === '杨过'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\r\n        ]\r\n      })\r\n    }else if(record.a === '郭靖'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\r\n        ]\r\n      })\r\n    }\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Table\r\n          columns={columns7_1}\r\n          data={data7}\r\n          onRowClick={this.rowclick}\r\n          title={currentData => <div>标题: 我是主表</div>}\r\n        />\r\n        <Table\r\n          columns={columns7}\r\n          data={this.state.children_data}\r\n          title={currentData => <div>标题: 我是子表</div>}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\r\n*\r\n* @title 表格+分页\r\n* @description 点击分页联动表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Pagination from \"bee-pagination\";\r\n\r\n\r\nconst columns8 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nclass Demo8 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      data8: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n      ],\r\n      activePage: 1\r\n    };\r\n  }\r\n  handleSelect(eventKey) {\r\n    if(eventKey === 1){\r\n      this.setState({\r\n        data8: [\r\n          { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n          { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n          { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n        ],\r\n        activePage: eventKey\r\n      });\r\n    }else{\r\n      this.setState({\r\n        data8: [\r\n          { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\r\n        ],\r\n        activePage: eventKey\r\n      });\r\n    }\r\n    \r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Table columns={columns8} data={this.state.data8} />\r\n       <Pagination\r\n\t        \tfirst\r\n\t        \tlast\r\n\t        \tprev\r\n\t        \tnext\r\n\t        \tboundaryLinks\r\n\t\t        items={2}\r\n\t\t        maxButtons={5}\r\n\t\t        activePage={this.state.activePage}\r\n\t\t        onSelect={this.handleSelect.bind(this)} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\r\n*\r\n* @title 表格+搜索\r\n* @description 搜索刷新表格数据\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\nimport InputGroup from 'bee-input-group';\r\nimport FormControl from 'bee-form-control';\r\n\r\n\r\nclass Search extends Component {\r\n  state = {\r\n    searchValue: \"\",\r\n    empty: false\r\n  };\r\n\r\n  /**\r\n   * 搜索\r\n   */\r\n  handleSearch = () => {\r\n    let { onSearch,handleToChange } = this.props;\r\n    handleToChange && handleToChange();\r\n    onSearch && onSearch(this.state.searchValue);\r\n  };\r\n\r\n  /**\r\n   * 捕获回车\r\n   * @param e\r\n   */\r\n  handleKeyDown = e => {\r\n    if (e.keyCode === 13) {\r\n      this.handleSearch();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * 输入框改变\r\n   * @param e\r\n   */\r\n  handleChange = e => {\r\n    this.setState({\r\n      searchValue: e.target.value\r\n    });\r\n  };\r\n\r\n  /**\r\n   * 清空输入框\r\n   */\r\n  emptySearch = () => {\r\n    let { onEmpty } = this.props;\r\n    this.setState({\r\n      searchValue: \"\",\r\n      empty: false\r\n    });\r\n    onEmpty && onEmpty();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <InputGroup simple className=\"search-component\">\r\n        <FormControl\r\n          onChange={this.handleChange}\r\n          value={this.state.searchValue}\r\n          onKeyDown={this.handleKeyDown}\r\n          type=\"text\"\r\n        />\r\n        {this.state.empty\r\n          ? <Icon\r\n              type=\"uf-close-c\"\r\n              onClick={this.emptySearch}\r\n              className=\"empty-search\"\r\n            />\r\n          : null}\r\n\r\n        <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\r\n          <Icon type=\"uf-search\" />\r\n        </InputGroup.Button>\r\n      </InputGroup>\r\n    );\r\n  }\r\n}\r\n\r\nconst columns9 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      data: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n      ]\r\n    };\r\n  }\r\n  handleSearchToTable=()=>{\r\n    this.setState({\r\n      data: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\r\n      ]\r\n    })\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <div className=\"clearfix\">\r\n          <Search handleToChange={this.handleSearchToTable}/>\r\n        </div>\r\n        <Table columns={columns9} data={this.state.data} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 搜索刷新表格数据"}]
+var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");var Demo16 = require("./demolist/Demo16");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\r\n*\r\n* @title 简单表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns = [\r\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\r\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\r\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\r\n  {\r\n    title: '操作', dataIndex: '', key: 'd', render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    },\r\n  },\r\n];\r\n\r\nconst data = [\r\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\r\n  { a: '杨过', b: '男', c: 67, key: '2' },\r\n  { a: '郭靖', b: '男', c: 25, key: '3' },\r\n];\r\n\r\nclass Demo1 extends Component {\r\n    render () {\r\n        return (\r\n              <Table\r\n              columns={columns}\r\n              data={data}\r\n              title={currentData => <div>标题: 这是一个标题</div>}\r\n              footer={currentData => <div>表尾: 我是小尾巴</div>}\r\n              />\r\n        )\r\n    }\r\n}\r\n\r\n\r\n\r\n","desc":""},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\r\n*\r\n* @title 无数据时显示\r\n* @description 无数据时显示效果展示\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns10 = [\r\n    {\r\n      title: \"Name\",\r\n      dataIndex: \"name\",\r\n      key: \"name\",\r\n      width: \"40%\"\r\n    },\r\n    {\r\n      title: \"Age\",\r\n      dataIndex: \"age\",\r\n      key: \"age\",\r\n      width: \"30%\"\r\n    },\r\n    {\r\n      title: \"Address\",\r\n      dataIndex: \"address\",\r\n      key: \"address\"\r\n    }\r\n  ];\r\n  \r\n  const data10 = [\r\n    \r\n  ];\r\n\r\n  const emptyFunc = () => <span>这里没有数据！</span>\r\n  \r\n  class Demo10 extends Component {\r\n    render() {\r\n      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;\r\n    }\r\n  }\r\n\r\n","desc":" 无数据时显示效果展示"},{"example":<Demo11 />,"title":" 列排序","code":"/**\r\n*\r\n* @title 列排序\r\n* @description 列排序\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\n\r\nconst columns11 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data11 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps11 = {\r\n  prefixCls: \"bee-table\"\r\n};\r\nclass Demo11 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      sortOrder: \"\",\r\n      data: data11\r\n    };\r\n  }\r\n  toggleSortOrder=(order, column)=> {\r\n    let { sortOrder, data, oldData } = this.state;\r\n    let ascend_sort = function(key) {\r\n      return function(a, b) {\r\n        return a.key - b.key;\r\n      };\r\n    };\r\n    let descend_sort = function(key) {\r\n      return function(a, b) {\r\n        return b.key - a.key;\r\n      };\r\n    };\r\n    if (sortOrder === order) {\r\n      // 切换为未排序状态\r\n      order = \"\";\r\n    }\r\n    if (!oldData) {\r\n      oldData = data.concat();\r\n    }\r\n    if (order === \"ascend\") {\r\n      data = data.sort(function(a, b) {\r\n        return column.sorter(a, b);\r\n      });\r\n    } else if (order === \"descend\") {\r\n      data = data.sort(function(a, b) {\r\n        return column.sorter(b, a);\r\n      });\r\n    } else {\r\n      data = oldData.concat();\r\n    }\r\n    this.setState({\r\n      sortOrder: order,\r\n      data: data,\r\n      oldData: oldData\r\n    });\r\n  }\r\n  renderColumnsDropdown(columns) {\r\n    const { sortOrder } = this.state;\r\n    const { prefixCls } = this.props;\r\n\r\n    return columns.map(originColumn => {\r\n      let column = Object.assign({}, originColumn);\r\n      let sortButton;\r\n      if (column.sorter) {\r\n        const isAscend = sortOrder === \"ascend\";\r\n        const isDescend = sortOrder === \"descend\";\r\n        sortButton = (\r\n          <div className={`${prefixCls}-column-sorter`}>\r\n            <span\r\n              className={`${prefixCls}-column-sorter-up ${isAscend\r\n                ? \"on\"\r\n                : \"off\"}`}\r\n              title=\"↑\"\r\n              onClick={() => this.toggleSortOrder(\"ascend\", column)}\r\n            >\r\n              <Icon type=\"uf-triangle-up\" />\r\n            </span>\r\n            <span\r\n              className={`${prefixCls}-column-sorter-down ${isDescend\r\n                ? \"on\"\r\n                : \"off\"}`}\r\n              title=\"↓\"\r\n              onClick={() => this.toggleSortOrder(\"descend\", column)}\r\n            >\r\n              <Icon type=\"uf-triangle-down\" />\r\n            </span>\r\n          </div>\r\n        );\r\n      }\r\n      column.title = (\r\n        <span>\r\n          {column.title}\r\n          {sortButton}\r\n        </span>\r\n      );\r\n      return column;\r\n    });\r\n  }\r\n  render() {\r\n    let columns = this.renderColumnsDropdown(columns11);\r\n    return <Table columns={columns} data={this.state.data} />;\r\n  }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\n","desc":" 列排序"},{"example":<Demo12 />,"title":" 全选功能","code":"/**\r\n*\r\n* @title 全选功能\r\n* @description 全选功能\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Checkbox from \"bee-checkbox\";\r\n\r\nconst columns12 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data12 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst defaultProps12 = {\r\n  prefixCls: \"bee-table\",\r\n  multiSelect: {\r\n    type: \"checkbox\",\r\n    param: \"key\"\r\n  }\r\n};\r\nclass Demo12 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      checkedAll:false,\r\n      checkedArray: [\r\n        false,\r\n        false,\r\n        false,\r\n      ],\r\n      data: data12\r\n    };\r\n  }\r\n  onAllCheckChange = () => {\r\n    let self = this;\r\n    let checkedArray = [];\r\n    let listData = self.state.data.concat();\r\n    let selIds = [];\r\n    // let id = self.props.multiSelect.param;\r\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n      checkedArray[i] = !self.state.checkedAll;\r\n    }\r\n    // if (self.state.checkedAll) {\r\n    //   selIds = [];\r\n    // } else {\r\n    //   for (var i = 0; i < listData.length; i++) {\r\n    //     selIds[i] = listData[i][id];\r\n    //   }\r\n    // }\r\n    self.setState({\r\n      checkedAll: !self.state.checkedAll,\r\n      checkedArray: checkedArray,\r\n      // selIds: selIds\r\n    });\r\n    // self.props.onSelIds(selIds);\r\n  };\r\n  onCheckboxChange = (text, record, index) => {\r\n    let self = this;\r\n    let allFlag = false;\r\n    // let selIds = self.state.selIds;\r\n    // let id = self.props.postId;\r\n    let checkedArray = self.state.checkedArray.concat();\r\n    // if (self.state.checkedArray[index]) {\r\n      // selIds.remove(record[id]);\r\n    // } else {\r\n      // selIds.push(record[id]);\r\n    // }\r\n    checkedArray[index] = !self.state.checkedArray[index];\r\n    for (var i = 0; i < self.state.checkedArray.length; i++) {\r\n      if (!checkedArray[i]) {\r\n        allFlag = false;\r\n        break;\r\n      } else {\r\n        allFlag = true;\r\n      }\r\n    }\r\n    self.setState({\r\n      checkedAll: allFlag,\r\n      checkedArray: checkedArray,\r\n      // selIds: selIds\r\n    });\r\n    // self.props.onSelIds(selIds);\r\n  };\r\n  renderColumnsMultiSelect(columns) {\r\n    const { data,checkedArray } = this.state;\r\n    const { multiSelect } = this.props;\r\n    let select_column = {};\r\n    let indeterminate_bool = false;\r\n    // let indeterminate_bool1 = true;\r\n    if (multiSelect && multiSelect.type === \"checkbox\") {\r\n      let i = checkedArray.length;\r\n      while(i--){\r\n          if(checkedArray[i]){\r\n            indeterminate_bool = true;\r\n            break;\r\n          }\r\n      }\r\n      let defaultColumns = [\r\n        {\r\n          title: (\r\n            <Checkbox\r\n              className=\"table-checkbox\"\r\n              checked={this.state.checkedAll}\r\n              indeterminate={indeterminate_bool&&!this.state.checkedAll}\r\n              onChange={this.onAllCheckChange}\r\n            />\r\n          ),\r\n          key: \"checkbox\",\r\n          dataIndex: \"checkbox\",\r\n          width: \"5%\",\r\n          render: (text, record, index) => {\r\n            return (\r\n              <Checkbox\r\n                className=\"table-checkbox\"\r\n                checked={this.state.checkedArray[index]}\r\n                onChange={this.onCheckboxChange.bind(this, text, record, index)}\r\n              />\r\n            );\r\n          }\r\n        }\r\n      ];\r\n      columns = defaultColumns.concat(columns);\r\n    }\r\n    return columns;\r\n  }\r\n  render() {\r\n    let columns = this.renderColumnsMultiSelect(columns12);\r\n    return <Table columns={columns} data={data12} />;\r\n  }\r\n}\r\nDemo12.defaultProps = defaultProps12;\r\n\r\n","desc":" 全选功能"},{"example":<Demo13 />,"title":" 列排序、全选功能、合计","code":"/**\r\n*\r\n* @title 列排序、全选功能、合计\r\n* @description 列排序、全选功能、合计\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport multiSelect from \"../../src/lib/multiSelect.js\";\r\nimport sort from \"../../src/lib/sort.js\";\r\nimport Sum from \"../../src/lib/sum.js\";\r\n\r\nconst columns13 = [\r\n  {\r\n    title: \"名字\",\r\n    dataIndex: \"a\",\r\n    key: \"a\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"性别\",\r\n    dataIndex: \"b\",\r\n    key: \"b\",\r\n    width: 100\r\n  },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    sorter: (a, b) => a.c - b.c\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data13 = [\r\n  { a: \"杨过\", b: \"男\", c: 30, key: \"2\" },\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\nclass Demo13 extends Component {\r\n  getSelectedDataFunc = (data) =>{\r\n    console.log(data)\r\n  }\r\n  render() {\r\n    let multiObj = {\r\n      type: \"checkbox\",\r\n      param: \"key\"\r\n    };\r\n    let ComplexTable = multiSelect(Sum(sort(Table)));\r\n    return (\r\n      <div>\r\n        <ComplexTable\r\n          columns={columns13}\r\n          data={data13}\r\n          multiSelect={multiObj}\r\n          getSelectedDataFunc={this.getSelectedDataFunc}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 列排序、全选功能、合计"},{"example":<Demo14 />,"title":" 合计表格","code":"/**\r\n*\r\n* @title 合计表格\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\n\r\nconst columns14 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    heji: true,\r\n    render(data) {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"d\",\r\n    key: \"d\",\r\n    render(data) {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\nconst columns14_ = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    heji: true\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"d\",\r\n    key: \"d\"\r\n  }\r\n];\r\n\r\nconst data14 = [\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n  { a: \"合计\", d: \"11\", key: \"31\" }\r\n];\r\n\r\nconst data14_ = [\r\n  { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n];\r\n\r\nclass Demo14 extends Component {\r\n  render() {\r\n    return (\r\n      <Table\r\n        columns={columns14}\r\n        data={data14}\r\n        heji={true}\r\n        title={currentData => <div>标题: 这是一个标题</div>}\r\n        footer={currentData => (\r\n          <Table\r\n            showHeader={false}\r\n            columns={columns14_}\r\n            data={data14_}\r\n            heji={true}\r\n          />\r\n        )}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo15 />,"title":" edittype表格","code":"/**\r\n*\r\n* @title edittype表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Checkbox from \"bee-checkbox\";\r\nimport Select from 'bee-select';\r\nimport Popconfirm from \"bee-popconfirm\";\r\nimport InputRender from \"../../src/render/InputRender.js\";\r\n\r\n//日期控件引入\r\nimport DatePicker from 'bee-datepicker';\r\nimport MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';\r\n\r\nconst format = 'YYYY-MM-DD';\r\nconst format2 = 'YYYY-MM';\r\n\r\nconst dateInputPlaceholder = '选择日期';\r\nconst dateInputPlaceholder2 = '选择年月';\r\n\r\nclass Demo15 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      dataSource: [\r\n        {\r\n          key: \"0\",\r\n          name: \"沉鱼\",\r\n          age: \"y\",\r\n          address: \"96, 77, 89\"\r\n        },\r\n        {\r\n          key: \"1\",\r\n          name: \"落雁\",\r\n          age: \"y\",\r\n          address: \"90, 70, 80\"\r\n        },\r\n        {\r\n          key: \"2\",\r\n          name: \"闭月\",\r\n          age: \"n\",\r\n          address: \"80, 60, 80\"\r\n        },\r\n        {\r\n          key: \"3\",\r\n          name: \"羞花\",\r\n          age: \"y\",\r\n          address: \"120, 60, 90\"\r\n        }\r\n      ],\r\n      count: 4\r\n    };\r\n    this.columns = [\r\n      {\r\n        title: \"姓名\",\r\n        dataIndex: \"name\",\r\n        key: \"name\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => (\r\n          <InputRender\r\n            value={text}\r\n            isclickTrigger={true}\r\n            onChange={this.onCellChange(index, \"name\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"年龄\",\r\n        dataIndex: \"age\",\r\n        key: \"age\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => (\r\n          <Checkbox\r\n            checked={record.age}\r\n            onChange={this.onCheckChange(index, \"age\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"你懂的\",\r\n        dataIndex: \"address\",\r\n        key: \"address\",\r\n        width: \"10%\",\r\n        render: (text, record, index) => {\r\n          return (\r\n            <Select\r\n              defaultValue=\"lucy\"\r\n              style={{ width: 100, marginRight: 6 }}\r\n              onChange={this.handleChange}\r\n            >\r\n              <Option value=\"jack\">boyuzhou</Option>\r\n              <Option value=\"lucy\">renhualiu</Option>\r\n              <Option value=\"disabled\" disabled>\r\n                Disabled\r\n              </Option>\r\n              <Option value=\"yiminghe\">yuzhao</Option>\r\n            </Select>\r\n          );\r\n        }\r\n      },\r\n      { title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n           <DatePicker\r\n              format={format}\r\n            \r\n              onSelect={this.onSelect}\r\n    \r\n              onChange={this.onChange}\r\n    \r\n              placeholder = {dateInputPlaceholder}>\r\n              </DatePicker>\r\n         ) \r\n        }\r\n      },\r\n      { title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n           <MonthPicker\r\n              format={format2}\r\n            \r\n              onSelect={this.onSelect}\r\n    \r\n              onChange={this.onChange}\r\n    \r\n              placeholder = {dateInputPlaceholder2}>\r\n              </MonthPicker>\r\n         ) \r\n        }\r\n      },\r\n      { title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n          <WeekPicker placeholder=\"选择周\"/>\r\n         ) \r\n        }\r\n      },\r\n      { title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: \"10%\",\r\n      render:()=>{\r\n         return(\r\n          <RangePicker\r\n          \r\n              format={format}\r\n\r\n              onSelect={this.onSelect}\r\n\r\n              onChange={this.onChange}\r\n\r\n              placeholder={'选择年月'}\r\n\r\n          />\r\n         ) \r\n        }\r\n      }\r\n      \r\n    ];\r\n  }\r\n  handleChange = value => {\r\n    console.log(`selected ${value}`);\r\n  };\r\n  onCheckChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onCellChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onDelete = index => {\r\n    return () => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource.splice(index, 1);\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  handleAdd = () => {\r\n    const { count, dataSource } = this.state;\r\n    const newData = {\r\n      key: count,\r\n      name: `凤姐 ${count}`,\r\n      age: 32,\r\n      address: `100 100 100`\r\n    };\r\n    this.setState({\r\n      dataSource: [...dataSource, newData],\r\n      count: count + 1\r\n    });\r\n  };\r\n\r\n  getBodyWrapper = body => {\r\n    return (\r\n      <Animate\r\n        transitionName=\"move\"\r\n        component=\"tbody\"\r\n        className={body.props.className}\r\n      >\r\n        {body.props.children}\r\n      </Animate>\r\n    );\r\n  };\r\n  \r\n  onSelect = (d) =>{\r\n      console.log(d)\r\n  };\r\n\r\n  onChange = (d) => {\r\n      console.log(d)\r\n  };\r\n\r\n  render() {\r\n    const { dataSource } = this.state;\r\n    const columns = this.columns;\r\n    return (\r\n      <div>\r\n        <Button\r\n          className=\"editable-add-btn\"\r\n          type=\"ghost\"\r\n          onClick={this.handleAdd}\r\n        >\r\n          添加\r\n        </Button>\r\n        <Table\r\n          bordered\r\n          data={dataSource}\r\n          columns={columns}\r\n          getBodyWrapper={this.getBodyWrapper}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo16 />,"title":" 合计test","code":"/**\r\n*\r\n* @title 合计test\r\n* @description\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Sum from \"../../src/lib/sum.js\";\r\n\r\nconst columns14 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  {\r\n    title: \"年龄\",\r\n    dataIndex: \"c\",\r\n    key: \"c\",\r\n    width: 200,\r\n    heji: true\r\n  },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"d\",\r\n    key: \"d\",\r\n    render(data) {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\n//合计表头\r\n// const columns14_ = [\r\n//   { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n//   { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n//   {\r\n//     title: \"年龄\",\r\n//     dataIndex: \"c\",\r\n//     key: \"c\",\r\n//     width: 200,\r\n//     heji: true\r\n//   },\r\n//   {\r\n//     title: \"操作\",\r\n//     dataIndex: \"d\",\r\n//     key: \"d\"\r\n//   }\r\n// ];\r\n\r\nconst data14 = [\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" },\r\n];\r\n\r\n//合计数据\r\n// const data14_ = [\r\n//   { a: \"郭靖\", b: \"男\", c: 25,d:11, key: \"3\" }\r\n// ];\r\n\r\nclass Demo16 extends Component {\r\n  \r\n  render() {\r\n    //使用高阶组件\r\n    let SumTable  = Sum(Table);\r\n    return (\r\n      <SumTable\r\n        columns={columns14}\r\n        data={data14}\r\n        title={\"我是表头\"}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":""},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\r\n*\r\n* @title 增删改表格\r\n* @description 这是带有增删改功能的表格\r\n*\r\n*/\r\n\r\nimport Button from \"bee-button\";\r\nimport React, { Component } from \"react\";\r\nimport Table from \"../../src\";\r\nimport Animate from \"bee-animate\";\r\nimport Icon from \"bee-icon\";\r\nimport Input from \"bee-form-control\";\r\nimport Popconfirm from \"bee-popconfirm\";\r\n\r\nclass EditableCell extends React.Component {\r\n  state = {\r\n    value: this.props.value,\r\n    editable: false\r\n  };\r\n  handleChange = e => {\r\n    const value = e.target.value;\r\n    this.setState({ value });\r\n  };\r\n  check = () => {\r\n    this.setState({ editable: false });\r\n    if (this.props.onChange) {\r\n      this.props.onChange(this.state.value);\r\n    }\r\n  };\r\n  edit = () => {\r\n    this.setState({ editable: true });\r\n  };\r\n  handleKeydown = event => {\r\n    console.log(event.keyCode);\r\n    if (event.keyCode == 13) {\r\n      this.check();\r\n    }\r\n  };\r\n  render() {\r\n    const { value, editable } = this.state;\r\n    return (\r\n      <div className=\"editable-cell\">\r\n        {editable ? (\r\n          <div className=\"editable-cell-input-wrapper\">\r\n            <Input\r\n              value={value}\r\n              onChange={this.handleChange}\r\n              onKeyDown={this.handleKeydown}\r\n            />\r\n            <Icon\r\n              type=\"uf-correct\"\r\n              className=\"editable-cell-icon-check\"\r\n              onClick={this.check}\r\n            />\r\n          </div>\r\n        ) : (\r\n          <div className=\"editable-cell-text-wrapper\">\r\n            {value || \" \"}\r\n            <Icon\r\n              type=\"uf-pencil\"\r\n              className=\"editable-cell-icon\"\r\n              onClick={this.edit}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.columns = [\r\n      {\r\n        title: \"姓名\",\r\n        dataIndex: \"name\",\r\n        key: \"name\",\r\n        width: \"30%\",\r\n        render: (text, record, index) => (\r\n          <EditableCell\r\n            value={text}\r\n            onChange={this.onCellChange(index, \"name\")}\r\n          />\r\n        )\r\n      },\r\n      {\r\n        title: \"年龄\",\r\n        dataIndex: \"age\",\r\n        key: \"age\"\r\n      },\r\n      {\r\n        title: \"你懂的\",\r\n        dataIndex: \"address\",\r\n        key: \"address\"\r\n      },\r\n      {\r\n        title: \"操作\",\r\n        dataIndex: \"operation\",\r\n        key: \"operation\",\r\n        render: (text, record, index) => {\r\n          return this.state.dataSource.length > 1 ? (\r\n            <Popconfirm content=\"确认删除?\" id=\"aa\" onClose={this.onDelete(index)}>\r\n              <Icon type=\"uf-del\" />\r\n            </Popconfirm>\r\n          ) : null;\r\n        }\r\n      }\r\n    ];\r\n\r\n    this.state = {\r\n      dataSource: [\r\n        {\r\n          key: \"0\",\r\n          name: \"沉鱼\",\r\n          age: \"18\",\r\n          address: \"96, 77, 89\"\r\n        },\r\n        {\r\n          key: \"1\",\r\n          name: \"落雁\",\r\n          age: \"16\",\r\n          address: \"90, 70, 80\"\r\n        },\r\n        {\r\n          key: \"2\",\r\n          name: \"闭月\",\r\n          age: \"17\",\r\n          address: \"80, 60, 80\"\r\n        },\r\n        {\r\n          key: \"3\",\r\n          name: \"羞花\",\r\n          age: \"20\",\r\n          address: \"120, 60, 90\"\r\n        }\r\n      ],\r\n      count: 4\r\n    };\r\n  }\r\n  onCellChange = (index, key) => {\r\n    return value => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  onDelete = index => {\r\n    return () => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource.splice(index, 1);\r\n      this.setState({ dataSource });\r\n    };\r\n  };\r\n  handleAdd = () => {\r\n    const { count, dataSource } = this.state;\r\n    const newData = {\r\n      key: count,\r\n      name: `凤姐 ${count}`,\r\n      age: 32,\r\n      address: `100 100 100`\r\n    };\r\n    this.setState({\r\n      dataSource: [...dataSource, newData],\r\n      count: count + 1\r\n    });\r\n  };\r\n\r\n  getBodyWrapper = body => {\r\n    return (\r\n      <Animate\r\n        transitionName=\"move\"\r\n        component=\"tbody\"\r\n        className={body.props.className}\r\n      >\r\n        {body.props.children}\r\n      </Animate>\r\n    );\r\n  };\r\n  render() {\r\n    const { dataSource } = this.state;\r\n    const columns = this.columns;\r\n    return (\r\n      <div>\r\n        <Button\r\n          className=\"editable-add-btn\"\r\n          type=\"ghost\"\r\n          onClick={this.handleAdd}\r\n        >\r\n          添加\r\n        </Button>\r\n        <Table\r\n          bordered\r\n          data={dataSource}\r\n          columns={columns}\r\n          getBodyWrapper={this.getBodyWrapper}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n","desc":" 这是带有增删改功能的表格"},{"example":<Demo3 />,"title":" 更灵活的表格","code":"/**\r\n*\r\n* @title 更灵活的表格\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport Button from 'bee-button';\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst data3 = [\r\n  { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\r\n];\r\n\r\nclass Demo3 extends Component {\r\n    render () {\r\n        return (\r\n\r\n  <Table data={data3}>\r\n    <ColumnGroup title=\"地址\">\r\n      <Column\r\n        title=\"省\"\r\n        dataIndex=\"a\"\r\n        key=\"a\"\r\n        width={100}\r\n      />\r\n      <Column\r\n        id=\"123\"\r\n        title=\"市\"\r\n        dataIndex=\"b\"\r\n        key=\"b\"\r\n        width={100}\r\n      />\r\n    </ColumnGroup>\r\n    <Column\r\n      title=\"数量\"\r\n      dataIndex=\"c\"\r\n      key=\"c\"\r\n      width={200}\r\n    />\r\n    <Column\r\n      title=\"操作\"\r\n      dataIndex=\"\"\r\n      key=\"d\"\r\n      render={(text, record, index) => {\r\n        return (\r\n            <Button size=\"sm\" colors=\"info\" style={{ minWidth: 50 }}>增加</Button>\r\n        );\r\n      }}\r\n    />\r\n  </Table>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\r\n*\r\n* @title 树形数据展示\r\n* @description 手写表格的头组件来达到更灵活的配置表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns4 = [\r\n  {\r\n    title: \"Name\",\r\n    dataIndex: \"name\",\r\n    key: \"name\",\r\n    width: \"40%\"\r\n  },\r\n  {\r\n    title: \"Age\",\r\n    dataIndex: \"age\",\r\n    key: \"age\",\r\n    width: \"30%\"\r\n  },\r\n  {\r\n    title: \"Address\",\r\n    dataIndex: \"address\",\r\n    key: \"address\"\r\n  }\r\n];\r\n\r\nconst data4 = [\r\n  {\r\n    key: 1,\r\n    name: \"John Brown sr.\",\r\n    age: 60,\r\n    address: \"New York No. 1 Lake Park\",\r\n    children: [\r\n      {\r\n        key: 11,\r\n        name: \"John Brown\",\r\n        age: 42,\r\n        address: \"New York No. 2 Lake Park\"\r\n      },\r\n      {\r\n        key: 12,\r\n        name: \"John Brown jr.\",\r\n        age: 30,\r\n        address: \"New York No. 3 Lake Park\",\r\n        children: [\r\n          {\r\n            key: 121,\r\n            name: \"Jimmy Brown\",\r\n            age: 16,\r\n            address: \"New York No. 3 Lake Park\"\r\n          }\r\n        ]\r\n      },\r\n      {\r\n        key: 13,\r\n        name: \"Jim Green sr.\",\r\n        age: 72,\r\n        address: \"London No. 1 Lake Park\",\r\n        children: [\r\n          {\r\n            key: 131,\r\n            name: \"Jim Green\",\r\n            age: 42,\r\n            address: \"London No. 2 Lake Park\",\r\n            children: [\r\n              {\r\n                key: 1311,\r\n                name: \"Jim Green jr.\",\r\n                age: 25,\r\n                address: \"London No. 3 Lake Park\"\r\n              },\r\n              {\r\n                key: 1312,\r\n                name: \"Jimmy Green sr.\",\r\n                age: 18,\r\n                address: \"London No. 4 Lake Park\"\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    key: 2,\r\n    name: \"Joe Black\",\r\n    age: 32,\r\n    address: \"Sidney No. 1 Lake Park\"\r\n  }\r\n];\r\nclass Demo4 extends Component {\r\n  render() {\r\n    return <Table columns={columns4} data={data4} />;\r\n  }\r\n}\r\n\r\n\r\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":<Demo5 />,"title":" 固定列","code":"/**\r\n*\r\n* @title 固定列\r\n* @description 固定列到表格的某侧\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns5 = [\r\n  {\r\n    title: \"Full Name\",\r\n    width: 100,\r\n    dataIndex: \"name\",\r\n    key: \"name\",\r\n    fixed: \"left\"\r\n  },\r\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\r\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data5 = [\r\n  {\r\n    key: \"1\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"2\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"3\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"4\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  }\r\n];\r\n\r\nclass Demo5 extends Component {\r\n  render() {\r\n    return <Table columns={columns5} data={data5} scroll={{ x: 1500 }} />;\r\n  }\r\n}\r\n\r\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\nconst columns6 = [\r\n  {\r\n    title: \"Full Name\",\r\n    width: 100,\r\n    dataIndex: \"name\",\r\n    key: \"name\"\r\n  },\r\n  { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n  { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\r\n  { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\r\n  { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\r\n  { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\r\n  { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\r\n  { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\r\n  { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\r\n  { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\r\n];\r\n\r\nconst data6 = [\r\n  {\r\n    key: \"1\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"2\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"3\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"4\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },{\r\n    key: \"11\",\r\n    name: \"John Brown\",\r\n    age: 32,\r\n    address: \"New York Park\"\r\n  },\r\n  {\r\n    key: \"12\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"13\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  },\r\n  {\r\n    key: \"14\",\r\n    name: \"Jim Green\",\r\n    age: 40,\r\n    address: \"London Park\"\r\n  }\r\n];\r\n\r\nclass Demo6 extends Component {\r\n  render() {\r\n    return <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;\r\n  }\r\n}\r\n\r\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。"},{"example":<Demo7 />,"title":" 主子表","code":"/**\r\n*\r\n* @title 主子表\r\n* @description 主表点击子表联动\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\n\r\n\r\n\r\nconst columns7 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\"},\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\"},\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nconst data7 = [\r\n  { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n  { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n  { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nconst columns7_1 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\"},\r\n  { id: \"123\", title: \"班级\", dataIndex: \"b\", key: \"b\"},\r\n  { title: \"系别\", dataIndex: \"c\", key: \"c\"}\r\n];\r\n\r\nclass Demo7 extends Component {\r\n  constructor(props){\r\n    super(props);\r\n    this.state = {\r\n      children_data : []\r\n    }\r\n  }\r\n  rowclick = (record, index) => {\r\n    console.log(record)\r\n    console.log(index)\r\n    if(record.a === '令狐冲'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"令狐冲\", b: \"01班\", c: '文学系', key: \"1\" },\r\n        ]\r\n      })\r\n    }else if(record.a === '杨过'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"杨过\", b: \"01班\", c: '外语系', key: \"2\" },\r\n        ]\r\n      })\r\n    }else if(record.a === '郭靖'){\r\n      this.setState({\r\n        children_data: [\r\n          { a: \"郭靖\", b: \"02班\", c: '美术系', key: \"3\" }\r\n        ]\r\n      })\r\n    }\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Table\r\n          columns={columns7_1}\r\n          data={data7}\r\n          onRowClick={this.rowclick}\r\n          title={currentData => <div>标题: 我是主表</div>}\r\n        />\r\n        <Table\r\n          columns={columns7}\r\n          data={this.state.children_data}\r\n          title={currentData => <div>标题: 我是子表</div>}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\r\n*\r\n* @title 表格+分页\r\n* @description 点击分页联动表格\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Pagination from \"bee-pagination\";\r\n\r\n\r\nconst columns8 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nclass Demo8 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      data8: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n      ],\r\n      activePage: 1\r\n    };\r\n  }\r\n  handleSelect(eventKey) {\r\n    if(eventKey === 1){\r\n      this.setState({\r\n        data8: [\r\n          { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n          { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n          { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n        ],\r\n        activePage: eventKey\r\n      });\r\n    }else{\r\n      this.setState({\r\n        data8: [\r\n          { a: \"芙蓉姐姐\", b: \"女\", c: 23, key: \"1\" }\r\n        ],\r\n        activePage: eventKey\r\n      });\r\n    }\r\n    \r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <Table columns={columns8} data={this.state.data8} />\r\n       <Pagination\r\n\t        \tfirst\r\n\t        \tlast\r\n\t        \tprev\r\n\t        \tnext\r\n\t        \tboundaryLinks\r\n\t\t        items={2}\r\n\t\t        maxButtons={5}\r\n\t\t        activePage={this.state.activePage}\r\n\t\t        onSelect={this.handleSelect.bind(this)} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","desc":" 点击分页联动表格"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\r\n*\r\n* @title 表格+搜索\r\n* @description 搜索刷新表格数据\r\n*\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Table from 'bee-table';\r\nimport Icon from \"bee-icon\";\r\nimport InputGroup from 'bee-input-group';\r\nimport FormControl from 'bee-form-control';\r\n\r\n\r\nclass Search extends Component {\r\n  state = {\r\n    searchValue: \"\",\r\n    empty: false\r\n  };\r\n\r\n  /**\r\n   * 搜索\r\n   */\r\n  handleSearch = () => {\r\n    let { onSearch,handleToChange } = this.props;\r\n    handleToChange && handleToChange();\r\n    onSearch && onSearch(this.state.searchValue);\r\n  };\r\n\r\n  /**\r\n   * 捕获回车\r\n   * @param e\r\n   */\r\n  handleKeyDown = e => {\r\n    if (e.keyCode === 13) {\r\n      this.handleSearch();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * 输入框改变\r\n   * @param e\r\n   */\r\n  handleChange = e => {\r\n    this.setState({\r\n      searchValue: e.target.value\r\n    });\r\n  };\r\n\r\n  /**\r\n   * 清空输入框\r\n   */\r\n  emptySearch = () => {\r\n    let { onEmpty } = this.props;\r\n    this.setState({\r\n      searchValue: \"\",\r\n      empty: false\r\n    });\r\n    onEmpty && onEmpty();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <InputGroup simple className=\"search-component\">\r\n        <FormControl\r\n          onChange={this.handleChange}\r\n          value={this.state.searchValue}\r\n          onKeyDown={this.handleKeyDown}\r\n          type=\"text\"\r\n        />\r\n        {this.state.empty\r\n          ? <Icon\r\n              type=\"uf-close-c\"\r\n              onClick={this.emptySearch}\r\n              className=\"empty-search\"\r\n            />\r\n          : null}\r\n\r\n        <InputGroup.Button onClick={this.handleSearch} shape=\"border\">\r\n          <Icon type=\"uf-search\" />\r\n        </InputGroup.Button>\r\n      </InputGroup>\r\n    );\r\n  }\r\n}\r\n\r\nconst columns9 = [\r\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n  {\r\n    title: \"操作\",\r\n    dataIndex: \"\",\r\n    key: \"d\",\r\n    render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    }\r\n  }\r\n];\r\n\r\nclass Demo9 extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      data: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n        { a: \"杨过\", b: \"男\", c: 67, key: \"2\" },\r\n        { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n      ]\r\n    };\r\n  }\r\n  handleSearchToTable=()=>{\r\n    this.setState({\r\n      data: [\r\n        { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" }\r\n      ]\r\n    })\r\n  }\r\n  render() {\r\n    return (\r\n      <div>\r\n        <div className=\"clearfix\">\r\n          <Search handleToChange={this.handleSearchToTable}/>\r\n        </div>\r\n        <Table columns={columns9} data={this.state.data} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n","desc":" 搜索刷新表格数据"}]
 
 
 class Demo extends Component {
diff --git a/src/lib/sum.js b/src/lib/sum.js
new file mode 100644
index 0000000..29256d5
--- /dev/null
+++ b/src/lib/sum.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import Table from "../../src";
+
+var Sum =  (Table)=>{
+    class SumTable extends React.Component{
+        //无状态
+        constructor(props){
+            super(props);
+        }
+
+        currentData = ()=>{
+            return <div>{this.props.title}</div>;
+        }
+
+        //合计数字列
+        currentData2 = () =>{
+            let data_2 = this.props.data;
+            let obj ={};
+            if(Array.isArray(data_2)){
+                for(let i =0;i<data_2.length;i++){
+                    for(let item in data_2[i]){
+                        if(typeof obj[item] === 'undefined'){
+                            obj[item] = data_2[i][item];
+                        }
+                        else if(typeof data_2[i][item] == 'number'){
+                            obj[item] += data_2[i][item];
+                        }
+                        else{
+                            obj[item] = ""
+                        }
+                    }
+                }
+            }
+            //加key
+            obj.key = 'sumData';
+            return <Table
+            showHeader={false}
+            columns={this.props.columns}
+            data={[obj]}
+            heji={true}
+            />
+        }
+
+        render(){
+            return <Table
+                columns={this.props.columns}
+                data={this.props.data}
+                heji={true}
+                title={this.currentData}
+                footer={this.currentData2}
+                /> 
+        }
+    }
+    return SumTable;
+}
+
+export default Sum;
\ No newline at end of file