change some

demo/TableDemo.scss

@@ -1,6 +1,10 @@
 @import "../node_modules/tinper-bee-core/scss/index.scss";
-@import "../src/Table.scss";
 @import "../node_modules/bee-panel/src/Panel.scss";
 @import "../node_modules/bee-layout/src/Layout.scss";
 @import "../node_modules/bee-button/src/Button.scss";
-@import "../node_modules/bee-transition/src/Transition.scss";
+@import "../node_modules/bee-transition/src/Transition.scss";
+@import "../src/animation.scss";
+@import "../src/bordered.scss";
+@import "../src/index.scss";
+@import "../node_modules/bee-dropdown/src/Dropdown.scss";
+@import "../node_modules/bee-menus/src/Menus.scss";

demo/demolist/Demo1.js

@@ -4,12 +4,64 @@
 * @description 这是描述
 *
 */
-class Demo1 extends Component {
+class Demo1 extends React.Component {
-render () {
+  constructor(props) {
-return (
+    super(props);
-<div>
+    this.columns = [
-欢迎使用老赵DEMO系统
+      { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
-</div>
+      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-)
+      { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+      {
+        title: 'Operations', dataIndex: '', key: 'd', render: (text, record) =>
+        <a onClick={e => this.onDelete(record.key, e)} href="#">Delete</a>,
+      },
+    ];
+    this.state = {
+      data: [
+        { a: '123', key: '1' },
+        { a: 'cdd', b: 'edd', key: '2' },
+        { a: '1333', c: 'eee', key: '3' },
+      ],
+    };
+  }
+
+  onDelete(key, e) {
+    console.log('Delete', key);
+    e.preventDefault();
+    const data = this.state.data.filter(item => item.key !== key);
+    this.setState({ data });
+  }
+
+  onAdd() {
+    const data = [...this.state.data];
+    data.push({
+      a: 'new data',
+      b: 'new data',
+      c: 'new data',
+      key: Date.now(),
+    });
+    this.setState({ data });
+  }
+
+  getBodyWrapper(body) {
+    return (
+      <Animate transitionName="move" component="tbody" className={body.props.className}>
+        {body.props.children}
+      </Animate>
+    );
+  }
+
+  render() {
+    return (
+      <div style={{ margin: 20 }}>
+        <h2>Table row with animation</h2>
+        <button onClick={() => this.onAdd()}>添加</button>
+        <Table
+          columns={this.columns}
+          data={this.state.data}
+          getBodyWrapper={this.getBodyWrapper}
+        />
+      </div>
+    );
+  }
 }
-}

demo/demolist/Demo2.js

@@ -0,0 +1,90 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+const columns1 = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  width: 400,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  width: 100,
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+  width: 200,
+}, {
+  title: 'Operations',
+  dataIndex: 'operation',
+  key: 'x',
+  width: 150,
+}];
+
+const data1 = [{
+  key: 1,
+  name: 'a',
+  age: 32,
+  address: 'I am a',
+  children: [{
+    key: 11,
+    name: 'aa',
+    age: 33,
+    address: 'I am aa',
+  }, {
+    key: 12,
+    name: 'ab',
+    age: 33,
+    address: 'I am ab',
+    children: [{
+      key: 121,
+      name: 'aba',
+      age: 33,
+      address: 'I am aba',
+    }],
+  }, {
+    key: 13,
+    name: 'ac',
+    age: 33,
+    address: 'I am ac',
+    children: [{
+      key: 131,
+      name: 'aca',
+      age: 33,
+      address: 'I am aca',
+      children: [{
+        key: 1311,
+        name: 'acaa',
+        age: 33,
+        address: 'I am acaa',
+      }, {
+        key: 1312,
+        name: 'acab',
+        age: 33,
+        address: 'I am acab',
+      }],
+    }],
+  }],
+}, {
+  key: 2,
+  name: 'b',
+  age: 32,
+  address: 'I am b',
+}];
+
+function onExpand(expanded, record) {
+  console.log('onExpand', expanded, record);
+}
+class Demo2 extends Component {
+    render () {
+        return (
+            <Table defaultExpandAllRows columns={columns1} data={data1} indentSize={30} onExpand={onExpand} />
+        )
+    }
+}

demo/demolist/Demo3.js

@@ -0,0 +1,49 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+const columns2 = [
+  { title: 'title1', dataIndex: 'a',
+    className: 'a',
+    key: 'a', width: 100 },
+  { id: '123', title: 'title2', dataIndex: 'b',
+    className: 'b',
+    key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c',
+    className: 'c',
+    key: 'c', width: 200 },
+  {
+    title: 'Operations', dataIndex: '',
+    className: 'd',
+    key: 'd', render() {
+      return <a href="#">Operations</a>;
+    },
+  },
+];
+
+const data2 = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+];
+
+class Demo3 extends Component {
+    render () {
+        return (
+            <div>
+              <h2>rowClassName and className</h2>
+              <Table
+                columns={columns2}
+                rowClassName={(record, i) => `row-${i}`}
+                expandedRowRender={record => <p>extra: {record.a}</p>}
+                expandedRowClassName={(record, i) => `ex-row-${i}`}
+                data={data2}
+                className="table"
+              />
+            </div>
+        )
+    }
+}

demo/demolist/Demo4.js

@@ -0,0 +1,112 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+const columns3 = [
+  { title: '手机号', dataIndex: 'a', colSpan: 2, width: 100, key: 'a', render(o, row, index) {
+    const obj = {
+      children: o,
+      props: {},
+    };
+    // 设置第一行为链接
+    if (index === 0) {
+      obj.children = <a href="#">{o}</a>;
+    }
+    // 第5行合并两列
+    if (index === 4) {
+      obj.props.colSpan = 2;
+    }
+
+    if (index === 5) {
+      obj.props.colSpan = 6;
+    }
+    return obj;
+  } },
+  { title: '电话', dataIndex: 'b', colSpan: 0, width: 100, key: 'b', render(o, row, index) {
+    const obj = {
+      children: o,
+      props: {},
+    };
+    // 列合并掉的表格设置colSpan=0，不会去渲染
+    if (index === 4 || index === 5) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  } },
+  { title: 'Name', dataIndex: 'c', width: 100, key: 'c', render(o, row, index) {
+    const obj = {
+      children: o,
+      props: {},
+    };
+
+    if (index === 5) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  } },
+  { title: 'Address', dataIndex: 'd', width: 200, key: 'd', render(o, row, index) {
+    const obj = {
+      children: o,
+      props: {},
+    };
+    if (index === 0) {
+      obj.props.rowSpan = 2;
+    }
+    if (index === 1 || index === 5) {
+      obj.props.rowSpan = 0;
+    }
+
+    return obj;
+  } },
+  { title: 'Gender', dataIndex: 'e', width: 200, key: 'e', render(o, row, index) {
+    const obj = {
+      children: o,
+      props: {},
+    };
+    if (index === 5) {
+      obj.props.colSpan = 0;
+    }
+    return obj;
+  } },
+  {
+    title: 'Operations', dataIndex: '', key: 'f',
+    render(o, row, index) {
+      if (index === 5) {
+        return {
+          props: {
+            colSpan: 0,
+          },
+        };
+      }
+      return <a href="#">Operations</a>;
+    },
+  },
+];
+
+const data3 = [
+  { a: '13812340987', b: '0571-12345678', c: '张三', d: '文一西路', e: 'Male', key: '1' },
+  { a: '13812340986', b: '0571-98787658', c: '张夫人', d: '文一西路', e: 'Female', key: '2' },
+  { a: '13812988888', b: '0571-099877', c: '李四', d: '文二西路', e: 'Male', key: '3' },
+  { a: '1381200008888', b: '0571-099877', c: '王五', d: '文二西路', e: 'Male', key: '4' },
+  { a: '0571-88888110', c: '李警官', d: '武林门', e: 'Male', key: '5' },
+  { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
+];
+
+
+class Demo4 extends Component {
+    render () {
+        return (
+            <div>
+              <h2>colSpan & rowSpan</h2>
+              <Table
+                columns={columns3}
+                data={data3}
+                className="table"
+              />
+            </div>
+        )
+    }
+}

demo/demolist/Demo5.js

@@ -0,0 +1,102 @@
+/**
+*
+* @title 这是标题
+* @description 这是描述
+*
+*/
+
+
+const data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    key: i,
+    a: `a${i}`,
+    b: `b${i}`,
+    c: `c${i}`,
+  });
+}
+
+const Demo5 = React.createClass({
+  getInitialState() {
+    this.filters = [];
+    return {
+      visible: false,
+    };
+  },
+
+  handleVisibleChange(visible) {
+    this.setState({ visible });
+  },
+
+  handleSelect(selected) {
+    this.filters.push(selected);
+  },
+
+  handleDeselect(key) {
+    const index = this.filters.indexOf(key);
+    if (index !== -1) {
+      this.filters.splice(index, 1);
+    }
+  },
+
+  confirmFilter() {
+    console.log(this.filters.join(','));
+    this.setState({
+      visible: false,
+    });
+  },
+
+  render() {
+    const menu = (
+      <Menu
+        style={{ width: 200 }}
+        multiple
+        onSelect={this.handleSelect}
+        onDeselect={this.handleDeselect}
+      >
+        <Item key="1">one</Item>
+        <Item key="2">two</Item>
+        <Item key="3">three</Item>
+        <Divider />
+        <Item disabled>
+          <button
+            style={{
+              cursor: 'pointer',
+              color: '#000',
+              pointerEvents: 'visible',
+            }}
+            onClick={this.confirmFilter}
+          >确定</button>
+        </Item>
+      </Menu>
+    );
+
+    const columns = [
+      {
+        title: (
+          <div>
+            title1
+            <DropDown
+              trigger={['click']}
+              onVisibleChange={this.handleVisibleChange}
+              visible={this.state.visible}
+              overlay={menu}
+            >
+              <a href="#">filter</a>
+            </DropDown>
+          </div>
+        ), key: 'a', dataIndex: 'a', width: 100,
+      },
+      { title: 'title2', key: 'b', dataIndex: 'b', width: 100 },
+      { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        data={data}
+        rowKey={record => record.key}
+      />
+    );
+  },
+});

demo/index-demo-base.js

@@ -5,6 +5,9 @@ import Button from 'bee-button';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Table from '../src';
+import Animate from 'bee-animate';
+import Menu, { Item, Divider } from 'bee-menus';
+import DropDown from 'bee-dropdown';
 
 
 const CARET = <i className="uf uf-chevronarrowdown"></i>;

package.json

@@ -15,15 +15,14 @@
   },
   "homepage": "https://github.com/tinper-bee/bee-table.git",
   "author": "Yonyou FED",
-    "repository": "http://github.com/tinper-bee/bee-table",
+  "repository": "http://github.com/tinper-bee/bee-table",
-    "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
-    "license": "MIT",
+  "license": "MIT",
-
+  "main": "./build/index.js",
-    "main":"./build/index.js",
+  "config": {
-    "config":{
     "port": 3000
-    },
+  },
-    "scripts": {
+  "scripts": {
     "dev": "bee-tools run start",
     "build": "bee-tools run build",
     "lint": "bee-tools run lint",
@@ -32,21 +31,28 @@
     "coveralls": "bee-tools run coverage",
     "browsers": "bee-tools run browsers",
     "pub": "bee-tools run pub"
-    },
+  },
-    "dependencies": {
+  "dependencies": {
-      "classnames": "^2.2.5",
+    "classnames": "^2.2.5",
-      "tinper-bee-core": "latest"
+    "object-path": "^0.11.3",
-    },
+    "rc-util": "^4.0.2",
-    "devDependencies": {
+    "shallowequal": "^0.2.2",
-      "chai": "^3.5.0",
+    "tinper-bee-core": "latest",
-      "enzyme": "^2.4.1",
+    "warning": "^3.0.0"
-      "react": "~0.14.0",
+  },
-      "react-addons-test-utils": "15.3.2",
+  "devDependencies": {
-      "react-dom": "~0.14.0",
+    "bee-animate": "0.0.3",
-      "console-polyfill": "~0.2.1",
+    "bee-button": "latest",
-      "es5-shim": "~4.1.10",
+    "bee-dropdown": "^0.1.4",
-      "bee-panel": "latest",
+    "bee-layout": "latest",
-      "bee-layout": "latest",
+    "bee-menus": "0.0.5",
-      "bee-button": "latest"
+    "bee-panel": "latest",
-    }
+    "chai": "^3.5.0",
+    "console-polyfill": "~0.2.1",
+    "enzyme": "^2.4.1",
+    "es5-shim": "~4.1.10",
+    "react": "~0.14.0",
+    "react-addons-test-utils": "15.3.2",
+    "react-dom": "~0.14.0"
+  }
 }

src/Column.jsx

@@ -1,7 +1,6 @@
 import { Component, PropTypes } from 'react';
 
-export default class Column extends Component {
+const propTypes = {
-  static propTypes = {
     className: PropTypes.string,
     colSpan: PropTypes.number,
     title: PropTypes.node,
@@ -16,6 +15,13 @@ export default class Column extends Component {
       'right',
     ]),
     render: PropTypes.func,
-    onCellClick: PropTypes.func,
+    onCellClick: PropTypes.func
-  }
 }
+
+class Column extends Component {
+
+}
+
+Column.propTypes = propTypes;
+
+export default Column;

src/Table.jsx

@@ -53,7 +53,7 @@ const Table = React.createClass({
       onExpandedRowsChange() {},
       onRowClick() {},
       onRowDoubleClick() {},
-      prefixCls: 'rc-table',
+      prefixCls: 'u-table',
       bodyStyle: {},
       style: {},
       childrenColumnName: 'children',

src/bordered.scss

@@ -1,11 +1,11 @@
-@tablePrefixCls: rc-table;
-@table-border-color: #e9e9e9;
 
-.@{tablePrefixCls}.bordered {
+$table-border-color: #e9e9e9;
+
+.u-table.bordered {
   table {
     border-collapse: collapse;
   }
   th, td {
-    border: 1px solid @table-border-color;
+    border: 1px solid $table-border-color;
   }
 }

src/index.scss

@@ -1,27 +1,27 @@
-@tablePrefixCls: rc-table;
-@text-color             : #666;
-@font-size-base         : 12px;
-@line-height: 1.5;
-@table-border-color: #e9e9e9;
-@table-head-background-color: #f7f7f7;
-@vertical-padding: 16px;
-@horizontal-padding: 8px;
 
-.@{tablePrefixCls} {
+$text-color             : #666;
-  font-size: @font-size-base;
+$font-size-base         : 12px;
-  color: @text-color;
+$line-height: 1.5;
+$table-border-color: #e9e9e9;
+$table-head-background-color: #f7f7f7;
+$vertical-padding: 16px;
+$horizontal-padding: 8px;
+
+.u-table {
+  font-size: $font-size-base;
+  color: $text-color;
   transition: opacity 0.3s ease;
   position: relative;
-  line-height: @line-height;
+  line-height: $line-height;
   overflow: hidden;
 
-  .@{tablePrefixCls}-scroll {
+  &-scroll {
     overflow: auto;
   }
 
-  .@{tablePrefixCls}-header {
+  &-header {
     overflow: hidden;
-    background: @table-head-background-color;
+    background: $table-head-background-color;
   }
 
   &-fixed-header &-body {
@@ -42,24 +42,24 @@
     box-sizing: border-box;
   }
 
-  .@{tablePrefixCls}-title {
+  &-title {
-    padding: @vertical-padding @horizontal-padding;
+    padding: $vertical-padding $horizontal-padding;
-    border-top: 1px solid @table-border-color;
+    border-top: 1px solid $table-border-color;
   }
 
-  .@{tablePrefixCls}-content {
+  &-content {
     position: relative;
   }
 
-  .@{tablePrefixCls}-footer {
+  &-footer {
-    padding: @vertical-padding @horizontal-padding;
+    padding: $vertical-padding $horizontal-padding;
-    border-bottom: 1px solid @table-border-color;
+    border-bottom: 1px solid $table-border-color;
   }
 
-  .@{tablePrefixCls}-placeholder {
+  &-placeholder {
     padding: 16px 8px;
     background: #fff;
-    border-bottom: 1px solid @table-border-color;
+    border-bottom: 1px solid $table-border-color;
     text-align: center;
     position: relative;
   }
@@ -71,13 +71,13 @@
   }
 
   th {
-    background: @table-head-background-color;
+    background: $table-head-background-color;
     font-weight: bold;
     transition: background .3s ease;
   }
 
   td {
-    border-bottom: 1px solid @table-border-color;
+    border-bottom: 1px solid $table-border-color;
   }
 
   tr {
@@ -85,17 +85,18 @@
     &:hover {
       background: #eaf8fe;
     }
-    &.@{tablePrefixCls}-row-hover {
+
-      background: #eaf8fe;
+  }
-    }
+  tr.tr-row-hover {
+    background: #eaf8fe;
   }
 
   th, td {
-    padding: @vertical-padding @horizontal-padding;
+    padding: $vertical-padding $horizontal-padding;
   }
 }
 
-.@{tablePrefixCls} {
+.u-table {
   &-expand-icon-col {
     width: 10px;
   }
@@ -107,7 +108,7 @@
       height: 16px;
       text-align: center;
       line-height: 16px;
-      border: 1px solid @table-border-color;
+      border: 1px solid $table-border-color;
       user-select: none;
       background: #fff;
     }
@@ -126,7 +127,7 @@
       content: '+'
     }
   }
-  tr&-expanded-row {
+  tr.u-table-expanded-row {
     background: #f7f7f7;
     &:hover {
       background: #f7f7f7;
@@ -179,11 +180,11 @@
   &-fixed-left {
     left: 0;
     box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
-    & .@{tablePrefixCls}-body-inner {
+    & &-body-inner {
       margin-right: -20px;
       padding-right: 20px;
     }
-    .@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner {
+    &-fixed-header & &-body-inner {
       padding-right: 0;
     }
   }
@@ -194,17 +195,17 @@
 
     // hide expand row content in right fixed Table
     // https://github.com/ant-design/ant-design/issues/1898
-    .@{tablePrefixCls}-expanded-row {
+    &-expanded-row {
       color: transparent;
       pointer-events: none;
     }
   }
 
-  &&-scroll-position-left &-fixed-left {
+  & &-scroll-position-left &-fixed-left {
     box-shadow: none;
   }
 
-  &&-scroll-position-right &-fixed-right {
+  & &-scroll-position-right &-fixed-right {
     box-shadow: none;
   }
 }