diff --git a/demo/demolist/.DS_Store b/demo/demolist/.DS_Store
index dbc32c0..fdf4895 100644
Binary files a/demo/demolist/.DS_Store and b/demo/demolist/.DS_Store differ
diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js
new file mode 100644
index 0000000..11b1d6b
--- /dev/null
+++ b/demo/demolist/Demo1.js
@@ -0,0 +1,92 @@
+/**
+*
+* @title 简单表格、文字过长，两种tip
+* 【Tooltip】
+* @description
+*/
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+
+const columns = [
+  {
+    title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
+    render: (text, record, index) => {
+      return (
+        <Tooltip inverse overlay={text}>
+          <span tootip={text} style={{
+            display: "inline-block",
+            width: "60px",
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+          }}>{text}</span>
+        </Tooltip>
+      );
+    }
+  },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: '10%' },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    render(text, record, index) {
+      return (
+        <div style={{ position: 'relative' }} title={text} >
+          <a
+            href="javascript:;"
+            tooltip={text}
+            onClick={() => {
+              alert('这是第' + index + '列，内容为:' + text);
+            }}
+          >
+            一些操作
+              </a>
+        </div>
+      );
+    }
+  }
+];
+
+const data = [
+  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+];
+
+class Demo1 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data,
+      selectedRowIndex: 0
+    }
+  }
+
+  render() {
+    return (
+   
+        <Table
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          height={43}
+          headerHeight={42}
+          onRowClick={(record, index, indent) => {
+            this.setState({
+              selectedRowIndex: index
+            });
+          }}
+        />
+
+     
+    );
+  }
+}
+
+export default Demo1;
diff --git a/demo/demolist/Demo10.js b/demo/demolist/Demo10.js
new file mode 100644
index 0000000..359b592
--- /dev/null
+++ b/demo/demolist/Demo10.js
@@ -0,0 +1,46 @@
+/**
+*
+* @title 无数据时显示
+* @description 无数据时显示效果展示（可自定义）
+ *
+* import {Table} from 'tinper-bee';
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+
+const columns10 = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      width: "40%"
+    },
+    {
+      title: "Age",
+      dataIndex: "age",
+      key: "age",
+      width: "30%"
+    },
+    {
+      title: "Address",
+      dataIndex: "address",
+      key: "address"
+    }
+  ];
+  
+  const data10 = [
+    
+  ];
+
+  const emptyFunc = () => <span>这里没有数据！</span>
+  
+  class Demo10 extends Component {
+    render() {
+      return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
+    }
+  }
+
+export default Demo10;
\ No newline at end of file
diff --git a/demo/demolist/Demo11.js b/demo/demolist/Demo11.js
new file mode 100644
index 0000000..782fa06
--- /dev/null
+++ b/demo/demolist/Demo11.js
@@ -0,0 +1,65 @@
+/**
+*
+* @title 列排序
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import Icon from "bee-icon";
+import sort from "../../src/lib/sort.js";
+let ComplexTable = sort(Table, Icon);
+const columns11 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d"
+  }
+];
+
+const data11 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+];
+
+const defaultProps11 = {
+  prefixCls: "bee-table"
+};
+class Demo11 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sortOrder: "",
+      data: data11
+    };
+  }
+  render() {
+
+    return <ComplexTable columns={columns11} data={this.state.data} />;
+  }
+}
+Demo11.defaultProps = defaultProps11;
+
+
+export default Demo11;
\ No newline at end of file
diff --git a/demo/demolist/Demo12.js b/demo/demolist/Demo12.js
new file mode 100644
index 0000000..293dcd7
--- /dev/null
+++ b/demo/demolist/Demo12.js
@@ -0,0 +1,74 @@
+/**
+*
+* @title 全选功能
+* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import multiSelect from "../../src/lib/multiSelect.js";
+import Checkbox from 'bee-checkbox';
+
+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: "d",
+    key: "d"
+  }
+];
+
+const data12 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
+];
+//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
+let MultiSelectTable  = multiSelect(Table, Checkbox);
+
+class Demo12 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data12
+    };
+  }
+  getSelectedDataFunc = data => {
+    console.log(data);
+  };
+  
+  render() {
+    let multiObj = {
+      type: "checkbox"
+    };
+    return (
+      <MultiSelectTable 
+        columns={columns12} 
+        data={data12} 
+        multiSelect={multiObj}
+        getSelectedDataFunc={this.getSelectedDataFunc}/>
+    );
+  }
+}
+
+export default Demo12;
\ No newline at end of file
diff --git a/demo/demolist/Demo13.js b/demo/demolist/Demo13.js
new file mode 100644
index 0000000..557be8b
--- /dev/null
+++ b/demo/demolist/Demo13.js
@@ -0,0 +1,134 @@
+/**
+ *
+ * @title 多列排序、全选功能、合计
+ * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
+ *
+ */
+
+import React, { Component } from "react";
+import Table from "../../src";
+import Checkbox from "bee-checkbox";
+import Button from "bee-button";
+import Icon from "bee-icon";
+import multiSelect from "../../src/lib/multiSelect.js";
+import sort from "../../src/lib/sort.js";
+import sum from "../../src/lib/sum.js";
+
+const columns13 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    className:'dfasd',
+    width: 200
+  },
+  {
+    title: "功力指数",
+    dataIndex: "b",
+    key: "b",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c,
+    sorterClick:(data,type)=>{//排序的回调函数
+      //type value is up or down
+      console.log("data",data);
+    }
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c,
+    sorterClick:(data,type)=>{//排序的回调函数
+      //type value is up or down
+      console.log("data",data);
+    }
+  },
+  {
+    title: "成绩",
+    dataIndex: "e",
+    key: "e",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c,
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 200
+  }
+];
+
+const data13 = [
+  { a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
+  { a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
+  { a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
+  { a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
+  { a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
+];
+
+//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
+let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
+
+class Demo13 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data13: data13,
+      selectedRow: this.selectedRow,
+      selectDisabled: this.selectDisabled
+    };
+  }
+  getSelectedDataFunc = data => {
+    console.log(data);
+  };
+  selectDisabled = (record, index) => {
+    // console.log(record);
+    if (index === 1) {
+      return true;
+    }
+    return false;
+  };
+  selectedRow = (record, index) => {
+    // console.log(record);
+    if (index === 0) {
+      return true;
+    }
+    return false;
+  };
+  onClick = () => {
+    this.setState({
+      selectedRow: function() {}
+    });
+  };
+
+  render() {
+    let multiObj = {
+      type: "checkbox"
+    };
+    let sortObj = {
+      mode:'multiple'
+    }
+   
+    return (
+      <div>
+        <Button className="editable-add-btn" onClick={this.onClick}>
+          change selectedRow
+        </Button>
+        <ComplexTable
+          selectDisabled={this.state.selectDisabled}
+          selectedRow={this.state.selectedRow}
+          columns={columns13}
+          data={this.state.data13}
+          multiSelect={multiObj}
+          sort={sortObj}
+          getSelectedDataFunc={this.getSelectedDataFunc}
+        />
+      </div>
+    );
+  }
+}
+export default Demo13;
diff --git a/demo/demolist/Demo14.js b/demo/demolist/Demo14.js
new file mode 100644
index 0000000..abb77c8
--- /dev/null
+++ b/demo/demolist/Demo14.js
@@ -0,0 +1,314 @@
+/**
+*
+* @title 编辑态表格
+* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
+*
+*/
+
+import React from "react";
+import Table from "../../src";
+import Animate from "bee-animate";
+import Tooltip from "bee-tooltip";
+import Button from "bee-button";
+import Form from "bee-form";
+import Icon from "bee-icon";
+import Input from "bee-form-control";
+import Checkbox from "bee-checkbox";
+import Datepicker from "bee-datepicker";
+import Select from "bee-select";
+import renderInput from "../../build/render/InputRender.js";
+import renderDate from "../../build/render/DateRender.js";
+import renderSelect from "../../build/render/SelectRender.js";
+
+const InputRender = renderInput(Form, Input, Icon);
+const DateRender = renderDate(Datepicker, Icon);
+const SelectRender = renderSelect(Select, Icon);
+
+const format = "YYYY-MM-DD";
+const format2 = "YYYY-MM";
+const format3 = "YYYY-MM-DD HH:mm:ss";
+
+const dateInputPlaceholder = "选择日期";
+const dateInputPlaceholder2 = "选择年月";
+const dataSource = [
+  {
+    key: "boyuzhou",
+    value: "jack"
+  },
+  {
+    key: "renhualiu",
+    value: "lucy"
+  },
+  {
+    key: "yuzhao",
+    value: "yiminghe"
+  }
+];
+class Demo14 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [
+        {
+          key: "0",
+          name: "沉鱼",
+          number: "10",
+          age: "y",
+          address: "jack",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "1",
+          name: "落雁",
+          number: "100",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "2",
+          name: "闭月",
+          number: "1000",
+          age: "n",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "3",
+          name: "羞花",
+          number: "9999",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        }
+      ],
+      count: 4
+    };
+    this.columns = [
+      {
+        title: "普通输入",
+        dataIndex: "name",
+        key: "name",
+        width: "150px",
+        render: (text, record, index) => (
+          <InputRender
+            name="name"
+            placeholder="请输入姓名"
+            value={text}
+            isclickTrigger={true}
+            check={this.check}
+            onChange={this.onInputChange(index, "name")}
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+          />
+        )
+      },
+      {
+        title: "货币输入",
+        dataIndex: "number",
+        key: "number",
+        width: "150px",
+        render: (text, record, index) => (
+          <InputRender
+            format="Currency"
+            name="number"
+            placeholder="请输入货币"
+            value={text}
+            isclickTrigger={true}
+            check={this.check}
+            onChange={this.onInputChange(index, "number")}
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+            reg={/^[0-9]+$/}
+          />
+        )
+      },
+      {
+        title: "复选",
+        dataIndex: "age",
+        key: "age",
+        width: "100px",
+        render: (text, record, index) => (
+          <Checkbox
+            checked={record.age}
+            onChange={this.onCheckChange(index, "age")}
+          />
+        )
+      },
+      {
+        title: "下拉框",
+        dataIndex: "address",
+        key: "address",
+        width: "200px",
+        render: (text, record, index) => {
+          return (
+            <SelectRender
+              dataSource={dataSource}
+              isclickTrigger={true}
+              value={text}
+              onChange={this.onSelectChange(index, "address")}
+            >
+              <Option value="jack">boyuzhou</Option>
+              <Option value="lucy">renhualiu</Option>
+              <Option value="disabled" disabled>
+                Disabled
+              </Option>
+              <Option value="yiminghe">yuzhao</Option>
+            </SelectRender>
+          );
+        }
+      },
+      {
+        title: "年月日",
+        dataIndex: "datepicker",
+        key: "datepicker",
+        width: "200px",
+        render: (text, record, index) => {
+          return (
+            <DateRender
+              value={text}
+              isclickTrigger={true}
+              format={format}
+              onSelect={this.onDateSelect}
+              onChange={this.onDateChange}
+              placeholder={dateInputPlaceholder}
+            />
+          );
+        }
+      },
+      {
+        title: "年月",
+        dataIndex: "MonthPicker",
+        key: "MonthPicker",
+        width: "200px",
+        render: (text, record, index) => {
+          return (
+            <DateRender
+              value={text}
+              type="MonthPicker"
+              isclickTrigger={true}
+              format={format2}
+              onSelect={this.onSelect}
+              onChange={this.onChange}
+              placeholder={dateInputPlaceholder2}
+            />
+          );
+        }
+      }
+    ];
+  }
+  check = (flag, obj) => {
+    console.log(flag);
+    console.log(obj);
+  };
+
+  onInputChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onCheckChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onSelectChange = (index, key) => {
+    return value => {
+      console.log(`selected ${value}`);
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onDateChange = d => {
+    console.log(d);
+  };
+  onDateSelect = d => {
+    console.log(d);
+  };
+  onDelete = index => {
+    return () => {
+      const dataSource = [...this.state.dataSource];
+      dataSource.splice(index, 1);
+      this.setState({ dataSource });
+    };
+  };
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+      name: `凤姐 ${count}`,
+      age: 32,
+      address: "jack",
+      datepicker: "2017-06-12",
+      MonthPicker: "2017-02"
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1
+    });
+  };
+
+  getBodyWrapper = body => {
+    return (
+      <Animate
+        transitionName="move"
+        component="tbody"
+        className={body.props.className}
+      >
+        {body.props.children}
+      </Animate>
+    );
+  };
+  getData = () => {
+    console.log(this.state.dataSource);
+  };
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.handleAdd}
+        >
+          添加一行
+        </Button>
+        <Button
+          style={{marginLeft:"5px"}}
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.getData}
+        >
+          获取数据
+        </Button>
+        <Table
+          data={dataSource}
+          columns={columns}
+          getBodyWrapper={this.getBodyWrapper}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo14;
diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo15.js
new file mode 100644
index 0000000..71188e0
--- /dev/null
+++ b/demo/demolist/Demo15.js
@@ -0,0 +1,122 @@
+/**
+*
+* @title 表格行/列合并
+* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const renderContent = (value, row, index) => {
+  const obj = {
+    children: value,
+    props: {},
+  };
+  if (index === 4) {
+    obj.props.colSpan = 0;
+  }
+  return obj;
+};
+
+const columns = [{
+  title: 'Name',
+  key: "name",
+  dataIndex: 'name',
+  render: (text, row, index) => {
+    if (index < 4) {
+      return <a href="#">{text}</a>;
+    }
+    return {
+      children: <a href="#">{text}</a>,
+      props: {
+        colSpan: 5,
+      },
+    };
+  },
+}, {
+  title: 'Age',
+  key: "Age",
+  dataIndex: 'age',
+  render: renderContent,
+}, {
+  title: 'Home phone',
+  colSpan: 2,
+  key: "tel",
+  dataIndex: 'tel',
+  render: (value, row, index) => {
+    const obj = {
+      children: value,
+      props: {},
+    };
+    if (index === 2) {
+      obj.props.rowSpan = 2;
+    }
+    if (index === 3) {
+      obj.props.rowSpan = 0;
+    }
+    if (index === 4) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  },
+}, {
+  title: 'Phone',
+  colSpan: 0,
+  key: "phone",
+  dataIndex: 'phone',
+  render: renderContent,
+}, {
+  title: 'Address',
+  key: "address",
+  dataIndex: 'address',
+  render: renderContent,
+}];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  tel: '0571-22098909',
+  phone: 18889898989,
+  address: 'New York No. 1 Lake Park',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  tel: '0571-22098333',
+  phone: 18889898888,
+  age: 42,
+  address: 'London No. 1 Lake Park',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Sidney No. 1 Lake Park',
+}, {
+  key: '4',
+  name: 'Jim Red',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'London No. 2 Lake Park',
+}, {
+  key: '5',
+  name: 'Jake White',
+  age: 18,
+  tel: '0575-22098909',
+  phone: 18900010002,
+  address: 'Dublin No. 2 Lake Park',
+}];
+
+class Demo15 extends Component {
+  render() {
+    return (
+       <Table columns={columns} data={data}/>
+    );
+  }
+}
+
+
+export default Demo15;
diff --git a/demo/demolist/Demo16.js b/demo/demolist/Demo16.js
new file mode 100644
index 0000000..2a68305
--- /dev/null
+++ b/demo/demolist/Demo16.js
@@ -0,0 +1,130 @@
+/**
+*
+* @title 嵌套子表格
+* @description 通过expandedRowRender参数来实现子表格
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns16 = [
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d", 
+    width:200,
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert("这是第" + index + "列，内容为:" + text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  },
+  { title: "用户名", dataIndex: "a", key: "a", width: 250 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  
+];
+const columns17 = [
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    width:200,
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert("这是第" + index + "列，内容为:" + text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  },
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  
+];
+
+const data16 = [
+  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+];
+
+
+class Demo16 extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+      data_obj:{}
+    }
+  }
+  expandedRowRender = (record, index, indent) => {
+    let height = 42 * (this.state.data_obj[record.key].length+ 2);
+    
+    return (
+      <Table
+        columns={columns17}
+        style={{height:height}}
+        data={this.state.data_obj[record.key]} 
+
+      />
+    );
+  };
+  getData=(expanded, record)=>{
+    //当点击展开的时候才去请求数据
+    let new_obj = Object.assign({},this.state.data_obj);
+    if(expanded){
+      if(record.key==='1'){
+        new_obj[record.key] = [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
+        ]
+        this.setState({
+          data_obj:new_obj
+        })
+      }else{
+        new_obj[record.key] = [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
+        ]
+        this.setState({
+          data_obj:new_obj
+        })
+      }
+    }
+  }
+  haveExpandIcon=(record, index)=>{
+    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
+    if(index == 0){
+      return true;
+    }
+    return false;
+  }
+  render() {
+    return (
+      <Table
+        columns={columns16}
+        data={data16}
+        onExpand={this.getData}
+        expandedRowRender={this.expandedRowRender}
+        scroll={{x:true}}
+        title={currentData => <div>标题: 这是一个标题</div>}
+        footer={currentData => <div>表尾: 我是小尾巴</div>}
+      />
+    );
+  }
+}
+
+export default Demo16;
diff --git a/demo/demolist/Demo17.js b/demo/demolist/Demo17.js
new file mode 100644
index 0000000..2900b30
--- /dev/null
+++ b/demo/demolist/Demo17.js
@@ -0,0 +1,76 @@
+/**
+*
+* @title loading属性指定表格是否加载中
+* @description  loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
+*
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+import Button from "bee-button";
+
+const columns17 = [
+  { title: "用户名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    render(text, record, index) {
+      return (
+        <a
+          href="#"
+          onClick={() => {
+            alert('这是第'+index+'列，内容为:'+text);
+          }}
+        >
+          一些操作
+        </a>
+      );
+    }
+  }
+];
+
+const data17 = [
+  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
+  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
+];
+
+class Demo17 extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      loading : true
+    }
+  }
+  changeLoading = () => {
+    this.setState({
+      loading : !this.state.loading
+    })
+  }
+  render() {
+    return (
+      <div>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.changeLoading}
+        >
+          切换loading
+        </Button>
+        <Table
+          columns={columns17}
+          data={data17}
+          title={currentData => <div>标题: 这是一个标题</div>}
+          footer={currentData => <div>表尾: 我是小尾巴</div>}
+          // loading={this.state.loading}或者是boolean
+          loading={{show:this.state.loading,loadingType:"line"}}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo17;
diff --git a/demo/demolist/Demo18.js b/demo/demolist/Demo18.js
new file mode 100644
index 0000000..071b303
--- /dev/null
+++ b/demo/demolist/Demo18.js
@@ -0,0 +1,145 @@
+/**
+ *
+ * @title 合并标题后的合计,且支持多字段统计
+ * @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
+ *
+ */
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Table from "../../src"; 
+import sum from "../../src/lib/sum.js";
+ 
+let ComplexTable = sum(Table);
+
+const columns = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    width: 100,
+    fixed: "left"
+  },
+  {
+    title: "Other",
+    children: [
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        width: 200,
+        sumCol: true,
+      },
+      {
+        title: "Address",
+        children: [
+          {
+            title: "Street",
+            dataIndex: "street",
+            key: "street",
+            width: 200
+          },
+          {
+            title: "Block",
+            children: [
+              {
+                title: "Building",
+                dataIndex: "building",
+                key: "building",
+                width: 100
+              },
+              {
+                title: "Door No.",
+                dataIndex: "number",
+                key: "number",
+                // width: 100,
+                sumCol: true,
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  // {
+  //   title: "Company",
+  //   children: [
+  //     {
+  //       title: "Company Address",
+  //       dataIndex: "companyAddress",
+  //       key: "companyAddress",
+  //       width: 100,
+  //     },
+  //     {
+  //       title: "Company Name",
+  //       dataIndex: "companyName",
+  //       key: "companyName",
+  //       width: 100,
+  //     }
+  //   ]
+  // },
+  {
+    title: "Gender",
+    dataIndex: "gender",
+    key: "gender",
+    width: 80,
+    fixed: "right"
+  }
+];
+
+function getData(){
+  const data = [];
+  for (let i = 0; i < 5; i++) {
+    data.push({
+      key: i,
+      name: "John Brown"+i,
+      age: i + Math.floor(Math.random()*10),
+      street: "Lake Park",
+      building: "C",
+      number: 20 *  Math.floor(Math.random()*10),
+      companyAddress: "Lake Street 42",
+      companyName: "SoftLake Co",
+      gender: "M"
+    });
+  }
+  return data;
+}
+
+class Demo18 extends Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: getData()
+    };
+  }
+
+  changeData = ()=>{
+    this.setState({
+      data: getData()
+    });
+  }
+
+  render() {
+    const {data} = this.state;
+    return (
+      <div>
+        <Button 
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.changeData}
+        >
+          动态设置数据源
+        </Button>
+
+         <ComplexTable 
+          columns={columns}
+          data={data}
+          bordered
+          // scroll={{ x: "130%", y: 140 }}
+        />
+      </div>
+    );
+  }
+}
+export default Demo18;
diff --git a/demo/demolist/Demo19.js b/demo/demolist/Demo19.js
new file mode 100644
index 0000000..dc353f7
--- /dev/null
+++ b/demo/demolist/Demo19.js
@@ -0,0 +1,227 @@
+/**
+*
+* @title 编辑态表格
+* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
+*
+*/
+
+import Button from "bee-button";
+import React from "react";
+import Table from "../../src";
+import Animate from "bee-animate";
+import Tooltip from "bee-tooltip";
+import Icon from "bee-icon";
+import Input from "bee-form-control";
+import Form from "bee-form";
+import Select from "bee-select";
+import renderInput from "../../build/render/InputRender.js";
+import renderSelect from "../../build/render/SelectRender.js";
+
+const InputRender = renderInput(Form, Input, Icon);
+const SelectRender = renderSelect(Select, Icon);
+
+const Option = Select.Option;
+
+const dataSource = [
+  {
+    key: "boyuzhou",
+    value: "jack"
+  },
+  {
+    key: "renhualiu",
+    value: "lucy"
+  },
+  {
+    key: "yuzhao",
+    value: "yiminghe"
+  }
+];
+class Demo19 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [
+        {
+          key: "0",
+          name: "沉鱼",
+          number: "10",
+          age: "y",
+          address: "jack",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "1",
+          name: "落雁",
+          number: "100",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "2",
+          name: "闭月",
+          number: "1000",
+          age: "n",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        },
+        {
+          key: "3",
+          name: "羞花",
+          number: "9999",
+          age: "y",
+          address: "lucy",
+          datepicker: "2017-06-12",
+          MonthPicker: "2017-02"
+        }
+      ],
+      count: 4
+    };
+    this.columns = [ 
+      {
+        title: "货币输入",
+        dataIndex: "number",
+        key: "number",
+        width: "150px",
+        render: (text, record, index) => (
+          <InputRender
+            format="Currency"
+            name="name"
+            placeholder="请输入姓名"
+            value={text}
+            isclickTrigger={true}
+            check={this.check}
+            onChange={this.onInputChange(index, "name")}
+            isRequire={true}
+            method="blur"
+            errorMessage={
+              <Tooltip overlay={"错误提示"}>
+                <Icon type="uf-exc-c" className="" />
+              </Tooltip>
+            }
+            reg={/^[0-9]+$/}
+          />
+        )
+      },
+       
+      {
+        title:(<div>下拉框的div</div>),
+        dataIndex: "address",
+        key: "address",
+        width: "200px",
+        render: (text, record, index) => {
+          return (
+            <SelectRender
+              dataSource={dataSource}
+              isclickTrigger={true}
+              value={text}
+              onChange={this.onSelectChange(index, "address")}
+              onFocus={this.handFocus}
+              onBlur={this.onBlur}
+              autofocus
+            >
+              <Option value="jack">boyuzhou</Option>
+              <Option value="lucy">renhualiu</Option>
+              <Option value="disabled" disabled>
+                Disabled
+              </Option>
+              <Option value="yiminghe">yuzhao</Option>
+            </SelectRender>
+          );
+        }
+      }
+    ];
+  }
+  check = (flag, obj) => {
+    console.log(flag);
+    console.log(obj);
+  };
+
+  handFocus = (value,e) => {
+    console.log(value+` 获取焦点事件`);
+  };
+  onBlur = (value,e) => {
+    console.log(value+` onBlur`);
+  };
+
+  onInputChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+
+  onSelectChange = (index, key) => {
+    return value => {
+      console.log(`selected ${value}`);
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+      name: `凤姐 ${count}`,
+      age: 32,
+      address: "jack",
+      datepicker: "2017-06-12",
+      MonthPicker: "2017-02"
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1
+    });
+  };
+
+  getBodyWrapper = body => {
+    return (
+      <Animate
+        transitionName="move"
+        component="tbody"
+        className={body.props.className}
+      >
+        {body.props.children}
+      </Animate>
+    );
+  };
+  getData = () => {
+    console.log(this.state.dataSource);
+  };
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.handleAdd}
+        >
+          添加一行
+        </Button>
+        <Button
+          style={{marginLeft:"5px"}}
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.getData}
+        >
+          获取数据
+        </Button>
+        <Table
+          data={dataSource}
+          columns={columns}
+          getBodyWrapper={this.getBodyWrapper}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo19;
diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js
new file mode 100644
index 0000000..b3a005f
--- /dev/null
+++ b/demo/demolist/Demo2.js
@@ -0,0 +1,202 @@
+/**
+*
+* @title 增删改表格
+* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
+*
+*/
+
+import Button from "bee-button";
+import React, { Component } from "react";
+import Table from "../../src";
+import Animate from "bee-animate";
+import Icon from "bee-icon";
+import Input from "bee-form-control";
+import Popconfirm from "bee-popconfirm";
+
+class EditableCell extends React.Component {
+  state = {
+    value: this.props.value,
+    editable: false
+  };
+  handleChange = e => {
+    const value = e;
+    this.setState({ value });
+  };
+  check = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  };
+  edit = () => {
+    this.setState({ editable: true });
+  };
+  handleKeydown = event => {
+    if (event.keyCode == 13) {
+      this.check();
+    }
+  };
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className="editable-cell">
+        {editable ? (
+          <div className="editable-cell-input-wrapper">
+            <Input
+              value={value}
+              onChange={this.handleChange}
+              onKeyDown={this.handleKeydown}
+            />
+            <Icon
+              type="uf-correct"
+              className="editable-cell-icon-check"
+              onClick={this.check}
+            />
+          </div>
+        ) : (
+          <div className="editable-cell-text-wrapper">
+            {value || " "}
+            <Icon
+              type="uf-pencil"
+              className="editable-cell-icon"
+              onClick={this.edit}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+class Demo2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.columns = [
+      {
+        title: "姓名",
+        dataIndex: "name",
+        key: "name",
+        width: "30%",
+        render: (text, record, index) => (
+          <EditableCell
+            value={text}
+            onChange={this.onCellChange(index, "name")}
+          />
+        )
+      },
+      {
+        title: "年龄",
+        dataIndex: "age",
+        key: "age"
+      },
+      {
+        title: "你懂的",
+        dataIndex: "address",
+        key: "address"
+      },
+      {
+        title: "操作",
+        dataIndex: "operation",
+        key: "operation",
+        render: (text, record, index) => {
+          return this.state.dataSource.length > 1 ? (
+            <Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
+              <Icon type="uf-del" />
+            </Popconfirm>
+          ) : null;
+        }
+      }
+    ];
+
+    this.state = {
+      dataSource: [
+        {
+          key: "0",
+          name: "沉鱼",
+          age: "18",
+          address: "96, 77, 89"
+        },
+        {
+          key: "1",
+          name: "落雁",
+          age: "16",
+          address: "90, 70, 80"
+        },
+        {
+          key: "2",
+          name: "闭月",
+          age: "17",
+          address: "80, 60, 80"
+        },
+        {
+          key: "3",
+          name: "羞花",
+          age: "20",
+          address: "120, 60, 90"
+        }
+      ],
+      count: 4
+    };
+  }
+  onCellChange = (index, key) => {
+    return value => {
+      const dataSource = [...this.state.dataSource];
+      dataSource[index][key] = value;
+      this.setState({ dataSource });
+    };
+  };
+  onDelete = (index) => {
+    return () => {
+      const dataSource = [...this.state.dataSource];
+      dataSource.splice(index, 1);
+      this.setState({ dataSource });
+    }
+  };
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+      name: `凤姐 ${count}`,
+      age: 32,
+      address: `100 100 100`
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1
+    });
+  };
+
+  getBodyWrapper = body => {
+    return (
+      <Animate
+        transitionName="move"
+        component="tbody"
+        className={body.props.className}
+      >
+        {body.props.children}
+      </Animate>
+    );
+  };
+  render() {
+    const { dataSource } = this.state;
+    const columns = this.columns;
+    return (
+      <div>
+        <Button
+          className="editable-add-btn"
+          type="ghost"
+          onClick={this.handleAdd}
+        >
+          添加
+        </Button>
+        <Table
+          data={dataSource}
+          columns={columns}
+          getBodyWrapper={this.getBodyWrapper}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo2;
diff --git a/demo/demolist/Demo20.js b/demo/demolist/Demo20.js
new file mode 100644
index 0000000..88c0355
--- /dev/null
+++ b/demo/demolist/Demo20.js
@@ -0,0 +1,58 @@
+/**
+*
+* @title 简单表格选中行的背景色、表头表尾
+* @description
+*/
+
+import React, { Component } from "react";
+import Button from "bee-button";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+
+const columns = [
+  { title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+];
+
+const data = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+class Demo26 extends Component {
+
+  constructor(props){
+      super(props);
+      this.state = {
+        data: data,
+        selectedRowIndex: 0
+      }
+  }
+
+  render() {
+    return (
+      <Table
+        columns={columns}
+        data={data}
+        rowClassName={(record,index,indent)=>{
+          if (this.state.selectedRowIndex == index) {
+              return 'selected';
+          } else {
+              return '';
+          }
+        }}
+        onRowClick={(record,index,indent)=>{
+          this.setState({ 
+              selectedRowIndex: index
+          });
+        }}
+        title={currentData => <div>标题: 这是一个标题</div>}
+        footer={currentData => <div>表尾: 我是小尾巴</div>}
+      /> 
+    );
+  }
+}
+
+export default Demo26;
diff --git a/demo/demolist/Demo21.js b/demo/demolist/Demo21.js
new file mode 100644
index 0000000..58de5d2
--- /dev/null
+++ b/demo/demolist/Demo21.js
@@ -0,0 +1,109 @@
+/**
+*
+* @title 根据列进行过滤
+* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import filterColumn from '../../src/lib/filterColumn';
+import sum from '../../src/lib/sum';
+import Icon from "bee-icon";
+import Checkbox from 'bee-checkbox';
+import Popover from 'bee-popover';
+
+const data21 = [
+  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
+];
+
+const FilterColumnTable = filterColumn(Table, Popover, Icon);
+
+const defaultProps21 = {
+  prefixCls: "bee-table"
+};
+
+class Demo21 extends Component {
+  constructor(props) {
+    super(props);
+    this.state ={
+              columns21: [
+                {
+                  title: "名字",
+                  dataIndex: "a",
+                  key: "a"
+                  // width: 100
+                },
+                {
+                  title: "性别",
+                  dataIndex: "b",
+                  key: "b",
+                  // width: 100
+                },
+                {
+                  title: "年龄",
+                  dataIndex: "c",
+                  key: "c",
+                  ifshow:false,
+                  // width: 200,
+                  // sumCol: true,
+                  sorter: (a, b) => a.c - b.c
+                },
+                {
+                  title: "武功级别",
+                  dataIndex: "d",
+                  key: "d"
+                },
+                {
+                  title: "操作",
+                  dataIndex: "e",
+                  key: "e",
+                  render(text, record, index){
+                    return (
+                      <div  title={text} >
+                          <a href="#"
+                              tooltip={text}
+                              onClick={() => {
+                                alert('这是第'+index+'列，内容为:'+text);
+                              }}
+                              // style={{
+                              //     position: 'absolute',
+                              //     top: 5,
+                              //     left: 0
+                              // }}
+                            >
+                              一些操作
+                            </a>
+                      </div>
+                    );
+                  }
+                }
+              ]};
+  }
+  afterFilter = (optData,columns)=>{
+    if(optData.key == 'b'){
+        if(optData.ifshow){
+          columns[2].ifshow = false;
+        }else{
+          columns[2].ifshow = true;
+        }
+        this.setState({
+          columns21 :columns,
+          showFilterPopover:true
+        });
+    }
+    
+  }
+ 
+  render() {
+    
+    return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
+  }
+}
+Demo21.defaultProps = defaultProps21;
+
+
+export default Demo21;
\ No newline at end of file
diff --git a/demo/demolist/Demo22.js b/demo/demolist/Demo22.js
new file mode 100644
index 0000000..9d2687e
--- /dev/null
+++ b/demo/demolist/Demo22.js
@@ -0,0 +1,68 @@
+/**
+*
+* @title 列的拖拽，交换表头的顺序
+* @description 点击列的表头，进行左右拖拽
+*/
+import React, { Component } from 'react';
+import Table from '../../src'; 
+import dragColumn from '../../src/lib/dragColumn';
+
+import Icon from "bee-icon";
+
+const columns22 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 200
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 200,
+  }
+];
+
+const data22 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+];
+
+const DragColumnTable = dragColumn(Table);
+
+const defaultProps22 = {
+  prefixCls: "bee-table"
+};
+
+class Demo22 extends Component {
+  constructor(props) {
+    super(props); 
+  }
+ 
+  render() {
+    return <DragColumnTable columns={columns22} data={data22} bordered
+    
+    draggable={true} 
+    />;
+  }
+}
+Demo22.defaultProps = defaultProps22;
+
+
+export default Demo22;
\ No newline at end of file
diff --git a/demo/demolist/Demo24.js b/demo/demolist/Demo24.js
new file mode 100644
index 0000000..2b22dcd
--- /dev/null
+++ b/demo/demolist/Demo24.js
@@ -0,0 +1,181 @@
+/**
+*
+* @title 动态设置固、取消固定列
+* @description 动态设置固、取消固定列
+* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
+*
+*/
+import React, { Component } from 'react';
+import Table from '../../src';
+import Icon from 'bee-icon';
+import Menu from 'bee-menus';
+import Dropdown from 'bee-dropdown';
+
+
+const { Item } = Menu;
+// const columns24 = [
+//   {
+//     title: "Full Name",
+//     width: 100,
+//     dataIndex: "name",
+//     key: "name",
+//     fixed: "left",
+//   },
+//   { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
+//   { title: "Column 1", dataIndex: "address", key: "1"  },
+//   { title: "Column 2", dataIndex: "address2", key: "2" },
+//   { title: "Column 3", dataIndex: "address", key: "3" },
+//   { title: "Column 4", dataIndex: "address", key: "4" },
+//   { title: "Column 24", dataIndex: "address", key: "24" },
+//   { title: "Column 6", dataIndex: "address", key: "6" },
+//   { title: "Column 7", dataIndex: "address", key: "7" },
+//   { title: "Column 8", dataIndex: "address", key: "8" }
+// ];
+
+
+const columns24 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 100, 
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 150 
+  },
+  {
+    title: "对手",
+    dataIndex: "e",
+    key: "e",
+    width: 100 
+  },
+  {
+    title: "帮派",
+    dataIndex: "f",
+    key: "f",
+    width: 100 
+  },
+  {
+    title: "武功类型",
+    dataIndex: "g",
+    key: "g",
+    width: 100 
+  },
+  {
+    title: "师傅",
+    dataIndex: "k",
+    key: "k",
+    // width: 100 
+  },
+  {
+    title: "攻击系数",
+    dataIndex: "h",
+    key: "h",
+    width: 100 
+  }
+];
+
+
+const data24 = [
+  { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
+  { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
+]; 
+ 
+class Demo24 extends Component {
+
+  constructor(props) {
+    super(props);
+    // let columns = [];
+    // Object.assign(columns,columns24);
+    // columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
+    this.state = {
+      columns:columns24
+    }
+  }
+
+  
+    onSelect = ({key,item})=>{ 
+      console.log(`${key} selected`); //获取key
+      let currentObject = item.props.data; //获取选中对象的数据
+      let {columns} = this.state;
+      let fixedCols = [];
+      let nonColums = [];
+      columns.find(da=>{
+        if(da.key == key){
+          da.fixed?delete da.fixed:da.fixed = 'left';
+        }
+        da.fixed?fixedCols.push(da):nonColums.push(da);
+      });
+    
+      columns = [...fixedCols,...nonColums]
+
+      this.setState({
+        columns
+      });
+    }
+  //表头增加下拉菜单
+  renderColumnsDropdown(columns) {
+    const icon ='uf-arrow-down';
+    
+    return columns.map((originColumn,index) => {
+      let column = Object.assign({}, originColumn);
+      let menuInfo = [], title='锁定';
+      if(originColumn.fixed){
+        title = '解锁'
+      }
+      menuInfo.push({
+        info:title,
+        key:originColumn.key,
+        index:index
+      });
+      const menu = (
+        <Menu onSelect={this.onSelect} >{
+            menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
+            }
+        </Menu>)
+      column.title = (
+        <span className='title-con drop-menu'>
+          {column.title}
+          <Dropdown
+            trigger={['click']} 
+            overlay={menu}
+            animation="slide-up"
+          >
+           <Icon type={icon}/>
+          </Dropdown> 
+          
+        </span>
+      );
+      return column;
+    });
+    
+  }
+
+  render() {
+    let {columns} = this.state;
+     columns = this.renderColumnsDropdown(columns);
+    return <div className="demo24">
+            <Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
+          </div>;
+  }
+}
+
+export default Demo24;
\ No newline at end of file
diff --git a/demo/demolist/Demo24.scss b/demo/demolist/Demo24.scss
new file mode 100644
index 0000000..4d6dc41
--- /dev/null
+++ b/demo/demolist/Demo24.scss
@@ -0,0 +1,18 @@
+th{
+    .drop-menu{
+        .uf{
+            font-size: 12px;
+            visibility: hidden;
+            margin-left: 15px;
+        }
+        
+    
+    }
+    &:hover{
+        .uf{
+                visibility: visible;
+        }
+    }
+
+}
+
diff --git a/demo/demolist/Demo25.js b/demo/demolist/Demo25.js
new file mode 100644
index 0000000..f4c2042
--- /dev/null
+++ b/demo/demolist/Demo25.js
@@ -0,0 +1,221 @@
+/**
+* @title 根据列进行过滤、拖拽交换列综合使用案例
+* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。
+*/
+
+/**注：
+ *  在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。 
+ *  必须有个别列不设置width属性，即可避免此问题。
+ */
+import React, { Component } from 'react';
+import Table from '../../src';
+import multiSelect from '../../src/lib/multiSelect';
+import filterColumn from '../../src/lib/filterColumn';
+import dragColumn from "../../src/lib/dragColumn";
+
+import sum from '../../src/lib/sum';
+import Icon from "bee-icon";
+import Checkbox from 'bee-checkbox';
+import Popover from 'bee-popover';
+
+ //Cloumns1
+function getCloumns(){
+  const column = [
+      {
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+          width: 100, 
+      },
+      {
+          title: "订单编号",
+          dataIndex: "orderCode",
+          key: "orderCode",
+          width: 100, 
+      },
+      {
+          title: "供应商名称",
+          dataIndex: "supplierName",
+          key: "supplierName",
+          width: 100
+      },
+      {
+          title: "类型",
+          dataIndex: "type_name",
+          key: "type_name",
+          width: 100
+      },
+      {
+          title: "采购组织",
+          dataIndex: "purchasing",
+          key: "purchasing",
+          width: 100
+      },
+      {
+          title: "采购组",
+          dataIndex: "purchasingGroup",
+          key: "purchasingGroup",
+           width: 300
+      },
+      {
+          title: "凭证日期",
+          dataIndex: "voucherDate",
+          key: "voucherDate",
+          width: 100,
+          
+      },
+      {
+          title: "审批状态",
+          dataIndex: "approvalState_name",
+          key: "approvalState_name",
+          width: 100
+      },
+      {
+          title: "确认状态",
+          dataIndex: "confirmState_name",
+          key: "confirmState_name",
+           width: 100
+      }, 
+      {
+          title: "关闭状态",
+          dataIndex: "closeState_name",
+          key: "closeState_name",
+          width: 100
+      },
+      {
+          title: "操作",
+          dataIndex: "d",
+          key: "d",
+          width:100,
+          fixed: "right",
+          render(text, record, index) {
+              return (
+                  <div className='operation-btn'>
+                    <a href="#"
+                      tooltip={text}
+                      onClick={() => {
+                        alert('这是第'+index+'列，内容为:'+text);
+                      }}
+                    >
+                      一些操作
+                    </a>
+                  </div>
+              )
+          }
+      }
+  ];
+  return column;
+}
+
+const dataList = [ 
+  { 
+      index: 1, 
+      orderCode:"2343", 
+      supplierName: "xxx",
+      type_name: "123",
+      purchasing:'内行', 
+      purchasingGroup:"323",
+      voucherDate:"kkkk",
+      approvalState_name:"vvvv",
+      confirmState_name:"aaaa",
+      closeState_name:"vnnnnn",
+      d:"操作",
+      key: "1"
+  }, 
+  { 
+    index: 2, 
+    _checked:true,
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    d:"2操作",
+    key: "2"
+  },
+  { 
+    index: 3, 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    _disabled:true,
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    d:"3操作",
+    key: "3"
+  },
+  { 
+    index: 4, 
+    orderCode:"222", 
+    supplierName: "22xxx",
+    type_name: "1223",
+    purchasing:'内行2', 
+    purchasingGroup:"3223",
+    voucherDate:"222kk",
+    approvalState_name:"22vvvv",
+    confirmState_name:"2aaaa",
+    closeState_name:"2vnnnnn",
+    d:"4操作",
+    key: "4"
+  },
+]
+
+const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
+
+const defaultProps25 = {
+  prefixCls: "bee-table"
+};
+
+class Demo25 extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  getSelectedDataFunc=(data)=>{
+      console.log("data",data);
+  }
+ 
+  getCloumnsScroll=(columns)=>{
+    let sum = 0;
+    columns.forEach((da)=>{
+        sum += da.width;
+    })
+    console.log("sum",sum);
+    return (sum);
+  }
+
+  selectedRow=(record, index)=>{
+
+  }
+
+  render() {
+    let columns = getCloumns();
+    
+    return <div className="demo25">
+            <DragColumnTable 
+                columns={columns}
+                data={dataList} 
+                getSelectedDataFunc={this.getSelectedDataFunc}
+                bordered
+                checkMinSize={7}
+                draggable={true}
+                multiSelect={{type: "checkbox"}}
+                scroll={{x:"130%", y: 100}}
+                selectedRow={this.selectedRow}
+                // scroll={{x:this.getCloumnsScroll(columns), y: 150}}
+                />
+            </div>
+  }
+}
+Demo25.defaultProps = defaultProps25;
+
+
+export default Demo25;
\ No newline at end of file
diff --git a/demo/demolist/Demo26.js b/demo/demolist/Demo26.js
new file mode 100644
index 0000000..037632e
--- /dev/null
+++ b/demo/demolist/Demo26.js
@@ -0,0 +1,107 @@
+/**
+*
+* @title 按条件和值过滤
+* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+
+const columns26 = [
+  { title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
+  { title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
+  { title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
+  { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
+  { title: "备注", dataIndex: "mark", key: "mark" }
+];
+
+const data26 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-19",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  }, {
+    key: "5",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "6",
+    name: "Jim Green",
+    age: 48,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "7",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "8",
+    name: "Jim Green",
+    age: 38,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  }
+];
+
+class Demo26 extends Component {
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
+  }
+
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
+  }
+  render() {
+    return <Table
+      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
+      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
+      filterable={true}//是否开启过滤数据功能
+      bordered
+      columns={columns26}
+      data={data26} />;
+  }
+}
+
+export default Demo26;
\ No newline at end of file
diff --git a/demo/demolist/Demo27.js b/demo/demolist/Demo27.js
new file mode 100644
index 0000000..8b24ff3
--- /dev/null
+++ b/demo/demolist/Demo27.js
@@ -0,0 +1,211 @@
+/**
+*
+* @title 组合过滤和其他功能使用
+* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
+*
+*/
+
+/**
+ * @description 
+ */
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import multiSelect from '../../src/lib/MultiSelect';
+import sort from '../../src/lib/sort';
+import Checkbox from 'bee-checkbox';
+import Icon from 'bee-icon';
+import Menu from 'bee-menus';
+import Dropdown from 'bee-dropdown';
+
+
+const { Item } = Menu;
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+
+const dataList = [
+  { "key": "1", value: "库存明细", id: "a" },
+  { "key": "2", value: "订单明细", id: "v" },
+  { "key": "3", value: "发货明细", id: "c" }
+]
+
+const data27 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-19",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  }, {
+    key: "5",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "6",
+    name: "Jim Green",
+    age: 48,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "7",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "8",
+    name: "Jim Green",
+    age: 38,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  }
+];
+
+
+const MultiSelectTable = multiSelect(Table, Checkbox);
+const ComplexTable = sort(MultiSelectTable, Icon);
+class Demo27 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownvalue: []
+    }
+  }
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
+  }
+
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
+  }
+  getSelectedDataFunc = data => {
+    console.log(data);
+  }
+  onClick = (item) => {
+    console.log(item);
+  }
+
+  render() {
+    const menu1 = (
+      <Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
+        <SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
+          <MenuItemGroup title="Item 1">
+            <Menu.Item key="1">选项 1</Menu.Item>
+            <Menu.Item key="2">选项 2</Menu.Item>
+          </MenuItemGroup>
+          <MenuItemGroup title="Iteom 2">
+            <Menu.Item key="3">选项 3</Menu.Item>
+            <Menu.Item key="4">选项 4</Menu.Item>
+          </MenuItemGroup>
+        </SubMenu>
+      </Menu>)
+    let multiObj = {
+      type: "checkbox"
+    };
+    let columns27 = [
+      {
+        title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
+          return <Dropdown
+            trigger={['click']}
+            overlay={menu1}
+            animation="slide-up"
+          >
+            <Icon style={{ "visibility": "hidden" }} type="uf-eye" />
+          </Dropdown>
+        }
+      },
+      {
+        title: "姓名",
+        width: 180,
+        dataIndex: "name",
+        key: "name",
+        filterType: "text",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "string"//字符条件
+      },
+      {
+        title: "年龄",
+        width: 180,
+        dataIndex: "age",
+        key: "age",
+        filterType: "number",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
+      },
+      {
+        title: "日期",
+        width: 190,
+        dataIndex: "date",
+        key: "date",
+        filterType: "date",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "string"//字符条件
+      },
+      {
+        title: "时间范围",
+        width: 290,
+        dataIndex: "mark",
+        key: "mark",
+        filterType: "daterange",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
+      },
+      {
+        title: "地址",
+        width: 100,
+        dataIndex: "address",
+        key: "address",
+        filterType: "dropdown",//输入框类型
+        filterDropdown: "show",//显示条件
+        filterDropdownType: "number"//字符条件
+      }
+    ];
+    return <ComplexTable
+      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
+      filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
+      filterable={true}//是否开启过滤数据功能
+      getSelectedDataFunc={this.getSelectedDataFunc}
+      bordered
+      multiSelect={multiObj}
+      columns={columns27}
+      data={data27} />;
+  }
+}
+
+export default Demo27;
\ No newline at end of file
diff --git a/demo/demolist/Demo28.js b/demo/demolist/Demo28.js
new file mode 100644
index 0000000..9d52286
--- /dev/null
+++ b/demo/demolist/Demo28.js
@@ -0,0 +1,82 @@
+/**
+*
+* @title 列排序,后端排序
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import Icon from "bee-icon";
+import sort from "../../src/lib/sort.js";
+let ComplexTable = sort(Table, Icon);
+const columns11 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d"
+  },
+  {
+    title: "分数",
+    dataIndex: "e",
+    key: "e",
+    sorter: (a, b) => a.c - b.c
+  },
+];
+
+const data11 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
+];
+
+const defaultProps = {
+  prefixCls: "bee-table"
+};
+class Demo28 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sortOrder: "",
+      data: data11
+    };
+  }
+  /**
+   * 后端获取数据
+   */
+  sortFun = (sortParam)=>{
+    console.info(sortParam);
+    //将参数传递给后端排序
+  }
+  render() {
+    let sortObj = {
+      mode:'multiple',
+      backSource:true,
+      sortFun:this.sortFun
+    }
+    return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
+  }
+}
+Demo28.defaultProps = defaultProps;
+
+
+export default Demo28;
\ No newline at end of file
diff --git a/demo/demolist/Demo29.js b/demo/demolist/Demo29.js
new file mode 100644
index 0000000..79be29d
--- /dev/null
+++ b/demo/demolist/Demo29.js
@@ -0,0 +1,170 @@
+/**
+*
+* @title 从弹出框内显示过滤行并且设置可选下拉条件
+* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import Modal from 'bee-modal';
+import Button from 'bee-button';
+
+
+const columns29 = [
+  {
+    title: "姓名",
+    width: 180,
+    dataIndex: "name",
+    key: "name",
+    filterType: "text",
+    filterDropdown: "show",
+    filterDropdownIncludeKeys: ['LIKE', 'EQ']
+  },
+  {
+    title: "年龄",
+    width: 170,
+    dataIndex: "age",
+    key: "age",
+    filterType: "number",
+    filterDropdown: "show",
+    filterDropdownType: "number",
+    filterDropdownIncludeKeys: ['EQ'],
+    filterInputNumberOptions: {
+      max: 200,
+      min: 0,
+      step: 1,
+      precision: 0
+    }
+  },
+  {
+    title: "日期",
+    width: 200,
+    dataIndex: "date",
+    key: "date",
+    filterType: "date",
+    filterDropdown: "show",
+    format: "YYYY-MM-DD"
+  }
+];
+
+const data29 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-19",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "朝阳区",
+    mark: "无"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "东城区",
+    mark: "无"
+  }, {
+    key: "5",
+    name: "John Brown",
+    age: 32,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "6",
+    name: "Jim Green",
+    age: 48,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "7",
+    name: "Jim Green",
+    age: 40,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  },
+  {
+    key: "8",
+    name: "Jim Green",
+    age: 38,
+    date: "2018-09-18",
+    address: "海淀区",
+    mark: "无"
+  }
+];
+
+class Demo29 extends Component {
+  constructor() {
+    super();
+    this.state = {
+      show: false
+    }
+    this.close = this.close.bind(this);
+    this.open = this.open.bind(this);
+  }
+  handlerFilterChange = (key, val, condition) => {
+    console.log('参数：key=', key, ' value=', val, 'condition=', condition);
+  }
+
+  handlerFilterClear = (key) => {
+    console.log('清除条件', key);
+  }
+  close() {
+    this.setState({
+      show: false
+    });
+  }
+  open() {
+    this.setState({
+      show: true
+    });
+  }
+  render() {
+    return (<div><Modal
+      show={this.state.show}
+      onHide={this.close}
+      autoFocus={false}
+      enforceFocus={false}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>过滤行</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Table
+          onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
+          onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
+          filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
+          filterable={true}//是否开启过滤数据功能
+          bordered
+          columns={columns29}
+          data={data29} />
+      </Modal.Body>
+    </Modal>
+      <Button colors="primary" onClick={this.open}>显示表格</Button>
+    </div>)
+  }
+}
+
+export default Demo29;
\ No newline at end of file
diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js
new file mode 100644
index 0000000..0c9947b
--- /dev/null
+++ b/demo/demolist/Demo3.js
@@ -0,0 +1,120 @@
+/**
+ *
+ * @title 表头分组并自定义表头高度
+ * @description columns[n] 可以内嵌 children，以渲染分组表头。
+ * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
+ *
+ */
+
+import Button from "bee-button";
+import React, { Component } from "react";
+import Table from "../../src";
+
+const { ColumnGroup, Column } = Table;
+
+const columns = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    width: 100,
+    fixed: "left"
+  },
+  {
+    title: "Other",
+    width:600,
+    children: [
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        width: 200
+      },
+      {
+        title: "Address",
+        children: [
+          {
+            title: "Street",
+            dataIndex: "street",
+            key: "street",
+            width: 200
+          },
+          {
+            title: "Block",
+            children: [
+              {
+                title: "Building",
+                dataIndex: "building",
+                key: "building",
+                width: 100
+              },
+              {
+                title: "Door No.",
+                dataIndex: "number",
+                key: "number",
+                width: 100
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: "Company",
+    width:400,
+    children: [
+      {
+        title: "Company Address",
+        dataIndex: "companyAddress",
+        key: "companyAddress",
+        width:200,
+      },
+      {
+        title: "Company Name",
+        dataIndex: "companyName",
+        key: "companyName",
+        width:200,
+      }
+    ]
+  },
+  {
+    title: "Gender",
+    dataIndex: "gender",
+    key: "gender",
+    width: 60,
+    fixed: "right"
+  }
+];
+
+const data = [];
+for (let i = 0; i < 20; i++) {
+  data.push({
+    key: i,
+    name: "John Brown",
+    age: i + 1,
+    street: "Lake Park",
+    building: "C",
+    number: 2035,
+    companyAddress: "Lake Street 42",
+    companyName: "SoftLake Co",
+    gender: "M"
+  });
+}
+
+class Demo3 extends Component {
+  render() {
+    return (
+      <Table
+        className={'demo3'}
+        columns={columns}
+        data={data}
+        headerHeight={40} //自定义表头高度
+        bordered
+        scroll={{ y: 240 }}
+      />
+    );
+  }
+}
+
+export default Demo3;
diff --git a/demo/demolist/Demo3.scss b/demo/demolist/Demo3.scss
new file mode 100644
index 0000000..1f174a9
--- /dev/null
+++ b/demo/demolist/Demo3.scss
@@ -0,0 +1,6 @@
+.demo3{
+    .u-table-thead th {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+}
\ No newline at end of file
diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js
new file mode 100644
index 0000000..695b802
--- /dev/null
+++ b/demo/demolist/Demo4.js
@@ -0,0 +1,131 @@
+/**
+*
+* @title 树形数据展示
+* @description 通过在data中配置children数据，来自动生成树形数据
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+
+const columns4 = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    width: "40%"
+  },
+  {
+    title: "Age",
+    dataIndex: "age",
+    key: "age",
+    width: "30%"
+  },
+  {
+    title: "Address",
+    dataIndex: "address",
+    key: "address"
+  }
+];
+
+const data4 = [
+  {
+    key: 1,
+    name: "John Brown sr.",
+    age: 60,
+    address: "New York No. 1 Lake Park",
+    children: [
+      {
+        key: 11,
+        name: "John Brown",
+        age: 42,
+        address: "New York No. 2 Lake Park"
+      },
+      {
+        key: 12,
+        name: "John Brown jr.",
+        age: 30,
+        address: "New York No. 3 Lake Park",
+        children: [
+          {
+            key: 121,
+            name: "Jimmy Brown",
+            age: 16,
+            address: "New York No. 3 Lake Park"
+          }
+        ]
+      },
+      {
+        key: 13,
+        name: "Jim Green sr.",
+        age: 72,
+        address: "London No. 1 Lake Park",
+        children: [
+          {
+            key: 131,
+            name: "Jim Green",
+            age: 42,
+            address: "London No. 2 Lake Park",
+            children: [
+              {
+                key: 1311,
+                name: "Jim Green jr.",
+                age: 25,
+                address: "London No. 3 Lake Park"
+              },
+              {
+                key: 1312,
+                name: "Jimmy Green sr.",
+                age: 18,
+                address: "London No. 4 Lake Park"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    key: 2,
+    name: "Joe Black",
+    age: 32,
+    address: "Sidney No. 1 Lake Park"
+  }
+];
+class Demo4 extends Component {
+
+  constructor(props){
+      super(props);
+      this.state = {
+        data: data4,
+        factoryValue: 0,
+        selectedRow: new Array(data4.length)//状态同步
+      }
+  }
+
+  render() {
+    return <Table 
+    rowClassName={(record,index,indent)=>{
+      if (this.state.selectedRow[index]) {
+          return 'selected';
+      } else {
+          return '';
+      }
+    }}
+    onRowClick={(record,index,indent)=>{
+      let selectedRow = new Array(this.state.data.length);
+      selectedRow[index] = true;
+      this.setState({
+          factoryValue: record,
+          selectedRow: selectedRow
+      });
+    }}
+    
+    columns={columns4} data={data4} />;
+  }
+}
+
+
+export default Demo4;
\ No newline at end of file
diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js
new file mode 100644
index 0000000..77fec42
--- /dev/null
+++ b/demo/demolist/Demo5.js
@@ -0,0 +1,67 @@
+/**
+*
+* @title 固定列
+* @description 固定列到表格的某侧
+*
+*/
+
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+
+
+const columns5 = [
+  {
+    title: "Full Name",
+    width: 100,
+    dataIndex: "name",
+    key: "name",
+    fixed: "left"
+  },
+  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
+  { title: "Column 1", dataIndex: "c1", key: "1" },
+  { title: "Column 2", dataIndex: "c2", key: "2" },
+  { title: "Column 3", dataIndex: "c3", key: "3" },
+  { title: "Column 4", dataIndex: "c4", key: "4" },
+  { title: "Column 5", dataIndex: "c5", key: "5" },
+  { title: "Column 6", dataIndex: "c6", key: "6" },
+  { title: "Column 7", dataIndex: "c7", key: "7" },
+  { title: "Column 8", dataIndex: "c8", key: "8" }
+];
+
+const data5 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York Park"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  }
+];
+
+class Demo5 extends Component {
+  render() {
+    return <Table columns={columns5} data={data5}scroll={{ x: "130%", y: 140 }}/>;
+  }
+}
+
+export default Demo5;
\ No newline at end of file
diff --git a/demo/demolist/Demo6.js b/demo/demolist/Demo6.js
new file mode 100644
index 0000000..35612c5
--- /dev/null
+++ b/demo/demolist/Demo6.js
@@ -0,0 +1,81 @@
+/**
+*
+* @title 固定表头
+* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
+*
+*/
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+import dragColumn from "../../src/lib/dragColumn";;
+const DragColumnTable = dragColumn(Table);
+
+const columns6 = [
+  {
+    title: "Full Name",
+    width: 100,
+    dataIndex: "name",
+    key: "name"
+  },
+  { title: "Age", width: 100, dataIndex: "age", key: "age"},
+  { title: "Address", dataIndex: "address", key: "1" }
+];
+
+const data6 = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York Park"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "3",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "4",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },{
+    key: "11",
+    name: "John Brown",
+    age: 32,
+    address: "New York Park"
+  },
+  {
+    key: "12",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "13",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  },
+  {
+    key: "14",
+    name: "Jim Green",
+    age: 40,
+    address: "London Park"
+  }
+];
+
+class Demo6 extends Component {
+  render() {
+    return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true}  />;
+  }
+}
+
+export default Demo6; 
\ No newline at end of file
diff --git a/demo/demolist/Demo7.js b/demo/demolist/Demo7.js
new file mode 100644
index 0000000..8497820
--- /dev/null
+++ b/demo/demolist/Demo7.js
@@ -0,0 +1,85 @@
+/**
+ *
+ * @title 主子表
+ * @description 主表点击子表联动
+ *
+ */
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns7 = [
+  { title: "班级", dataIndex: "a", key: "a" },
+  { title: "人数", dataIndex: "b", key: "b" },
+  { title: "班主任", dataIndex: "c", key: "c" },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d"
+  }
+];
+
+const data7 = [
+  { a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
+  { a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
+  { a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
+];
+
+const columns7_1 = [
+  { title: "姓名", dataIndex: "a", key: "a" },
+  { title: "班级", dataIndex: "b", key: "b" },
+  { title: "系别", dataIndex: "c", key: "c" }
+];
+
+class Demo7 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      children_data: []
+    };
+  }
+
+  rowclick = (record, index) => {
+    if (record.a === "02级一班") {
+      this.setState({
+        children_data: [
+          { a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
+          { a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
+        ]
+      });
+    } else if (record.a === "03级二班") {
+      this.setState({
+        children_data: [
+          { a: "杨过", b: "03级二班", c: "外语系", key: "1" },
+          { a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
+          { a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
+        ]
+      });
+    } else if (record.a === "05级三班") {
+      this.setState({
+        children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <Table
+          columns={columns7}
+          data={data7}
+          onRowClick={this.rowclick}
+          title={currentData => <div>标题: 我是主表</div>}
+        />
+        <Table
+          style={{ marginTop: 40 }}
+          columns={columns7_1}
+          data={this.state.children_data}
+          title={currentData => <div>标题: 我是子表</div>}
+        />
+      </div>
+    );
+  }
+}
+
+export default Demo7;
diff --git a/demo/demolist/Demo8.js b/demo/demolist/Demo8.js
new file mode 100644
index 0000000..9070b1e
--- /dev/null
+++ b/demo/demolist/Demo8.js
@@ -0,0 +1,73 @@
+/**
+ *
+ * @title 表格+分页
+ * @description 点击分页联动表格
+ */
+
+import React, { Component } from "react";
+
+import Table from "../../src";
+import Pagination from "bee-pagination";
+
+const columns8 = [
+  { title: "姓名", dataIndex: "a", key: "a", width: 100 },
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d"
+  }
+];
+
+const pageData = {
+  1: [
+    { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
+    { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
+    { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
+  ],
+  2: [
+    { a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
+    { a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
+  ]
+};
+
+class Demo8 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: pageData[1],
+      activePage: 1
+    };
+  }
+
+  handleSelect(eventKey) {
+    this.setState({
+      data: pageData[eventKey],
+      activePage: eventKey
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Table columns={columns8} data={this.state.data} />
+        <Pagination
+          first
+          last
+          prev
+          next
+          maxButtons={5}
+          boundaryLinks
+          activePage={this.state.activePage}
+          onSelect={this.handleSelect.bind(this)}
+          onDataNumSelect={this.dataNumSelect}
+          showJump={true}
+          total={100}
+          dataNum={2}
+        />
+      </div>
+    );
+  }
+}
+export default Demo8;
diff --git a/demo/demolist/Demo9.js b/demo/demolist/Demo9.js
new file mode 100644
index 0000000..975c9fe
--- /dev/null
+++ b/demo/demolist/Demo9.js
@@ -0,0 +1,163 @@
+/**
+ *
+ * @title 表格+搜索
+ * @description 搜索刷新表格数据
+ *
+ *
+ * import {Table} from 'tinper-bee';
+ */
+
+import React, { Component } from "react";
+
+import Table from "../../src";
+import Icon from "bee-icon";
+import InputGroup from "bee-input-group";
+import FormControl from "bee-form-control";
+
+class Search extends Component {
+  state = {
+    searchValue: "",
+    empty: false
+  };
+
+  /**
+     * 搜索
+     */
+  handleSearch = () => {
+    let { onSearch } = this.props;
+    this.setState({
+      empty: true
+    });
+    onSearch && onSearch(this.state.searchValue);
+  };
+
+  /**
+     * 捕获回车
+     * @param e
+     */
+  handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      this.handleSearch();
+    }
+  };
+
+  /**
+     * 输入框改变
+     * @param e
+     */
+  handleChange = (e) => {
+    this.setState({
+      searchValue: e
+    });
+  };
+
+  /**
+     * 清空输入框
+     */
+  emptySearch = () => {
+    let { onEmpty } = this.props;
+    this.setState({
+      searchValue: "",
+      empty: false
+    });
+    onEmpty && onEmpty();
+  };
+
+  render() {
+    return (
+      <InputGroup simple className="search-component">
+        <FormControl
+          onChange={this.handleChange}
+          value={this.state.searchValue}
+          onKeyDown={this.handleKeyDown}
+          placeholder="请输入用户名"
+          type="text"
+        />
+        {this.state.empty ? (
+          <Icon
+            type="uf-close-c"
+            onClick={this.emptySearch}
+            className="empty-search"
+          />
+        ) : null}
+
+        <InputGroup.Button onClick={this.handleSearch} shape="border">
+          <Icon type="uf-search" />
+        </InputGroup.Button>
+      </InputGroup>
+    );
+  }
+}
+
+const columns9 = [
+  {
+    title: "姓名",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 100
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d"
+  }
+];
+
+const userData = [
+  { a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
+  { a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
+  { a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
+];
+
+class Demo9 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: userData
+    };
+  }
+
+  handleSearch = value => {
+    if (value === "") {
+      return this.setState({
+        data: userData
+      });
+    }
+    let regExp = new RegExp(value, "ig");
+    let data = userData.filter(item => regExp.test(item.a));
+    this.setState({
+      data
+    });
+  };
+
+  handleEmpty = () => {
+    this.setState({
+      data: userData
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <div className="clearfix">
+          <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
+        </div>
+        <Table columns={columns9} data={this.state.data} />
+      </div>
+    );
+  }
+}
+
+export default Demo9;
diff --git a/demo/index.js b/demo/index.js
index ade3062..c84c9a2 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 Demo23 = require("./demolist/Demo23");var DemoArray = [{"example":<Demo23 />,"title":" 拖拽调整列的宽度","code":"/**\n*\n* @title 拖拽调整列的宽度\n* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200'\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    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    fixed:'right',\n    width: 200,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】"}]
+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 Demo17 = require("./demolist/Demo17");var Demo18 = require("./demolist/Demo18");var Demo19 = require("./demolist/Demo19");var Demo2 = require("./demolist/Demo2");var Demo20 = require("./demolist/Demo20");var Demo21 = require("./demolist/Demo21");var Demo22 = require("./demolist/Demo22");var Demo23 = require("./demolist/Demo23");var Demo24 = require("./demolist/Demo24");var Demo25 = require("./demolist/Demo25");var Demo26 = require("./demolist/Demo26");var Demo27 = require("./demolist/Demo27");var Demo28 = require("./demolist/Demo28");var Demo29 = require("./demolist/Demo29");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":" 简单表格、文字过长，两种tip","code":"/**\n*\n* @title 简单表格、文字过长，两种tip\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip, Button } from 'tinper-bee';\n\nconst columns = [\n  {\n    title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 80, className: \"rowClassName\",\n    render: (text, record, index) => {\n      return (\n        <Tooltip inverse overlay={text}>\n          <span tootip={text} style={{\n            display: \"inline-block\",\n            width: \"60px\",\n            textOverflow: \"ellipsis\",\n            overflow: \"hidden\",\n            whiteSpace: \"nowrap\",\n            verticalAlign: \"middle\",\n          }}>{text}</span>\n        </Tooltip>\n      );\n    }\n  },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: '10%' },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  {\n    title: \"操作\",\n    dataIndex: \"d\",\n    key: \"d\",\n    render(text, record, index) {\n      return (\n        <div style={{ position: 'relative' }} title={text} >\n          <a\n            href=\"javascript:;\"\n            tooltip={text}\n            onClick={() => {\n              alert('这是第' + index + '列，内容为:' + text);\n            }}\n          >\n            一些操作\n              </a>\n        </div>\n      );\n    }\n  }\n];\n\nconst data = [\n  { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n  { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: data,\n      selectedRowIndex: 0\n    }\n  }\n\n  render() {\n    return (\n   \n        <Table\n          columns={columns}\n          data={data}\n          parentNodeId='parent'\n          height={43}\n          headerHeight={42}\n          onRowClick={(record, index, indent) => {\n            this.setState({\n              selectedRowIndex: index\n            });\n          }}\n        />\n\n     \n    );\n  }\n}\n\n\n","desc":""},{"example":<Demo10 />,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示（可自定义）\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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  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*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\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: \"d\",\n    key: \"d\"\n  }\n];\n\nconst data11 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\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  render() {\n\n    return <ComplexTable columns={columns11} data={this.state.data} />;\n  }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":""},{"example":<Demo12 />,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Checkbox } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\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: \"d\",\n    key: \"d\"\n  }\n];\n\nconst data12 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:true},\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:true}\n];\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\nlet MultiSelectTable  = multiSelect(Table, Checkbox);\n\nclass Demo12 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: data12\n    };\n  }\n  getSelectedDataFunc = data => {\n    console.log(data);\n  };\n  \n  render() {\n    let multiObj = {\n      type: \"checkbox\"\n    };\n    return (\n      <MultiSelectTable \n        columns={columns12} \n        data={data12} \n        multiSelect={multiObj}\n        getSelectedDataFunc={this.getSelectedDataFunc}/>\n    );\n  }\n}\n\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）"},{"example":<Demo13 />,"title":" 多列排序、全选功能、合计","code":"/**\n *\n * @title 多列排序、全选功能、合计\n * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Icon, Button, Checkbox } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    className:'dfasd',\n    width: 200\n  },\n  {\n    title: \"功力指数\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 200,\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c,\n    sorterClick:(data,type)=>{//排序的回调函数\n      //type value is up or down\n      console.log(\"data\",data);\n    }\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 200,\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c,\n    sorterClick:(data,type)=>{//排序的回调函数\n      //type value is up or down\n      console.log(\"data\",data);\n    }\n  },\n  {\n    title: \"成绩\",\n    dataIndex: \"e\",\n    key: \"e\",\n    width: 200,\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c,\n  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 200\n  }\n];\n\nconst data13 = [\n  { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n  { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n  { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n  { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n  { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data13: data13,\n      selectedRow: this.selectedRow,\n      selectDisabled: this.selectDisabled\n    };\n  }\n  getSelectedDataFunc = data => {\n    console.log(data);\n  };\n  selectDisabled = (record, index) => {\n    // console.log(record);\n    if (index === 1) {\n      return true;\n    }\n    return false;\n  };\n  selectedRow = (record, index) => {\n    // console.log(record);\n    if (index === 0) {\n      return true;\n    }\n    return false;\n  };\n  onClick = () => {\n    this.setState({\n      selectedRow: function() {}\n    });\n  };\n\n  render() {\n    let multiObj = {\n      type: \"checkbox\"\n    };\n    let sortObj = {\n      mode:'multiple'\n    }\n   \n    return (\n      <div>\n        <Button className=\"editable-add-btn\" onClick={this.onClick}>\n          change selectedRow\n        </Button>\n        <ComplexTable\n          selectDisabled={this.state.selectDisabled}\n          selectedRow={this.state.selectedRow}\n          columns={columns13}\n          data={this.state.data13}\n          multiSelect={multiObj}\n          sort={sortObj}\n          getSelectedDataFunc={this.getSelectedDataFunc}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)"},{"example":<Demo14 />,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport React from \"react\";\nimport { Table, Select, Datepicker, Checkbox, Input, Icon, Form, Button, Tooltip, Animate } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, Input, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n  {\n    key: \"boyuzhou\",\n    value: \"jack\"\n  },\n  {\n    key: \"renhualiu\",\n    value: \"lucy\"\n  },\n  {\n    key: \"yuzhao\",\n    value: \"yiminghe\"\n  }\n];\nclass Demo14 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dataSource: [\n        {\n          key: \"0\",\n          name: \"沉鱼\",\n          number: \"10\",\n          age: \"y\",\n          address: \"jack\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"1\",\n          name: \"落雁\",\n          number: \"100\",\n          age: \"y\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"2\",\n          name: \"闭月\",\n          number: \"1000\",\n          age: \"n\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"3\",\n          name: \"羞花\",\n          number: \"9999\",\n          age: \"y\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        }\n      ],\n      count: 4\n    };\n    this.columns = [\n      {\n        title: \"普通输入\",\n        dataIndex: \"name\",\n        key: \"name\",\n        width: \"150px\",\n        render: (text, record, index) => (\n          <InputRender\n            name=\"name\"\n            placeholder=\"请输入姓名\"\n            value={text}\n            isclickTrigger={true}\n            check={this.check}\n            onChange={this.onInputChange(index, \"name\")}\n            isRequire={true}\n            method=\"blur\"\n            errorMessage={\n              <Tooltip overlay={\"错误提示\"}>\n                <Icon type=\"uf-exc-c\" className=\"\" />\n              </Tooltip>\n            }\n          />\n        )\n      },\n      {\n        title: \"货币输入\",\n        dataIndex: \"number\",\n        key: \"number\",\n        width: \"150px\",\n        render: (text, record, index) => (\n          <InputRender\n            format=\"Currency\"\n            name=\"number\"\n            placeholder=\"请输入货币\"\n            value={text}\n            isclickTrigger={true}\n            check={this.check}\n            onChange={this.onInputChange(index, \"number\")}\n            isRequire={true}\n            method=\"blur\"\n            errorMessage={\n              <Tooltip overlay={\"错误提示\"}>\n                <Icon type=\"uf-exc-c\" className=\"\" />\n              </Tooltip>\n            }\n            reg={/^[0-9]+$/}\n          />\n        )\n      },\n      {\n        title: \"复选\",\n        dataIndex: \"age\",\n        key: \"age\",\n        width: \"100px\",\n        render: (text, record, index) => (\n          <Checkbox\n            checked={record.age}\n            onChange={this.onCheckChange(index, \"age\")}\n          />\n        )\n      },\n      {\n        title: \"下拉框\",\n        dataIndex: \"address\",\n        key: \"address\",\n        width: \"200px\",\n        render: (text, record, index) => {\n          return (\n            <SelectRender\n              dataSource={dataSource}\n              isclickTrigger={true}\n              value={text}\n              onChange={this.onSelectChange(index, \"address\")}\n            >\n              <Option value=\"jack\">boyuzhou</Option>\n              <Option value=\"lucy\">renhualiu</Option>\n              <Option value=\"disabled\" disabled>\n                Disabled\n              </Option>\n              <Option value=\"yiminghe\">yuzhao</Option>\n            </SelectRender>\n          );\n        }\n      },\n      {\n        title: \"年月日\",\n        dataIndex: \"datepicker\",\n        key: \"datepicker\",\n        width: \"200px\",\n        render: (text, record, index) => {\n          return (\n            <DateRender\n              value={text}\n              isclickTrigger={true}\n              format={format}\n              onSelect={this.onDateSelect}\n              onChange={this.onDateChange}\n              placeholder={dateInputPlaceholder}\n            />\n          );\n        }\n      },\n      {\n        title: \"年月\",\n        dataIndex: \"MonthPicker\",\n        key: \"MonthPicker\",\n        width: \"200px\",\n        render: (text, record, index) => {\n          return (\n            <DateRender\n              value={text}\n              type=\"MonthPicker\"\n              isclickTrigger={true}\n              format={format2}\n              onSelect={this.onSelect}\n              onChange={this.onChange}\n              placeholder={dateInputPlaceholder2}\n            />\n          );\n        }\n      }\n    ];\n  }\n  check = (flag, obj) => {\n    console.log(flag);\n    console.log(obj);\n  };\n\n  onInputChange = (index, key) => {\n    return value => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  };\n  onCheckChange = (index, key) => {\n    return value => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  };\n  onSelectChange = (index, key) => {\n    return value => {\n      console.log(`selected ${value}`);\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  };\n  onDateChange = d => {\n    console.log(d);\n  };\n  onDateSelect = d => {\n    console.log(d);\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: \"jack\",\n      datepicker: \"2017-06-12\",\n      MonthPicker: \"2017-02\"\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1\n    });\n  };\n\n  getBodyWrapper = body => {\n    return (\n      <Animate\n        transitionName=\"move\"\n        component=\"tbody\"\n        className={body.props.className}\n      >\n        {body.props.children}\n      </Animate>\n    );\n  };\n  getData = () => {\n    console.log(this.state.dataSource);\n  };\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (\n      <div>\n        <Button\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.handleAdd}\n        >\n          添加一行\n        </Button>\n        <Button\n          style={{marginLeft:\"5px\"}}\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.getData}\n        >\n          获取数据\n        </Button>\n        <Table\n          data={dataSource}\n          columns={columns}\n          getBodyWrapper={this.getBodyWrapper}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":<Demo15 />,"title":" 表格行/列合并","code":"/**\n*\n* @title 表格行/列合并\n* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n  const obj = {\n    children: value,\n    props: {},\n  };\n  if (index === 4) {\n    obj.props.colSpan = 0;\n  }\n  return obj;\n};\n\nconst columns = [{\n  title: 'Name',\n  key: \"name\",\n  dataIndex: 'name',\n  render: (text, row, index) => {\n    if (index < 4) {\n      return <a href=\"#\">{text}</a>;\n    }\n    return {\n      children: <a href=\"#\">{text}</a>,\n      props: {\n        colSpan: 5,\n      },\n    };\n  },\n}, {\n  title: 'Age',\n  key: \"Age\",\n  dataIndex: 'age',\n  render: renderContent,\n}, {\n  title: 'Home phone',\n  colSpan: 2,\n  key: \"tel\",\n  dataIndex: 'tel',\n  render: (value, row, index) => {\n    const obj = {\n      children: value,\n      props: {},\n    };\n    if (index === 2) {\n      obj.props.rowSpan = 2;\n    }\n    if (index === 3) {\n      obj.props.rowSpan = 0;\n    }\n    if (index === 4) {\n      obj.props.colSpan = 0;\n    }\n    return obj;\n  },\n}, {\n  title: 'Phone',\n  colSpan: 0,\n  key: \"phone\",\n  dataIndex: 'phone',\n  render: renderContent,\n}, {\n  title: 'Address',\n  key: \"address\",\n  dataIndex: 'address',\n  render: renderContent,\n}];\n\nconst data = [{\n  key: '1',\n  name: 'John Brown',\n  age: 32,\n  tel: '0571-22098909',\n  phone: 18889898989,\n  address: 'New York No. 1 Lake Park',\n}, {\n  key: '2',\n  name: 'Jim Green',\n  tel: '0571-22098333',\n  phone: 18889898888,\n  age: 42,\n  address: 'London No. 1 Lake Park',\n}, {\n  key: '3',\n  name: 'Joe Black',\n  age: 32,\n  tel: '0575-22098909',\n  phone: 18900010002,\n  address: 'Sidney No. 1 Lake Park',\n}, {\n  key: '4',\n  name: 'Jim Red',\n  age: 18,\n  tel: '0575-22098909',\n  phone: 18900010002,\n  address: 'London No. 2 Lake Park',\n}, {\n  key: '5',\n  name: 'Jake White',\n  age: 18,\n  tel: '0575-22098909',\n  phone: 18900010002,\n  address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n  render() {\n    return (\n       <Table columns={columns} data={data}/>\n    );\n  }\n}\n\n\n\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo16 />,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns16 = [\n  {\n    title: \"操作\",\n    dataIndex: \"d\",\n    key: \"d\", \n    width:200,\n    render(text, record, index) {\n      return (\n        <a\n          href=\"#\"\n          onClick={() => {\n            alert(\"这是第\" + index + \"列，内容为:\" + text);\n          }}\n        >\n          一些操作\n        </a>\n      );\n    }\n  },\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n  \n];\nconst columns17 = [\n  {\n    title: \"操作\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width:200,\n    render(text, record, index) {\n      return (\n        <a\n          href=\"#\"\n          onClick={() => {\n            alert(\"这是第\" + index + \"列，内容为:\" + text);\n          }}\n        >\n          一些操作\n        </a>\n      );\n    }\n  },\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];\n\nconst data16 = [\n  { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n  { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n  constructor(props){\n    super(props);\n    this.state={\n      data_obj:{}\n    }\n  }\n  expandedRowRender = (record, index, indent) => {\n    let height = 42 * (this.state.data_obj[record.key].length+ 2);\n    \n    return (\n      <Table\n        columns={columns17}\n        style={{height:height}}\n        data={this.state.data_obj[record.key]} \n\n      />\n    );\n  };\n  getData=(expanded, record)=>{\n    //当点击展开的时候才去请求数据\n    let new_obj = Object.assign({},this.state.data_obj);\n    if(expanded){\n      if(record.key==='1'){\n        new_obj[record.key] = [\n          { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n          { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n        ]\n        this.setState({\n          data_obj:new_obj\n        })\n      }else{\n        new_obj[record.key] = [\n          { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n        ]\n        this.setState({\n          data_obj:new_obj\n        })\n      }\n    }\n  }\n  haveExpandIcon=(record, index)=>{\n    //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\n    if(index == 0){\n      return true;\n    }\n    return false;\n  }\n  render() {\n    return (\n      <Table\n        columns={columns16}\n        data={data16}\n        onExpand={this.getData}\n        expandedRowRender={this.expandedRowRender}\n        scroll={{x:true}}\n        title={currentData => <div>标题: 这是一个标题</div>}\n        footer={currentData => <div>表尾: 我是小尾巴</div>}\n      />\n    );\n  }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":<Demo17 />,"title":" loading属性指定表格是否加载中","code":"/**\n*\n* @title loading属性指定表格是否加载中\n* @description  loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nconst columns17 = [\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: \"d\",\n    key: \"d\",\n    render(text, record, index) {\n      return (\n        <a\n          href=\"#\"\n          onClick={() => {\n            alert('这是第'+index+'列，内容为:'+text);\n          }}\n        >\n          一些操作\n        </a>\n      );\n    }\n  }\n];\n\nconst data17 = [\n  { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n  { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo17 extends Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      loading : true\n    }\n  }\n  changeLoading = () => {\n    this.setState({\n      loading : !this.state.loading\n    })\n  }\n  render() {\n    return (\n      <div>\n        <Button\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.changeLoading}\n        >\n          切换loading\n        </Button>\n        <Table\n          columns={columns17}\n          data={data17}\n          title={currentData => <div>标题: 这是一个标题</div>}\n          footer={currentData => <div>表尾: 我是小尾巴</div>}\n          // loading={this.state.loading}或者是boolean\n          loading={{show:this.state.loading,loadingType:\"line\"}}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":"  loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型"},{"example":<Demo18 />,"title":" 合并标题后的合计,且支持多字段统计","code":"/**\n *\n * @title 合并标题后的合计,且支持多字段统计\n * @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n  {\n    title: \"Name\",\n    dataIndex: \"name\",\n    key: \"name\",\n    width: 100,\n    fixed: \"left\"\n  },\n  {\n    title: \"Other\",\n    children: [\n      {\n        title: \"Age\",\n        dataIndex: \"age\",\n        key: \"age\",\n        width: 200,\n        sumCol: true,\n      },\n      {\n        title: \"Address\",\n        children: [\n          {\n            title: \"Street\",\n            dataIndex: \"street\",\n            key: \"street\",\n            width: 200\n          },\n          {\n            title: \"Block\",\n            children: [\n              {\n                title: \"Building\",\n                dataIndex: \"building\",\n                key: \"building\",\n                width: 100\n              },\n              {\n                title: \"Door No.\",\n                dataIndex: \"number\",\n                key: \"number\",\n                // width: 100,\n                sumCol: true,\n              }\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  // {\n  //   title: \"Company\",\n  //   children: [\n  //     {\n  //       title: \"Company Address\",\n  //       dataIndex: \"companyAddress\",\n  //       key: \"companyAddress\",\n  //       width: 100,\n  //     },\n  //     {\n  //       title: \"Company Name\",\n  //       dataIndex: \"companyName\",\n  //       key: \"companyName\",\n  //       width: 100,\n  //     }\n  //   ]\n  // },\n  {\n    title: \"Gender\",\n    dataIndex: \"gender\",\n    key: \"gender\",\n    width: 80,\n    fixed: \"right\"\n  }\n];\n\nfunction getData(){\n  const data = [];\n  for (let i = 0; i < 5; i++) {\n    data.push({\n      key: i,\n      name: \"John Brown\"+i,\n      age: i + Math.floor(Math.random()*10),\n      street: \"Lake Park\",\n      building: \"C\",\n      number: 20 *  Math.floor(Math.random()*10),\n      companyAddress: \"Lake Street 42\",\n      companyName: \"SoftLake Co\",\n      gender: \"M\"\n    });\n  }\n  return data;\n}\n\nclass Demo18 extends Component {\n  \n  constructor(props) {\n    super(props);\n    this.state = {\n      data: getData()\n    };\n  }\n\n  changeData = ()=>{\n    this.setState({\n      data: getData()\n    });\n  }\n\n  render() {\n    const {data} = this.state;\n    return (\n      <div>\n        <Button \n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.changeData}\n        >\n          动态设置数据源\n        </Button>\n\n         <ComplexTable \n          columns={columns}\n          data={data}\n          bordered\n          // scroll={{ x: \"130%\", y: 140 }}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）"},{"example":<Demo19 />,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport React from \"react\";\nimport { Table, Select, Form, Input, Icon, Tooltip, Animate, Button } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, Input, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst Option = Select.Option;\n\nconst dataSource = [\n  {\n    key: \"boyuzhou\",\n    value: \"jack\"\n  },\n  {\n    key: \"renhualiu\",\n    value: \"lucy\"\n  },\n  {\n    key: \"yuzhao\",\n    value: \"yiminghe\"\n  }\n];\nclass Demo19 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dataSource: [\n        {\n          key: \"0\",\n          name: \"沉鱼\",\n          number: \"10\",\n          age: \"y\",\n          address: \"jack\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"1\",\n          name: \"落雁\",\n          number: \"100\",\n          age: \"y\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"2\",\n          name: \"闭月\",\n          number: \"1000\",\n          age: \"n\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        },\n        {\n          key: \"3\",\n          name: \"羞花\",\n          number: \"9999\",\n          age: \"y\",\n          address: \"lucy\",\n          datepicker: \"2017-06-12\",\n          MonthPicker: \"2017-02\"\n        }\n      ],\n      count: 4\n    };\n    this.columns = [ \n      {\n        title: \"货币输入\",\n        dataIndex: \"number\",\n        key: \"number\",\n        width: \"150px\",\n        render: (text, record, index) => (\n          <InputRender\n            format=\"Currency\"\n            name=\"name\"\n            placeholder=\"请输入姓名\"\n            value={text}\n            isclickTrigger={true}\n            check={this.check}\n            onChange={this.onInputChange(index, \"name\")}\n            isRequire={true}\n            method=\"blur\"\n            errorMessage={\n              <Tooltip overlay={\"错误提示\"}>\n                <Icon type=\"uf-exc-c\" className=\"\" />\n              </Tooltip>\n            }\n            reg={/^[0-9]+$/}\n          />\n        )\n      },\n       \n      {\n        title:(<div>下拉框的div</div>),\n        dataIndex: \"address\",\n        key: \"address\",\n        width: \"200px\",\n        render: (text, record, index) => {\n          return (\n            <SelectRender\n              dataSource={dataSource}\n              isclickTrigger={true}\n              value={text}\n              onChange={this.onSelectChange(index, \"address\")}\n              onFocus={this.handFocus}\n              onBlur={this.onBlur}\n              autofocus\n            >\n              <Option value=\"jack\">boyuzhou</Option>\n              <Option value=\"lucy\">renhualiu</Option>\n              <Option value=\"disabled\" disabled>\n                Disabled\n              </Option>\n              <Option value=\"yiminghe\">yuzhao</Option>\n            </SelectRender>\n          );\n        }\n      }\n    ];\n  }\n  check = (flag, obj) => {\n    console.log(flag);\n    console.log(obj);\n  };\n\n  handFocus = (value,e) => {\n    console.log(value+` 获取焦点事件`);\n  };\n  onBlur = (value,e) => {\n    console.log(value+` onBlur`);\n  };\n\n  onInputChange = (index, key) => {\n    return value => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  };\n\n  onSelectChange = (index, key) => {\n    return value => {\n      console.log(`selected ${value}`);\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  };\n\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData = {\n      key: count,\n      name: `凤姐 ${count}`,\n      age: 32,\n      address: \"jack\",\n      datepicker: \"2017-06-12\",\n      MonthPicker: \"2017-02\"\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1\n    });\n  };\n\n  getBodyWrapper = body => {\n    return (\n      <Animate\n        transitionName=\"move\"\n        component=\"tbody\"\n        className={body.props.className}\n      >\n        {body.props.children}\n      </Animate>\n    );\n  };\n  getData = () => {\n    console.log(this.state.dataSource);\n  };\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (\n      <div>\n        <Button\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.handleAdd}\n        >\n          添加一行\n        </Button>\n        <Button\n          style={{marginLeft:\"5px\"}}\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.getData}\n        >\n          获取数据\n        </Button>\n        <Table\n          data={dataSource}\n          columns={columns}\n          getBodyWrapper={this.getBodyWrapper}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm, Input, Icon, Animate, Button } from 'tinper-bee';\n\nclass EditableCell extends React.Component {\n  state = {\n    value: this.props.value,\n    editable: false\n  };\n  handleChange = e => {\n    const value = e;\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    if (event.keyCode == 13) {\n      this.check();\n    }\n  };\n  render() {\n    const { value, editable } = this.state;\n    return (\n      <div className=\"editable-cell\">\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}\n\nclass Demo2 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.columns = [\n      {\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      {\n        title: \"年龄\",\n        dataIndex: \"age\",\n        key: \"age\"\n      },\n      {\n        title: \"你懂的\",\n        dataIndex: \"address\",\n        key: \"address\"\n      },\n      {\n        title: \"操作\",\n        dataIndex: \"operation\",\n        key: \"operation\",\n        render: (text, record, index) => {\n          return this.state.dataSource.length > 1 ? (\n            <Popconfirm content=\"确认删除?\" id=\"aa\" onClose={this.onDelete(index)}>\n              <Icon type=\"uf-del\" />\n            </Popconfirm>\n          ) : null;\n        }\n      }\n    ];\n\n    this.state = {\n      dataSource: [\n        {\n          key: \"0\",\n          name: \"沉鱼\",\n          age: \"18\",\n          address: \"96, 77, 89\"\n        },\n        {\n          key: \"1\",\n          name: \"落雁\",\n          age: \"16\",\n          address: \"90, 70, 80\"\n        },\n        {\n          key: \"2\",\n          name: \"闭月\",\n          age: \"17\",\n          address: \"80, 60, 80\"\n        },\n        {\n          key: \"3\",\n          name: \"羞花\",\n          age: \"20\",\n          address: \"120, 60, 90\"\n        }\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\n        transitionName=\"move\"\n        component=\"tbody\"\n        className={body.props.className}\n      >\n        {body.props.children}\n      </Animate>\n    );\n  };\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (\n      <div>\n        <Button\n          className=\"editable-add-btn\"\n          type=\"ghost\"\n          onClick={this.handleAdd}\n        >\n          添加\n        </Button>\n        <Table\n          data={dataSource}\n          columns={columns}\n          getBodyWrapper={this.getBodyWrapper}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 这是带有增删改功能的表格（此编辑功能未使用render组件）"},{"example":<Demo20 />,"title":" 简单表格选中行的背景色、表头表尾","code":"/**\n*\n* @title 简单表格选中行的背景色、表头表尾\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip, Button } from 'tinper-bee';\n\nconst columns = [\n  { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\n  { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n  { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\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\nclass Demo26 extends Component {\n\n  constructor(props){\n      super(props);\n      this.state = {\n        data: data,\n        selectedRowIndex: 0\n      }\n  }\n\n  render() {\n    return (\n      <Table\n        columns={columns}\n        data={data}\n        rowClassName={(record,index,indent)=>{\n          if (this.state.selectedRowIndex == index) {\n              return 'selected';\n          } else {\n              return '';\n          }\n        }}\n        onRowClick={(record,index,indent)=>{\n          this.setState({ \n              selectedRowIndex: index\n          });\n        }}\n        title={currentData => <div>标题: 这是一个标题</div>}\n        footer={currentData => <div>表尾: 我是小尾巴</div>}\n      /> \n    );\n  }\n}\n\n\n","desc":""},{"example":<Demo21 />,"title":" 根据列进行过滤","code":"/**\n*\n* @title 根据列进行过滤\n* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n  constructor(props) {\n    super(props);\n    this.state ={\n              columns21: [\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                  ifshow:false,\n                  // width: 200,\n                  // sumCol: true,\n                  sorter: (a, b) => a.c - b.c\n                },\n                {\n                  title: \"武功级别\",\n                  dataIndex: \"d\",\n                  key: \"d\"\n                },\n                {\n                  title: \"操作\",\n                  dataIndex: \"e\",\n                  key: \"e\",\n                  render(text, record, index){\n                    return (\n                      <div  title={text} >\n                          <a href=\"#\"\n                              tooltip={text}\n                              onClick={() => {\n                                alert('这是第'+index+'列，内容为:'+text);\n                              }}\n                              // style={{\n                              //     position: 'absolute',\n                              //     top: 5,\n                              //     left: 0\n                              // }}\n                            >\n                              一些操作\n                            </a>\n                      </div>\n                    );\n                  }\n                }\n              ]};\n  }\n  afterFilter = (optData,columns)=>{\n    if(optData.key == 'b'){\n        if(optData.ifshow){\n          columns[2].ifshow = false;\n        }else{\n          columns[2].ifshow = true;\n        }\n        this.setState({\n          columns21 :columns,\n          showFilterPopover:true\n        });\n    }\n    \n  }\n \n  render() {\n    \n    return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;\n  }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n","desc":" 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数"},{"example":<Demo22 />,"title":" 列的拖拽，交换表头的顺序","code":"/**\n*\n* @title 列的拖拽，交换表头的顺序\n* @description 点击列的表头，进行左右拖拽\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns22 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: 100\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 200\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 200,\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 200,\n  }\n];\n\nconst data22 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n  constructor(props) {\n    super(props); \n  }\n \n  render() {\n    return <DragColumnTable columns={columns22} data={data22} bordered\n    \n    draggable={true} \n    />;\n  }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n","desc":" 点击列的表头，进行左右拖拽"},{"example":<Demo23 />,"title":" 拖拽调整列的宽度","code":"/**\n*\n* @title 拖拽调整列的宽度\n* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200'\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    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    fixed:'right',\n    width: 200,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】"},{"example":<Demo24 />,"title":" 动态设置固、取消固定列","code":"/**\n*\n* @title 动态设置固、取消固定列\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\"，fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport { Table, Dropdown, Menu, Icon } from 'tinper-bee';\n\n\nconst { Item } = Menu;\n// const columns24 = [\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: \"address2\", key: \"2\" },\n//   { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n//   { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n//   { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\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\n\nconst columns24 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: 100,\n    fixed: \"left\",\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: 100,\n    fixed: \"left\",\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: 100, \n  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 150 \n  },\n  {\n    title: \"对手\",\n    dataIndex: \"e\",\n    key: \"e\",\n    width: 100 \n  },\n  {\n    title: \"帮派\",\n    dataIndex: \"f\",\n    key: \"f\",\n    width: 100 \n  },\n  {\n    title: \"武功类型\",\n    dataIndex: \"g\",\n    key: \"g\",\n    width: 100 \n  },\n  {\n    title: \"师傅\",\n    dataIndex: \"k\",\n    key: \"k\",\n    // width: 100 \n  },\n  {\n    title: \"攻击系数\",\n    dataIndex: \"h\",\n    key: \"h\",\n    width: 100 \n  }\n];\n\n\nconst data24 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n  constructor(props) {\n    super(props);\n    // let columns = [];\n    // Object.assign(columns,columns24);\n    // columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);\n    this.state = {\n      columns:columns24\n    }\n  }\n\n  \n    onSelect = ({key,item})=>{ \n      console.log(`${key} selected`); //获取key\n      let currentObject = item.props.data; //获取选中对象的数据\n      let {columns} = this.state;\n      let fixedCols = [];\n      let nonColums = [];\n      columns.find(da=>{\n        if(da.key == key){\n          da.fixed?delete da.fixed:da.fixed = 'left';\n        }\n        da.fixed?fixedCols.push(da):nonColums.push(da);\n      });\n    \n      columns = [...fixedCols,...nonColums]\n\n      this.setState({\n        columns\n      });\n    }\n  //表头增加下拉菜单\n  renderColumnsDropdown(columns) {\n    const icon ='uf-arrow-down';\n    \n    return columns.map((originColumn,index) => {\n      let column = Object.assign({}, originColumn);\n      let menuInfo = [], title='锁定';\n      if(originColumn.fixed){\n        title = '解锁'\n      }\n      menuInfo.push({\n        info:title,\n        key:originColumn.key,\n        index:index\n      });\n      const menu = (\n        <Menu onSelect={this.onSelect} >{\n            menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })\n            }\n        </Menu>)\n      column.title = (\n        <span className='title-con drop-menu'>\n          {column.title}\n          <Dropdown\n            trigger={['click']} \n            overlay={menu}\n            animation=\"slide-up\"\n          >\n           <Icon type={icon}/>\n          </Dropdown> \n          \n        </span>\n      );\n      return column;\n    });\n    \n  }\n\n  render() {\n    let {columns} = this.state;\n     columns = this.renderColumnsDropdown(columns);\n    return <div className=\"demo24\">\n            <Table columns={columns} data={data24} scroll={{ x: \"110%\", y: 240 }}/>\n          </div>;\n  }\n}\n\n","desc":" 动态设置固、取消固定列","scss_code":"th{\n    .drop-menu{\n        .uf{\n            font-size: 12px;\n            visibility: hidden;\n            margin-left: 15px;\n        }\n        \n    \n    }\n    &:hover{\n        .uf{\n                visibility: visible;\n        }\n    }\n\n}\n\n"},{"example":<Demo25 />,"title":" 根据列进行过滤、拖拽交换列综合使用案例","code":"/**\n* @title 根据列进行过滤、拖拽交换列综合使用案例\n* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。\n*/\n\n/**注：\n *  在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。 \n *  必须有个别列不设置width属性，即可避免此问题。\n */\nimport React, { Component } from 'react';\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nimport sum from \"tinper-bee/lib/sum\";;\n\n //Cloumns1\nfunction getCloumns(){\n  const column = [\n      {\n          title: \"序号\",\n          dataIndex: \"index\",\n          key: \"index\",\n          width: 100, \n      },\n      {\n          title: \"订单编号\",\n          dataIndex: \"orderCode\",\n          key: \"orderCode\",\n          width: 100, \n      },\n      {\n          title: \"供应商名称\",\n          dataIndex: \"supplierName\",\n          key: \"supplierName\",\n          width: 100\n      },\n      {\n          title: \"类型\",\n          dataIndex: \"type_name\",\n          key: \"type_name\",\n          width: 100\n      },\n      {\n          title: \"采购组织\",\n          dataIndex: \"purchasing\",\n          key: \"purchasing\",\n          width: 100\n      },\n      {\n          title: \"采购组\",\n          dataIndex: \"purchasingGroup\",\n          key: \"purchasingGroup\",\n           width: 300\n      },\n      {\n          title: \"凭证日期\",\n          dataIndex: \"voucherDate\",\n          key: \"voucherDate\",\n          width: 100,\n          \n      },\n      {\n          title: \"审批状态\",\n          dataIndex: \"approvalState_name\",\n          key: \"approvalState_name\",\n          width: 100\n      },\n      {\n          title: \"确认状态\",\n          dataIndex: \"confirmState_name\",\n          key: \"confirmState_name\",\n           width: 100\n      }, \n      {\n          title: \"关闭状态\",\n          dataIndex: \"closeState_name\",\n          key: \"closeState_name\",\n          width: 100\n      },\n      {\n          title: \"操作\",\n          dataIndex: \"d\",\n          key: \"d\",\n          width:100,\n          fixed: \"right\",\n          render(text, record, index) {\n              return (\n                  <div className='operation-btn'>\n                    <a href=\"#\"\n                      tooltip={text}\n                      onClick={() => {\n                        alert('这是第'+index+'列，内容为:'+text);\n                      }}\n                    >\n                      一些操作\n                    </a>\n                  </div>\n              )\n          }\n      }\n  ];\n  return column;\n}\n\nconst dataList = [ \n  { \n      index: 1, \n      orderCode:\"2343\", \n      supplierName: \"xxx\",\n      type_name: \"123\",\n      purchasing:'内行', \n      purchasingGroup:\"323\",\n      voucherDate:\"kkkk\",\n      approvalState_name:\"vvvv\",\n      confirmState_name:\"aaaa\",\n      closeState_name:\"vnnnnn\",\n      d:\"操作\",\n      key: \"1\"\n  }, \n  { \n    index: 2, \n    _checked:true,\n    orderCode:\"222\", \n    supplierName: \"22xxx\",\n    type_name: \"1223\",\n    purchasing:'内行2', \n    purchasingGroup:\"3223\",\n    voucherDate:\"222kk\",\n    approvalState_name:\"22vvvv\",\n    confirmState_name:\"2aaaa\",\n    closeState_name:\"2vnnnnn\",\n    d:\"2操作\",\n    key: \"2\"\n  },\n  { \n    index: 3, \n    orderCode:\"222\", \n    supplierName: \"22xxx\",\n    _disabled:true,\n    type_name: \"1223\",\n    purchasing:'内行2', \n    purchasingGroup:\"3223\",\n    voucherDate:\"222kk\",\n    approvalState_name:\"22vvvv\",\n    confirmState_name:\"2aaaa\",\n    closeState_name:\"2vnnnnn\",\n    d:\"3操作\",\n    key: \"3\"\n  },\n  { \n    index: 4, \n    orderCode:\"222\", \n    supplierName: \"22xxx\",\n    type_name: \"1223\",\n    purchasing:'内行2', \n    purchasingGroup:\"3223\",\n    voucherDate:\"222kk\",\n    approvalState_name:\"22vvvv\",\n    confirmState_name:\"2aaaa\",\n    closeState_name:\"2vnnnnn\",\n    d:\"4操作\",\n    key: \"4\"\n  },\n]\n\nconst DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);\n\nconst defaultProps25 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo25 extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  getSelectedDataFunc=(data)=>{\n      console.log(\"data\",data);\n  }\n \n  getCloumnsScroll=(columns)=>{\n    let sum = 0;\n    columns.forEach((da)=>{\n        sum += da.width;\n    })\n    console.log(\"sum\",sum);\n    return (sum);\n  }\n\n  selectedRow=(record, index)=>{\n\n  }\n\n  render() {\n    let columns = getCloumns();\n    \n    return <div className=\"demo25\">\n            <DragColumnTable \n                columns={columns}\n                data={dataList} \n                getSelectedDataFunc={this.getSelectedDataFunc}\n                bordered\n                checkMinSize={7}\n                draggable={true}\n                multiSelect={{type: \"checkbox\"}}\n                scroll={{x:\"130%\", y: 100}}\n                selectedRow={this.selectedRow}\n                // scroll={{x:this.getCloumnsScroll(columns), y: 150}}\n                />\n            </div>\n  }\n}\nDemo25.defaultProps = defaultProps25;\n\n\n","desc":" 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。"},{"example":<Demo26 />,"title":" 按条件和值过滤","code":"/**\n*\n* @title 按条件和值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n  { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n  { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n  { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n  { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n  { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-19\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  }, {\n    key: \"5\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"6\",\n    name: \"Jim Green\",\n    age: 48,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"7\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"8\",\n    name: \"Jim Green\",\n    age: 38,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  }\n];\n\nclass Demo26 extends Component {\n  handlerFilterChange = (key, val, condition) => {\n    console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n  }\n\n  handlerFilterClear = (key) => {\n    console.log('清除条件', key);\n  }\n  render() {\n    return <Table\n      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\n      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n      filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\n      filterable={true}//是否开启过滤数据功能\n      bordered\n      columns={columns26}\n      data={data26} />;\n  }\n}\n\n","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤"},{"example":<Demo27 />,"title":" 组合过滤和其他功能使用","code":"/**\n*\n* @title 组合过滤和其他功能使用\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport { Table, Dropdown, Menu, Icon, Checkbox } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/MultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\n\nconst { Item } = Menu;\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\nconst dataList = [\n  { \"key\": \"1\", value: \"库存明细\", id: \"a\" },\n  { \"key\": \"2\", value: \"订单明细\", id: \"v\" },\n  { \"key\": \"3\", value: \"发货明细\", id: \"c\" }\n]\n\nconst data27 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-19\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  }, {\n    key: \"5\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"6\",\n    name: \"Jim Green\",\n    age: 48,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"7\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"8\",\n    name: \"Jim Green\",\n    age: 38,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dropdownvalue: []\n    }\n  }\n  handlerFilterChange = (key, val, condition) => {\n    console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n  }\n\n  handlerFilterClear = (key) => {\n    console.log('清除条件', key);\n  }\n  getSelectedDataFunc = data => {\n    console.log(data);\n  }\n  onClick = (item) => {\n    console.log(item);\n  }\n\n  render() {\n    const menu1 = (\n      <Menu onClick={this.onClick} style={{ width: 240 }} mode=\"vertical\" >\n        <SubMenu key=\"sub1\" title={<span><span>组织 1</span></span>}>\n          <MenuItemGroup title=\"Item 1\">\n            <Menu.Item key=\"1\">选项 1</Menu.Item>\n            <Menu.Item key=\"2\">选项 2</Menu.Item>\n          </MenuItemGroup>\n          <MenuItemGroup title=\"Iteom 2\">\n            <Menu.Item key=\"3\">选项 3</Menu.Item>\n            <Menu.Item key=\"4\">选项 4</Menu.Item>\n          </MenuItemGroup>\n        </SubMenu>\n      </Menu>)\n    let multiObj = {\n      type: \"checkbox\"\n    };\n    let columns27 = [\n      {\n        title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n          return <Dropdown\n            trigger={['click']}\n            overlay={menu1}\n            animation=\"slide-up\"\n          >\n            <Icon style={{ \"visibility\": \"hidden\" }} type=\"uf-eye\" />\n          </Dropdown>\n        }\n      },\n      {\n        title: \"姓名\",\n        width: 180,\n        dataIndex: \"name\",\n        key: \"name\",\n        filterType: \"text\",//输入框类型\n        filterDropdown: \"show\",//显示条件\n        filterDropdownType: \"string\"//字符条件\n      },\n      {\n        title: \"年龄\",\n        width: 180,\n        dataIndex: \"age\",\n        key: \"age\",\n        filterType: \"number\",//输入框类型\n        filterDropdown: \"show\",//显示条件\n        filterDropdownType: \"number\"//字符条件\n      },\n      {\n        title: \"日期\",\n        width: 190,\n        dataIndex: \"date\",\n        key: \"date\",\n        filterType: \"date\",//输入框类型\n        filterDropdown: \"show\",//显示条件\n        filterDropdownType: \"string\"//字符条件\n      },\n      {\n        title: \"时间范围\",\n        width: 290,\n        dataIndex: \"mark\",\n        key: \"mark\",\n        filterType: \"daterange\",//输入框类型\n        filterDropdown: \"show\",//显示条件\n        filterDropdownType: \"number\"//字符条件\n      },\n      {\n        title: \"地址\",\n        width: 100,\n        dataIndex: \"address\",\n        key: \"address\",\n        filterType: \"dropdown\",//输入框类型\n        filterDropdown: \"show\",//显示条件\n        filterDropdownType: \"number\"//字符条件\n      }\n    ];\n    return <ComplexTable\n      onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\n      onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n      filterDelay={500}//输入文本多少ms触发回调函数，默认500ms\n      filterable={true}//是否开启过滤数据功能\n      getSelectedDataFunc={this.getSelectedDataFunc}\n      bordered\n      multiSelect={multiObj}\n      columns={columns27}\n      data={data27} />;\n  }\n}\n\n","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":<Demo28 />,"title":" 列排序,后端排序","code":"/**\n*\n* @title 列排序,后端排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\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: \"d\",\n    key: \"d\"\n  },\n  {\n    title: \"分数\",\n    dataIndex: \"e\",\n    key: \"e\",\n    sorter: (a, b) => a.c - b.c\n  },\n];\n\nconst data11 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n  prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      sortOrder: \"\",\n      data: data11\n    };\n  }\n  /**\n   * 后端获取数据\n   */\n  sortFun = (sortParam)=>{\n    console.info(sortParam);\n    //将参数传递给后端排序\n  }\n  render() {\n    let sortObj = {\n      mode:'multiple',\n      backSource:true,\n      sortFun:this.sortFun\n    }\n    return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;\n  }\n}\nDemo28.defaultProps = defaultProps;\n\n\n","desc":""},{"example":<Demo29 />,"title":" 从弹出框内显示过滤行并且设置可选下拉条件","code":"/**\n*\n* @title 从弹出框内显示过滤行并且设置可选下拉条件\n* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Button, Modal } from 'tinper-bee';\n\n\nconst columns29 = [\n  {\n    title: \"姓名\",\n    width: 180,\n    dataIndex: \"name\",\n    key: \"name\",\n    filterType: \"text\",\n    filterDropdown: \"show\",\n    filterDropdownIncludeKeys: ['LIKE', 'EQ']\n  },\n  {\n    title: \"年龄\",\n    width: 170,\n    dataIndex: \"age\",\n    key: \"age\",\n    filterType: \"number\",\n    filterDropdown: \"show\",\n    filterDropdownType: \"number\",\n    filterDropdownIncludeKeys: ['EQ'],\n    filterInputNumberOptions: {\n      max: 200,\n      min: 0,\n      step: 1,\n      precision: 0\n    }\n  },\n  {\n    title: \"日期\",\n    width: 200,\n    dataIndex: \"date\",\n    key: \"date\",\n    filterType: \"date\",\n    filterDropdown: \"show\",\n    format: \"YYYY-MM-DD\"\n  }\n];\n\nconst data29 = [\n  {\n    key: \"1\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-19\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"2\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"朝阳区\",\n    mark: \"无\"\n  },\n  {\n    key: \"3\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  },\n  {\n    key: \"4\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"东城区\",\n    mark: \"无\"\n  }, {\n    key: \"5\",\n    name: \"John Brown\",\n    age: 32,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"6\",\n    name: \"Jim Green\",\n    age: 48,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"7\",\n    name: \"Jim Green\",\n    age: 40,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  },\n  {\n    key: \"8\",\n    name: \"Jim Green\",\n    age: 38,\n    date: \"2018-09-18\",\n    address: \"海淀区\",\n    mark: \"无\"\n  }\n];\n\nclass Demo29 extends Component {\n  constructor() {\n    super();\n    this.state = {\n      show: false\n    }\n    this.close = this.close.bind(this);\n    this.open = this.open.bind(this);\n  }\n  handlerFilterChange = (key, val, condition) => {\n    console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n  }\n\n  handlerFilterClear = (key) => {\n    console.log('清除条件', key);\n  }\n  close() {\n    this.setState({\n      show: false\n    });\n  }\n  open() {\n    this.setState({\n      show: true\n    });\n  }\n  render() {\n    return (<div><Modal\n      show={this.state.show}\n      onHide={this.close}\n      autoFocus={false}\n      enforceFocus={false}\n    >\n      <Modal.Header closeButton>\n        <Modal.Title>过滤行</Modal.Title>\n      </Modal.Header>\n      <Modal.Body>\n        <Table\n          onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\n          onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n          filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\n          filterable={true}//是否开启过滤数据功能\n          bordered\n          columns={columns29}\n          data={data29} />\n      </Modal.Body>\n    </Modal>\n      <Button colors=\"primary\" onClick={this.open}>显示表格</Button>\n    </div>)\n  }\n}\n\n","desc":" 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件"},{"example":<Demo3 />,"title":" 表头分组并自定义表头高度","code":"/**\n *\n * @title 表头分组并自定义表头高度\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nconst { ColumnGroup, Column } = Table;\n\nconst columns = [\n  {\n    title: \"Name\",\n    dataIndex: \"name\",\n    key: \"name\",\n    width: 100,\n    fixed: \"left\"\n  },\n  {\n    title: \"Other\",\n    width:600,\n    children: [\n      {\n        title: \"Age\",\n        dataIndex: \"age\",\n        key: \"age\",\n        width: 200\n      },\n      {\n        title: \"Address\",\n        children: [\n          {\n            title: \"Street\",\n            dataIndex: \"street\",\n            key: \"street\",\n            width: 200\n          },\n          {\n            title: \"Block\",\n            children: [\n              {\n                title: \"Building\",\n                dataIndex: \"building\",\n                key: \"building\",\n                width: 100\n              },\n              {\n                title: \"Door No.\",\n                dataIndex: \"number\",\n                key: \"number\",\n                width: 100\n              }\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    title: \"Company\",\n    width:400,\n    children: [\n      {\n        title: \"Company Address\",\n        dataIndex: \"companyAddress\",\n        key: \"companyAddress\",\n        width:200,\n      },\n      {\n        title: \"Company Name\",\n        dataIndex: \"companyName\",\n        key: \"companyName\",\n        width:200,\n      }\n    ]\n  },\n  {\n    title: \"Gender\",\n    dataIndex: \"gender\",\n    key: \"gender\",\n    width: 60,\n    fixed: \"right\"\n  }\n];\n\nconst data = [];\nfor (let i = 0; i < 20; i++) {\n  data.push({\n    key: i,\n    name: \"John Brown\",\n    age: i + 1,\n    street: \"Lake Park\",\n    building: \"C\",\n    number: 2035,\n    companyAddress: \"Lake Street 42\",\n    companyName: \"SoftLake Co\",\n    gender: \"M\"\n  });\n}\n\nclass Demo3 extends Component {\n  render() {\n    return (\n      <Table\n        className={'demo3'}\n        columns={columns}\n        data={data}\n        headerHeight={40} //自定义表头高度\n        bordered\n        scroll={{ y: 240 }}\n      />\n    );\n  }\n}\n\n\n","desc":" columns[n] 可以内嵌 children，以渲染分组表头。","scss_code":".demo3{\n    .u-table-thead th {\n        padding-top: 0px;\n        padding-bottom: 0px;\n    }\n}"},{"example":<Demo4 />,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 通过在data中配置children数据，来自动生成树形数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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];\nclass Demo4 extends Component {\n\n  constructor(props){\n      super(props);\n      this.state = {\n        data: data4,\n        factoryValue: 0,\n        selectedRow: new Array(data4.length)//状态同步\n      }\n  }\n\n  render() {\n    return <Table \n    rowClassName={(record,index,indent)=>{\n      if (this.state.selectedRow[index]) {\n          return 'selected';\n      } else {\n          return '';\n      }\n    }}\n    onRowClick={(record,index,indent)=>{\n      let selectedRow = new Array(this.state.data.length);\n      selectedRow[index] = true;\n      this.setState({\n          factoryValue: record,\n          selectedRow: selectedRow\n      });\n    }}\n    \n    columns={columns4} data={data4} />;\n  }\n}\n\n\n","desc":" 通过在data中配置children数据，来自动生成树形数据"},{"example":<Demo5 />,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\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: \"c1\", key: \"1\" },\n  { title: \"Column 2\", dataIndex: \"c2\", key: \"2\" },\n  { title: \"Column 3\", dataIndex: \"c3\", key: \"3\" },\n  { title: \"Column 4\", dataIndex: \"c4\", key: \"4\" },\n  { title: \"Column 5\", dataIndex: \"c5\", key: \"5\" },\n  { title: \"Column 6\", dataIndex: \"c6\", key: \"6\" },\n  { title: \"Column 7\", dataIndex: \"c7\", key: \"7\" },\n  { title: \"Column 8\", dataIndex: \"c8\", 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\nclass Demo5 extends Component {\n  render() {\n    return <Table columns={columns5} data={data5}scroll={{ x: \"130%\", y: 140 }}/>;\n  }\n}\n\n","desc":" 固定列到表格的某侧"},{"example":<Demo6 />,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;;\nconst DragColumnTable = dragColumn(Table);\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: \"Address\", dataIndex: \"address\", key: \"1\" }\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\nclass Demo6 extends Component {\n  render() {\n    return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true}  />;\n  }\n}\n\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)"},{"example":<Demo7 />,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n  { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n  { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n  { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\"\n  }\n];\n\nconst data7 = [\n  { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n  { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n  { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n  { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n  { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n  { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      children_data: []\n    };\n  }\n\n  rowclick = (record, index) => {\n    if (record.a === \"02级一班\") {\n      this.setState({\n        children_data: [\n          { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n          { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n        ]\n      });\n    } else if (record.a === \"03级二班\") {\n      this.setState({\n        children_data: [\n          { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n          { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n          { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n        ]\n      });\n    } else if (record.a === \"05级三班\") {\n      this.setState({\n        children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n      });\n    }\n  };\n\n  render() {\n    return (\n      <div>\n        <Table\n          columns={columns7}\n          data={data7}\n          onRowClick={this.rowclick}\n          title={currentData => <div>标题: 我是主表</div>}\n        />\n        <Table\n          style={{ marginTop: 40 }}\n          columns={columns7_1}\n          data={this.state.children_data}\n          title={currentData => <div>标题: 我是子表</div>}\n        />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 主表点击子表联动"},{"example":<Demo8 />,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\n\nimport { Table, Pagination } from 'tinper-bee';\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: \"d\",\n    key: \"d\"\n  }\n];\n\nconst pageData = {\n  1: [\n    { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n    { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n    { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n  ],\n  2: [\n    { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n    { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n  ]\n};\n\nclass Demo8 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: pageData[1],\n      activePage: 1\n    };\n  }\n\n  handleSelect(eventKey) {\n    this.setState({\n      data: pageData[eventKey],\n      activePage: eventKey\n    });\n  }\n\n  render() {\n    return (\n      <div>\n        <Table columns={columns8} data={this.state.data} />\n        <Pagination\n          first\n          last\n          prev\n          next\n          maxButtons={5}\n          boundaryLinks\n          activePage={this.state.activePage}\n          onSelect={this.handleSelect.bind(this)}\n          onDataNumSelect={this.dataNumSelect}\n          showJump={true}\n          total={100}\n          dataNum={2}\n        />\n      </div>\n    );\n  }\n}\n\n","desc":" 点击分页联动表格"},{"example":<Demo9 />,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\n\nimport { Table, FormControl, InputGroup, Icon } from 'tinper-bee';\n\nclass Search extends Component {\n  state = {\n    searchValue: \"\",\n    empty: false\n  };\n\n  /**\n     * 搜索\n     */\n  handleSearch = () => {\n    let { onSearch } = this.props;\n    this.setState({\n      empty: true\n    });\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\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          placeholder=\"请输入用户名\"\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  {\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  },\n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\"\n  }\n];\n\nconst userData = [\n  { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: userData\n    };\n  }\n\n  handleSearch = value => {\n    if (value === \"\") {\n      return this.setState({\n        data: userData\n      });\n    }\n    let regExp = new RegExp(value, \"ig\");\n    let data = userData.filter(item => regExp.test(item.a));\n    this.setState({\n      data\n    });\n  };\n\n  handleEmpty = () => {\n    this.setState({\n      data: userData\n    });\n  };\n\n  render() {\n    return (\n      <div>\n        <div className=\"clearfix\">\n          <Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />\n        </div>\n        <Table columns={columns9} data={this.state.data} />\n      </div>\n    );\n  }\n}\n\n\n","desc":" 搜索刷新表格数据"}]
 
 
 class Demo extends Component {