feat: 新增组件示例

demo/TableDemo.scss

@@ -6,6 +6,7 @@
 @import "../src/Table.scss";
 @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
 @import "../node_modules/bee-form-control/src/FormControl.scss";
+@import "../node_modules/bee-pagination/src/Pagination.scss";
 
 .editable-cell {
   position: relative;
@@ -49,3 +50,29 @@
 .editable-add-btn {
   margin-bottom: 8px;
 }
+
+.search-component {
+  margin-bottom: 20px;
+  .empty-search {
+    position: absolute;
+    right: 45px;
+    z-index: 20;
+    top: 5px;
+    color: #524e4e;
+    cursor: pointer;
+  }
+  &.u-input-group.simple {
+    float: right;
+  }
+  &.u-input-group.simple .u-form-control {
+    width: 251px;
+    background: #f5f5f5;
+    border-color: #f5f5f5;
+    border-radius: 20px;
+  }
+  &.u-input-group.simple .u-input-group-btn {
+    top: 3px;
+    right: 20px;
+    position: absolute;
+  }
+}

demo/demolist/Demo10.js

@@ -0,0 +1,39 @@
+/**
+*
+* @title 无数据时显示
+* @description 无数据时显示效果展示
+*
+*/
+
+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} />;
+    }
+  }
+  

demo/demolist/Demo4.js

@@ -0,0 +1,96 @@
+/**
+*
+* @title 树形数据展示
+* @description 手写表格的头组件来达到更灵活的配置表格
+*
+*/
+
+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 {
+  render() {
+    return <Table columns={columns4} data={data4} />;
+  }
+}

demo/demolist/Demo5.js

@@ -0,0 +1,58 @@
+/**
+*
+* @title 固定列
+* @description 固定列到表格的某侧
+*
+*/
+
+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: "address", key: "1" },
+  { title: "Column 2", dataIndex: "address", key: "2" },
+  { title: "Column 3", dataIndex: "address", key: "3" },
+  { title: "Column 4", dataIndex: "address", key: "4" },
+  { title: "Column 5", dataIndex: "address", key: "5" },
+  { title: "Column 6", dataIndex: "address", key: "6" },
+  { title: "Column 7", dataIndex: "address", key: "7" },
+  { title: "Column 8", dataIndex: "address", 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: 1500 }} />;
+  }
+}

demo/demolist/Demo6.js

@@ -0,0 +1,80 @@
+/**
+*
+* @title 固定表头
+* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。
+*
+*/
+
+const columns6 = [
+  {
+    title: "Full Name",
+    width: 100,
+    dataIndex: "name",
+    key: "name"
+  },
+  { title: "Age", width: 100, dataIndex: "age", key: "age"},
+  { title: "Column 1", dataIndex: "address", key: "1" },
+  { title: "Column 2", dataIndex: "address", key: "2" },
+  { title: "Column 3", dataIndex: "address", key: "3" },
+  { title: "Column 4", dataIndex: "address", key: "4" },
+  { title: "Column 5", dataIndex: "address", key: "5" },
+  { title: "Column 6", dataIndex: "address", key: "6" },
+  { title: "Column 7", dataIndex: "address", key: "7" },
+  { title: "Column 8", dataIndex: "address", key: "8" }
+];
+
+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 <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;
+  }
+}

demo/demolist/Demo7.js

@@ -0,0 +1,81 @@
+/**
+*
+* @title 主子表
+* @description 主表点击子表联动
+*
+*/
+
+const columns7 = [
+  { title: "用户名", dataIndex: "a", key: "a"},
+  { id: "123", title: "性别", dataIndex: "b", key: "b"},
+  { title: "年龄", dataIndex: "c", key: "c"},
+  {
+    title: "操作",
+    dataIndex: "",
+    key: "d",
+    render() {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+const data7 = [
+  { a: "令狐冲", b: "男", c: 41, key: "1" },
+  { a: "杨过", b: "男", c: 67, key: "2" },
+  { a: "郭靖", b: "男", c: 25, key: "3" }
+];
+
+const columns7_1 = [
+  { title: "用户名", dataIndex: "a", key: "a"},
+  { id: "123", 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) => {
+    console.log(record)
+    console.log(index)
+    if(record.a === '令狐冲'){
+      this.setState({
+        children_data: [
+          { a: "令狐冲", b: "01班", c: '文学系', key: "1" },
+        ]
+      })
+    }else if(record.a === '杨过'){
+      this.setState({
+        children_data: [
+          { a: "杨过", b: "01班", c: '外语系', key: "2" },
+        ]
+      })
+    }else if(record.a === '郭靖'){
+      this.setState({
+        children_data: [
+          { a: "郭靖", b: "02班", c: '美术系', key: "3" }
+        ]
+      })
+    }
+  }
+  render() {
+    return (
+      <div>
+        <Table
+          columns={columns7_1}
+          data={data7}
+          onRowClick={this.rowclick}
+          title={currentData => <div>标题: 我是主表</div>}
+        />
+        <Table
+          columns={columns7}
+          data={this.state.children_data}
+          title={currentData => <div>标题: 我是子表</div>}
+        />
+      </div>
+    );
+  }
+}

demo/demolist/Demo8.js

@@ -0,0 +1,70 @@
+/**
+*
+* @title 表格+分页
+* @description 点击分页联动表格
+*
+*/
+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: "",
+    key: "d",
+    render() {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+class Demo8 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data8: [
+        { a: "令狐冲", b: "男", c: 41, key: "1" },
+        { a: "杨过", b: "男", c: 67, key: "2" },
+        { a: "郭靖", b: "男", c: 25, key: "3" }
+      ],
+      activePage: 1
+    };
+  }
+  handleSelect(eventKey) {
+    if(eventKey === 1){
+      this.setState({
+        data8: [
+          { a: "令狐冲", b: "男", c: 41, key: "1" },
+          { a: "杨过", b: "男", c: 67, key: "2" },
+          { a: "郭靖", b: "男", c: 25, key: "3" }
+        ],
+        activePage: eventKey
+      });
+    }else{
+      this.setState({
+        data8: [
+          { a: "芙蓉姐姐", b: "女", c: 23, key: "1" }
+        ],
+        activePage: eventKey
+      });
+    }
+    
+  }
+  render() {
+    return (
+      <div>
+        <Table columns={columns8} data={this.state.data8} />
+       <Pagination
+	        	first
+	        	last
+	        	prev
+	        	next
+	        	boundaryLinks
+		        items={2}
+		        maxButtons={5}
+		        activePage={this.state.activePage}
+		        onSelect={this.handleSelect.bind(this)} />
+      </div>
+    );
+  }
+}

demo/demolist/Demo9.js

@@ -0,0 +1,123 @@
+/**
+*
+* @title 表格+搜索
+* @description 搜索刷新表格数据
+*
+*/
+
+class Search extends Component {
+  state = {
+    searchValue: "",
+    empty: false
+  };
+
+  /**
+   * 搜索
+   */
+  handleSearch = () => {
+    let { onSearch,handleToChange } = this.props;
+    handleToChange && handleToChange();
+    onSearch && onSearch(this.state.searchValue);
+  };
+
+  /**
+   * 捕获回车
+   * @param e
+   */
+  handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      this.handleSearch();
+    }
+  };
+
+  /**
+   * 输入框改变
+   * @param e
+   */
+  handleChange = e => {
+    this.setState({
+      searchValue: e.target.value
+    });
+  };
+
+  /**
+   * 清空输入框
+   */
+  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}
+          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>
+    );
+  }
+}
+
+export default Search;
+const columns9 = [
+  { 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: "",
+    key: "d",
+    render() {
+      return <a href="#">一些操作</a>;
+    }
+  }
+];
+
+class Demo9 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [
+        { a: "令狐冲", b: "男", c: 41, key: "1" },
+        { a: "杨过", b: "男", c: 67, key: "2" },
+        { a: "郭靖", b: "男", c: 25, key: "3" }
+      ]
+    };
+  }
+  handleSearchToTable=()=>{
+    this.setState({
+      data: [
+        { a: "令狐冲", b: "男", c: 41, key: "1" }
+      ]
+    })
+  }
+  render() {
+    return (
+      <div>
+        <div className="clearfix">
+          <Search handleToChange={this.handleSearchToTable}/>
+        </div>
+        <Table columns={columns9} data={this.state.data} />
+      </div>
+    );
+  }
+}

demo/index-demo-base.js

@@ -6,7 +6,10 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Table from '../src';
 import Animate from 'bee-animate';
+import Pagination from "bee-pagination";
 import Icon from "bee-icon";
+import InputGroup from 'bee-input-group';
+import FormControl from 'bee-form-control';
 import Input from 'bee-form-control';
 import Popconfirm from 'bee-popconfirm';
 

package.json

@@ -42,9 +42,11 @@
   "devDependencies": {
     "bee-animate": "latest",
     "bee-button": "latest",
-    "bee-form-control": "^0.1.7",
+    "bee-form-control": "^0.1.8",
     "bee-icon": "0.0.5",
+    "bee-input-group": "^0.1.12",
     "bee-layout": "latest",
+    "bee-pagination": "^0.1.7",
     "bee-panel": "latest",
     "bee-popconfirm": "^0.2.2",
     "bee-tools": "^0.2.1",

src/Table.js

@@ -706,7 +706,6 @@ class Table extends Component{
     const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
                           props.scroll.x ||
                           props.scroll.y;
-
     return (
       <div className={className} style={props.style}>
         {this.getTitle()}