merge

2019-04-23 16:12:57 +08:00 · 2019-04-23 16:12:57 +08:00 · e614706d09
parent df755b9a22 e23e64046e
commit e614706d09
64 changed files with 4350 additions and 3224 deletions
--- a/README.md
+++ b/README.md
@ -117,6 +117,7 @@ class Demo extends Component {
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
 | height | 自定义表格行高 | number | - |
 | headerHeight | 自定义表头行高 | number | - |
+| size | 表格大小 | `sm | md | lg` | 'md' |

 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

--- a/demo/demolist/Demo0101.js
+++ b/demo/demolist/Demo0101.js
@ -1,13 +1,8 @@
 /**
 *
 * @title 基本表格
-<<<<<<< HEAD
-* 【Tooltip】
-* @description 鼠标hover行时呼出操作按钮
-=======
 * @parent 基础 Basic
 * @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
->>>>>>> 6d25e1a2d12f9b9603a4aaf6461eedd5387ae0be
 */

 import React, { Component } from "react";
@ -72,7 +67,8 @@ class Demo01 extends Component {
        <Table
          columns={columns}
          data={data}
-          height={40}
+          parentNodeId='parent'
+          bordered = {true}
          hoverContent={this.getHoverContent}
          onRowHover={this.onRowHover}
        />
--- a/demo/demolist/Demo0102.js
+++ b/demo/demolist/Demo0102.js
--- a/demo/demolist/Demo0102.scss
+++ b/demo/demolist/Demo0102.scss
@ -1,5 +1,6 @@
 .demo02 {
    .u-table-placeholder i{
        font-size: 60px;
+        line-height: 60px;
    }
 }
--- a/demo/demolist/Demo0103.js
+++ b/demo/demolist/Demo0103.js
@ -0,0 +1,182 @@
+/**
+*
+* @title 固定表头
+* @parent 基础 Basic
+* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
+*/
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+const columns03 = [
+  {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      render(text, record, index) {
+          return index + 1;
+      }
+  },
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 200, 
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 200
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 200
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 200
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+      width: 200
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+  },
+  {
+      title: "审批状态",
+      dataIndex: "approvalState_name",
+      key: "approvalState_name",
+      width: 200
+  },
+  {
+      title: "确认状态",
+      dataIndex: "confirmState_name",
+      key: "confirmState_name",
+       width: 200
+  }, 
+  {
+      title: "关闭状态",
+      dataIndex: "closeState_name",
+      key: "closeState_name",
+      width: 100
+  }
+];
+
+const data03 = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  },
+  { 
+    orderCode:"NU0391028", 
+    supplierName: "xx供应商",
+    type_name: "4",
+    purchasing:'组织c', 
+    purchasingGroup:"cc",
+    voucherDate:"2019年03月01日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "4"
+  },
+  { 
+    orderCode:"NU0391029", 
+    supplierName: "xx供应商",
+    type_name: "5",
+    purchasing:'组织d', 
+    purchasingGroup:"ss",
+    voucherDate:"2019年02月14日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "5"
+  },
+  { 
+    orderCode:"NU0391030", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织e', 
+    purchasingGroup:"zz",
+    voucherDate:"2019年02月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "6"
+  },
+  { 
+    orderCode:"NU0391031", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织f', 
+    purchasingGroup:"qq",
+    voucherDate:"2019年01月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "7"
+  },
+  { 
+    orderCode:"NU0391032", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织g', 
+    purchasingGroup:"pp",
+    voucherDate:"2019年01月31日",
+    approvalState_name:"未审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "8"
+  },
+];
+
+class Demo03 extends Component {
+  render() {
+    return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
+  }
+}
+
+export default Demo03; 
--- a/demo/demolist/Demo0104.js
+++ b/demo/demolist/Demo0104.js
@ -76,9 +76,7 @@ class Demo04 extends Component {
    return <Table 
            className="demo04" 
            columns={columns04} 
-            data={data04} 
-            height={40}
-            headerHeight={40}/>
+            data={data04} />
  }
 }

--- a/demo/demolist/Demo0104.scss
+++ b/demo/demolist/Demo0104.scss
--- a/demo/demolist/Demo0105.js
+++ b/demo/demolist/Demo0105.js
--- a/demo/demolist/Demo0201.js
+++ b/demo/demolist/Demo0201.js
@ -13,7 +13,7 @@ const columns = [
        title: "序号",
        dataIndex: "index",
        key: "index",
-        width: 200, 
+        width: 100, 
        render(text, record, index) {
            return index + 1;
        }
@ -22,7 +22,7 @@ const columns = [
        title: "订单编号",
        dataIndex: "orderCode",
        key: "orderCode",
-        width: 200, 
+        width: 300, 
    },
    {
        title: "供应商名称",
@ -46,13 +46,13 @@ const columns = [
        title: "采购组",
        dataIndex: "purchasingGroup",
        key: "purchasingGroup",
-        width: 300
+        width: 200
    },
    {
        title: "凭证日期",
        dataIndex: "voucherDate",
        key: "voucherDate",
-        width: 200,
+        width: 300,
    },
    {
        title: "审批状态",
@ -70,65 +70,77 @@ const columns = [
        title: "关闭状态",
        dataIndex: "closeState_name",
        key: "closeState_name",
-        width: 200
+        width: 100
    }
 ];
-
+  
 const data = [
    { 
-        orderCode:"2343", 
-        supplierName: "xxx",
-        type_name: "123",
-        purchasing:'内行', 
-        purchasingGroup:"323",
-        voucherDate:"kkkk",
-        approvalState_name:"vvvv",
-        confirmState_name:"aaaa",
-        closeState_name:"vnnnnn",
-        key: "1"
+      orderCode:"NU0391025", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      approvalState_name:"已审批",
+      confirmState_name:"执行中",
+      closeState_name:"未关闭",
+      key: "1"
    }, 
    { 
-        orderCode:"222", 
-        supplierName: "22xxx",
-        type_name: "1223",
-        purchasing:'内行2', 
-        purchasingGroup:"3223",
-        voucherDate:"222kk",
-        approvalState_name:"22vvvv",
-        confirmState_name:"2aaaa",
-        closeState_name:"2vnnnnn",
-        key: "2"
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      approvalState_name:"已审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
+      key: "2"
    },
    { 
-        orderCode:"222", 
-        supplierName: "22xxx",
-        type_name: "1223",
-        purchasing:'内行2', 
-        purchasingGroup:"3223",
-        voucherDate:"222kk",
-        approvalState_name:"22vvvv",
-        confirmState_name:"2aaaa",
-        closeState_name:"2vnnnnn",
-        key: "3"
+      orderCode:"NU0391027", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      approvalState_name:"已审批",
+      confirmState_name:"终止",
+      closeState_name:"已关闭",
+      key: "3"
    },
    { 
-        orderCode:"222", 
-        supplierName: "22xxx",
-        type_name: "1223",
-        purchasing:'内行2', 
-        purchasingGroup:"3223",
-        voucherDate:"222kk",
-        approvalState_name:"22vvvv",
-        confirmState_name:"2aaaa",
-        closeState_name:"2vnnnnn",
-        key: "4"
+      orderCode:"NU0391028", 
+      supplierName: "xx供应商",
+      type_name: "4",
+      purchasing:'组织c', 
+      purchasingGroup:"cc",
+      voucherDate:"2019年03月01日",
+      approvalState_name:"未审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
+      key: "4"
    },
+    { 
+      orderCode:"NU0391029", 
+      supplierName: "xx供应商",
+      type_name: "5",
+      purchasing:'组织d', 
+      purchasingGroup:"ss",
+      voucherDate:"2019年02月14日",
+      approvalState_name:"未审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
+      key: "5"
+    }
 ];

 class Demo11 extends Component {
  render() {
    return (
-        <Table columns={columns} data={data} scroll={{x:true}} />
+        <Table columns={columns} data={data} scroll={{ x:true }} />
    );
  }
 }
--- a/demo/demolist/Demo0202.js
+++ b/demo/demolist/Demo0202.js
--- a/demo/demolist/Demo03.js
+++ b/demo/demolist/Demo03.js
@ -1,182 +0,0 @@
-/**
-*
-* @title 固定表头
-* @parent 基础 Basic
-* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
-*/
-
-import React, { Component } from 'react';
-import Table from '../../src';
-
-const columns03 = [
-  {
-      title: "序号",
-      dataIndex: "index",
-      key: "index",
-      width: 80, 
-      render(text, record, index) {
-          return index + 1;
-      }
-  },
-  {
-      title: "订单编号",
-      dataIndex: "orderCode",
-      key: "orderCode",
-      width: 200, 
-  },
-  {
-      title: "供应商名称",
-      dataIndex: "supplierName",
-      key: "supplierName",
-      width: 200
-  },
-  {
-      title: "类型",
-      dataIndex: "type_name",
-      key: "type_name",
-      width: 200
-  },
-  {
-      title: "采购组织",
-      dataIndex: "purchasing",
-      key: "purchasing",
-      width: 200
-  },
-  {
-      title: "采购组",
-      dataIndex: "purchasingGroup",
-      key: "purchasingGroup",
-      width: 200
-  },
-  {
-      title: "凭证日期",
-      dataIndex: "voucherDate",
-      key: "voucherDate",
-      width: 200,
-  },
-  {
-      title: "审批状态",
-      dataIndex: "approvalState_name",
-      key: "approvalState_name",
-      width: 200
-  },
-  {
-      title: "确认状态",
-      dataIndex: "confirmState_name",
-      key: "confirmState_name",
-       width: 200
-  }, 
-  {
-      title: "关闭状态",
-      dataIndex: "closeState_name",
-      key: "closeState_name",
-      width: 100
-  }
-];
-
-const data03 = [
-  { 
-    orderCode:"2343", 
-    supplierName: "xxx",
-    type_name: "123",
-    purchasing:'内行', 
-    purchasingGroup:"323",
-    voucherDate:"kkkk",
-    approvalState_name:"vvvv",
-    confirmState_name:"aaaa",
-    closeState_name:"vnnnnn",
-    key: "1"
-  }, 
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "2"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "3"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "4"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "5"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "6"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "7"
-  },
-  { 
-    orderCode:"222", 
-    supplierName: "22xxx",
-    type_name: "1223",
-    purchasing:'内行2', 
-    purchasingGroup:"3223",
-    voucherDate:"222kk",
-    approvalState_name:"22vvvv",
-    confirmState_name:"2aaaa",
-    closeState_name:"2vnnnnn",
-    key: "8"
-  },
-];
-
-class Demo03 extends Component {
-  render() {
-    return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
-  }
-}
-
-export default Demo03; 
--- a/demo/demolist/Demo0301.js
+++ b/demo/demolist/Demo0301.js
@ -13,7 +13,6 @@ const columns = [
  {
    title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
    fixed:'left',
-    textAlign:'center',
    render: (text, record, index) => {
      return (
        <Tooltip inverse overlay={text}>
@ -29,9 +28,9 @@ const columns = [
      );
    }
  },
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
-  { title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
-  { title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data = [
@ -53,8 +52,6 @@ class Demo21 extends Component {
        <Table
          columns={columns}
          data={data}
-          height={40}
-          headerHeight={40}
          title={currentData => <div>员工信息统计表</div>}
          footer={currentData => <div>合计: 共{data.length}条数据</div>}
        />
--- a/demo/demolist/Demo0302.js
+++ b/demo/demolist/Demo0302.js
@ -60,7 +60,7 @@ class Demo22 extends Component {
  render() {
    return (
      <div className="demo22">
-        <Button className="opt-btns" colors="primary" onClick={() => this.fetch()}>点击加载远程数据</Button>
+        <Button className="opt-btns" colors="secondary" onClick={() => this.fetch()}>点击加载远程数据</Button>
        <Table
          columns={columns}
          data={this.state.data}
--- a/demo/demolist/Demo0302.scss
+++ b/demo/demolist/Demo0302.scss
--- a/demo/demolist/Demo0402.js
+++ b/demo/demolist/Demo0402.js
--- a/demo/demolist/Demo0402.scss
+++ b/demo/demolist/Demo0402.scss
--- a/demo/demolist/Demo0404.js
+++ b/demo/demolist/Demo0404.js
@ -0,0 +1,102 @@
+/**
+*
+* @title 数据关联
+* @parent 列渲染 Custom Render
+* @description 数据行关联自定义菜单显示
+*/
+
+import React, { Component } from 'react';
+import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
+import Table from '../../src';
+import multiSelect from "../../src/lib/multiSelect";
+import sort from "../../src/lib/sort";
+
+const { Item } = Menu;
+
+const data = [
+  { 
+    num:"NU0391025", 
+    name: "aa",
+    sex: "男",
+    dept:'财务二科', 
+    rank:"T1",
+    year:"1",
+    seniority:"1",
+    key: "1"
+  }, 
+  { 
+    num:"NU0391026", 
+    name: "bb",
+    sex: "女",
+    dept:'财务一科', 
+    rank:"M1",
+    year:"1",
+    seniority:"1",
+    key: "2"
+  },
+  { 
+    num:"NU0391027", 
+    name: "dd",
+    sex: "女",
+    dept:'财务一科', 
+    rank:"T2",
+    year:"2",
+    seniority:"2",
+    key: "3"
+  }
+];
+
+const MultiSelectTable = multiSelect(Table, Checkbox);
+const ComplexTable = sort(MultiSelectTable, Icon);
+
+class Demo33 extends Component {
+    constructor(props) {
+        super(props);
+    }
+    getSelectedDataFunc = data => {
+        console.log(data);
+    }
+    onSelect = (item) => {
+        console.log(item);
+    }
+    render() {
+        const menu1 = (
+            <Menu
+                onSelect={this.onSelect}>
+                <Item key="1">模态弹出</Item>
+                <Item key="2">链接跳转</Item>
+                <Item key="3">打开新页</Item>
+            </Menu>);
+        let columns = [
+            {   title: "关联",dataIndex: "link",key: "link",width: 80, 
+                render: (text, record, index) => {
+                    return (
+                        <Dropdown
+                            trigger={['click']}
+                            overlay={menu1}
+                            animation="slide-up"
+                        >
+                            <Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
+                        </Dropdown>
+                    )
+                }
+            },
+            { title: "员工编号",dataIndex: "num",key: "num",width: 200 },
+            { title: "员工姓名",dataIndex: "name",key: "name", width: 200},
+            { title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
+            { title: "部门",dataIndex: "dept",key: "dept",width: 200},
+            { title: "职级",dataIndex: "rank",key: "rank",width: 200},
+            { title: "工龄",dataIndex: "year",key: "year",width: 200},
+            { title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
+        ];
+        return <ComplexTable 
+                bordered
+                columns={columns} 
+                data={data} 
+                multiSelect={{type: "checkbox"}}
+                getSelectedDataFunc={this.getSelectedDataFunc}
+                />
+    }
+}
+
+export default Demo33; 
--- a/demo/demolist/Demo0405.js
+++ b/demo/demolist/Demo0405.js
@ -0,0 +1,124 @@
+/**
+ *
+ * @title 列合计（总计）
+ * @parent 列渲染 Custom Render
+ * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
+ *
+ */
+
+import React, { Component } from "react";
+import {Button,Checkbox} from "tinper-bee";
+import Table from "../../src"; 
+import sum from "../../src/lib/sum.js";
+import multiSelect from "../../src/lib/multiSelect.js";
+ 
+let ComplexTable = multiSelect(sum(Table), Checkbox);
+
+const columns = [
+  {
+    title: "单据编号",
+    dataIndex: "num",
+    key: "num",
+    width: 120,
+    fixed: "left"
+  },
+  {
+    title: "单据日期",
+    dataIndex: "date",
+    key: "date",
+    width: 200,
+  },
+  {
+    title: "业务类型",
+    dataIndex: "type",
+    key: "type",
+    width: 200
+  },
+  {
+    title: "供应商",
+    dataIndex: "supplier",
+    key: "supplier",
+    width: 100
+  },
+  {
+    title: "联系人",
+    dataIndex: "contact",
+    key: "contact",
+  },
+  {
+    title: "仓库",
+    dataIndex: "warehouse",
+    key: "warehouse",
+    width: 80,
+  },
+  {
+    title: "整单数量",
+    dataIndex: "total",
+    key: "total",
+    width: 100,
+    sumCol: true
+  },
+  {
+    title: "金额",
+    dataIndex: "money",
+    key: "money",
+    width: 100,
+    sumCol: true
+  }
+];
+
+function getData(){
+  const data = [];
+  for (let i = 0; i < 5; i++) {
+    data.push({
+      key: i,
+      num: "NU039100"+i,
+      date: "2019-03-01",
+      type: "普通采购",
+      supplier: "gys"+i,
+      contact: "Tom",
+      warehouse: "普通仓",
+      total: i + Math.floor(Math.random()*10),
+      money: 20 *  Math.floor(Math.random()*10)
+    });
+  }
+  return data;
+}
+
+class Demo35 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"
+          onClick={this.changeData}
+        >
+          动态设置数据源
+        </Button>
+
+         <ComplexTable 
+          columns={columns}
+          data={data}
+          bordered
+          // scroll={{ x: "130%", y: 140 }}
+        />
+      </div>
+    );
+  }
+}
+export default Demo35;
--- a/demo/demolist/Demo0501.js
+++ b/demo/demolist/Demo0501.js
--- a/demo/demolist/Demo0502.js
+++ b/demo/demolist/Demo0502.js
@ -0,0 +1,203 @@
+/**
+ *
+ * @title 单元格编辑
+ * @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
+ *
+ */
+import React, { Component } from "react";
+import Table from "../../src";
+import { Icon, Select, Tooltip } from "tinper-bee";
+const Option = Select.Option;
+
+class StringEditCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  commitChange = () => {
+    if (this.state.value === "") return;
+    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.commitChange();
+    }
+  };
+
+  handleChange = e => {
+    this.setState({ value: e.target.value });
+  };
+
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className="editable-cell">
+        {editable ? (
+          <div className="editable-cell-input-wrapper">
+            <input
+              className="u-form-control"
+              autoFocus
+              defaultValue={this.props.value}
+              value={value}
+              onKeyDown={this.handleKeydown}
+              onChange={this.handleChange}
+              onBlur={this.commitChange}
+            />
+            {value === "" ? (
+              <Tooltip
+                inverse
+                className="tp-501"
+                placement="bottom"
+                overlay={
+                  <div className="help-tip">
+                    {"请输入" + this.props.colName}
+                  </div>
+                }
+              >
+                <Icon className="uf-exc-t require" />
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : (
+          <div className="editable-cell-text-wrapper" onClick={this.edit}>
+            {value || " "}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
+
+class SelectEditCell extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+      editable: false
+    };
+  }
+
+  handleSelect = (value) => {
+    this.setState({ value });
+  }
+
+  commitChange = () => {
+    this.setState({ editable: false });
+    if (this.props.onChange) {
+      this.props.onChange(this.state.value);
+    }
+  };
+
+  edit = () => {
+    this.setState({ editable: true });
+  };
+
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className="editable-cell">
+        {editable ? (
+          <div className="editable-cell-input-wrapper">
+            <Select
+              defaultValue={this.props.value}
+              value={value}
+              onSelect={this.handleSelect}
+              onBlur={this.commitChange}
+              autoFocus
+            >
+              {SELECT_SOURCE.map((item, index) => (
+                <Option key={index} value={item}>
+                  {item}
+                </Option>
+              ))}
+            </Select>
+          </div>
+        ) : (
+          <div className="editable-cell-text-wrapper" onClick={this.edit}>
+            {value || " "}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const dataSource = [
+  { name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
+  { name: "绝命", quality: "太古传奇", level: 70, key: "2" },
+  { name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
+  { name: "虹光", quality: "传奇", level: 70, key: "4" },
+  { name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
+];
+
+class Demo501 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.columns = [
+      {
+        title: "装备名称",
+        dataIndex: "name",
+        key: "name",
+        render: (text, record, index) => (
+          <StringEditCell
+            value={text}
+            colName={"装备名称"}
+            onChange={this.onCellChange(index, "name")}
+          />
+        )
+      },
+      {
+        title: "品质",
+        dataIndex: "quality",
+        key: "quality",
+        render: (text, record, index) => (
+          <SelectEditCell
+            value={text}
+            onChange={this.onCellChange(index, "quality")}
+          />
+        )
+      },
+      {
+        title: "需求等级",
+        dataIndex: "level",
+        key: "level"
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource
+    };
+  }
+
+  onCellChange = (index, key) => {
+    return value => {
+      const { dataSource } = this.state;
+      dataSource[index][key] = value;
+      this.setState({ dataSource }, () => console.dir(this.state.dataSource));
+    };
+  };
+
+  render() {
+    return (
+      <div className="demo501">
+        <Table data={this.state.dataSource} columns={this.columns} />
+      </div>
+    );
+  }
+}
+
+export default Demo501;
--- a/demo/demolist/Demo0502.scss
+++ b/demo/demolist/Demo0502.scss
@ -0,0 +1,28 @@
+.demo501 {
+  .editable-cell-text-wrapper {
+    &:hover {
+      border: 1px dashed #A5ADBA;
+    }
+  }
+
+  .require {
+    position: absolute;
+    top: 2px;
+    color: red;
+    font-size: 20px;
+  }
+}
+
+.help-tip {
+  color: #F44336;
+}
+
+.tp-501 {
+  .tooltip-arrow {
+    border-bottom-color: #F44336 !important;
+  }
+
+  .tooltip-inner {
+    border-color: #F44336 !important;
+  }
+}
--- a/demo/demolist/Demo0601.js
+++ b/demo/demolist/Demo0601.js
@ -0,0 +1,126 @@
+/**
+*
+* @title 左侧固定列
+* @parent 列操作-锁定 Fixed
+* @description 固定列到表格的左侧
+*
+*/
+
+
+
+import React, { Component } from 'react';
+import Table from '../../src';
+
+const columns = [
+  {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      fixed: 'left',
+      render(text, record, index){return index + 1}
+  },
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 100, 
+      fixed: 'left',
+  },
+  {
+      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: 100
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+      
+  },
+  {
+      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
+  }
+];
+
+const data = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
+];
+
+class Demo51 extends Component {
+  render() {
+    return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}  />;
+  }
+}
+
+export default Demo51;
--- a/demo/demolist/Demo0602.js
+++ b/demo/demolist/Demo0602.js
@ -12,12 +12,13 @@ import React, { Component } from 'react';
 import {Popconfirm} from 'tinper-bee';
 import Table from '../../src';

-const columns5 = [
+const columns = [
    {
        title: "序号",
        dataIndex: "index",
        key: "index",
-        width: 100, 
+        width: 80, 
+        render(text, record, index){return index + 1}
    },
    {
        title: "订单编号",
@ -47,13 +48,13 @@ const columns5 = [
        title: "采购组",
        dataIndex: "purchasingGroup",
        key: "purchasingGroup",
-         width: 300
+         width: 100
    },
    {
        title: "凭证日期",
        dataIndex: "voucherDate",
        key: "voucherDate",
-        width: 100,
+        width: 200,
        
    },
    {
@ -94,70 +95,48 @@ const columns5 = [
    }
 ];

-const data5 = [
+const data = [
    { 
-        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"
+      orderCode:"NU0391025", 
+      supplierName: "xx供应商",
+      type_name: "1",
+      purchasing:'组织c', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年03月18日",
+      approvalState_name:"已审批",
+      confirmState_name:"执行中",
+      closeState_name:"未关闭",
+      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操作",
+      orderCode:"NU0391026", 
+      supplierName: "xx供应商",
+      type_name: "2",
+      purchasing:'组织a', 
+      purchasingGroup:"bb",
+      voucherDate:"2018年02月05日",
+      approvalState_name:"已审批",
+      confirmState_name:"待确认",
+      closeState_name:"未关闭",
      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操作",
+      orderCode:"NU0391027", 
+      supplierName: "xx供应商",
+      type_name: "3",
+      purchasing:'组织b', 
+      purchasingGroup:"aa",
+      voucherDate:"2018年07月01日",
+      approvalState_name:"已审批",
+      confirmState_name:"终止",
+      closeState_name:"已关闭",
      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"
-    },
+    }
 ];

 class Demo52 extends Component {
  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x:true, y: 200 }}  />;
+    return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }}  />;
  }
 }

--- a/demo/demolist/Demo0603.js
+++ b/demo/demolist/Demo0603.js
@ -0,0 +1,198 @@
+/**
+*
+* @title 动态设置列锁定、解除锁定
+* @parent 列操作-锁定 Fixed
+* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
+*
+*/
+import React, { Component } from 'react';
+import {Icon,Menu,Dropdown} from "tinper-bee";
+
+import Table from '../../src';
+
+const { Item } = Menu;
+
+const columns = [
+  {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      width: 80, 
+      fixed: 'left',
+      render(text, record, index){return index + 1}
+  },
+  {
+      title: "订单编号",
+      dataIndex: "orderCode",
+      key: "orderCode",
+      width: 100, 
+      fixed: 'left',
+  },
+  {
+      title: "供应商名称",
+      dataIndex: "supplierName",
+      key: "supplierName",
+      width: 150
+  },
+  {
+      title: "类型",
+      dataIndex: "type_name",
+      key: "type_name",
+      width: 100
+  },
+  {
+      title: "采购组织",
+      dataIndex: "purchasing",
+      key: "purchasing",
+      width: 100
+  },
+  {
+      title: "采购组",
+      dataIndex: "purchasingGroup",
+      key: "purchasingGroup",
+       width: 100
+  },
+  {
+      title: "凭证日期",
+      dataIndex: "voucherDate",
+      key: "voucherDate",
+      width: 200,
+      
+  },
+  {
+      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
+  }
+];
+
+const data = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
+];
+ 
+class Demo24 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns:columns
+    }
+  }
+  
+  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={data} scroll={{ x: "110%", y: 240 }}/>
+      </div>
+    )
+  }
+}
+
+export default Demo24;
--- a/demo/demolist/Demo0603.scss
+++ b/demo/demolist/Demo0603.scss
--- a/demo/demolist/Demo0701.js
+++ b/demo/demolist/Demo0701.js
@ -2,15 +2,13 @@
 *
 * @title 按条件、值过滤
 * @parent 列操作-过滤 Filter
-* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
+* @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" },
--- a/demo/demolist/Demo0702.js
+++ b/demo/demolist/Demo0702.js
--- a/demo/demolist/Demo0802.js
+++ b/demo/demolist/Demo0802.js
@ -0,0 +1,127 @@
+/**
+*
+* @title 列过滤面板
+* @parent 列操作-隐藏 Hide
+* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
+*
+*/
+
+
+import React, { Component } from 'react';
+import {Icon,Popover} from "tinper-bee";
+import Table from '../../src';
+import filterColumn from '../../src/lib/filterColumn';
+import sum from '../../src/lib/sum';
+
+const data = [
+  { 
+    orderCode:"NU0391025", 
+    supplierName: "xx供应商",
+    type_name: "1",
+    purchasing:'组织c', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年03月18日",
+    approvalState_name:"已审批",
+    confirmState_name:"执行中",
+    closeState_name:"未关闭",
+    key: "1"
+  }, 
+  { 
+    orderCode:"NU0391026", 
+    supplierName: "xx供应商",
+    type_name: "2",
+    purchasing:'组织a', 
+    purchasingGroup:"bb",
+    voucherDate:"2018年02月05日",
+    approvalState_name:"已审批",
+    confirmState_name:"待确认",
+    closeState_name:"未关闭",
+    key: "2"
+  },
+  { 
+    orderCode:"NU0391027", 
+    supplierName: "xx供应商",
+    type_name: "3",
+    purchasing:'组织b', 
+    purchasingGroup:"aa",
+    voucherDate:"2018年07月01日",
+    approvalState_name:"已审批",
+    confirmState_name:"终止",
+    closeState_name:"已关闭",
+    key: "3"
+  }
+];
+
+const FilterColumnTable = filterColumn(Table, Popover, Icon);
+
+const defaultProps21 = {
+  prefixCls: "bee-table"
+};
+
+class Demo21 extends Component {
+  constructor(props) {
+    super(props);
+    this.state ={
+      columns: [
+        {
+          title: "序号",
+          dataIndex: "index",
+          key: "index",
+          width: 80, 
+          fixed: 'left',
+          render(text, record, index){return index + 1}
+        },
+        {
+            title: "订单编号",
+            dataIndex: "orderCode",
+            key: "orderCode",
+            width: 100, 
+            fixed: 'left',
+        },
+        {
+            title: "供应商名称",
+            dataIndex: "supplierName",
+            key: "supplierName",
+            width: 150
+        },
+        {
+            title: "类型",
+            dataIndex: "type_name",
+            key: "type_name",
+            width: 100
+        },
+        {
+            title: "采购组织",
+            dataIndex: "purchasing",
+            key: "purchasing",
+            width: 100
+        },
+      ]};
+  }
+  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.columns} 
+            data={data} 
+            afterFilter={this.afterFilter} 
+            showFilterPopover={this.state.showFilterPopover}
+            />;
+  }
+}
+
+Demo21.defaultProps = defaultProps21;
+export default Demo21;
--- a/demo/demolist/Demo0901.js
+++ b/demo/demolist/Demo0901.js
--- a/demo/demolist/Demo0902.js
+++ b/demo/demolist/Demo0902.js
@ -1,7 +1,7 @@
 /**
 * @title 后端列排序
 * @parent 列操作-排序 Sort
-* @description 将控制台打印的参数传递给后端即可进行列排序
+* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
 */


--- a/demo/demolist/Demo0903.js
+++ b/demo/demolist/Demo0903.js
@ -2,7 +2,7 @@
 *
 * @title 多列排序
 * @parent 列操作-排序 Sort
- * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
+ * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
 *
 */

@ -116,7 +116,7 @@ class Demo13 extends Component {
    return (
      <div>
        <Button className="editable-add-btn" onClick={this.onClick}>
-          change selectedRow
+          清空已选
        </Button>
        <ComplexTable
          selectDisabled={this.state.selectDisabled}
--- a/demo/demolist/Demo1001.js
+++ b/demo/demolist/Demo1001.js
@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列顺序
 * @parent 列操作-拖拽 Drag
-* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
+* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@ -10,7 +10,7 @@ import {Icon} from "tinper-bee";
 import Table from '../../src'; 
 import dragColumn from '../../src/lib/dragColumn';

-const columns22 = [
+const columns = [
  {
    title: "名字",
    dataIndex: "a",
@ -39,7 +39,7 @@ const columns22 = [
  }
 ];

-const data22 = [
+const data = [
  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
@ -57,13 +57,20 @@ class Demo22 extends Component {
  }
 
  render() {
-    return <DragColumnTable columns={columns22} data={data22} bordered
-    
-    draggable={true} 
+    return <DragColumnTable 
+            columns={columns} 
+            data={data} 
+            bordered
+            draggable={true} 
+            onDrop ={(event,data,columns)=>{
+              console.log("--拖拽交换列后触发事件");
+              console.log("event.target:",event.target);
+              console.log("data:",data);
+              console.log("拖拽完成后的columns:",columns);
+            }}
    />;
  }
 }
+
 Demo22.defaultProps = defaultProps22;
-
-
 export default Demo22;
--- a/demo/demolist/Demo1002.js
+++ b/demo/demolist/Demo1002.js
@ -2,7 +2,7 @@
 *
 * @title 拖拽改变列宽度
 * @parent 列操作-拖拽 Drag
-* @description 注：不支持tree结构的表头、合并表头的table
+* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
 */
 import React, { Component } from 'react';
 import {Icon} from "tinper-bee";
@ -62,14 +62,17 @@ class Demo23 extends Component {
  }

  render() {
-    return <DragColumnTable columns={columns23} data={data23} bordered
-    dragborder={true} 
-    draggable={true} 
-    scroll={{y:200}}
-    onDropBorder ={(e,width)=>{
-      console.log(width+"--调整列宽后触发事件",e.target);
-    }}
-    />;
+    return <DragColumnTable 
+            columns={columns23} 
+            data={data23} 
+            bordered
+            dragborder={true} 
+            draggable={true} 
+            scroll={{y:200}}
+            onDropBorder ={(e,width)=>{
+              console.log(width+"--调整列宽后触发事件",e.target);
+            }}
+            />;
  }
 }
 Demo23.defaultProps = defaultProps23;
--- a/demo/demolist/Demo103.js
+++ b/demo/demolist/Demo103.js
@ -1,59 +0,0 @@
-/**
-*
-* @title 选中行颜色、自定义表格标题和表尾
-* @parent 扩展行 Expanded Row
-* @description 选中行的样式可自定义
-*/
-
-import React, { Component } from "react";
-import {Button,Tooltip,} from "tinper-bee";
-
-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;
--- a/demo/demolist/Demo1101.js
+++ b/demo/demolist/Demo1101.js
@ -119,8 +119,6 @@ class Demo16 extends Component {
        scroll={{x:true}}
        dragborder={true} 
        draggable={true} 
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
      />
    );
  }
--- a/demo/demolist/Demo1102.js
+++ b/demo/demolist/Demo1102.js
@ -1,6 +1,6 @@
 /**
 *
-* @title 层级树型展示
+* @title 树型表格数据展示
 * @parent 扩展行 Expanded Row
 * @description 通过在data中配置children数据，来自动生成树形表格
 *
--- a/demo/demolist/Demo1103.js
+++ b/demo/demolist/Demo1103.js
@ -0,0 +1,60 @@
+/**
+*
+* @title 自定义表格标题、表尾、选中行颜色
+* @parent 扩展行 Expanded Row
+* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip,} from "tinper-bee";
+
+import Table from "../../src";
+
+const columns = [
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+];
+
+const data = [
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", 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>合计: 共{data.length}条数据</div>}
+      /> 
+    );
+  }
+}
+
+export default Demo26;
--- a/demo/demolist/Demo1105.js
+++ b/demo/demolist/Demo1105.js
@ -0,0 +1,76 @@
+/**
+*
+* @title 紧凑型、宽松型
+* @parent 扩展行 Expanded Row
+* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
+*/
+
+import React, { Component } from "react";
+import {Button,Tooltip,Tag} from "tinper-bee";
+import Table from "../../src";
+
+const columns = [
+    { title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
+    { title: "采购组织", dataIndex: "org", key: "org", width: 200 },
+    { title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
+    { title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
+    { title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
+    { title: "单据状态", dataIndex: "status", key: "status", width: 100 },
+    { title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
+    { title: "单位", dataIndex: "unit", key: "unit", width: 100 },
+    { title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
+];
+
+const data = [
+    { 
+        orderNum: "NU0391025", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年03月18日', 
+        quantity: '100.00', 
+        status: '错误', 
+        submitter: '小张', 
+        unit: 'pc', 
+        sum:'8,487.00', 
+        key: "1" 
+    },
+    { 
+        orderNum: "NU0391026", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年02月05日', 
+        quantity: '91.00', 
+        status: '正常', 
+        submitter: '小红', 
+        unit: 'pc', 
+        sum:'675.00', 
+        key: "2" 
+    },
+    { 
+        orderNum: "NU0391027", 
+        org: "用友网络科技股份有限公司", 
+        supplier: "xx供应商", 
+        orderDate: '2018年07月01日', 
+        quantity: '98.00', 
+        status: '异常', 
+        submitter: '小李', 
+        unit: 'pc', 
+        sum:'1,531.00', 
+        key: "3" 
+    }
+];
+
+class Demo1 extends Component {
+  render() {
+    return (
+        <div>
+            <h5>紧凑型表格</h5>
+            <Table columns={columns} data={data} size="sm" />
+            <h5>宽松型表格</h5>
+            <Table columns={columns} data={data} size="lg" />
+        </div>
+    );
+  }
+}
+
+export default Demo1;
--- a/demo/demolist/Demo1106.js
+++ b/demo/demolist/Demo1106.js
@ -2,7 +2,7 @@
 *
 * @title 自定义行高
 * @parent 扩展行 Expanded Row
-* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
+* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
 */

 import React, { Component } from "react";
@ -10,32 +10,16 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  {
-    title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
-    fixed:'left',
-    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: 500},
-  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "部门", dataIndex: "d", key: "d", width: 200 }
 ];

 const data = [
-  { a: "令狐冲", b: "男", c: 41, key: "1" },
-  { a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
-  { a: "郭靖", b: "男", c: 25, key: "3" }
+  { a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
+  { a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
+  { a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
 ];

 class Demo1 extends Component {
@ -63,7 +47,6 @@ class Demo1 extends Component {

  render() {
    return (
-   
        <Table
          columns={columns}
          data={data}
--- a/demo/demolist/Demo1107.js
+++ b/demo/demolist/Demo1107.js
@ -29,7 +29,7 @@ const columns = [
        title: "设施管理部门",
        dataIndex: "facilityManageUnit",
        key: "facilityManageUnit",
-        width: 100,
+        width: 150,
    },
    {
        title: "案卷编号",
--- a/demo/demolist/Demo1108.js
+++ b/demo/demolist/Demo1108.js
@ -114,7 +114,7 @@ const data = [{
 class Demo15 extends Component {
  render() {
    return (
-       <Table columns={columns} data={data}/>
+       <Table columns={columns} data={data} bordered/>
    );
  }
 }
--- a/demo/demolist/Demo1301.js
+++ b/demo/demolist/Demo1301.js
--- a/demo/demolist/Demo1401.js
+++ b/demo/demolist/Demo1401.js
@ -67,7 +67,6 @@ class Demo30 extends Component {
          columns={columns}
          data={data}
          scroll={{y:300}}
-          height={40}
          onRowClick={(record, index, indent) => {
            console.log('currentIndex--'+index);
          }}
--- a/demo/demolist/Demo1401.scss
+++ b/demo/demolist/Demo1401.scss
--- a/demo/demolist/Demo1402.js
+++ b/demo/demolist/Demo1402.js
@ -132,8 +132,6 @@ class Demo31 extends Component {
        expandedRowRender={this.expandedRowRender}
        scroll={{y:350}}
        // defaultExpandedRowKeys={[0,1]}
-        title={currentData => <div>标题: 这是一个标题</div>}
-        footer={currentData => <div>表尾: 我是小尾巴</div>}
      />
    );
  }
--- a/demo/demolist/Demo1403.js
+++ b/demo/demolist/Demo1403.js
@ -74,7 +74,6 @@ class Demo32 extends Component {
          data={data}
          parentNodeId='parent'
          scroll={{y:300}}
-          height={40}
          bordered
          onRowClick={(record, index, indent) => {
            this.setState({
--- a/demo/demolist/Demo1404.js
+++ b/demo/demolist/Demo1404.js
@ -80,7 +80,6 @@ class Demo34 extends Component {
          data={data}
          parentNodeId='parent'
          scroll={{y:300}}
-          height={40}
          onExpand={this.onExpand}
          onRowClick={(record, index, indent) => {
            console.log('currentIndex--'+index);
--- a/demo/demolist/Demo1601.js
+++ b/demo/demolist/Demo1601.js
--- a/demo/demolist/Demo1601.scss
+++ b/demo/demolist/Demo1601.scss
--- a/demo/demolist/Demo1602.js
+++ b/demo/demolist/Demo1602.js
--- a/demo/demolist/Demo35.js
+++ b/demo/demolist/Demo35.js
@ -1,145 +0,0 @@
-/**
- *
- * @title 合并列后合计
- * @parent 列渲染 Custom Render
- * @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
- *
- */
-
-import React, { Component } from "react";
-import {Button} from "tinper-bee";
-import Table from "../../src"; 
-import sum from "../../src/lib/sum.js";
- 
-let ComplexTable = sum(Table);
-
-const columns = [
-  {
-    title: "Name",
-    dataIndex: "name",
-    key: "name",
-    width: 120,
-    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 Demo35 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"
-          onClick={this.changeData}
-        >
-          动态设置数据源
-        </Button>
-
-         <ComplexTable 
-          columns={columns}
-          data={data}
-          bordered
-          // scroll={{ x: "130%", y: 140 }}
-        />
-      </div>
-    );
-  }
-}
-export default Demo35;
--- a/demo/demolist/Demo51.js
+++ b/demo/demolist/Demo51.js
@ -1,61 +0,0 @@
-/**
-*
-* @title 左侧固定列
-* @parent 列操作-锁定 Fixed
-* @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: "address", dataIndex: "address", key: "address" }
-];
-
-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 Demo51 extends Component {
-  render() {
-    return <Table columns={columns5} data={data5} scroll={{ x: "110%", y: 240 }}  />;
-  }
-}
-
-export default Demo51;
--- a/demo/demolist/Demo53.js
+++ b/demo/demolist/Demo53.js
@ -1,158 +0,0 @@
-/**
-*
-* @title 动态设置列锁定、解除锁定
-* @parent 列操作-锁定 Fixed
-* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
-*
-*/
-import React, { Component } from 'react';
-import {Icon,Menu,Dropdown} from "tinper-bee";
-
-import Table from '../../src';
-
-const { Item } = Menu;
-
-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: 150 
-  },
-  {
-    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);
-    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;
--- a/demo/demolist/Demo71.js
+++ b/demo/demolist/Demo71.js
@ -1,85 +0,0 @@
-/**
-*
-* @title 列过滤面板
-* @parent 列操作-隐藏 Hide
-* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
-*
-*/
-
-
-import React, { Component } from 'react';
-import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
-
-import Table from '../../src';
-import filterColumn from '../../src/lib/filterColumn';
-import sum from '../../src/lib/sum';
-
-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"
-                }
-              ]};
-  }
-  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;
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -8278,13 +8278,15 @@ ul {
    text-align: left; }
  .u-table th {
    font-weight: bold;
-    text-align: left; }
+    text-align: left;
+    line-height: 16px; }
    .u-table th[colspan] {
      text-align: center; }
    .u-table th ::last-child {
      overflow: hidden; }
  .u-table td {
-    border-bottom: 1px solid rgb(193, 199, 208); }
+    border-bottom: 1px solid rgb(193, 199, 208);
+    line-height: 1.33; }
    .u-table td a {
      color: #2196F3; }
      .u-table td a:hover {
@ -8313,6 +8315,10 @@ ul {
    .u-table th.text-right,
    .u-table td.text-right {
      text-align: right; }
+  .u-table-sm td {
+    padding: 8px 8px; }
+  .u-table-lg td {
+    padding: 16px 8px; }
  .u-table tr.filterable th {
    padding-top: 5px !important;
    padding-bottom: 5px !important; }
@ -8881,7 +8887,8 @@ ul {
    background: #344563; }

 .demo02 .u-table-placeholder i {
-  font-size: 60px; }
+  font-size: 60px;
+  line-height: 60px; }

 .demo04.u-table tr:nth-child(2n) {
  background: #f7f9fb; }
@ -8889,6 +8896,39 @@ ul {
 .demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
  background: #ebecf0; }

+.demo22 .opt-btns {
+  margin-bottom: 8px; }
+
+.demo32 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
+
+.demo501 .editable-cell-text-wrapper:hover {
+  border: 1px dashed #A5ADBA; }
+
+.demo501 .require {
+  position: absolute;
+  top: 2px;
+  color: red;
+  font-size: 20px; }
+
+.help-tip {
+  color: #F44336; }
+
+.tp-501 .tooltip-arrow {
+  border-bottom-color: #F44336 !important; }
+
+.tp-501 .tooltip-inner {
+  border-color: #F44336 !important; }
+
+th .drop-menu .uf {
+  font-size: 12px;
+  visibility: hidden;
+  margin-left: 15px; }
+
+th:hover .uf {
+  visibility: visible; }
+

 .demo8 .u-table {
  margin-bottom: 11px; }
@ -8901,19 +8941,4 @@ ul {
  -ms-flex-pack: center;
  justify-content: center; }

-.demo22 .opt-btns {
-  margin-bottom: 8px; }
-
-.demo32 .u-table-thead th {
-  padding-top: 0px;
-  padding-bottom: 0px; }
-
-th .drop-menu .uf {
-  font-size: 12px;
-  visibility: hidden;
-  margin-left: 15px; }
-
-th:hover .uf {
-  visibility: visible; }
-
 /*# sourceMappingURL=demo.css.map */
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -1,8 +1,9 @@
 # 表格 Table

 ## 何时使用
-表格是以结构化的方式来展示大量的信息最佳方法，使信息更易于阅读与理解。
-表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据，小量的信息，静态数据以及不断地变动的数据。
+- 当有大量结构化的数据需要展现时；
+- Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
+- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](http://design.yonyoucloud.com/tinper-bee/bee-complex-grid)。

 ## 如何使用
 ```
@ -62,12 +63,13 @@ import 'bee-table/build/Table.css';
 | sort       | 排序的属性 | object| {  mode:'single'//单列排序,  backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
 | syncHover       | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
 | loadBuffer       | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
-| resetScroll       | 将表格横向滚动条位置还原 | bool| false
+| resetScroll       | 将表格横向滚动条位置还原 | bool| false
 | hoverContent       | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| 
-| onRowHover       | 行hover时的回调函数 | Function| 
-| heightConsistent       | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false 
+| onRowHover       | 行hover时的回调函数 | Function| 
+| heightConsistent       | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false 
 | height | 自定义表格行高 | number | - |
 | headerHeight | 自定义表头行高 | number | - |
+| size | 表格大小 | `sm | md | lg` | 'md' |

 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

@ -104,31 +106,25 @@ import 'bee-table/build/Table.css';
 | headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
 | bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 

-## 快捷键API
-
-| 快捷键  | 快捷键说明 | 类型 | 默认值 | 
-| --- | :--- | --- |--- |
-| focusable       | 是否开启快捷键功能 | bool | -
-| onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
-| onKeyUp       |  ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
-| onKeyDown       | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
-| onTableKeyDown       | 触发table的所有快捷键 | function| -
-| tabIndex       | 设置焦点顺序 | number | 0
-
 ## mixin

 Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常

-## 如何引用
+### 如何引用
 需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：

 ```js
 import multiSelect from "tinper-bee/lib/multiSelect.js";
 ```

-### multiSelect 
+### multiSelect 多选功能
+#### multiSelect 新增API

- 选中功能组件
+| 参数                  | 说明                         | 类型       | 默认值      |
+| ------------------- | -------------------------- | -------- | -------- |
+| _checked         | 设置是否选中当前数据（设置在data数组中）           |  boolean      | true/false       |
+| _disabled   | 设置是否禁用当前数据（设置在data数组中）     |  boolean      | true/false     
+| getSelectedDataFunc | 返回当前选中的数据数组（设置在Table组件上）                | Function | 无        |

 <font color="#ccc">

@ -145,17 +141,6 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";

 </font>

-#### multiSelect 新增API
-
-data 数据中新增参数
-
-| 参数                  | 说明                         | 类型       | 默认值      |
-| ------------------- | -------------------------- | -------- | -------- |
-| _checked         | 设置当前数据是否选中           |  boolean      | true/false       |
-| _disabled   | 禁用当前选中数据     |  boolean      | true/false     
-| getSelectedDataFunc | 返回当前选中的数据数组                | Function | 无        |
-
-

 #### 使用

@ -167,11 +152,9 @@ const MultiSelectTable = multiSelect(Table, Checkbox);

 ```

-### sort
+### sort 排序功能

-排序功能
-
-#### Column新增参数
+#### columns新增参数

 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
@ -188,11 +171,9 @@ const SortTable = sort(Table, Icon);

 ```

-### sum
+### sum 合计功能

-合计功能
-
-#### Column新增参数
+#### columns新增参数
 
 | 参数     | 说明         | 类型       | 默认值  |
 | ------ | ---------- | -------- | ---- |
@ -208,9 +189,7 @@ const SumTable = sum(Table);

 ```

-### dragColumn
-
-拖拽列功能
+### dragColumn 拖拽列功能

 #### dragColumn新增参数

@ -232,9 +211,7 @@ const DragColumnTable = dragColumn(Table);

 ```

-### filterColumn
-
-过滤功能
+### filterColumn 过滤功能

 #### filterColumn新增参数

@ -255,7 +232,7 @@ const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
 ## rendertype
 在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等

-## 如何引用
+### 如何引用
 需要单独的去引用相应的js文件，目录在render文件夹，示例如下：

 ```js
@ -376,6 +353,17 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon);

 ```

+## 快捷键API
+
+| 快捷键  | 快捷键说明 | 类型 | 默认值 | 
+| --- | :--- | --- |--- |
+| focusable       | 是否开启快捷键功能 | bool | -
+| onKeyTab       | tab快捷键，可以处理默认选中第一条数据 | function| -
+| onKeyUp       |  ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
+| onKeyDown       | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
+| onTableKeyDown       | 触发table的所有快捷键 | function| -
+| tabIndex       | 设置焦点顺序 | number | 0
+
 ## 注意事项

 - 如果使用了固定列，请给固定的列设定固定宽度既width属性。
@ -384,6 +372,6 @@ const CheckboxRender = renderCheckbox(Checkbox, Icon);
 需要给expandedRowRender中返回的对象添加`style=\{{height: xxx}\}`,来使扩展后的固定列扩展成一样高度。


-> 当表格场景比较复杂时，可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
+> 当表格场景比较复杂时，可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。

 ## 更新日志
--- a/index.html
+++ b/index.html
@ -5,7 +5,7 @@
    <title>neoui-react-button</title>
    <link rel="stylesheet" href="./demo/atom-one-dark.css">
    <link rel="stylesheet" href="./dist/demo.css">
-    <!-- <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> -->
+    <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
   

 </head>
--- a/package.json
+++ b/package.json
@ -56,7 +56,7 @@
  "bee-loading": "^1.0.6",
  "bee-locale": "0.0.11",
  "bee-menus": "^2.0.2",
-  "bee-select": "^2.0.4",
+  "bee-select": "^2.0.9",
  "classnames": "^2.2.5",
  "component-classes": "^1.2.6",
  "lodash.clonedeep": "^4.5.0",
--- a/src/Table.js
+++ b/src/Table.js
@ -51,7 +51,8 @@ const propTypes = {
  onFilterClear: PropTypes.func,
  syncHover: PropTypes.bool,
  tabIndex:PropTypes.string,
-  hoverContent:PropTypes.func
+  hoverContent:PropTypes.func,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };

 const defaultProps = {
@ -85,7 +86,8 @@ const defaultProps = {
  setRowHeight:()=>{},
  setRowParentIndex:()=>{},
  tabIndex:'0',
-  heightConsistent:false
+  heightConsistent:false,
+  size: 'md'
 };

 class Table extends Component {
@ -1213,6 +1215,9 @@ class Table extends Component {
        show: loading,
      };
    }
+    if (props.size) {
+      className += ` ${clsPrefix}-${props.size}`;
+    }

    return (
      <div className={className} style={props.style} ref={el => this.contentTable = el} 
--- a/src/Table.scss
+++ b/src/Table.scss
@ -52,6 +52,7 @@ $icon-color:#505F79;
    font-weight: $table-head-font-weight;
    text-align: left;
    // transition: background 0.3s ease;
+    line-height: 16px;
    &[colspan] {
      text-align: center;
    }
@ -62,6 +63,7 @@ $icon-color:#505F79;

  td {
    border-bottom: 1px solid $table-border-color;
+    line-height: $line-height;
    a{
      color: #2196F3;
      &:hover{
@ -113,6 +115,16 @@ $icon-color:#505F79;
      text-align: right;
    }
  }
+  &-sm {
+    td {
+      padding: 8px $horizontal-padding;
+    }
+  }
+  &-lg {
+    td {
+      padding: 16px $horizontal-padding;
+    }
+  }
  tr {
    
    &.filterable{