diff --git a/README.md b/README.md
index 4b4e44e..69649e2 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,35 @@ some description...
 ## 使用方法
 
 ```js
+const columns = [
+  { 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>;
+    },
+  },
+];
+
+const data = [
+  { a: '令狐冲', b: '男', c: 41, key: '1' },
+  { a: '杨过', b: '男', c: 67, key: '2' },
+  { a: '郭靖', b: '男', c: 25, key: '3' },
+];
+
+class Demo extends Component {
+    render () {
+        return (
+              <Table
+              columns={columns}
+              data={data}
+              title={currentData => <div>标题: 这是一个标题</div>}
+              footer={currentData => <div>表尾: 我是小尾巴</div>}
+              />
+        )
+    }
+}
 
 ```
 
diff --git a/build/Column.js b/build/Column.js
new file mode 100644
index 0000000..1511968
--- /dev/null
+++ b/build/Column.js
@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  className: _react.PropTypes.string,
+  colSpan: _react.PropTypes.number,
+  title: _react.PropTypes.node,
+  dataIndex: _react.PropTypes.string,
+  width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
+  fixed: _react.PropTypes.oneOf([true, 'left', 'right']),
+  render: _react.PropTypes.func,
+  onCellClick: _react.PropTypes.func
+};
+
+var Column = function (_Component) {
+  _inherits(Column, _Component);
+
+  function Column() {
+    _classCallCheck(this, Column);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  return Column;
+}(_react.Component);
+
+Column.propTypes = propTypes;
+
+exports["default"] = Column;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/ColumnGroup.js b/build/ColumnGroup.js
new file mode 100644
index 0000000..5db83cd
--- /dev/null
+++ b/build/ColumnGroup.js
@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var ColumnGroup = function (_Component) {
+  _inherits(ColumnGroup, _Component);
+
+  function ColumnGroup() {
+    _classCallCheck(this, ColumnGroup);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  return ColumnGroup;
+}(_react.Component);
+
+ColumnGroup.propTypes = {
+  title: _react.PropTypes.node
+};
+exports["default"] = ColumnGroup;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/ColumnManager.js b/build/ColumnManager.js
new file mode 100644
index 0000000..6cb366f
--- /dev/null
+++ b/build/ColumnManager.js
@@ -0,0 +1,213 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Column = require('./Column');
+
+var _Column2 = _interopRequireDefault(_Column);
+
+var _ColumnGroup = require('./ColumnGroup');
+
+var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+//行控制管理
+
+var ColumnManager = function () {
+  function ColumnManager(columns, elements) {
+    _classCallCheck(this, ColumnManager);
+
+    this._cached = {};
+
+    this.columns = columns || this.normalize(elements);
+  }
+
+  ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
+    var _this = this;
+
+    return this._cache('isAnyColumnsFixed', function () {
+      return _this.columns.some(function (column) {
+        return !!column.fixed;
+      });
+    });
+  };
+
+  ColumnManager.prototype.isAnyColumnsLeftFixed = function isAnyColumnsLeftFixed() {
+    var _this2 = this;
+
+    return this._cache('isAnyColumnsLeftFixed', function () {
+      return _this2.columns.some(function (column) {
+        return column.fixed === 'left' || column.fixed === true;
+      });
+    });
+  };
+
+  ColumnManager.prototype.isAnyColumnsRightFixed = function isAnyColumnsRightFixed() {
+    var _this3 = this;
+
+    return this._cache('isAnyColumnsRightFixed', function () {
+      return _this3.columns.some(function (column) {
+        return column.fixed === 'right';
+      });
+    });
+  };
+
+  ColumnManager.prototype.leftColumns = function leftColumns() {
+    var _this4 = this;
+
+    return this._cache('leftColumns', function () {
+      return _this4.groupedColumns().filter(function (column) {
+        return column.fixed === 'left' || column.fixed === true;
+      });
+    });
+  };
+
+  ColumnManager.prototype.rightColumns = function rightColumns() {
+    var _this5 = this;
+
+    return this._cache('rightColumns', function () {
+      return _this5.groupedColumns().filter(function (column) {
+        return column.fixed === 'right';
+      });
+    });
+  };
+
+  ColumnManager.prototype.leafColumns = function leafColumns() {
+    var _this6 = this;
+
+    return this._cache('leafColumns', function () {
+      return _this6._leafColumns(_this6.columns);
+    });
+  };
+
+  ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() {
+    var _this7 = this;
+
+    return this._cache('leftLeafColumns', function () {
+      return _this7._leafColumns(_this7.leftColumns());
+    });
+  };
+
+  ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() {
+    var _this8 = this;
+
+    return this._cache('rightLeafColumns', function () {
+      return _this8._leafColumns(_this8.rightColumns());
+    });
+  };
+
+  // add appropriate rowspan and colspan to column
+
+
+  ColumnManager.prototype.groupedColumns = function groupedColumns() {
+    var _this9 = this;
+
+    return this._cache('groupedColumns', function () {
+      var _groupColumns = function _groupColumns(columns) {
+        var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        var parentColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var rows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+
+        // track how many rows we got
+        rows[currentRow] = rows[currentRow] || [];
+        var grouped = [];
+        var setRowSpan = function setRowSpan(column) {
+          var rowSpan = rows.length - currentRow;
+          if (column && !column.children && // parent columns are supposed to be one row
+          rowSpan > 1 && (!column.rowSpan || column.rowSpan < rowSpan)) {
+            column.rowSpan = rowSpan;
+          }
+        };
+        columns.forEach(function (column, index) {
+          var newColumn = _extends({}, column);
+          rows[currentRow].push(newColumn);
+          parentColumn.colSpan = parentColumn.colSpan || 0;
+          if (newColumn.children && newColumn.children.length > 0) {
+            newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows);
+            parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan;
+          } else {
+            parentColumn.colSpan++;
+          }
+          // update rowspan to all same row columns
+          for (var i = 0; i < rows[currentRow].length - 1; ++i) {
+            setRowSpan(rows[currentRow][i]);
+          }
+          // last column, update rowspan immediately
+          if (index + 1 === columns.length) {
+            setRowSpan(newColumn);
+          }
+          grouped.push(newColumn);
+        });
+        return grouped;
+      };
+      return _groupColumns(_this9.columns);
+    });
+  };
+
+  ColumnManager.prototype.normalize = function normalize(elements) {
+    var _this10 = this;
+
+    var columns = [];
+    _react2["default"].Children.forEach(elements, function (element) {
+      if (!_this10.isColumnElement(element)) return;
+      var column = _extends({}, element.props);
+      if (element.key) {
+        column.key = element.key;
+      }
+      if (element.type === _ColumnGroup2["default"]) {
+        column.children = _this10.normalize(column.children);
+      }
+      columns.push(column);
+    });
+    return columns;
+  };
+
+  ColumnManager.prototype.isColumnElement = function isColumnElement(element) {
+    return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
+  };
+
+  ColumnManager.prototype.reset = function reset(columns, elements) {
+    this.columns = columns || this.normalize(elements);
+    this._cached = {};
+  };
+
+  ColumnManager.prototype._cache = function _cache(name, fn) {
+    if (name in this._cached) {
+      return this._cached[name];
+    }
+    this._cached[name] = fn();
+    return this._cached[name];
+  };
+
+  ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
+    var _this11 = this;
+
+    var leafColumns = [];
+    columns.forEach(function (column) {
+      if (!column.children) {
+        leafColumns.push(column);
+      } else {
+        leafColumns.push.apply(leafColumns, _toConsumableArray(_this11._leafColumns(column.children)));
+      }
+    });
+    return leafColumns;
+  };
+
+  return ColumnManager;
+}();
+
+exports["default"] = ColumnManager;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/ExpandIcon.js b/build/ExpandIcon.js
new file mode 100644
index 0000000..c069e95
--- /dev/null
+++ b/build/ExpandIcon.js
@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _shallowequal = require('shallowequal');
+
+var _shallowequal2 = _interopRequireDefault(_shallowequal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  record: _react.PropTypes.object,
+  clsPrefix: _react.PropTypes.string,
+  expandable: _react.PropTypes.any,
+  expanded: _react.PropTypes.bool,
+  needIndentSpaced: _react.PropTypes.bool,
+  onExpand: _react.PropTypes.func
+};
+
+var ExpandIcon = function (_Component) {
+  _inherits(ExpandIcon, _Component);
+
+  function ExpandIcon(props) {
+    _classCallCheck(this, ExpandIcon);
+
+    return _possibleConstructorReturn(this, _Component.call(this, props));
+  }
+
+  ExpandIcon.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    return !(0, _shallowequal2["default"])(nextProps, this.props);
+  };
+
+  ExpandIcon.prototype.render = function render() {
+    var _props = this.props,
+        expandable = _props.expandable,
+        clsPrefix = _props.clsPrefix,
+        onExpand = _props.onExpand,
+        needIndentSpaced = _props.needIndentSpaced,
+        expanded = _props.expanded,
+        record = _props.record;
+
+    if (expandable) {
+      var expandClassName = expanded ? 'expanded' : 'collapsed';
+      return _react2["default"].createElement('span', {
+        className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
+        onClick: function onClick(e) {
+          return onExpand(!expanded, record, e);
+        }
+      });
+    } else if (needIndentSpaced) {
+      return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
+    }
+    return null;
+  };
+
+  return ExpandIcon;
+}(_react.Component);
+
+;
+
+ExpandIcon.propTypes = propTypes;
+
+exports["default"] = ExpandIcon;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/Table.js b/build/Table.js
new file mode 100644
index 0000000..90da50b
--- /dev/null
+++ b/build/Table.js
@@ -0,0 +1,842 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _TableRow = require('./TableRow');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _TableHeader = require('./TableHeader');
+
+var _TableHeader2 = _interopRequireDefault(_TableHeader);
+
+var _utils = require('./utils');
+
+var _shallowequal = require('shallowequal');
+
+var _shallowequal2 = _interopRequireDefault(_shallowequal);
+
+var _addEventListener = require('rc-util/lib/Dom/addEventListener');
+
+var _addEventListener2 = _interopRequireDefault(_addEventListener);
+
+var _ColumnManager = require('./ColumnManager');
+
+var _ColumnManager2 = _interopRequireDefault(_ColumnManager);
+
+var _createStore = require('./createStore');
+
+var _createStore2 = _interopRequireDefault(_createStore);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  data: _react.PropTypes.array,
+  expandIconAsCell: _react.PropTypes.bool,
+  defaultExpandAllRows: _react.PropTypes.bool,
+  expandedRowKeys: _react.PropTypes.array,
+  defaultExpandedRowKeys: _react.PropTypes.array,
+  useFixedHeader: _react.PropTypes.bool,
+  columns: _react.PropTypes.array,
+  clsPrefix: _react.PropTypes.string,
+  bodyStyle: _react.PropTypes.object,
+  style: _react.PropTypes.object,
+  //特殊的渲染规则的key值
+  rowKey: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]),
+  rowClassName: _react.PropTypes.func,
+  expandedRowClassName: _react.PropTypes.func,
+  childrenColumnName: _react.PropTypes.string,
+  onExpand: _react.PropTypes.func,
+  onExpandedRowsChange: _react.PropTypes.func,
+  indentSize: _react.PropTypes.number,
+  onRowClick: _react.PropTypes.func,
+  onRowDoubleClick: _react.PropTypes.func,
+  expandIconColumnIndex: _react.PropTypes.number,
+  //是否显示表头
+  showHeader: _react.PropTypes.bool,
+  title: _react.PropTypes.func,
+  footer: _react.PropTypes.func,
+  emptyText: _react.PropTypes.func,
+  scroll: _react.PropTypes.object,
+  rowRef: _react.PropTypes.func,
+  getBodyWrapper: _react.PropTypes.func,
+  children: _react.PropTypes.node
+};
+
+var defaultProps = {
+  data: [],
+  useFixedHeader: false,
+  expandIconAsCell: false,
+  defaultExpandAllRows: false,
+  defaultExpandedRowKeys: [],
+  rowKey: 'key',
+  rowClassName: function rowClassName() {
+    return '';
+  },
+  expandedRowClassName: function expandedRowClassName() {
+    return '';
+  },
+  onExpand: function onExpand() {},
+  onExpandedRowsChange: function onExpandedRowsChange() {},
+  onRowClick: function onRowClick() {},
+  onRowDoubleClick: function onRowDoubleClick() {},
+
+  clsPrefix: 'u-table',
+  bodyStyle: {},
+  style: {},
+  childrenColumnName: 'children',
+  indentSize: 15,
+  expandIconColumnIndex: 0,
+  showHeader: true,
+  scroll: {},
+  rowRef: function rowRef() {
+    return null;
+  },
+  getBodyWrapper: function getBodyWrapper(body) {
+    return body;
+  },
+  emptyText: function emptyText() {
+    return 'No Data';
+  }
+};
+
+var Table = function (_Component) {
+  _inherits(Table, _Component);
+
+  function Table(props) {
+    _classCallCheck(this, Table);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    var expandedRowKeys = [];
+    var rows = [].concat(_toConsumableArray(props.data));
+    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children);
+    _this.store = (0, _createStore2["default"])({ currentHoverKey: null });
+
+    if (props.defaultExpandAllRows) {
+      for (var i = 0; i < rows.length; i++) {
+        var row = rows[i];
+        expandedRowKeys.push(_this.getRowKey(row, i));
+        rows = rows.concat(row[props.childrenColumnName] || []);
+      }
+    } else {
+      expandedRowKeys = props.expandedRowKeys || props.defaultExpandedRowKeys;
+    }
+    _this.state = {
+      expandedRowKeys: expandedRowKeys,
+      data: props.data,
+      currentHoverKey: null,
+      scrollPosition: 'left',
+      fixedColumnsHeadRowsHeight: [],
+      fixedColumnsBodyRowsHeight: []
+    };
+
+    _this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
+    _this.onExpanded = _this.onExpanded.bind(_this);
+    _this.onRowDestroy = _this.onRowDestroy.bind(_this);
+    _this.getRowKey = _this.getRowKey.bind(_this);
+    _this.getExpandedRows = _this.getExpandedRows.bind(_this);
+    _this.getHeader = _this.getHeader.bind(_this);
+    _this.getHeaderRows = _this.getHeaderRows.bind(_this);
+    _this.getExpandedRow = _this.getExpandedRow.bind(_this);
+    _this.getRowsByData = _this.getRowsByData.bind(_this);
+    _this.getRows = _this.getRows.bind(_this);
+    _this.getColGroup = _this.getColGroup.bind(_this);
+    _this.getLeftFixedTable = _this.getLeftFixedTable.bind(_this);
+    _this.getRightFixedTable = _this.getRightFixedTable.bind(_this);
+    _this.getTable = _this.getTable.bind(_this);
+    _this.getTitle = _this.getTitle.bind(_this);
+    _this.getFooter = _this.getFooter.bind(_this);
+    _this.getEmptyText = _this.getEmptyText.bind(_this);
+    _this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
+    _this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
+    _this.resetScrollY = _this.resetScrollY.bind(_this);
+    _this.findExpandedRow = _this.findExpandedRow.bind(_this);
+    _this.isRowExpanded = _this.isRowExpanded.bind(_this);
+    _this.detectScrollTarget = _this.detectScrollTarget.bind(_this);
+    _this.handleBodyScroll = _this.handleBodyScroll.bind(_this);
+    _this.handleRowHover = _this.handleRowHover.bind(_this);
+
+    return _this;
+  }
+
+  Table.prototype.componentDidMount = function componentDidMount() {
+    this.resetScrollY();
+    if (this.columnManager.isAnyColumnsFixed()) {
+      this.syncFixedTableRowHeight();
+      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
+    }
+  };
+
+  Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    if ('data' in nextProps) {
+      this.setState({
+        data: nextProps.data
+      });
+      if (!nextProps.data || nextProps.data.length === 0) {
+        this.resetScrollY();
+      }
+    }
+    if ('expandedRowKeys' in nextProps) {
+      this.setState({
+        expandedRowKeys: nextProps.expandedRowKeys
+      });
+    }
+    if (nextProps.columns && nextProps.columns !== this.props.columns) {
+      this.columnManager.reset(nextProps.columns);
+    } else if (nextProps.children !== this.props.children) {
+      this.columnManager.reset(null, nextProps.children);
+    }
+  };
+
+  Table.prototype.componentDidUpdate = function componentDidUpdate() {
+    this.syncFixedTableRowHeight();
+  };
+
+  Table.prototype.componentWillUnmount = function componentWillUnmount() {
+    if (this.resizeEvent) {
+      this.resizeEvent.remove();
+    }
+  };
+
+  Table.prototype.onExpandedRowsChange = function onExpandedRowsChange(expandedRowKeys) {
+    if (!this.props.expandedRowKeys) {
+      this.setState({ expandedRowKeys: expandedRowKeys });
+    }
+    this.props.onExpandedRowsChange(expandedRowKeys);
+  };
+
+  Table.prototype.onExpanded = function onExpanded(expanded, record, e, index) {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    var info = this.findExpandedRow(record);
+    if (typeof info !== 'undefined' && !expanded) {
+      this.onRowDestroy(record, index);
+    } else if (!info && expanded) {
+      var expandedRows = this.getExpandedRows().concat();
+      expandedRows.push(this.getRowKey(record, index));
+      this.onExpandedRowsChange(expandedRows);
+    }
+    this.props.onExpand(expanded, record);
+  };
+
+  Table.prototype.onRowDestroy = function onRowDestroy(record, rowIndex) {
+    var expandedRows = this.getExpandedRows().concat();
+    var rowKey = this.getRowKey(record, rowIndex);
+    var index = -1;
+    expandedRows.forEach(function (r, i) {
+      if (r === rowKey) {
+        index = i;
+      }
+    });
+    if (index !== -1) {
+      expandedRows.splice(index, 1);
+    }
+    this.onExpandedRowsChange(expandedRows);
+  };
+
+  Table.prototype.getRowKey = function getRowKey(record, index) {
+    var rowKey = this.props.rowKey;
+    var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
+    (0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
+    return key;
+  };
+
+  Table.prototype.getExpandedRows = function getExpandedRows() {
+    return this.props.expandedRowKeys || this.state.expandedRowKeys;
+  };
+
+  Table.prototype.getHeader = function getHeader(columns, fixed) {
+    var _props = this.props,
+        showHeader = _props.showHeader,
+        expandIconAsCell = _props.expandIconAsCell,
+        clsPrefix = _props.clsPrefix;
+
+    var rows = this.getHeaderRows(columns);
+
+    if (expandIconAsCell && fixed !== 'right') {
+      rows[0].unshift({
+        key: 'rc-table-expandIconAsCell',
+        className: clsPrefix + '-expand-icon-th',
+        title: '',
+        rowSpan: rows.length
+      });
+    }
+
+    var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
+
+    return showHeader ? _react2["default"].createElement(_TableHeader2["default"], {
+      clsPrefix: clsPrefix,
+      rows: rows,
+      rowStyle: trStyle
+    }) : null;
+  };
+
+  Table.prototype.getHeaderRows = function getHeaderRows(columns) {
+    var _this2 = this;
+
+    var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var rows = arguments[2];
+
+    rows = rows || [];
+    rows[currentRow] = rows[currentRow] || [];
+
+    columns.forEach(function (column) {
+      if (column.rowSpan && rows.length < column.rowSpan) {
+        while (rows.length < column.rowSpan) {
+          rows.push([]);
+        }
+      }
+      var cell = {
+        key: column.key,
+        className: column.className || '',
+        children: column.title
+      };
+      if (column.children) {
+        _this2.getHeaderRows(column.children, currentRow + 1, rows);
+      }
+      if ('colSpan' in column) {
+        cell.colSpan = column.colSpan;
+      }
+      if ('rowSpan' in column) {
+        cell.rowSpan = column.rowSpan;
+      }
+      if (cell.colSpan !== 0) {
+        rows[currentRow].push(cell);
+      }
+    });
+    return rows.filter(function (row) {
+      return row.length > 0;
+    });
+  };
+
+  Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
+    var _props2 = this.props,
+        clsPrefix = _props2.clsPrefix,
+        expandIconAsCell = _props2.expandIconAsCell;
+
+    var colCount = void 0;
+    if (fixed === 'left') {
+      colCount = this.columnManager.leftLeafColumns().length;
+    } else if (fixed === 'right') {
+      colCount = this.columnManager.rightLeafColumns().length;
+    } else {
+      colCount = this.columnManager.leafColumns().length;
+    }
+    var columns = [{
+      key: 'extra-row',
+      render: function render() {
+        return {
+          props: {
+            colSpan: colCount
+          },
+          children: fixed !== 'right' ? content : '&nbsp;'
+        };
+      }
+    }];
+    if (expandIconAsCell && fixed !== 'right') {
+      columns.unshift({
+        key: 'expand-icon-placeholder',
+        render: function render() {
+          return null;
+        }
+      });
+    }
+    return _react2["default"].createElement(_TableRow2["default"], {
+      columns: columns,
+      visible: visible,
+      className: className,
+      key: key + '-extra-row',
+      clsPrefix: clsPrefix + '-expanded-row',
+      indent: 1,
+      expandable: false,
+      store: this.store
+    });
+  };
+
+  Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
+    var props = this.props;
+    var childrenColumnName = props.childrenColumnName;
+    var expandedRowRender = props.expandedRowRender;
+    var expandRowByClick = props.expandRowByClick;
+    var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
+
+    var rst = [];
+    var rowClassName = props.rowClassName;
+    var rowRef = props.rowRef;
+    var expandedRowClassName = props.expandedRowClassName;
+    var needIndentSpaced = props.data.some(function (record) {
+      return record[childrenColumnName];
+    });
+    var onRowClick = props.onRowClick;
+    var onRowDoubleClick = props.onRowDoubleClick;
+
+    var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
+    var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
+
+    for (var i = 0; i < data.length; i++) {
+      var record = data[i];
+      var key = this.getRowKey(record, i);
+      var childrenColumn = record[childrenColumnName];
+      var isRowExpanded = this.isRowExpanded(record, i);
+      var expandedRowContent = void 0;
+      if (expandedRowRender && isRowExpanded) {
+        expandedRowContent = expandedRowRender(record, i, indent);
+      }
+      var className = rowClassName(record, i, indent);
+
+      var onHoverProps = {};
+      if (this.columnManager.isAnyColumnsFixed()) {
+        onHoverProps.onHover = this.handleRowHover;
+      }
+
+      var height = fixed && fixedColumnsBodyRowsHeight[i] ? fixedColumnsBodyRowsHeight[i] : null;
+
+      var leafColumns = void 0;
+      if (fixed === 'left') {
+        leafColumns = this.columnManager.leftLeafColumns();
+      } else if (fixed === 'right') {
+        leafColumns = this.columnManager.rightLeafColumns();
+      } else {
+        leafColumns = this.columnManager.leafColumns();
+      }
+
+      rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
+        indent: indent,
+        indentSize: props.indentSize,
+        needIndentSpaced: needIndentSpaced,
+        className: className,
+        record: record,
+        expandIconAsCell: expandIconAsCell,
+        onDestroy: this.onRowDestroy,
+        index: i,
+        visible: visible,
+        expandRowByClick: expandRowByClick,
+        onExpand: this.onExpanded,
+        expandable: childrenColumn || expandedRowRender,
+        expanded: isRowExpanded,
+        clsPrefix: props.clsPrefix + '-row',
+        childrenColumnName: childrenColumnName,
+        columns: leafColumns,
+        expandIconColumnIndex: expandIconColumnIndex,
+        onRowClick: onRowClick,
+        onRowDoubleClick: onRowDoubleClick,
+        height: height
+      }, onHoverProps, {
+        key: key,
+        hoverKey: key,
+        ref: rowRef(record, i, indent),
+        store: this.store
+      })));
+
+      var subVisible = visible && isRowExpanded;
+
+      if (expandedRowContent && isRowExpanded) {
+        rst.push(this.getExpandedRow(key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed));
+      }
+      if (childrenColumn) {
+        rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
+      }
+    }
+    return rst;
+  };
+
+  Table.prototype.getRows = function getRows(columns, fixed) {
+    return this.getRowsByData(this.state.data, true, 0, columns, fixed);
+  };
+
+  Table.prototype.getColGroup = function getColGroup(columns, fixed) {
+    var cols = [];
+    if (this.props.expandIconAsCell && fixed !== 'right') {
+      cols.push(_react2["default"].createElement('col', {
+        className: this.props.clsPrefix + '-expand-icon-col',
+        key: 'rc-table-expand-icon-col'
+      }));
+    }
+    var leafColumns = void 0;
+    if (fixed === 'left') {
+      leafColumns = this.columnManager.leftLeafColumns();
+    } else if (fixed === 'right') {
+      leafColumns = this.columnManager.rightLeafColumns();
+    } else {
+      leafColumns = this.columnManager.leafColumns();
+    }
+    cols = cols.concat(leafColumns.map(function (c) {
+      return _react2["default"].createElement('col', { key: c.key, style: { width: c.width, minWidth: c.width } });
+    }));
+    return _react2["default"].createElement(
+      'colgroup',
+      null,
+      cols
+    );
+  };
+
+  Table.prototype.getLeftFixedTable = function getLeftFixedTable() {
+    return this.getTable({
+      columns: this.columnManager.leftColumns(),
+      fixed: 'left'
+    });
+  };
+
+  Table.prototype.getRightFixedTable = function getRightFixedTable() {
+    return this.getTable({
+      columns: this.columnManager.rightColumns(),
+      fixed: 'right'
+    });
+  };
+
+  Table.prototype.getTable = function getTable() {
+    var _this3 = this;
+
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var columns = options.columns,
+        fixed = options.fixed;
+    var _props3 = this.props,
+        clsPrefix = _props3.clsPrefix,
+        _props3$scroll = _props3.scroll,
+        scroll = _props3$scroll === undefined ? {} : _props3$scroll,
+        getBodyWrapper = _props3.getBodyWrapper;
+    var useFixedHeader = this.props.useFixedHeader;
+
+    var bodyStyle = _extends({}, this.props.bodyStyle);
+    var headStyle = {};
+
+    var tableClassName = '';
+    if (scroll.x || fixed) {
+      tableClassName = clsPrefix + '-fixed';
+      bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
+    }
+
+    if (scroll.y) {
+      // maxHeight will make fixed-Table scrolling not working
+      // so we only set maxHeight to body-Table here
+      if (fixed) {
+        bodyStyle.height = bodyStyle.height || scroll.y;
+      } else {
+        bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
+      }
+      bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
+      useFixedHeader = true;
+
+      // Add negative margin bottom for scroll bar overflow bug
+      var scrollbarWidth = (0, _utils.measureScrollbar)();
+      if (scrollbarWidth > 0) {
+        (fixed ? bodyStyle : headStyle).marginBottom = '-' + scrollbarWidth + 'px';
+        (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
+      }
+    }
+
+    var renderTable = function renderTable() {
+      var hasHead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var hasBody = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      var tableStyle = {};
+      if (!fixed && scroll.x) {
+        // not set width, then use content fixed width
+        if (scroll.x === true) {
+          tableStyle.tableLayout = 'fixed';
+        } else {
+          tableStyle.width = scroll.x;
+        }
+      }
+      var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
+        'tbody',
+        { className: clsPrefix + '-tbody' },
+        _this3.getRows(columns, fixed)
+      )) : null;
+      return _react2["default"].createElement(
+        'table',
+        { className: tableClassName, style: tableStyle },
+        _this3.getColGroup(columns, fixed),
+        hasHead ? _this3.getHeader(columns, fixed) : null,
+        tableBody
+      );
+    };
+
+    var headTable = void 0;
+
+    if (useFixedHeader) {
+      headTable = _react2["default"].createElement(
+        'div',
+        {
+          className: clsPrefix + '-header',
+          ref: fixed ? null : 'headTable',
+          style: headStyle,
+          onMouseOver: this.detectScrollTarget,
+          onTouchStart: this.detectScrollTarget,
+          onScroll: this.handleBodyScroll
+        },
+        renderTable(true, false)
+      );
+    }
+
+    var BodyTable = _react2["default"].createElement(
+      'div',
+      {
+        className: clsPrefix + '-body',
+        style: bodyStyle,
+        ref: 'bodyTable',
+        onMouseOver: this.detectScrollTarget,
+        onTouchStart: this.detectScrollTarget,
+        onScroll: this.handleBodyScroll
+      },
+      renderTable(!useFixedHeader)
+    );
+
+    if (fixed && columns.length) {
+      var refName = void 0;
+      if (columns[0].fixed === 'left' || columns[0].fixed === true) {
+        refName = 'fixedColumnsBodyLeft';
+      } else if (columns[0].fixed === 'right') {
+        refName = 'fixedColumnsBodyRight';
+      }
+      delete bodyStyle.overflowX;
+      delete bodyStyle.overflowY;
+      BodyTable = _react2["default"].createElement(
+        'div',
+        {
+          className: clsPrefix + '-body-outer',
+          style: _extends({}, bodyStyle)
+        },
+        _react2["default"].createElement(
+          'div',
+          {
+            className: clsPrefix + '-body-inner',
+            ref: refName,
+            onMouseOver: this.detectScrollTarget,
+            onTouchStart: this.detectScrollTarget,
+            onScroll: this.handleBodyScroll
+          },
+          renderTable(!useFixedHeader)
+        )
+      );
+    }
+
+    return _react2["default"].createElement(
+      'span',
+      null,
+      headTable,
+      BodyTable
+    );
+  };
+
+  Table.prototype.getTitle = function getTitle() {
+    var _props4 = this.props,
+        title = _props4.title,
+        clsPrefix = _props4.clsPrefix;
+
+    return title ? _react2["default"].createElement(
+      'div',
+      { className: clsPrefix + '-title' },
+      title(this.state.data)
+    ) : null;
+  };
+
+  Table.prototype.getFooter = function getFooter() {
+    var _props5 = this.props,
+        footer = _props5.footer,
+        clsPrefix = _props5.clsPrefix;
+
+    return footer ? _react2["default"].createElement(
+      'div',
+      { className: clsPrefix + '-footer' },
+      footer(this.state.data)
+    ) : null;
+  };
+
+  Table.prototype.getEmptyText = function getEmptyText() {
+    var _props6 = this.props,
+        emptyText = _props6.emptyText,
+        clsPrefix = _props6.clsPrefix,
+        data = _props6.data;
+
+    return !data.length ? _react2["default"].createElement(
+      'div',
+      { className: clsPrefix + '-placeholder' },
+      emptyText()
+    ) : null;
+  };
+
+  Table.prototype.getHeaderRowStyle = function getHeaderRowStyle(columns, rows) {
+    var fixedColumnsHeadRowsHeight = this.state.fixedColumnsHeadRowsHeight;
+
+    var headerHeight = fixedColumnsHeadRowsHeight[0];
+    if (headerHeight && columns) {
+      if (headerHeight === 'auto') {
+        return { height: 'auto' };
+      }
+      return { height: headerHeight / rows.length };
+    }
+    return null;
+  };
+
+  Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
+    var clsPrefix = this.props.clsPrefix;
+
+    var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
+    var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
+    var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
+      return row.getBoundingClientRect().height || 'auto';
+    });
+    var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
+      return row.getBoundingClientRect().height || 'auto';
+    });
+    if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
+      return;
+    }
+    this.setState({
+      fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
+      fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight
+    });
+  };
+
+  Table.prototype.resetScrollY = function resetScrollY() {
+    if (this.refs.headTable) {
+      this.refs.headTable.scrollLeft = 0;
+    }
+    if (this.refs.bodyTable) {
+      this.refs.bodyTable.scrollLeft = 0;
+    }
+  };
+
+  Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
+    var _this4 = this;
+
+    var rows = this.getExpandedRows().filter(function (i) {
+      return i === _this4.getRowKey(record, index);
+    });
+    return rows[0];
+  };
+
+  Table.prototype.isRowExpanded = function isRowExpanded(record, index) {
+    return typeof this.findExpandedRow(record, index) !== 'undefined';
+  };
+
+  Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
+    if (this.scrollTarget !== e.currentTarget) {
+      this.scrollTarget = e.currentTarget;
+    }
+  };
+
+  Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
+    // Prevent scrollTop setter trigger onScroll event
+    // http://stackoverflow.com/q/1386696
+    if (e.target !== this.scrollTarget) {
+      return;
+    }
+    var _props$scroll = this.props.scroll,
+        scroll = _props$scroll === undefined ? {} : _props$scroll;
+    var _refs = this.refs,
+        headTable = _refs.headTable,
+        bodyTable = _refs.bodyTable,
+        fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
+        fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
+
+    if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) {
+      if (e.target === bodyTable && headTable) {
+        headTable.scrollLeft = e.target.scrollLeft;
+      } else if (e.target === headTable && bodyTable) {
+        bodyTable.scrollLeft = e.target.scrollLeft;
+      }
+      if (e.target.scrollLeft === 0) {
+        this.setState({ scrollPosition: 'left' });
+      } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
+        this.setState({ scrollPosition: 'right' });
+      } else if (this.state.scrollPosition !== 'middle') {
+        this.setState({ scrollPosition: 'middle' });
+      }
+    }
+    if (scroll.y) {
+      if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
+        fixedColumnsBodyLeft.scrollTop = e.target.scrollTop;
+      }
+      if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
+        fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
+      }
+      if (bodyTable && e.target !== bodyTable) {
+        bodyTable.scrollTop = e.target.scrollTop;
+      }
+    }
+    // Remember last scrollLeft for scroll direction detecting.
+    this.lastScrollLeft = e.target.scrollLeft;
+  };
+
+  Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
+    this.store.setState({
+      currentHoverKey: isHover ? key : null
+    });
+  };
+
+  Table.prototype.render = function render() {
+    var props = this.props;
+    var clsPrefix = props.clsPrefix;
+
+    var className = props.clsPrefix;
+    if (props.className) {
+      className += ' ' + props.className;
+    }
+    if (props.useFixedHeader || props.scroll && props.scroll.y) {
+      className += ' ' + clsPrefix + '-fixed-header';
+    }
+    className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
+
+    var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
+
+    return _react2["default"].createElement(
+      'div',
+      { className: className, style: props.style },
+      this.getTitle(),
+      _react2["default"].createElement(
+        'div',
+        { className: clsPrefix + '-content' },
+        this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
+          'div',
+          { className: clsPrefix + '-fixed-left' },
+          this.getLeftFixedTable()
+        ),
+        _react2["default"].createElement(
+          'div',
+          { className: isTableScroll ? clsPrefix + '-scroll' : '' },
+          this.getTable({ columns: this.columnManager.groupedColumns() }),
+          this.getEmptyText(),
+          this.getFooter()
+        ),
+        this.columnManager.isAnyColumnsRightFixed() && _react2["default"].createElement(
+          'div',
+          { className: clsPrefix + '-fixed-right' },
+          this.getRightFixedTable()
+        )
+      )
+    );
+  };
+
+  return Table;
+}(_react.Component);
+
+;
+
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps;
+
+exports["default"] = Table;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/TableCell.js b/build/TableCell.js
new file mode 100644
index 0000000..e146272
--- /dev/null
+++ b/build/TableCell.js
@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _objectPath = require('object-path');
+
+var _objectPath2 = _interopRequireDefault(_objectPath);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  record: _react.PropTypes.object,
+  clsPrefix: _react.PropTypes.string,
+  index: _react.PropTypes.number,
+  indent: _react.PropTypes.number,
+  indentSize: _react.PropTypes.number,
+  column: _react.PropTypes.object,
+  expandIcon: _react.PropTypes.node
+};
+
+var TableCell = function (_Component) {
+  _inherits(TableCell, _Component);
+
+  function TableCell(props) {
+    _classCallCheck(this, TableCell);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
+    _this.handleClick = _this.handleClick.bind(_this);
+    return _this;
+  }
+
+  TableCell.prototype.isInvalidRenderCellText = function isInvalidRenderCellText(text) {
+    return text && !_react2["default"].isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]';
+  };
+
+  TableCell.prototype.handleClick = function handleClick(e) {
+    var _props = this.props,
+        record = _props.record,
+        onCellClick = _props.column.onCellClick;
+
+    if (onCellClick) {
+      onCellClick(record, e);
+    }
+  };
+
+  TableCell.prototype.render = function render() {
+    var _props2 = this.props,
+        record = _props2.record,
+        indentSize = _props2.indentSize,
+        clsPrefix = _props2.clsPrefix,
+        indent = _props2.indent,
+        index = _props2.index,
+        expandIcon = _props2.expandIcon,
+        column = _props2.column;
+    var dataIndex = column.dataIndex,
+        render = column.render,
+        _column$className = column.className,
+        className = _column$className === undefined ? '' : _column$className;
+
+
+    var text = _objectPath2["default"].get(record, dataIndex);
+    var tdProps = void 0;
+    var colSpan = void 0;
+    var rowSpan = void 0;
+
+    if (render) {
+      text = render(text, record, index);
+      if (this.isInvalidRenderCellText(text)) {
+        tdProps = text.props || {};
+        rowSpan = tdProps.rowSpan;
+        colSpan = tdProps.colSpan;
+        text = text.children;
+      }
+    }
+
+    if (this.isInvalidRenderCellText(text)) {
+      text = null;
+    }
+
+    var indentText = expandIcon ? _react2["default"].createElement('span', {
+      style: { paddingLeft: indentSize * indent + 'px' },
+      className: clsPrefix + '-indent indent-level-' + indent
+    }) : null;
+
+    if (rowSpan === 0 || colSpan === 0) {
+      return null;
+    }
+    return _react2["default"].createElement(
+      'td',
+      {
+        colSpan: colSpan,
+        rowSpan: rowSpan,
+        className: className,
+        onClick: this.handleClick
+      },
+      indentText,
+      expandIcon,
+      text
+    );
+  };
+
+  return TableCell;
+}(_react.Component);
+
+;
+
+TableCell.propTypes = propTypes;
+
+exports["default"] = TableCell;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/TableHeader.js b/build/TableHeader.js
new file mode 100644
index 0000000..313ef27
--- /dev/null
+++ b/build/TableHeader.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _shallowequal = require('shallowequal');
+
+var _shallowequal2 = _interopRequireDefault(_shallowequal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  clsPrefix: _react.PropTypes.string,
+  rowStyle: _react.PropTypes.object,
+  rows: _react.PropTypes.array
+};
+
+var TableHeader = function (_Component) {
+  _inherits(TableHeader, _Component);
+
+  function TableHeader(props) {
+    _classCallCheck(this, TableHeader);
+
+    return _possibleConstructorReturn(this, _Component.call(this, props));
+  }
+
+  TableHeader.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+    return !(0, _shallowequal2["default"])(nextProps, this.props);
+  };
+
+  TableHeader.prototype.render = function render() {
+    var _props = this.props,
+        clsPrefix = _props.clsPrefix,
+        rowStyle = _props.rowStyle,
+        rows = _props.rows;
+
+    return _react2["default"].createElement(
+      'thead',
+      { className: clsPrefix + '-thead' },
+      rows.map(function (row, index) {
+        return _react2["default"].createElement(
+          'tr',
+          { key: index, style: rowStyle },
+          row.map(function (cellProps, i) {
+            return _react2["default"].createElement('th', _extends({}, cellProps, { key: i }));
+          })
+        );
+      })
+    );
+  };
+
+  return TableHeader;
+}(_react.Component);
+
+;
+
+TableHeader.propTypes = propTypes;
+
+exports["default"] = TableHeader;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/TableRow.js b/build/TableRow.js
new file mode 100644
index 0000000..5fbc13c
--- /dev/null
+++ b/build/TableRow.js
@@ -0,0 +1,238 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _TableCell = require('./TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _ExpandIcon = require('./ExpandIcon');
+
+var _ExpandIcon2 = _interopRequireDefault(_ExpandIcon);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  onDestroy: _react.PropTypes.func,
+  onRowClick: _react.PropTypes.func,
+  onRowDoubleClick: _react.PropTypes.func,
+  record: _react.PropTypes.object,
+  clsPrefix: _react.PropTypes.string,
+  expandIconColumnIndex: _react.PropTypes.number,
+  onHover: _react.PropTypes.func,
+  columns: _react.PropTypes.array,
+  height: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),
+  visible: _react.PropTypes.bool,
+  index: _react.PropTypes.number,
+  hoverKey: _react.PropTypes.any,
+  expanded: _react.PropTypes.bool,
+  expandable: _react.PropTypes.any,
+  onExpand: _react.PropTypes.func,
+  needIndentSpaced: _react.PropTypes.bool,
+  className: _react.PropTypes.string,
+  indent: _react.PropTypes.number,
+  indentSize: _react.PropTypes.number,
+  expandIconAsCell: _react.PropTypes.bool,
+  expandRowByClick: _react.PropTypes.bool,
+  store: _react.PropTypes.object.isRequired
+};
+
+var defaultProps = {
+  onRowClick: function onRowClick() {},
+  onRowDoubleClick: function onRowDoubleClick() {},
+  onDestroy: function onDestroy() {},
+
+  expandIconColumnIndex: 0,
+  expandRowByClick: false,
+  onHover: function onHover() {}
+};
+
+var TableRow = function (_Component) {
+  _inherits(TableRow, _Component);
+
+  function TableRow(props) {
+    _classCallCheck(this, TableRow);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+    _this.state = {
+      hovered: false
+    };
+    _this.onRowClick = _this.onRowClick.bind(_this);
+    _this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
+    _this.onMouseEnter = _this.onMouseEnter.bind(_this);
+    _this.onMouseLeave = _this.onMouseLeave.bind(_this);
+
+    return _this;
+  }
+
+  TableRow.prototype.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
+    var _props = this.props,
+        store = _props.store,
+        hoverKey = _props.hoverKey;
+
+    this.unsubscribe = store.subscribe(function () {
+      if (store.getState().currentHoverKey === hoverKey) {
+        _this2.setState({ hovered: true });
+      } else if (_this2.state.hovered === true) {
+        _this2.setState({ hovered: false });
+      }
+    });
+  };
+
+  TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
+    var _props2 = this.props,
+        record = _props2.record,
+        onDestroy = _props2.onDestroy,
+        index = _props2.index;
+
+    onDestroy(record, index);
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  };
+
+  TableRow.prototype.onRowClick = function onRowClick(event) {
+    var _props3 = this.props,
+        record = _props3.record,
+        index = _props3.index,
+        onRowClick = _props3.onRowClick,
+        expandable = _props3.expandable,
+        expandRowByClick = _props3.expandRowByClick,
+        expanded = _props3.expanded,
+        onExpand = _props3.onExpand;
+
+    if (expandable && expandRowByClick) {
+      onExpand(!expanded, record, index);
+    }
+    onRowClick(record, index, event);
+  };
+
+  TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
+    var _props4 = this.props,
+        record = _props4.record,
+        index = _props4.index,
+        onRowDoubleClick = _props4.onRowDoubleClick;
+
+    onRowDoubleClick(record, index, event);
+  };
+
+  TableRow.prototype.onMouseEnter = function onMouseEnter() {
+    var _props5 = this.props,
+        onHover = _props5.onHover,
+        hoverKey = _props5.hoverKey;
+
+    onHover(true, hoverKey);
+  };
+
+  TableRow.prototype.onMouseLeave = function onMouseLeave() {
+    var _props6 = this.props,
+        onHover = _props6.onHover,
+        hoverKey = _props6.hoverKey;
+
+    onHover(false, hoverKey);
+  };
+
+  TableRow.prototype.render = function render() {
+    var _props7 = this.props,
+        clsPrefix = _props7.clsPrefix,
+        columns = _props7.columns,
+        record = _props7.record,
+        height = _props7.height,
+        visible = _props7.visible,
+        index = _props7.index,
+        expandIconColumnIndex = _props7.expandIconColumnIndex,
+        expandIconAsCell = _props7.expandIconAsCell,
+        expanded = _props7.expanded,
+        expandRowByClick = _props7.expandRowByClick,
+        expandable = _props7.expandable,
+        onExpand = _props7.onExpand,
+        needIndentSpaced = _props7.needIndentSpaced,
+        indent = _props7.indent,
+        indentSize = _props7.indentSize;
+    var className = this.props.className;
+
+
+    if (this.state.hovered) {
+      className += ' ' + clsPrefix + '-hover';
+    }
+
+    var cells = [];
+
+    var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], {
+      expandable: expandable,
+      clsPrefix: clsPrefix,
+      onExpand: onExpand,
+      needIndentSpaced: needIndentSpaced,
+      expanded: expanded,
+      record: record
+    });
+
+    for (var i = 0; i < columns.length; i++) {
+      if (expandIconAsCell && i === 0) {
+        cells.push(_react2["default"].createElement(
+          'td',
+          {
+            className: clsPrefix + '-expand-icon-cell',
+            key: 'rc-table-expand-icon-cell'
+          },
+          expandIcon
+        ));
+      }
+      var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick ? false : i === expandIconColumnIndex;
+      cells.push(_react2["default"].createElement(_TableCell2["default"], {
+        clsPrefix: clsPrefix,
+        record: record,
+        indentSize: indentSize,
+        indent: indent,
+        index: index,
+        column: columns[i],
+        key: columns[i].key,
+        expandIcon: isColumnHaveExpandIcon ? expandIcon : null
+      }));
+    }
+    var style = { height: height };
+    if (!visible) {
+      style.display = 'none';
+    }
+
+    return _react2["default"].createElement(
+      'tr',
+      {
+        onClick: this.onRowClick,
+        onDoubleClick: this.onRowDoubleClick,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
+        style: style
+      },
+      cells
+    );
+  };
+
+  return TableRow;
+}(_react.Component);
+
+;
+
+TableRow.propTypes = propTypes;
+TableRow.defaultProps = defaultProps;
+
+exports["default"] = TableRow;
+module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/createStore.js b/build/createStore.js
new file mode 100644
index 0000000..82bd623
--- /dev/null
+++ b/build/createStore.js
@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports["default"] = createStore;
+function createStore(initialState) {
+  var state = initialState;
+  var listeners = [];
+
+  function setState(partial) {
+    state = _extends({}, state, partial);
+    for (var i = 0; i < listeners.length; i++) {
+      listeners[i]();
+    }
+  }
+
+  function getState() {
+    return state;
+  }
+
+  function subscribe(listener) {
+    listeners.push(listener);
+
+    return function unsubscribe() {
+      var index = listeners.indexOf(listener);
+      listeners.splice(index, 1);
+    };
+  }
+
+  return {
+    setState: setState,
+    getState: getState,
+    subscribe: subscribe
+  };
+}
+module.exports = exports["default"];
\ No newline at end of file
diff --git a/build/index.css b/build/index.css
new file mode 100644
index 0000000..f5b6290
--- /dev/null
+++ b/build/index.css
@@ -0,0 +1,182 @@
+/* FormGroup */
+/*  Navlayout  */
+.u-table {
+  font-size: 12px;
+  color: #666;
+  transition: opacity 0.3s ease;
+  position: relative;
+  line-height: 1.5;
+  overflow: hidden; }
+  .u-table table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left; }
+  .u-table th {
+    background: #f7f7f7;
+    font-weight: bold;
+    transition: background .3s ease; }
+  .u-table td {
+    border-bottom: 1px solid #e9e9e9; }
+  .u-table tr {
+    transition: all .3s ease; }
+    .u-table tr:hover {
+      background: rgb(227,242,253); }
+  .u-table tr.tr-row-hover {
+    background: rgb(227,242,253); }
+  .u-table th, .u-table td {
+    padding: 16px 8px; }
+  .u-table-scroll {
+    overflow: auto; }
+  .u-table-header {
+    overflow: hidden;
+    background: #f7f7f7; }
+  .u-table-fixed-header .u-table-body {
+    background: #fff;
+    position: relative; }
+  .u-table-fixed-header .u-table-body-inner {
+    height: 100%;
+    overflow: scroll; }
+  .u-table-fixed-header .u-table-scroll .u-table-header {
+    overflow-x: scroll;
+    padding-bottom: 20px;
+    margin-bottom: -20px;
+    overflow-y: scroll;
+    box-sizing: border-box; }
+  .u-table-title {
+    padding: 16px 8px;
+    border-top: 1px solid #e9e9e9; }
+  .u-table-content {
+    position: relative; }
+  .u-table-footer {
+    padding: 16px 8px;
+    border-bottom: 1px solid #e9e9e9; }
+  .u-table-placeholder {
+    padding: 16px 8px;
+    background: #fff;
+    border-bottom: 1px solid #e9e9e9;
+    text-align: center;
+    position: relative; }
+  .u-table-expand-icon-col {
+    width: 10px; }
+  .u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
+    cursor: pointer;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    line-height: 16px;
+    border: 1px solid #e9e9e9;
+    user-select: none;
+    background: #fff; }
+  .u-table-row-spaced, .u-table-expanded-row-spaced {
+    visibility: hidden; }
+  .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
+    content: '.'; }
+  .u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
+    content: '-'; }
+  .u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
+    content: '+'; }
+  .u-table tr.u-table-expanded-row {
+    background: #f7f7f7; }
+    .u-table tr.u-table-expanded-row:hover {
+      background: #f7f7f7; }
+  .u-table-column-hidden {
+    display: none; }
+  .u-table-prev-columns-page, .u-table-next-columns-page {
+    cursor: pointer;
+    color: #666;
+    z-index: 1; }
+    .u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {
+      color: #2db7f5; }
+    .u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {
+      cursor: not-allowed;
+      color: #999; }
+      .u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {
+        color: #999; }
+  .u-table-prev-columns-page {
+    margin-right: 8px; }
+    .u-table-prev-columns-page:before {
+      content: '<'; }
+  .u-table-next-columns-page {
+    float: right; }
+    .u-table-next-columns-page:before {
+      content: '>'; }
+  .u-table-fixed-left, .u-table-fixed-right {
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    z-index: 1; }
+    .u-table-fixed-left table, .u-table-fixed-right table {
+      width: auto;
+      background: #fff; }
+  .u-table-fixed-left {
+    left: 0;
+    box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
+    .u-table-fixed-left .u-table-fixed-left-body-inner {
+      margin-right: -20px;
+      padding-right: 20px; }
+    .u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
+      padding-right: 0; }
+  .u-table-fixed-right {
+    right: 0;
+    box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }
+    .u-table-fixed-right-expanded-row {
+      color: transparent;
+      pointer-events: none; }
+  .u-table .u-table-scroll-position-left .u-table-fixed-left {
+    box-shadow: none; }
+  .u-table .u-table-scroll-position-right .u-table-fixed-right {
+    box-shadow: none; }
+
+.u-table.bordered table {
+  border-collapse: collapse; }
+
+.u-table.bordered th, .u-table.bordered td {
+  border: 1px solid #e9e9e9; }
+
+.move-enter, .move-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-duration: 2.5s;
+  animation-fill-mode: both;
+  animation-play-state: paused; }
+
+.move-leave {
+  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  animation-duration: .5s;
+  animation-fill-mode: both;
+  animation-play-state: paused; }
+
+.move-enter.move-enter-active, .move-appear.move-enter-active {
+  animation-name: moveLeftIn;
+  animation-play-state: running; }
+
+.move-leave.move-leave-active {
+  animation-name: moveRightOut;
+  animation-play-state: running; }
+
+@keyframes moveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(30px);
+    opacity: 0;
+    background: rgb(238,238,238); }
+  20% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1; }
+  80% {
+    background: rgb(238,238,238); }
+  100% {
+    background: transparent;
+    opacity: 1; } }
+
+@keyframes moveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1; }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-30px);
+    opacity: 0; } }
diff --git a/build/index.js b/build/index.js
new file mode 100644
index 0000000..3b67c4f
--- /dev/null
+++ b/build/index.js
@@ -0,0 +1,10 @@
+'use strict';
+
+var Table = require('./Table');
+var Column = require('./Column');
+var ColumnGroup = require('./ColumnGroup');
+
+Table.Column = Column;
+Table.ColumnGroup = ColumnGroup;
+
+module.exports = Table;
\ No newline at end of file
diff --git a/build/utils.js b/build/utils.js
new file mode 100644
index 0000000..2db55dd
--- /dev/null
+++ b/build/utils.js
@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.measureScrollbar = measureScrollbar;
+exports.debounce = debounce;
+exports.warningOnce = warningOnce;
+
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var scrollbarWidth = void 0;
+
+// Measure scrollbar width for padding body during modal show/hide
+var scrollbarMeasure = {
+  position: 'absolute',
+  top: '-9999px',
+  width: '50px',
+  height: '50px',
+  overflow: 'scroll'
+};
+
+function measureScrollbar() {
+  if (typeof document === 'undefined' || typeof window === 'undefined') {
+    return 0;
+  }
+  if (scrollbarWidth) {
+    return scrollbarWidth;
+  }
+  var scrollDiv = document.createElement('div');
+  for (var scrollProp in scrollbarMeasure) {
+    if (scrollbarMeasure.hasOwnProperty(scrollProp)) {
+      scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
+    }
+  }
+  document.body.appendChild(scrollDiv);
+  var width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  scrollbarWidth = width;
+  return scrollbarWidth;
+}
+
+function debounce(func, wait, immediate) {
+  var timeout = void 0;
+  return function debounceFunc() {
+    var context = this;
+    var args = arguments;
+    // https://fb.me/react-event-pooling
+    if (args[0] && args[0].persist) {
+      args[0].persist();
+    }
+    var later = function later() {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+var warned = {};
+function warningOnce(condition, format, args) {
+  if (!warned[format]) {
+    (0, _warning2["default"])(condition, format, args);
+    warned[format] = true;
+  }
+}
\ No newline at end of file
diff --git a/demo/TableDemo.scss b/demo/TableDemo.scss
index a4afa05..0f71c50 100644
--- a/demo/TableDemo.scss
+++ b/demo/TableDemo.scss
@@ -4,8 +4,6 @@
 @import "../node_modules/bee-button/src/Button.scss";
 @import "../node_modules/bee-transition/src/Transition.scss";
 @import "../src/index.scss";
-@import "../node_modules/bee-dropdown/src/Dropdown.scss";
-@import "../node_modules/bee-menus/src/Menus.scss";
 @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
 @import "../node_modules/bee-form-control/src/FormControl.scss";
 
diff --git a/demo/demolist/Demo1.js b/demo/demolist/Demo1.js
index 95af22a..5413d59 100644
--- a/demo/demolist/Demo1.js
+++ b/demo/demolist/Demo1.js
@@ -28,8 +28,8 @@ class Demo1 extends Component {
               <Table
               columns={columns}
               data={data}
-              title={currentData => <div>标题: {currentData.length} 个元素</div>}
-              footer={currentData => <div>表尾: {currentData.length} 个元素</div>}
+              title={currentData => <div>标题: 这是一个标题</div>}
+              footer={currentData => <div>表尾: 我是小尾巴</div>}
               />
         )
     }
diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js
index 28e2312..07c2633 100644
--- a/demo/demolist/Demo2.js
+++ b/demo/demolist/Demo2.js
@@ -1,7 +1,7 @@
 /**
 *
-* @title 这是标题
-* @description 这是描述
+* @title 增删改表格
+* @description 这是带有增删改功能的表格
 *
 */
 
@@ -24,7 +24,7 @@ class EditableCell extends React.Component {
     this.setState({ editable: true });
   }
   handleKeydown = (event) => {
-      console.log(event);
+      console.log(event.keyCode);
       if(event.keyCode == 13){
           this.check();
       }
diff --git a/demo/index-demo-base.js b/demo/index-demo-base.js
index 2e80a6c..06a1a0b 100644
--- a/demo/index-demo-base.js
+++ b/demo/index-demo-base.js
@@ -6,8 +6,6 @@ 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';
 import Icon from "bee-icon";
 import Input from 'bee-form-control';
 import Popconfirm from 'bee-popconfirm';
diff --git a/demo/index.js b/demo/index.js
index 6839f03..475d746 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -6,8 +6,6 @@ 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';
 import Icon from "bee-icon";
 import Input from 'bee-form-control';
 import Popconfirm from 'bee-popconfirm';
@@ -47,16 +45,16 @@ class Demo1 extends Component {
               <Table
               columns={columns}
               data={data}
-              title={currentData => <div>标题: {currentData.length} 个元素</div>}
-              footer={currentData => <div>表尾: {currentData.length} 个元素</div>}
+              title={currentData => <div>标题: 这是一个标题</div>}
+              footer={currentData => <div>表尾: 我是小尾巴</div>}
               />
         )
     }
 }
 /**
 *
-* @title 这是标题
-* @description 这是描述
+* @title 增删改表格
+* @description 这是带有增删改功能的表格
 *
 */
 
@@ -79,7 +77,7 @@ class EditableCell extends React.Component {
     this.setState({ editable: true });
   }
   handleKeydown = (event) => {
-      console.log(event);
+      console.log(event.keyCode);
       if(event.keyCode == 13){
           this.check();
       }
@@ -223,7 +221,7 @@ class Demo2 extends React.Component {
     </div>);
   }
 }
-var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\r\n*\r\n* @title 简单表格\r\n* @description\r\n*\r\n*/\r\n\r\nconst columns = [\r\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\r\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\r\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\r\n  {\r\n    title: '操作', dataIndex: '', key: 'd', render() {\r\n      return <a href=\"#\">一些操作</a>;\r\n    },\r\n  },\r\n];\r\n\r\nconst data = [\r\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\r\n  { a: '杨过', b: '男', c: 67, key: '2' },\r\n  { a: '郭靖', b: '男', c: 25, key: '3' },\r\n];\r\n\r\nclass Demo1 extends Component {\r\n    render () {\r\n        return (\r\n              <Table\r\n              columns={columns}\r\n              data={data}\r\n              title={currentData => <div>标题: {currentData.length} 个元素</div>}\r\n              footer={currentData => <div>表尾: {currentData.length} 个元素</div>}\r\n              />\r\n        )\r\n    }\r\n}\r\n","desc":""},{"example":<Demo2 />,"title":" 这是标题","code":"/**\r\n*\r\n* @title 这是标题\r\n* @description 这是描述\r\n*\r\n*/\r\n\r\nclass EditableCell extends React.Component {\r\n  state = {\r\n    value: this.props.value,\r\n    editable: false,\r\n  }\r\n  handleChange = (e) => {\r\n    const value = e.target.value;\r\n    this.setState({ value });\r\n  }\r\n  check = () => {\r\n    this.setState({ editable: false });\r\n    if (this.props.onChange) {\r\n      this.props.onChange(this.state.value);\r\n    }\r\n  }\r\n  edit = () => {\r\n    this.setState({ editable: true });\r\n  }\r\n  handleKeydown = (event) => {\r\n      console.log(event);\r\n      if(event.keyCode == 13){\r\n          this.check();\r\n      }\r\n\r\n  }\r\n  render() {\r\n    const { value, editable } = this.state;\r\n    return (<div className=\"editable-cell\">\r\n      {\r\n        editable ?\r\n        <div className=\"editable-cell-input-wrapper\">\r\n          <Input\r\n            value={value}\r\n            onChange={this.handleChange}\r\n            onKeyDown = {this.handleKeydown}\r\n          />\r\n          <Icon\r\n            type=\"uf-correct\"\r\n            className=\"editable-cell-icon-check\"\r\n            onClick={this.check}\r\n          />\r\n        </div>\r\n        :\r\n        <div className=\"editable-cell-text-wrapper\">\r\n          {value || ' '}\r\n          <Icon\r\n            type=\"uf-pencil\"\r\n            className=\"editable-cell-icon\"\r\n            onClick={this.edit}\r\n          />\r\n        </div>\r\n      }\r\n    </div>);\r\n  }\r\n}\r\n\r\nclass Demo2 extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.columns = [{\r\n      title: '姓名',\r\n      dataIndex: 'name',\r\n      key:'name',\r\n      width: '30%',\r\n      render: (text, record, index) => (\r\n        <EditableCell\r\n          value={text}\r\n          onChange={this.onCellChange(index, 'name')}\r\n        />\r\n      ),\r\n    }, {\r\n      title: '年龄',\r\n      dataIndex: 'age',\r\n       key:'age',\r\n    }, {\r\n      title: '你懂的',\r\n      dataIndex: 'address',\r\n       key:'address',\r\n    }, {\r\n      title: '操作',\r\n      dataIndex: 'operation',\r\n      key: 'operation',\r\n      render: (text, record, index) => {\r\n        return (\r\n          this.state.dataSource.length > 1 ?\r\n          (\r\n            <Popconfirm content=\"确认删除?\" id='aa' onClose={this.onDelete(index)}>\r\n              <Icon type=\"uf-del\"></Icon>\r\n            </Popconfirm>\r\n          ) : null\r\n        );\r\n      },\r\n    }];\r\n\r\n    this.state = {\r\n      dataSource: [{\r\n        key: '0',\r\n        name: '沉鱼',\r\n        age: '18',\r\n        address: '96, 77, 89',\r\n      }, {\r\n        key: '1',\r\n        name: '落雁',\r\n        age: '16',\r\n        address: '90, 70, 80',\r\n      }, {\r\n        key: '2',\r\n        name: '闭月',\r\n        age: '17',\r\n        address: '80, 60, 80',\r\n      }, {\r\n        key: '3',\r\n        name: '羞花',\r\n        age: '20',\r\n        address: '120, 60, 90',\r\n      }],\r\n      count: 4,\r\n    };\r\n  }\r\n  onCellChange = (index, key) => {\r\n    return (value) => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource[index][key] = value;\r\n      this.setState({ dataSource });\r\n    };\r\n  }\r\n  onDelete = (index) => {\r\n    return () => {\r\n      const dataSource = [...this.state.dataSource];\r\n      dataSource.splice(index, 1);\r\n      this.setState({ dataSource });\r\n    };\r\n  }\r\n  handleAdd = () => {\r\n    const { count, dataSource } = this.state;\r\n    const newData = {\r\n      key: count,\r\n      name: `凤姐 ${count}`,\r\n      age: 32,\r\n      address: `100 100 100`,\r\n    };\r\n    this.setState({\r\n      dataSource: [...dataSource, newData],\r\n      count: count + 1,\r\n    });\r\n  }\r\n\r\n  getBodyWrapper = (body) => {\r\n    return (\r\n      <Animate transitionName=\"move\" component=\"tbody\" className={body.props.className}>\r\n        {body.props.children}\r\n      </Animate>\r\n    );\r\n  }\r\n  render() {\r\n    const { dataSource } = this.state;\r\n    const columns = this.columns;\r\n    return (<div>\r\n      <Button className=\"editable-add-btn\" type=\"ghost\" onClick={this.handleAdd}>添加</Button>\r\n      <Table bordered data={dataSource} columns={columns} getBodyWrapper={this.getBodyWrapper} />\r\n    </div>);\r\n  }\r\n}\r\n","desc":" 这是描述"}]
+var DemoArray = [{"example":<Demo1 />,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nconst columns = [\n  { title: '用户名', dataIndex: 'a', key: 'a', width: 100 },\n  { id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },\n  { title: '年龄', dataIndex: 'c', key: 'c', width: 200 },\n  {\n    title: '操作', dataIndex: '', key: 'd', render() {\n      return <a href=\"#\">一些操作</a>;\n    },\n  },\n];\n\nconst data = [\n  { a: '令狐冲', b: '男', c: 41, key: '1' },\n  { a: '杨过', b: '男', c: 67, key: '2' },\n  { a: '郭靖', b: '男', c: 25, key: '3' },\n];\n\nclass Demo1 extends Component {\n    render () {\n        return (\n              <Table\n              columns={columns}\n              data={data}\n              title={currentData => <div>标题: 这是一个标题</div>}\n              footer={currentData => <div>表尾: 我是小尾巴</div>}\n              />\n        )\n    }\n}\n","desc":""},{"example":<Demo2 />,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格\n*\n*/\n\nclass EditableCell extends React.Component {\n  state = {\n    value: this.props.value,\n    editable: false,\n  }\n  handleChange = (e) => {\n    const value = e.target.value;\n    this.setState({ value });\n  }\n  check = () => {\n    this.setState({ editable: false });\n    if (this.props.onChange) {\n      this.props.onChange(this.state.value);\n    }\n  }\n  edit = () => {\n    this.setState({ editable: true });\n  }\n  handleKeydown = (event) => {\n      console.log(event.keyCode);\n      if(event.keyCode == 13){\n          this.check();\n      }\n\n  }\n  render() {\n    const { value, editable } = this.state;\n    return (<div className=\"editable-cell\">\n      {\n        editable ?\n        <div className=\"editable-cell-input-wrapper\">\n          <Input\n            value={value}\n            onChange={this.handleChange}\n            onKeyDown = {this.handleKeydown}\n          />\n          <Icon\n            type=\"uf-correct\"\n            className=\"editable-cell-icon-check\"\n            onClick={this.check}\n          />\n        </div>\n        :\n        <div className=\"editable-cell-text-wrapper\">\n          {value || ' '}\n          <Icon\n            type=\"uf-pencil\"\n            className=\"editable-cell-icon\"\n            onClick={this.edit}\n          />\n        </div>\n      }\n    </div>);\n  }\n}\n\nclass Demo2 extends React.Component {\n  constructor(props) {\n    super(props);\n    this.columns = [{\n      title: '姓名',\n      dataIndex: 'name',\n      key:'name',\n      width: '30%',\n      render: (text, record, index) => (\n        <EditableCell\n          value={text}\n          onChange={this.onCellChange(index, 'name')}\n        />\n      ),\n    }, {\n      title: '年龄',\n      dataIndex: 'age',\n       key:'age',\n    }, {\n      title: '你懂的',\n      dataIndex: 'address',\n       key:'address',\n    }, {\n      title: '操作',\n      dataIndex: 'operation',\n      key: 'operation',\n      render: (text, record, index) => {\n        return (\n          this.state.dataSource.length > 1 ?\n          (\n            <Popconfirm content=\"确认删除?\" id='aa' onClose={this.onDelete(index)}>\n              <Icon type=\"uf-del\"></Icon>\n            </Popconfirm>\n          ) : null\n        );\n      },\n    }];\n\n    this.state = {\n      dataSource: [{\n        key: '0',\n        name: '沉鱼',\n        age: '18',\n        address: '96, 77, 89',\n      }, {\n        key: '1',\n        name: '落雁',\n        age: '16',\n        address: '90, 70, 80',\n      }, {\n        key: '2',\n        name: '闭月',\n        age: '17',\n        address: '80, 60, 80',\n      }, {\n        key: '3',\n        name: '羞花',\n        age: '20',\n        address: '120, 60, 90',\n      }],\n      count: 4,\n    };\n  }\n  onCellChange = (index, key) => {\n    return (value) => {\n      const dataSource = [...this.state.dataSource];\n      dataSource[index][key] = value;\n      this.setState({ dataSource });\n    };\n  }\n  onDelete = (index) => {\n    return () => {\n      const dataSource = [...this.state.dataSource];\n      dataSource.splice(index, 1);\n      this.setState({ dataSource });\n    };\n  }\n  handleAdd = () => {\n    const { count, dataSource } = this.state;\n    const newData = {\n      key: count,\n      name: `凤姐 ${count}`,\n      age: 32,\n      address: `100 100 100`,\n    };\n    this.setState({\n      dataSource: [...dataSource, newData],\n      count: count + 1,\n    });\n  }\n\n  getBodyWrapper = (body) => {\n    return (\n      <Animate transitionName=\"move\" component=\"tbody\" className={body.props.className}>\n        {body.props.children}\n      </Animate>\n    );\n  }\n  render() {\n    const { dataSource } = this.state;\n    const columns = this.columns;\n    return (<div>\n      <Button className=\"editable-add-btn\" type=\"ghost\" onClick={this.handleAdd}>添加</Button>\n      <Table bordered data={dataSource} columns={columns} getBodyWrapper={this.getBodyWrapper} />\n    </div>);\n  }\n}\n","desc":" 这是带有增删改功能的表格"}]
 
 
 class Demo extends Component {
diff --git a/package.json b/package.json
index dc8d991..47024e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bee-table",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Table ui component for react",
   "keywords": [
     "react",
@@ -47,7 +47,7 @@
     "bee-icon": "0.0.5",
     "bee-layout": "latest",
     "bee-panel": "latest",
-    "bee-popconfirm": "^0.2.1",
+    "bee-popconfirm": "^0.2.2",
     "chai": "^3.5.0",
     "console-polyfill": "~0.2.1",
     "enzyme": "^2.4.1",
diff --git a/src/index.scss b/src/index.scss
index 2a49ea9..5f79da1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,6 @@
+@import "../node_modules/tinper-bee-core/scss/minxin-variables";
+@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
+
 
 $text-color             : #666;
 $font-size-base         : 12px;