@atlaskit/dynamic-table - npm Package Compare versions

Comparing version 2.1.5 to 3.0.0

CHANGELOG.md

@@ -1,6 +0,23 @@
-<a name="2.1.5"></a>
-## 2.1.5 (2017-04-27)
+<a name="3.0.0"></a>
+# 3.0.0 (2017-05-24)
 
 
 
+<a name="3.0.0"></a>
+# 3.0.0 (2017-05-24)
+
+
+### Code Refactoring
+
+* **refactor:** refactor dynamic-table as part of styled-components refactor ([3f52aff](https://bitbucket.org/atlassian/atlaskit/commits/3f52aff))
+
+
+### BREAKING CHANGES
+
+* **refactor:** DynamicTable export renamed to DynamicTableStateless, for consistency with other packages.
+
+ISSUES CLOSED: #AK-2385
+
+
+
 <a name="2.1.5"></a>
@@ -7,0 +24,0 @@ ## 2.1.5 (2017-04-27)

dist/bundle-cjs.js

@@ -80,12 +80,12 @@ module.exports = /******/
         value: !0
-    }), exports.DynamicTable = exports.default = void 0;
-    var _stateless = __webpack_require__(2);
-    Object.defineProperty(exports, "DynamicTable", {
+    }), exports.DynamicTableStateless = exports.default = void 0;
+    var _Stateless = __webpack_require__(2);
+    Object.defineProperty(exports, "DynamicTableStateless", {
         enumerable: !0,
         get: function() {
-            return _interopRequireDefault(_stateless).default;
+            return _interopRequireDefault(_Stateless).default;
         }
     });
-    var _stateful = __webpack_require__(20), _stateful2 = _interopRequireDefault(_stateful);
-    exports.default = _stateful2.default;
+    var _Stateful = __webpack_require__(26), _Stateful2 = _interopRequireDefault(_Stateful);
+    exports.default = _Stateful2.default;
 }, /* 2 */
@@ -115,3 +115,3 @@ /***/
     });
-    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(4), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(5), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(6), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(7), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(8), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(9), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _pagination = __webpack_require__(11), _constants = __webpack_require__(12), _props6 = __webpack_require__(13), _styled = __webpack_require__(16), DynamicTable = function(_Component) {
+    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _pagination = __webpack_require__(9), _constants = __webpack_require__(10), _props2 = __webpack_require__(11), _props3 = _interopRequireDefault(_props2), _TableHead = __webpack_require__(15), _TableHead2 = _interopRequireDefault(_TableHead), _Body = __webpack_require__(22), _Body2 = _interopRequireDefault(_Body), _DynamicTable = __webpack_require__(25), DynamicTable = function(_Component) {
         function DynamicTable() {
@@ -125,9 +125,9 @@ var _ref, _temp, _this, _ret;
                 return function() {
-                    var key = item.key;
+                    var _this$props = _this.props, sortKey = _this$props.sortKey, sortOrder = _this$props.sortOrder, onSort = _this$props.onSort, key = item.key;
                     if (key) {
-                        var sortOrder = key !== _this.props.sortKey ? _constants.ASC : toggleSortOrder(_this.props.sortOrder);
-                        _this.onSetPage(1), _this.props.onSort({
+                        var sortOrderFormatted = key !== sortKey ? _constants.ASC : toggleSortOrder(sortOrder);
+                        _this.onSetPage(1), onSort({
                             key: key,
                             item: item,
-                            sortOrder: sortOrder
+                            sortOrder: sortOrderFormatted
                         });
@@ -141,77 +141,24 @@ }
         return (0, _inherits3.default)(DynamicTable, _Component), (0, _createClass3.default)(DynamicTable, [ {
-            key: "getSortedRows",
-            value: function() {
-                var _props = this.props, head = _props.head, rows = _props.rows, sortKey = _props.sortKey, sortOrder = _props.sortOrder;
-                if (!sortKey || !head) return rows;
-                var getSortingCellValue = function(cells) {
-                    return cells.reduce(function(result, cell, index) {
-                        return result || head.cells[index].key === sortKey && (void 0 !== cell.key ? cell.key : cell.content);
-                    }, null);
-                };
-                return rows.sort(function(a, b) {
-                    var valA = getSortingCellValue(a.cells), valB = getSortingCellValue(b.cells), modifier = sortOrder === _constants.ASC ? 1 : -1;
-                    return !valA || valA < valB ? -modifier : !valB || valA > valB ? modifier : 0;
-                });
-            }
-        }, {
-            key: "renderCaption",
-            value: function() {
-                var caption = this.props.caption;
-                return caption ? _react2.default.createElement(_styled.Caption, null, caption) : null;
-            }
-        }, {
-            key: "renderHead",
-            value: function() {
-                var _this2 = this, _props2 = this.props, head = _props2.head, sortKey = _props2.sortKey, sortOrder = _props2.sortOrder;
-                if (!head) return null;
-                var cells = head.cells, rest = (0, _objectWithoutProperties3.default)(head, [ "cells" ]);
-                return _react2.default.createElement(_styled.TableHead, rest, _react2.default.createElement("tr", null, cells.map(function(cell, index) {
-                    var isSortable = cell.isSortable, key = cell.key, content = cell.content, restCellProps = (0, 
-                    _objectWithoutProperties3.default)(cell, [ "isSortable", "key", "content" ]), isFixedSize = _this2.props.isFixedSize;
-                    return _react2.default.createElement(_styled.TableHeadCell, (0, _extends3.default)({
-                        key: key || index,
-                        onClick: isSortable && _this2.onSort(cell),
-                        isFixedSize: isFixedSize,
-                        isSortable: isSortable,
-                        sortOrder: key === sortKey && sortOrder
-                    }, restCellProps), _react2.default.createElement("span", null, content));
-                })));
-            }
-        }, {
-            key: "renderBody",
-            value: function() {
-                var _this3 = this, _props3 = this.props, rowsPerPage = _props3.rowsPerPage, page = _props3.page, rows = this.getSortedRows();
-                return _react2.default.createElement("tbody", null, (rows || []).slice((page - 1) * rowsPerPage, page * rowsPerPage).map(function(row, rowIndex) {
-                    return _this3.renderBodyRow(row, rowIndex);
-                }));
-            }
-        }, {
-            key: "renderBodyRow",
-            value: function(row, rowIndex) {
-                var _props4 = this.props, head = _props4.head, isFixedSize = _props4.isFixedSize, cells = row.cells, restRowProps = (0, 
-                _objectWithoutProperties3.default)(row, [ "cells" ]);
-                return _react2.default.createElement(_styled.TableBodyRow, (0, _extends3.default)({
-                    key: rowIndex
-                }, restRowProps), cells.map(function(cell, cellIndex) {
-                    var content = cell.content, restCellProps = (0, _objectWithoutProperties3.default)(cell, [ "content" ]), _ref2 = (head || {
-                        cells: []
-                    }).cells[cellIndex] || {}, shouldTruncate = _ref2.shouldTruncate, width = _ref2.width;
-                    return _react2.default.createElement(_styled.TableBodyCell, (0, _extends3.default)({}, restCellProps, {
-                        key: cellIndex,
-                        width: width,
-                        shouldTruncate: shouldTruncate,
-                        isFixedSize: isFixedSize
-                    }), content);
-                }));
-            }
-        }, {
             key: "render",
             value: function() {
-                var _props5 = this.props, rows = _props5.rows, isFixedSize = _props5.isFixedSize, rowsPerPage = _props5.rowsPerPage, emptyView = _props5.emptyView, page = _props5.page, totalPages = rows ? Math.ceil(rows.length / rowsPerPage) : 0;
-                return rows && rows.length ? _react2.default.createElement("div", null, _react2.default.createElement(_styled.Table, {
+                var _props = this.props, caption = _props.caption, emptyView = _props.emptyView, head = _props.head, isFixedSize = _props.isFixedSize, page = _props.page, rows = _props.rows, rowsPerPage = _props.rowsPerPage, sortKey = _props.sortKey, sortOrder = _props.sortOrder, totalPages = rows ? Math.ceil(rows.length / rowsPerPage) : 0, bodyProps = {
+                    rows: rows,
+                    head: head,
+                    sortKey: sortKey,
+                    sortOrder: sortOrder,
+                    rowsPerPage: rowsPerPage,
+                    page: page,
                     isFixedSize: isFixedSize
-                }, this.renderCaption(), this.renderHead(), this.renderBody()), totalPages ? _react2.default.createElement(_pagination.Pagination, {
+                };
+                return rows && rows.length ? _react2.default.createElement("div", null, _react2.default.createElement(_DynamicTable.Table, {
+                    isFixedSize: isFixedSize
+                }, !!caption && _react2.default.createElement(_DynamicTable.Caption, null, caption), _react2.default.createElement(_TableHead2.default, {
+                    head: head,
+                    onSort: this.onSort,
+                    sortKey: sortKey,
+                    sortOrder: sortOrder
+                }), _react2.default.createElement(_Body2.default, bodyProps)), totalPages ? _react2.default.createElement(_pagination.Pagination, {
                     current: page,
-                    total: totalPages,
-                    onSetPage: this.onSetPage
+                    onSetPage: this.onSetPage,
+                    total: totalPages
                 }) : null) : emptyView;
@@ -221,43 +168,58 @@ }
     }(_react.Component);
-    DynamicTable.propTypes = _props6.statelessPropTypes, DynamicTable.defaultProps = _props6.statelessDefaultProps, 
-    exports.default = DynamicTable;
+    DynamicTable.propTypes = {
+        caption: _react.PropTypes.node,
+        head: _props3.default.head,
+        rows: _props3.default.rows,
+        emptyView: _react.PropTypes.node,
+        isFixedSize: _react.PropTypes.bool,
+        rowsPerPage: _props3.default.isInteger,
+        onSetPage: _react.PropTypes.func,
+        onSort: _react.PropTypes.func,
+        page: _props3.default.isInteger,
+        sortKey: _props3.default.sortKey,
+        sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ])
+    }, DynamicTable.defaultProps = {
+        caption: null,
+        head: null,
+        rows: null,
+        emptyView: null,
+        isFixedSize: !1,
+        rowsPerPage: 1 / 0,
+        onSetPage: function() {},
+        onSort: function() {},
+        page: 1,
+        sortKey: null,
+        sortOrder: null
+    }, exports.default = DynamicTable;
 }, /* 3 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/extends");
+    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
 }, /* 4 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/objectWithoutProperties");
+    module.exports = require("babel-runtime/helpers/classCallCheck");
 }, /* 5 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
+    module.exports = require("babel-runtime/helpers/createClass");
 }, /* 6 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/classCallCheck");
+    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
 }, /* 7 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/createClass");
+    module.exports = require("babel-runtime/helpers/inherits");
 }, /* 8 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
+    module.exports = require("react");
 }, /* 9 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/inherits");
+    module.exports = require("@atlaskit/pagination");
 }, /* 10 */
 /***/
 function(module, exports) {
-    module.exports = require("react");
-}, /* 11 */
-/***/
-function(module, exports) {
-    module.exports = require("@atlaskit/pagination");
-}, /* 12 */
-/***/
-function(module, exports) {
     "use strict";
@@ -268,3 +230,3 @@ Object.defineProperty(exports, "__esModule", {
     exports.ASC = "ASC", exports.DESC = "DESC";
-}, /* 13 */
+}, /* 11 */
 /***/
@@ -311,4 +273,4 @@ function(module, exports, __webpack_require__) {
         value: !0
-    }), exports.statefulDefaultProps = exports.statelessDefaultProps = exports.statefulPropTypes = exports.statelessPropTypes = void 0;
-    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _isInteger = __webpack_require__(14), _isInteger2 = _interopRequireDefault(_isInteger), _react = __webpack_require__(10), _utilCommon = __webpack_require__(15), _constants = __webpack_require__(12);
+    });
+    var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _isInteger = __webpack_require__(13), _isInteger2 = _interopRequireDefault(_isInteger), _react = __webpack_require__(8), _utilCommon = __webpack_require__(14);
     isInteger.isRequired = !1;
@@ -326,52 +288,67 @@ var rowCellObject = {
         cells: _react.PropTypes.arrayOf(headCell)
-    }), rows = _react.PropTypes.arrayOf(_react.PropTypes.shape({
+    }), row = _react.PropTypes.shape({
         cells: rowCells
-    }));
-    sortKey.isRequired = !1;
-    var caption = _react.PropTypes.node, sortOrder = _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]), isFixedSize = _react.PropTypes.bool, rowsPerPage = isInteger, page = isInteger, onSetPage = _react.PropTypes.func, onSort = _react.PropTypes.func, emptyView = _react.PropTypes.node, commonPropTypes = {
-        caption: caption,
+    }), rows = _react.PropTypes.arrayOf(row);
+    sortKey.isRequired = !1, // As the files we are going to use these in also have const declarations for the
+    // props, here we are exporting them as an object for ease of use.
+    exports.default = {
         head: head,
+        isInteger: isInteger,
+        row: row,
         rows: rows,
-        emptyView: emptyView,
-        isFixedSize: isFixedSize,
-        rowsPerPage: rowsPerPage,
-        onSetPage: onSetPage,
-        onSort: onSort
-    }, commonDefaultProps = {
-        caption: null,
-        head: null,
-        rows: null,
-        emptyView: null,
-        isFixedSize: !1,
-        rowsPerPage: 1 / 0,
-        onSetPage: function() {},
-        onSort: function() {}
+        sortKey: sortKey
     };
-    exports.statelessPropTypes = (0, _extends3.default)({}, commonPropTypes, {
-        page: page,
-        sortKey: sortKey,
-        sortOrder: sortOrder
-    }), exports.statefulPropTypes = (0, _extends3.default)({}, commonPropTypes, {
-        defaultPage: page,
-        defaultSortKey: sortKey,
-        defaultSortOrder: sortOrder
-    }), exports.statelessDefaultProps = (0, _extends3.default)({}, commonDefaultProps, {
-        page: 1,
-        sortKey: null,
-        sortOrder: null
-    }), exports.statefulDefaultProps = (0, _extends3.default)({}, commonDefaultProps, {
-        defaultPage: 1,
-        defaultSortKey: null,
-        defaultSortOrder: null
-    });
-}, /* 14 */
+}, /* 12 */
 /***/
 function(module, exports) {
+    module.exports = require("babel-runtime/helpers/extends");
+}, /* 13 */
+/***/
+function(module, exports) {
     module.exports = require("babel-runtime/core-js/number/is-integer");
-}, /* 15 */
+}, /* 14 */
 /***/
 function(module, exports) {
     module.exports = require("@atlaskit/util-common");
+}, /* 15 */
+/***/
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    });
+    var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(16), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _constants = __webpack_require__(10), _TableHead = __webpack_require__(17), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), TableHead = function(_ref) {
+        var head = _ref.head, sortKey = _ref.sortKey, sortOrder = _ref.sortOrder, isFixedSize = _ref.isFixedSize, onSort = _ref.onSort;
+        if (!head) return null;
+        var cells = head.cells, rest = (0, _objectWithoutProperties3.default)(head, [ "cells" ]);
+        return _react2.default.createElement(_TableHead.Head, rest, _react2.default.createElement("tr", null, cells.map(function(cell, index) {
+            var isSortable = cell.isSortable, key = cell.key, content = cell.content, restCellProps = (0, 
+            _objectWithoutProperties3.default)(cell, [ "isSortable", "key", "content" ]);
+            return _react2.default.createElement(_TableHead.HeadCell, (0, _extends3.default)({
+                key: key || index,
+                onClick: isSortable && onSort(cell),
+                isFixedSize: isFixedSize,
+                isSortable: isSortable,
+                sortOrder: key === sortKey && sortOrder
+            }, restCellProps), _react2.default.createElement("span", null, content));
+        })));
+    };
+    TableHead.propTypes = {
+        onSort: _react.PropTypes.func,
+        head: _props2.default.head,
+        sortKey: _props2.default.sortKey,
+        sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]),
+        isFixedSize: _react.PropTypes.bool
+    }, exports.default = TableHead;
 }, /* 16 */
 /***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/objectWithoutProperties");
+}, /* 17 */
+/***/
 function(module, exports, __webpack_require__) {
@@ -386,19 +363,47 @@ "use strict";
         value: !0
-    }), exports.TableBodyCell = exports.TableBodyRow = exports.TableHeadCell = exports.TableHead = exports.Caption = exports.Table = void 0;
-    var _taggedTemplateLiteral2 = __webpack_require__(17), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    }), exports.HeadCell = exports.Head = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  border-bottom: 2px solid #DFE1E6;\n" ], [ "\n  border-bottom: 2px solid #DFE1E6;\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n  ", "\n  border: none;\n  color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n" ], [ "\n  ", "\n  ", "\n  ", "\n  ", "\n  border: none;\n  color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(21);
+    exports.Head = _styledComponents2.default.thead(_templateObject), exports.HeadCell = _styledComponents2.default.th(_templateObject2, function(props) {
+        return (0, _constants.onClickStyle)(props);
+    }, function(props) {
+        return (0, _constants.truncateStyle)(props);
+    }, function(props) {
+        return (0, _constants.arrowsStyle)(props);
+    }, _constants.cellStyle, _utilSharedStyles.akColorN300);
+}, /* 18 */
+/***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
+}, /* 19 */
+/***/
+function(module, exports) {
+    module.exports = require("styled-components");
+}, /* 20 */
+/***/
+function(module, exports) {
+    module.exports = require("@atlaskit/util-shared-styles");
+}, /* 21 */
+/***/
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    }), exports.cellStyle = exports.arrowsStyle = exports.onClickStyle = exports.truncateStyle = exports.baselineUnit = exports.gridUnit = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
     _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", ";\n  ", "\n" ], [ "\n  ", "\n  ", ";\n  ", "\n" ]), _templateObject2 = (0, 
     _taggedTemplateLiteral3.default)([ "width: ", "%;" ], [ "width: ", "%;" ]), _templateObject3 = (0, 
     _taggedTemplateLiteral3.default)([ "overflow: hidden;" ], [ "overflow: hidden;" ]), _templateObject4 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  " ], [ "\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  " ]), _templateObject5 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  " ], [ "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  " ]), _templateObject5 = (0, 
     _taggedTemplateLiteral3.default)([ "\n  &:hover {\n    cursor: pointer;\n  }\n" ], [ "\n  &:hover {\n    cursor: pointer;\n  }\n" ]), _templateObject6 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -", "px;\n    border: 3px solid transparent;\n  " ], [ "\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -", "px;\n    border: 3px solid transparent;\n  " ]), _templateObject7 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ", "; \n          };\n        &:after {\n          ", ";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ", ";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", "; \n        }\n        &:after {\n          border-top: 3px solid ", "; \n        }\n      }\n    " ], [ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ", "; \n          };\n        &:after {\n          ", ";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ", ";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", "; \n        }\n        &:after {\n          border-top: 3px solid ", "; \n        }\n      }\n    " ]), _templateObject8 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n    padding: ", "px ", "px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ], [ "\n    padding: ", "px ", "px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ]), _templateObject9 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n" ], [ "\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n" ]), _templateObject10 = (0, 
-    _taggedTemplateLiteral3.default)([ "table-layout: fixed;" ], [ "table-layout: fixed;" ]), _templateObject11 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: left;\n" ], [ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: left;\n" ]), _templateObject12 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  border-bottom: 2px solid #DFE1E6;\n" ], [ "\n  border-bottom: 2px solid #DFE1E6;\n" ]), _templateObject13 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n  ", "\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ", ";\n  fontWeight: 600;\n" ], [ "\n  ", "\n  ", "\n  ", "\n  ", "\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ", ";\n  fontWeight: 600;\n" ]), _templateObject14 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ], [ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ]), _templateObject15 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "  \n" ], [ "\n  ", "\n  ", "\n  ", "  \n" ]), _styledComponents = __webpack_require__(18), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(19), _constants = __webpack_require__(12), gridUnit = parseInt(_utilSharedStyles.akGridSize, 10), baselineUnit = gridUnit / 2, truncateStyle = function(_ref) {
+    _taggedTemplateLiteral3.default)([ "\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  " ], [ "\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  " ]), _templateObject7 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            border-bottom: 3px solid ", ";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ", ";\n          border-top: 3px solid ", ";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", ";\n        }\n        &:after {\n          border-top: 3px solid ", ";\n        }\n      }\n    " ], [ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            border-bottom: 3px solid ", ";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ", ";\n          border-top: 3px solid ", ";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", ";\n        }\n        &:after {\n          border-top: 3px solid ", ";\n        }\n      }\n    " ]), _templateObject8 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ], [ "\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ]), _styledComponents = __webpack_require__(19), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(10), gridUnit = exports.gridUnit = parseInt(_utilSharedStyles.akGridSize, 10), baselineUnit = exports.baselineUnit = gridUnit / 2;
+    exports.truncateStyle = function(_ref) {
         var width = _ref.width, isFixedSize = _ref.isFixedSize, shouldTruncate = _ref.shouldTruncate;
@@ -408,6 +413,6 @@ return (0, _styledComponents.css)(_templateObject, width ? (0, _styledComponents.css)(_templateObject2, width) : "", isFixedSize ? (0,
         _styledComponents.css)(_templateObject4) : "");
-    }, onClickStyle = function(_ref2) {
+    }, exports.onClickStyle = function(_ref2) {
         var onClick = _ref2.onClick;
         return onClick && (0, _styledComponents.css)(_templateObject5);
-    }, arrowsStyle = function(_ref3) {
+    }, exports.arrowsStyle = function(_ref3) {
         var isSortable = _ref3.isSortable, sortOrder = _ref3.sortOrder;
@@ -417,37 +422,124 @@ if (!isSortable) return "";
         return (0, _styledComponents.css)(_templateObject7, pseudoBase, sortOrder === _constants.ASC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN40, pseudoBase, sortOrder === _constants.DESC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN40, sortOrder === _constants.ASC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN60, sortOrder === _constants.DESC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN60);
-    }, cellStyle = (0, _styledComponents.css)(_templateObject8, baselineUnit, gridUnit);
-    exports.Table = _styledComponents2.default.table(_templateObject9, function(_ref4) {
-        var isFixedSize = _ref4.isFixedSize;
-        return isFixedSize && (0, _styledComponents.css)(_templateObject10);
-    }), exports.Caption = _styledComponents2.default.caption(_templateObject11, 7 * baselineUnit, gridUnit), 
-    exports.TableHead = _styledComponents2.default.thead(_templateObject12), exports.TableHeadCell = _styledComponents2.default.th(_templateObject13, function(props) {
-        return onClickStyle(props);
-    }, function(props) {
-        return truncateStyle(props);
-    }, function(props) {
-        return arrowsStyle(props);
-    }, function() {
-        return cellStyle;
-    }, _utilSharedStyles.akColorN300), exports.TableBodyRow = _styledComponents2.default.tr(_templateObject14, function(props) {
-        return onClickStyle(props);
-    }, _utilSharedStyles.akColorN10), exports.TableBodyCell = _styledComponents2.default.td(_templateObject15, function(props) {
-        return onClickStyle(props);
-    }, function(props) {
-        return truncateStyle(props);
-    }, function() {
-        return cellStyle;
+    }, exports.cellStyle = (0, _styledComponents.css)(_templateObject8, baselineUnit, gridUnit);
+}, /* 22 */
+/***/
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
     });
-}, /* 17 */
+    var _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _constants = __webpack_require__(10), _TableRow = __webpack_require__(23), _TableRow2 = _interopRequireDefault(_TableRow), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), getSortedRows = function(head, rows, sortKey, sortOrder) {
+        if (!sortKey || !head) return rows;
+        var getSortingCellValue = function(cells) {
+            return cells.reduce(function(result, cell, index) {
+                return result || head.cells[index].key === sortKey && (void 0 !== cell.key ? cell.key : cell.content);
+            }, null);
+        };
+        return rows.sort(function(a, b) {
+            var valA = getSortingCellValue(a.cells), valB = getSortingCellValue(b.cells), modifier = sortOrder === _constants.ASC ? 1 : -1;
+            return !valA || valA < valB ? -modifier : !valB || valA > valB ? modifier : 0;
+        });
+    }, Body = function(_ref) {
+        var rows = _ref.rows, head = _ref.head, sortKey = _ref.sortKey, sortOrder = _ref.sortOrder, rowsPerPage = _ref.rowsPerPage, page = _ref.page, isFixedSize = _ref.isFixedSize, sortedRows = getSortedRows(head, rows, sortKey, sortOrder) || [];
+        return _react2.default.createElement("tbody", null, sortedRows.slice((page - 1) * rowsPerPage, page * rowsPerPage).map(function(row, rowIndex) {
+            return _react2.default.createElement(_TableRow2.default, {
+                row: row,
+                rowIndex: rowIndex,
+                head: head,
+                isFixedSize: isFixedSize
+            });
+        }));
+    };
+    Body.propTypes = {
+        head: _props2.default.head,
+        rows: _props2.default.rows,
+        sortKey: _props2.default.sortKey,
+        sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]),
+        rowsPerPage: _props2.default.isInteger,
+        page: _props2.default.isInteger,
+        isFixedSize: _react.PropTypes.bool
+    }, exports.default = Body;
+}, /* 23 */
 /***/
-function(module, exports) {
-    module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
-}, /* 18 */
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    });
+    var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(16), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TableRow = __webpack_require__(24), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), Row = function(_ref) {
+        var row = _ref.row, rowIndex = _ref.rowIndex, head = _ref.head, isFixedSize = _ref.isFixedSize, cells = row.cells, restRowProps = (0, 
+        _objectWithoutProperties3.default)(row, [ "cells" ]);
+        return _react2.default.createElement(_TableRow.TableBodyRow, (0, _extends3.default)({
+            key: rowIndex
+        }, restRowProps), cells.map(function(cell, cellIndex) {
+            var content = cell.content, restCellProps = (0, _objectWithoutProperties3.default)(cell, [ "content" ]), _ref2 = (head || {
+                cells: []
+            }).cells[cellIndex] || {}, shouldTruncate = _ref2.shouldTruncate, width = _ref2.width;
+            return _react2.default.createElement(_TableRow.TableBodyCell, (0, _extends3.default)({}, restCellProps, {
+                key: cellIndex,
+                width: width,
+                shouldTruncate: shouldTruncate,
+                isFixedSize: isFixedSize
+            }), content);
+        }));
+    };
+    Row.propTypes = {
+        row: _props2.default.row,
+        rowIndex: _react.PropTypes.number,
+        head: _props2.default.head,
+        isFixedSize: _react.PropTypes.bool
+    }, exports.default = Row;
+}, /* 24 */
 /***/
-function(module, exports) {
-    module.exports = require("styled-components");
-}, /* 19 */
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    }), exports.TableBodyCell = exports.TableBodyRow = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ], [ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n" ], [ "\n  ", "\n  ", "\n  ", "\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(21);
+    exports.TableBodyRow = _styledComponents2.default.tr(_templateObject, function(props) {
+        return (0, _constants.onClickStyle)(props);
+    }, _utilSharedStyles.akColorN10), exports.TableBodyCell = _styledComponents2.default.td(_templateObject2, function(props) {
+        return (0, _constants.onClickStyle)(props);
+    }, function(props) {
+        return (0, _constants.truncateStyle)(props);
+    }, _constants.cellStyle);
+}, /* 25 */
 /***/
-function(module, exports) {
-    module.exports = require("@atlaskit/util-shared-styles");
-}, /* 20 */
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    }), exports.Caption = exports.Table = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n" ], [ "\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "table-layout: fixed;" ], [ "table-layout: fixed;" ]), _templateObject3 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n" ], [ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(21);
+    exports.Table = _styledComponents2.default.table(_templateObject, function(_ref) {
+        var isFixedSize = _ref.isFixedSize;
+        return isFixedSize && (0, _styledComponents.css)(_templateObject2);
+    }), exports.Caption = _styledComponents2.default.caption(_templateObject3, _constants.gridUnit, 7 * _constants.baselineUnit);
+}, /* 26 */
 /***/
@@ -464,9 +556,9 @@ function(module, exports, __webpack_require__) {
     });
-    var _getPrototypeOf = __webpack_require__(5), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(6), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(7), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(8), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(9), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _stateless = __webpack_require__(2), _stateless2 = _interopRequireDefault(_stateless), _props = __webpack_require__(13), AkDynamicTable = function(_PureComponent) {
-        function AkDynamicTable() {
+    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Stateless = __webpack_require__(2), _Stateless2 = _interopRequireDefault(_Stateless), _props2 = __webpack_require__(11), _props3 = _interopRequireDefault(_props2), _constants = __webpack_require__(10), DynamicTable = function(_PureComponent) {
+        function DynamicTable() {
             var _ref, _temp, _this, _ret;
-            (0, _classCallCheck3.default)(this, AkDynamicTable);
+            (0, _classCallCheck3.default)(this, DynamicTable);
             for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-            return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = AkDynamicTable.__proto__ || (0, 
-            _getPrototypeOf2.default)(AkDynamicTable)).call.apply(_ref, [ this ].concat(args))), 
+            return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = DynamicTable.__proto__ || (0, 
+            _getPrototypeOf2.default)(DynamicTable)).call.apply(_ref, [ this ].concat(args))), 
             _this.state = {
@@ -493,3 +585,3 @@ page: _this.props.defaultPage,
         }
-        return (0, _inherits3.default)(AkDynamicTable, _PureComponent), (0, _createClass3.default)(AkDynamicTable, [ {
+        return (0, _inherits3.default)(DynamicTable, _PureComponent), (0, _createClass3.default)(DynamicTable, [ {
             key: "componentWillReceiveProps",
@@ -506,20 +598,36 @@ value: function(newProps) {
             value: function() {
-                return _react2.default.createElement(_stateless2.default, {
-                    caption: this.props.caption,
-                    head: this.props.head,
-                    rows: this.props.rows,
-                    emptyView: this.props.emptyView,
-                    isFixedSize: this.props.isFixedSize,
-                    rowsPerPage: this.props.rowsPerPage,
+                var _props = this.props, caption = _props.caption, emptyView = _props.emptyView, head = _props.head, isFixedSize = _props.isFixedSize, rows = _props.rows, rowsPerPage = _props.rowsPerPage, _state = this.state, page = _state.page, sortKey = _state.sortKey, sortOrder = _state.sortOrder;
+                return _react2.default.createElement(_Stateless2.default, {
+                    caption: caption,
+                    emptyView: emptyView,
+                    head: head,
+                    isFixedSize: isFixedSize,
                     onSetPage: this.onSetPage,
                     onSort: this.onSort,
-                    page: this.state.page,
-                    sortKey: this.state.sortKey,
-                    sortOrder: this.state.sortOrder
+                    page: page,
+                    rows: rows,
+                    rowsPerPage: rowsPerPage,
+                    sortKey: sortKey,
+                    sortOrder: sortOrder
                 });
             }
-        } ]), AkDynamicTable;
+        } ]), DynamicTable;
     }(_react.PureComponent);
-    AkDynamicTable.propTypes = _props.statefulPropTypes, AkDynamicTable.defaultProps = _props.statefulDefaultProps, 
-    exports.default = AkDynamicTable;
+    DynamicTable.propTypes = {
+        defaultPage: _props3.default.isInteger,
+        defaultSortKey: _props3.default.sortKey,
+        defaultSortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ])
+    }, DynamicTable.defaultProps = {
+        caption: null,
+        defaultPage: 1,
+        defaultSortKey: null,
+        defaultSortOrder: null,
+        emptyView: null,
+        head: null,
+        isFixedSize: !1,
+        onSetPage: function() {},
+        onSort: function() {},
+        rows: null,
+        rowsPerPage: 1 / 0
+    }, exports.default = DynamicTable;
 } ]);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.DynamicTable=t.default=void 0;var o=n(2);Object.defineProperty(t,"DynamicTable",{enumerable:!0,get:function(){return r(o).default}});var a=n(20),l=r(a);t.default=l.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){switch(e){case S.DESC:return S.ASC;case S.ASC:return S.DESC;default:return e}}Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),l=r(a),i=n(4),s=r(i),u=n(5),d=r(u),p=n(6),f=r(p),c=n(7),h=r(c),y=n(8),b=r(y),g=n(9),v=r(g),P=n(10),m=r(P),x=n(11),S=n(12),T=n(13),w=n(16),k=function(e){function t(){var e,n,r,a;(0,f.default)(this,t);for(var l=arguments.length,i=Array(l),s=0;s<l;s++)i[s]=arguments[s];return n=r=(0,b.default)(this,(e=t.__proto__||(0,d.default)(t)).call.apply(e,[this].concat(i))),r.onSort=function(e){return function(){var t=e.key;if(t){var n=t!==r.props.sortKey?S.ASC:o(r.props.sortOrder);r.onSetPage(1),r.props.onSort({key:t,item:e,sortOrder:n})}}},r.onSetPage=function(e){return r.props.onSetPage(e)},a=n,(0,b.default)(r,a)}return(0,v.default)(t,e),(0,h.default)(t,[{key:"getSortedRows",value:function(){var e=this.props,t=e.head,n=e.rows,r=e.sortKey,o=e.sortOrder;if(!r||!t)return n;var a=function(e){return e.reduce(function(e,n,o){return e||t.cells[o].key===r&&(void 0!==n.key?n.key:n.content)},null)};return n.sort(function(e,t){var n=a(e.cells),r=a(t.cells),l=o===S.ASC?1:-1;return!n||n<r?-l:!r||n>r?l:0})}},{key:"renderCaption",value:function(){var e=this.props.caption;return e?m.default.createElement(w.Caption,null,e):null}},{key:"renderHead",value:function(){var e=this,t=this.props,n=t.head,r=t.sortKey,o=t.sortOrder;if(!n)return null;var a=n.cells,i=(0,s.default)(n,["cells"]);return m.default.createElement(w.TableHead,i,m.default.createElement("tr",null,a.map(function(t,n){var a=t.isSortable,i=t.key,u=t.content,d=(0,s.default)(t,["isSortable","key","content"]),p=e.props.isFixedSize;return m.default.createElement(w.TableHeadCell,(0,l.default)({key:i||n,onClick:a&&e.onSort(t),isFixedSize:p,isSortable:a,sortOrder:i===r&&o},d),m.default.createElement("span",null,u))})))}},{key:"renderBody",value:function(){var e=this,t=this.props,n=t.rowsPerPage,r=t.page,o=this.getSortedRows();return m.default.createElement("tbody",null,(o||[]).slice((r-1)*n,r*n).map(function(t,n){return e.renderBodyRow(t,n)}))}},{key:"renderBodyRow",value:function(e,t){var n=this.props,r=n.head,o=n.isFixedSize,a=e.cells,i=(0,s.default)(e,["cells"]);return m.default.createElement(w.TableBodyRow,(0,l.default)({key:t},i),a.map(function(e,t){var n=e.content,a=(0,s.default)(e,["content"]),i=(r||{cells:[]}).cells[t]||{},u=i.shouldTruncate,d=i.width;return m.default.createElement(w.TableBodyCell,(0,l.default)({},a,{key:t,width:d,shouldTruncate:u,isFixedSize:o}),n)}))}},{key:"render",value:function(){var e=this.props,t=e.rows,n=e.isFixedSize,r=e.rowsPerPage,o=e.emptyView,a=e.page,l=t?Math.ceil(t.length/r):0;return t&&t.length?m.default.createElement("div",null,m.default.createElement(w.Table,{isFixedSize:n},this.renderCaption(),this.renderHead(),this.renderBody()),l?m.default.createElement(x.Pagination,{current:a,total:l,onSetPage:this.onSetPage}):null):o}}]),t}(P.Component);k.propTypes=T.statelessPropTypes,k.defaultProps=T.statelessDefaultProps,t.default=k},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@atlaskit/pagination")},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ASC="ASC",t.DESC="DESC"},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t,n){if(void 0===e[t])return null;if(!(0,p.default)(e[t])&&e[t]!==1/0){var r="'"+t+"' should be an integer or an infinity, got "+e[t]+" instead";return(0,c.createError)(t,n,r)}return null}function a(e,t,n){for(var r=arguments.length,o=Array(r>3?r-3:0),a=3;a<r;a++)o[a-3]=arguments[a];var l=f.PropTypes.arrayOf(b).apply(void 0,[e,t,n].concat(o));if(l instanceof Error)return l;if(!e.head||!e.head.cells)return null;var i=e[t].reduce(function(t,n){return t&&n.length===e.head.cells.length},!0);return i?null:(0,c.createError)(t,n,"One of the rows has different cell-count compared to head.")}function l(e,t,n){for(var r=arguments.length,o=Array(r>3?r-3:0),a=3;a<r;a++)o[a-3]=arguments[a];var l=f.PropTypes.bool.apply(f.PropTypes,[e,t,n].concat(o));return l instanceof Error?l:e[t]&&!e.key?(0,c.createError)(t,n,"'"+t+"' can't be set to true, if the 'key' prop is missing."):null}function i(e,t,n){if(!e[t])return null;var r=e.head.cells.map(function(e){return e.key}).includes(e[t]);return r?null:(0,c.createError)(t,n,"Cell with "+e[t]+" key not found in head.")}Object.defineProperty(t,"__esModule",{value:!0}),t.statefulDefaultProps=t.statelessDefaultProps=t.statefulPropTypes=t.statelessPropTypes=void 0;var s=n(3),u=r(s),d=n(14),p=r(d),f=n(10),c=n(15),h=n(12);o.isRequired=!1;var y={key:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.string,f.PropTypes.bool]),content:f.PropTypes.node},b=f.PropTypes.shape(y);l.isRequired=!1;var g=(0,u.default)({},y,{isSortable:l,width:f.PropTypes.number,shouldTruncate:f.PropTypes.bool}),v=f.PropTypes.shape(g),P=f.PropTypes.shape({cells:f.PropTypes.arrayOf(v)}),m=f.PropTypes.arrayOf(f.PropTypes.shape({cells:a}));i.isRequired=!1;var x=f.PropTypes.node,S=f.PropTypes.oneOf([h.ASC,h.DESC]),T=f.PropTypes.bool,w=o,k=o,C=f.PropTypes.func,O=f.PropTypes.func,_=f.PropTypes.node,E={caption:x,head:P,rows:m,emptyView:_,isFixedSize:T,rowsPerPage:w,onSetPage:C,onSort:O},q={caption:null,head:null,rows:null,emptyView:null,isFixedSize:!1,rowsPerPage:1/0,onSetPage:function(){},onSort:function(){}};t.statelessPropTypes=(0,u.default)({},E,{page:k,sortKey:i,sortOrder:S}),t.statefulPropTypes=(0,u.default)({},E,{defaultPage:k,defaultSortKey:i,defaultSortOrder:S}),t.statelessDefaultProps=(0,u.default)({},q,{page:1,sortKey:null,sortOrder:null}),t.statefulDefaultProps=(0,u.default)({},q,{defaultPage:1,defaultSortKey:null,defaultSortOrder:null})},function(e,t){e.exports=require("babel-runtime/core-js/number/is-integer")},function(e,t){e.exports=require("@atlaskit/util-common")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TableBodyCell=t.TableBodyRow=t.TableHeadCell=t.TableHead=t.Caption=t.Table=void 0;var o=n(17),a=r(o),l=(0,a.default)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"]),i=(0,a.default)(["width: ","%;"],["width: ","%;"]),s=(0,a.default)(["overflow: hidden;"],["overflow: hidden;"]),u=(0,a.default)(["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  "],["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  "]),d=(0,a.default)(["\n  &:hover {\n    cursor: pointer;\n  }\n"],["\n  &:hover {\n    cursor: pointer;\n  }\n"]),p=(0,a.default)(["\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -","px;\n    border: 3px solid transparent;\n  "],["\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -","px;\n    border: 3px solid transparent;\n  "]),f=(0,a.default)(["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ","; \n          };\n        &:after {\n          ",";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ",";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ","; \n        }\n        &:after {\n          border-top: 3px solid ","; \n        }\n      }\n    "],["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ","; \n          };\n        &:after {\n          ",";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ",";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ","; \n        }\n        &:after {\n          border-top: 3px solid ","; \n        }\n      }\n    "]),c=(0,a.default)(["\n    padding: ","px ","px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"],["\n    padding: ","px ","px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"]),h=(0,a.default)(["\n  ",";\n  width: 100%;\n  border-collapse: collapse;\n"],["\n  ",";\n  width: 100%;\n  border-collapse: collapse;\n"]),y=(0,a.default)(["table-layout: fixed;"],["table-layout: fixed;"]),b=(0,a.default)(["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ","px;\n  margin-bottom: ","px;\n  text-align: left;\n"],["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ","px;\n  margin-bottom: ","px;\n  text-align: left;\n"]),g=(0,a.default)(["\n  border-bottom: 2px solid #DFE1E6;\n"],["\n  border-bottom: 2px solid #DFE1E6;\n"]),v=(0,a.default)(["\n  ","\n  ","\n  ","\n  ","\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ",";\n  fontWeight: 600;\n"],["\n  ","\n  ","\n  ","\n  ","\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ",";\n  fontWeight: 600;\n"]),P=(0,a.default)(["\n  ","\n  &:hover {\n    background: ",";\n  }\n"],["\n  ","\n  &:hover {\n    background: ",";\n  }\n"]),m=(0,a.default)(["\n  ","\n  ","\n  ","  \n"],["\n  ","\n  ","\n  ","  \n"]),x=n(18),S=r(x),T=n(19),w=n(12),k=parseInt(T.akGridSize,10),C=k/2,O=function(e){var t=e.width,n=e.isFixedSize,r=e.shouldTruncate;return(0,x.css)(l,t?(0,x.css)(i,t):"",n?(0,x.css)(s):"",n&&r?(0,x.css)(u):"")},_=function(e){var t=e.onClick;return t&&(0,x.css)(d)},E=function(e){var t=e.isSortable,n=e.sortOrder;if(!t)return"";var r=(0,x.css)(p,k);return(0,x.css)(f,r,n===w.ASC?T.akColorN300:T.akColorN40,r,n===w.DESC?T.akColorN300:T.akColorN40,n===w.ASC?T.akColorN300:T.akColorN60,n===w.DESC?T.akColorN300:T.akColorN60)},q=(0,x.css)(c,C,k);t.Table=S.default.table(h,function(e){var t=e.isFixedSize;return t&&(0,x.css)(y)}),t.Caption=S.default.caption(b,7*C,k),t.TableHead=S.default.thead(g),t.TableHeadCell=S.default.th(v,function(e){return _(e)},function(e){return O(e)},function(e){return E(e)},function(){return q},T.akColorN300),t.TableBodyRow=S.default.tr(P,function(e){return _(e)},T.akColorN10),t.TableBodyCell=S.default.td(m,function(e){return _(e)},function(e){return O(e)},function(){return q})},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@atlaskit/util-shared-styles")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(5),a=r(o),l=n(6),i=r(l),s=n(7),u=r(s),d=n(8),p=r(d),f=n(9),c=r(f),h=n(10),y=r(h),b=n(2),g=r(b),v=n(13),P=function(e){function t(){var e,n,r,o;(0,i.default)(this,t);for(var l=arguments.length,s=Array(l),u=0;u<l;u++)s[u]=arguments[u];return n=r=(0,p.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(s))),r.state={page:r.props.defaultPage,sortKey:r.props.defaultSortKey,sortOrder:r.props.defaultSortOrder},r.onSetPage=function(e){r.props.onSetPage(e),r.setState({page:e})},r.onSort=function(e){var t=e.key,n=e.item,o=e.sortOrder;r.props.onSort({key:t,item:n,sortOrder:o}),r.setState({sortKey:t,sortOrder:o,page:1})},o=n,(0,p.default)(r,o)}return(0,c.default)(t,e),(0,u.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.setState({page:e.page,sortKey:e.defaultSortKey,sortOrder:e.defaultSortOrder})}},{key:"render",value:function(){return y.default.createElement(g.default,{caption:this.props.caption,head:this.props.head,rows:this.props.rows,emptyView:this.props.emptyView,isFixedSize:this.props.isFixedSize,rowsPerPage:this.props.rowsPerPage,onSetPage:this.onSetPage,onSort:this.onSort,page:this.state.page,sortKey:this.state.sortKey,sortOrder:this.state.sortOrder})}}]),t}(h.PureComponent);P.propTypes=v.statefulPropTypes,P.defaultProps=v.statefulDefaultProps,t.default=P}]);
+module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.DynamicTableStateless=t.default=void 0;var o=n(2);Object.defineProperty(t,"DynamicTableStateless",{enumerable:!0,get:function(){return r(o).default}});var l=n(26),a=r(l);t.default=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){switch(e){case g.DESC:return g.ASC;case g.ASC:return g.DESC;default:return e}}Object.defineProperty(t,"__esModule",{value:!0});var l=n(3),a=r(l),i=n(4),u=r(i),s=n(5),d=r(s),f=n(6),p=r(f),c=n(7),y=r(c),h=n(8),b=r(h),S=n(9),g=n(10),v=n(11),P=r(v),x=n(15),m=r(x),w=n(22),C=r(w),_=n(25),T=function(e){function t(){var e,n,r,l;(0,u.default)(this,t);for(var i=arguments.length,s=Array(i),d=0;d<i;d++)s[d]=arguments[d];return n=r=(0,p.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(s))),r.onSort=function(e){return function(){var t=r.props,n=t.sortKey,l=t.sortOrder,a=t.onSort,i=e.key;if(i){var u=i!==n?g.ASC:o(l);r.onSetPage(1),a({key:i,item:e,sortOrder:u})}}},r.onSetPage=function(e){return r.props.onSetPage(e)},l=n,(0,p.default)(r,l)}return(0,y.default)(t,e),(0,d.default)(t,[{key:"render",value:function(){var e=this.props,t=e.caption,n=e.emptyView,r=e.head,o=e.isFixedSize,l=e.page,a=e.rows,i=e.rowsPerPage,u=e.sortKey,s=e.sortOrder,d=a?Math.ceil(a.length/i):0,f={rows:a,head:r,sortKey:u,sortOrder:s,rowsPerPage:i,page:l,isFixedSize:o};return a&&a.length?b.default.createElement("div",null,b.default.createElement(_.Table,{isFixedSize:o},!!t&&b.default.createElement(_.Caption,null,t),b.default.createElement(m.default,{head:r,onSort:this.onSort,sortKey:u,sortOrder:s}),b.default.createElement(C.default,f)),d?b.default.createElement(S.Pagination,{current:l,onSetPage:this.onSetPage,total:d}):null):n}}]),t}(h.Component);T.propTypes={caption:h.PropTypes.node,head:P.default.head,rows:P.default.rows,emptyView:h.PropTypes.node,isFixedSize:h.PropTypes.bool,rowsPerPage:P.default.isInteger,onSetPage:h.PropTypes.func,onSort:h.PropTypes.func,page:P.default.isInteger,sortKey:P.default.sortKey,sortOrder:h.PropTypes.oneOf([g.ASC,g.DESC])},T.defaultProps={caption:null,head:null,rows:null,emptyView:null,isFixedSize:!1,rowsPerPage:1/0,onSetPage:function(){},onSort:function(){},page:1,sortKey:null,sortOrder:null},t.default=T},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@atlaskit/pagination")},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ASC="ASC",t.DESC="DESC"},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t,n){if(void 0===e[t])return null;if(!(0,f.default)(e[t])&&e[t]!==1/0){var r="'"+t+"' should be an integer or an infinity, got "+e[t]+" instead";return(0,c.createError)(t,n,r)}return null}function l(e,t,n){for(var r=arguments.length,o=Array(r>3?r-3:0),l=3;l<r;l++)o[l-3]=arguments[l];var a=p.PropTypes.arrayOf(h).apply(void 0,[e,t,n].concat(o));if(a instanceof Error)return a;if(!e.head||!e.head.cells)return null;var i=e[t].reduce(function(t,n){return t&&n.length===e.head.cells.length},!0);return i?null:(0,c.createError)(t,n,"One of the rows has different cell-count compared to head.")}function a(e,t,n){for(var r=arguments.length,o=Array(r>3?r-3:0),l=3;l<r;l++)o[l-3]=arguments[l];var a=p.PropTypes.bool.apply(p.PropTypes,[e,t,n].concat(o));return a instanceof Error?a:e[t]&&!e.key?(0,c.createError)(t,n,"'"+t+"' can't be set to true, if the 'key' prop is missing."):null}function i(e,t,n){if(!e[t])return null;var r=e.head.cells.map(function(e){return e.key}).includes(e[t]);return r?null:(0,c.createError)(t,n,"Cell with "+e[t]+" key not found in head.")}Object.defineProperty(t,"__esModule",{value:!0});var u=n(12),s=r(u),d=n(13),f=r(d),p=n(8),c=n(14);o.isRequired=!1;var y={key:p.PropTypes.oneOfType([p.PropTypes.number,p.PropTypes.string,p.PropTypes.bool]),content:p.PropTypes.node},h=p.PropTypes.shape(y);a.isRequired=!1;var b=(0,s.default)({},y,{isSortable:a,width:p.PropTypes.number,shouldTruncate:p.PropTypes.bool}),S=p.PropTypes.shape(b),g=p.PropTypes.shape({cells:p.PropTypes.arrayOf(S)}),v=p.PropTypes.shape({cells:l}),P=p.PropTypes.arrayOf(v);i.isRequired=!1,t.default={head:g,isInteger:o,row:v,rows:P,sortKey:i}},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("babel-runtime/core-js/number/is-integer")},function(e,t){e.exports=require("@atlaskit/util-common")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(12),l=r(o),a=n(16),i=r(a),u=n(8),s=r(u),d=n(10),f=n(17),p=n(11),c=r(p),y=function(e){var t=e.head,n=e.sortKey,r=e.sortOrder,o=e.isFixedSize,a=e.onSort;if(!t)return null;var u=t.cells,d=(0,i.default)(t,["cells"]);return s.default.createElement(f.Head,d,s.default.createElement("tr",null,u.map(function(e,t){var u=e.isSortable,d=e.key,p=e.content,c=(0,i.default)(e,["isSortable","key","content"]);return s.default.createElement(f.HeadCell,(0,l.default)({key:d||t,onClick:u&&a(e),isFixedSize:o,isSortable:u,sortOrder:d===n&&r},c),s.default.createElement("span",null,p))})))};y.propTypes={onSort:u.PropTypes.func,head:c.default.head,sortKey:c.default.sortKey,sortOrder:u.PropTypes.oneOf([d.ASC,d.DESC]),isFixedSize:u.PropTypes.bool},t.default=y},function(e,t){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.HeadCell=t.Head=void 0;var o=n(18),l=r(o),a=(0,l.default)(["\n  border-bottom: 2px solid #DFE1E6;\n"],["\n  border-bottom: 2px solid #DFE1E6;\n"]),i=(0,l.default)(["\n  ","\n  ","\n  ","\n  ","\n  border: none;\n  color: ",";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n"],["\n  ","\n  ","\n  ","\n  ","\n  border: none;\n  color: ",";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n"]),u=n(19),s=r(u),d=n(20),f=n(21);t.Head=s.default.thead(a),t.HeadCell=s.default.th(i,function(e){return(0,f.onClickStyle)(e)},function(e){return(0,f.truncateStyle)(e)},function(e){return(0,f.arrowsStyle)(e)},f.cellStyle,d.akColorN300)},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@atlaskit/util-shared-styles")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.cellStyle=t.arrowsStyle=t.onClickStyle=t.truncateStyle=t.baselineUnit=t.gridUnit=void 0;var o=n(18),l=r(o),a=(0,l.default)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"]),i=(0,l.default)(["width: ","%;"],["width: ","%;"]),u=(0,l.default)(["overflow: hidden;"],["overflow: hidden;"]),s=(0,l.default)(["\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "],["\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]),d=(0,l.default)(["\n  &:hover {\n    cursor: pointer;\n  }\n"],["\n  &:hover {\n    cursor: pointer;\n  }\n"]),f=(0,l.default)(["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -","px;\n    width: 0;\n  "],["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -","px;\n    width: 0;\n  "]),p=(0,l.default)(["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            border-bottom: 3px solid ",";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ",";\n          border-top: 3px solid ",";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ",";\n        }\n        &:after {\n          border-top: 3px solid ",";\n        }\n      }\n    "],["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            border-bottom: 3px solid ",";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ",";\n          border-top: 3px solid ",";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ",";\n        }\n        &:after {\n          border-top: 3px solid ",";\n        }\n      }\n    "]),c=(0,l.default)(["\n    border: none;\n    padding: ","px ","px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"],["\n    border: none;\n    padding: ","px ","px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"]),y=n(19),h=n(20),b=n(10),S=t.gridUnit=parseInt(h.akGridSize,10),g=t.baselineUnit=S/2;t.truncateStyle=function(e){var t=e.width,n=e.isFixedSize,r=e.shouldTruncate;return(0,y.css)(a,t?(0,y.css)(i,t):"",n?(0,y.css)(u):"",n&&r?(0,y.css)(s):"")},t.onClickStyle=function(e){var t=e.onClick;return t&&(0,y.css)(d)},t.arrowsStyle=function(e){var t=e.isSortable,n=e.sortOrder;if(!t)return"";var r=(0,y.css)(f,S);return(0,y.css)(p,r,n===b.ASC?h.akColorN300:h.akColorN40,r,n===b.DESC?h.akColorN300:h.akColorN40,n===b.ASC?h.akColorN300:h.akColorN60,n===b.DESC?h.akColorN300:h.akColorN60)},t.cellStyle=(0,y.css)(c,g,S)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(8),l=r(o),a=n(10),i=n(23),u=r(i),s=n(11),d=r(s),f=function(e,t,n,r){if(!n||!e)return t;var o=function(t){return t.reduce(function(t,r,o){return t||e.cells[o].key===n&&(void 0!==r.key?r.key:r.content)},null)};return t.sort(function(e,t){var n=o(e.cells),l=o(t.cells),i=r===a.ASC?1:-1;return!n||n<l?-i:!l||n>l?i:0})},p=function(e){var t=e.rows,n=e.head,r=e.sortKey,o=e.sortOrder,a=e.rowsPerPage,i=e.page,s=e.isFixedSize,d=f(n,t,r,o)||[];return l.default.createElement("tbody",null,d.slice((i-1)*a,i*a).map(function(e,t){return l.default.createElement(u.default,{row:e,rowIndex:t,head:n,isFixedSize:s})}))};p.propTypes={head:d.default.head,rows:d.default.rows,sortKey:d.default.sortKey,sortOrder:o.PropTypes.oneOf([a.ASC,a.DESC]),rowsPerPage:d.default.isInteger,page:d.default.isInteger,isFixedSize:o.PropTypes.bool},t.default=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(12),l=r(o),a=n(16),i=r(a),u=n(8),s=r(u),d=n(24),f=n(11),p=r(f),c=function(e){var t=e.row,n=e.rowIndex,r=e.head,o=e.isFixedSize,a=t.cells,u=(0,i.default)(t,["cells"]);return s.default.createElement(d.TableBodyRow,(0,l.default)({key:n},u),a.map(function(e,t){var n=e.content,a=(0,i.default)(e,["content"]),u=(r||{cells:[]}).cells[t]||{},f=u.shouldTruncate,p=u.width;return s.default.createElement(d.TableBodyCell,(0,l.default)({},a,{key:t,width:p,shouldTruncate:f,isFixedSize:o}),n)}))};c.propTypes={row:p.default.row,rowIndex:u.PropTypes.number,head:p.default.head,isFixedSize:u.PropTypes.bool},t.default=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TableBodyCell=t.TableBodyRow=void 0;var o=n(18),l=r(o),a=(0,l.default)(["\n  ","\n  &:hover {\n    background: ",";\n  }\n"],["\n  ","\n  &:hover {\n    background: ",";\n  }\n"]),i=(0,l.default)(["\n  ","\n  ","\n  ","\n"],["\n  ","\n  ","\n  ","\n"]),u=n(19),s=r(u),d=n(20),f=n(21);t.TableBodyRow=s.default.tr(a,function(e){return(0,f.onClickStyle)(e)},d.akColorN10),t.TableBodyCell=s.default.td(i,function(e){return(0,f.onClickStyle)(e)},function(e){return(0,f.truncateStyle)(e)},f.cellStyle)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Caption=t.Table=void 0;var o=n(18),l=r(o),a=(0,l.default)(["\n  ",";\n  border-collapse: collapse;\n  width: 100%;\n"],["\n  ",";\n  border-collapse: collapse;\n  width: 100%;\n"]),i=(0,l.default)(["table-layout: fixed;"],["table-layout: fixed;"]),u=(0,l.default)(["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ","px;\n  margin-top: ","px;\n  text-align: left;\n"],["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ","px;\n  margin-top: ","px;\n  text-align: left;\n"]),s=n(19),d=r(s),f=n(21);t.Table=d.default.table(a,function(e){var t=e.isFixedSize;return t&&(0,s.css)(i)}),t.Caption=d.default.caption(u,f.gridUnit,7*f.baselineUnit)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),l=r(o),a=n(4),i=r(a),u=n(5),s=r(u),d=n(6),f=r(d),p=n(7),c=r(p),y=n(8),h=r(y),b=n(2),S=r(b),g=n(11),v=r(g),P=n(10),x=function(e){function t(){var e,n,r,o;(0,i.default)(this,t);for(var a=arguments.length,u=Array(a),s=0;s<a;s++)u[s]=arguments[s];return n=r=(0,f.default)(this,(e=t.__proto__||(0,l.default)(t)).call.apply(e,[this].concat(u))),r.state={page:r.props.defaultPage,sortKey:r.props.defaultSortKey,sortOrder:r.props.defaultSortOrder},r.onSetPage=function(e){r.props.onSetPage(e),r.setState({page:e})},r.onSort=function(e){var t=e.key,n=e.item,o=e.sortOrder;r.props.onSort({key:t,item:n,sortOrder:o}),r.setState({sortKey:t,sortOrder:o,page:1})},o=n,(0,f.default)(r,o)}return(0,c.default)(t,e),(0,s.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.setState({page:e.page,sortKey:e.defaultSortKey,sortOrder:e.defaultSortOrder})}},{key:"render",value:function(){var e=this.props,t=e.caption,n=e.emptyView,r=e.head,o=e.isFixedSize,l=e.rows,a=e.rowsPerPage,i=this.state,u=i.page,s=i.sortKey,d=i.sortOrder;return h.default.createElement(S.default,{caption:t,emptyView:n,head:r,isFixedSize:o,onSetPage:this.onSetPage,onSort:this.onSort,page:u,rows:l,rowsPerPage:a,sortKey:s,sortOrder:d})}}]),t}(y.PureComponent);x.propTypes={defaultPage:v.default.isInteger,defaultSortKey:v.default.sortKey,defaultSortOrder:y.PropTypes.oneOf([P.ASC,P.DESC])},x.defaultProps={caption:null,defaultPage:1,defaultSortKey:null,defaultSortOrder:null,emptyView:null,head:null,isFixedSize:!1,onSetPage:function(){},onSort:function(){},rows:null,rowsPerPage:1/0},t.default=x}]);

dist/bundle.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/pagination"), require("babel-runtime/core-js/number/is-integer"), require("@atlaskit/util-common"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/extends", "babel-runtime/helpers/objectWithoutProperties", "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "@atlaskit/pagination", "babel-runtime/core-js/number/is-integer", "@atlaskit/util-common", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles" ], factory) : "object" == typeof exports ? exports["@atlaskit/dynamicTable"] = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/pagination"), require("babel-runtime/core-js/number/is-integer"), require("@atlaskit/util-common"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : root["@atlaskit/dynamicTable"] = factory(root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/objectWithoutProperties"], root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["@atlaskit/pagination"], root["babel-runtime/core-js/number/is-integer"], root["@atlaskit/util-common"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"]);
-}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_15__, __WEBPACK_EXTERNAL_MODULE_17__, __WEBPACK_EXTERNAL_MODULE_18__, __WEBPACK_EXTERNAL_MODULE_19__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/pagination"), require("babel-runtime/helpers/extends"), require("babel-runtime/core-js/number/is-integer"), require("@atlaskit/util-common"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : "function" == typeof define && define.amd ? define([ "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "@atlaskit/pagination", "babel-runtime/helpers/extends", "babel-runtime/core-js/number/is-integer", "@atlaskit/util-common", "babel-runtime/helpers/objectWithoutProperties", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles" ], factory) : "object" == typeof exports ? exports["@atlaskit/dynamicTable"] = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/pagination"), require("babel-runtime/helpers/extends"), require("babel-runtime/core-js/number/is-integer"), require("@atlaskit/util-common"), require("babel-runtime/helpers/objectWithoutProperties"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles")) : root["@atlaskit/dynamicTable"] = factory(root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["@atlaskit/pagination"], root["babel-runtime/helpers/extends"], root["babel-runtime/core-js/number/is-integer"], root["@atlaskit/util-common"], root["babel-runtime/helpers/objectWithoutProperties"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"]);
+}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_16__, __WEBPACK_EXTERNAL_MODULE_18__, __WEBPACK_EXTERNAL_MODULE_19__, __WEBPACK_EXTERNAL_MODULE_20__) {
     /******/
@@ -83,12 +83,12 @@ return function(modules) {
             value: !0
-        }), exports.DynamicTable = exports.default = void 0;
-        var _stateless = __webpack_require__(2);
-        Object.defineProperty(exports, "DynamicTable", {
+        }), exports.DynamicTableStateless = exports.default = void 0;
+        var _Stateless = __webpack_require__(2);
+        Object.defineProperty(exports, "DynamicTableStateless", {
             enumerable: !0,
             get: function() {
-                return _interopRequireDefault(_stateless).default;
+                return _interopRequireDefault(_Stateless).default;
             }
         });
-        var _stateful = __webpack_require__(20), _stateful2 = _interopRequireDefault(_stateful);
-        exports.default = _stateful2.default;
+        var _Stateful = __webpack_require__(26), _Stateful2 = _interopRequireDefault(_Stateful);
+        exports.default = _Stateful2.default;
     }, /* 2 */
@@ -118,3 +118,3 @@ /***/
         });
-        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(4), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(5), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(6), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(7), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(8), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(9), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _pagination = __webpack_require__(11), _constants = __webpack_require__(12), _props6 = __webpack_require__(13), _styled = __webpack_require__(16), DynamicTable = function(_Component) {
+        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _pagination = __webpack_require__(9), _constants = __webpack_require__(10), _props2 = __webpack_require__(11), _props3 = _interopRequireDefault(_props2), _TableHead = __webpack_require__(15), _TableHead2 = _interopRequireDefault(_TableHead), _Body = __webpack_require__(22), _Body2 = _interopRequireDefault(_Body), _DynamicTable = __webpack_require__(25), DynamicTable = function(_Component) {
             function DynamicTable() {
@@ -128,9 +128,9 @@ var _ref, _temp, _this, _ret;
                     return function() {
-                        var key = item.key;
+                        var _this$props = _this.props, sortKey = _this$props.sortKey, sortOrder = _this$props.sortOrder, onSort = _this$props.onSort, key = item.key;
                         if (key) {
-                            var sortOrder = key !== _this.props.sortKey ? _constants.ASC : toggleSortOrder(_this.props.sortOrder);
-                            _this.onSetPage(1), _this.props.onSort({
+                            var sortOrderFormatted = key !== sortKey ? _constants.ASC : toggleSortOrder(sortOrder);
+                            _this.onSetPage(1), onSort({
                                 key: key,
                                 item: item,
-                                sortOrder: sortOrder
+                                sortOrder: sortOrderFormatted
                             });
@@ -144,77 +144,24 @@ }
             return (0, _inherits3.default)(DynamicTable, _Component), (0, _createClass3.default)(DynamicTable, [ {
-                key: "getSortedRows",
-                value: function() {
-                    var _props = this.props, head = _props.head, rows = _props.rows, sortKey = _props.sortKey, sortOrder = _props.sortOrder;
-                    if (!sortKey || !head) return rows;
-                    var getSortingCellValue = function(cells) {
-                        return cells.reduce(function(result, cell, index) {
-                            return result || head.cells[index].key === sortKey && (void 0 !== cell.key ? cell.key : cell.content);
-                        }, null);
-                    };
-                    return rows.sort(function(a, b) {
-                        var valA = getSortingCellValue(a.cells), valB = getSortingCellValue(b.cells), modifier = sortOrder === _constants.ASC ? 1 : -1;
-                        return !valA || valA < valB ? -modifier : !valB || valA > valB ? modifier : 0;
-                    });
-                }
-            }, {
-                key: "renderCaption",
-                value: function() {
-                    var caption = this.props.caption;
-                    return caption ? _react2.default.createElement(_styled.Caption, null, caption) : null;
-                }
-            }, {
-                key: "renderHead",
-                value: function() {
-                    var _this2 = this, _props2 = this.props, head = _props2.head, sortKey = _props2.sortKey, sortOrder = _props2.sortOrder;
-                    if (!head) return null;
-                    var cells = head.cells, rest = (0, _objectWithoutProperties3.default)(head, [ "cells" ]);
-                    return _react2.default.createElement(_styled.TableHead, rest, _react2.default.createElement("tr", null, cells.map(function(cell, index) {
-                        var isSortable = cell.isSortable, key = cell.key, content = cell.content, restCellProps = (0, 
-                        _objectWithoutProperties3.default)(cell, [ "isSortable", "key", "content" ]), isFixedSize = _this2.props.isFixedSize;
-                        return _react2.default.createElement(_styled.TableHeadCell, (0, _extends3.default)({
-                            key: key || index,
-                            onClick: isSortable && _this2.onSort(cell),
-                            isFixedSize: isFixedSize,
-                            isSortable: isSortable,
-                            sortOrder: key === sortKey && sortOrder
-                        }, restCellProps), _react2.default.createElement("span", null, content));
-                    })));
-                }
-            }, {
-                key: "renderBody",
-                value: function() {
-                    var _this3 = this, _props3 = this.props, rowsPerPage = _props3.rowsPerPage, page = _props3.page, rows = this.getSortedRows();
-                    return _react2.default.createElement("tbody", null, (rows || []).slice((page - 1) * rowsPerPage, page * rowsPerPage).map(function(row, rowIndex) {
-                        return _this3.renderBodyRow(row, rowIndex);
-                    }));
-                }
-            }, {
-                key: "renderBodyRow",
-                value: function(row, rowIndex) {
-                    var _props4 = this.props, head = _props4.head, isFixedSize = _props4.isFixedSize, cells = row.cells, restRowProps = (0, 
-                    _objectWithoutProperties3.default)(row, [ "cells" ]);
-                    return _react2.default.createElement(_styled.TableBodyRow, (0, _extends3.default)({
-                        key: rowIndex
-                    }, restRowProps), cells.map(function(cell, cellIndex) {
-                        var content = cell.content, restCellProps = (0, _objectWithoutProperties3.default)(cell, [ "content" ]), _ref2 = (head || {
-                            cells: []
-                        }).cells[cellIndex] || {}, shouldTruncate = _ref2.shouldTruncate, width = _ref2.width;
-                        return _react2.default.createElement(_styled.TableBodyCell, (0, _extends3.default)({}, restCellProps, {
-                            key: cellIndex,
-                            width: width,
-                            shouldTruncate: shouldTruncate,
-                            isFixedSize: isFixedSize
-                        }), content);
-                    }));
-                }
-            }, {
                 key: "render",
                 value: function() {
-                    var _props5 = this.props, rows = _props5.rows, isFixedSize = _props5.isFixedSize, rowsPerPage = _props5.rowsPerPage, emptyView = _props5.emptyView, page = _props5.page, totalPages = rows ? Math.ceil(rows.length / rowsPerPage) : 0;
-                    return rows && rows.length ? _react2.default.createElement("div", null, _react2.default.createElement(_styled.Table, {
+                    var _props = this.props, caption = _props.caption, emptyView = _props.emptyView, head = _props.head, isFixedSize = _props.isFixedSize, page = _props.page, rows = _props.rows, rowsPerPage = _props.rowsPerPage, sortKey = _props.sortKey, sortOrder = _props.sortOrder, totalPages = rows ? Math.ceil(rows.length / rowsPerPage) : 0, bodyProps = {
+                        rows: rows,
+                        head: head,
+                        sortKey: sortKey,
+                        sortOrder: sortOrder,
+                        rowsPerPage: rowsPerPage,
+                        page: page,
                         isFixedSize: isFixedSize
-                    }, this.renderCaption(), this.renderHead(), this.renderBody()), totalPages ? _react2.default.createElement(_pagination.Pagination, {
+                    };
+                    return rows && rows.length ? _react2.default.createElement("div", null, _react2.default.createElement(_DynamicTable.Table, {
+                        isFixedSize: isFixedSize
+                    }, !!caption && _react2.default.createElement(_DynamicTable.Caption, null, caption), _react2.default.createElement(_TableHead2.default, {
+                        head: head,
+                        onSort: this.onSort,
+                        sortKey: sortKey,
+                        sortOrder: sortOrder
+                    }), _react2.default.createElement(_Body2.default, bodyProps)), totalPages ? _react2.default.createElement(_pagination.Pagination, {
                         current: page,
-                        total: totalPages,
-                        onSetPage: this.onSetPage
+                        onSetPage: this.onSetPage,
+                        total: totalPages
                     }) : null) : emptyView;
@@ -224,4 +171,27 @@ }
         }(_react.Component);
-        DynamicTable.propTypes = _props6.statelessPropTypes, DynamicTable.defaultProps = _props6.statelessDefaultProps, 
-        exports.default = DynamicTable;
+        DynamicTable.propTypes = {
+            caption: _react.PropTypes.node,
+            head: _props3.default.head,
+            rows: _props3.default.rows,
+            emptyView: _react.PropTypes.node,
+            isFixedSize: _react.PropTypes.bool,
+            rowsPerPage: _props3.default.isInteger,
+            onSetPage: _react.PropTypes.func,
+            onSort: _react.PropTypes.func,
+            page: _props3.default.isInteger,
+            sortKey: _props3.default.sortKey,
+            sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ])
+        }, DynamicTable.defaultProps = {
+            caption: null,
+            head: null,
+            rows: null,
+            emptyView: null,
+            isFixedSize: !1,
+            rowsPerPage: 1 / 0,
+            onSetPage: function() {},
+            onSort: function() {},
+            page: 1,
+            sortKey: null,
+            sortOrder: null
+        }, exports.default = DynamicTable;
     }, /* 3 */
@@ -258,10 +228,2 @@ /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
-    }, /* 11 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
-    }, /* 12 */
-    /***/
-    function(module, exports) {
         "use strict";
@@ -272,3 +234,3 @@ Object.defineProperty(exports, "__esModule", {
         exports.ASC = "ASC", exports.DESC = "DESC";
-    }, /* 13 */
+    }, /* 11 */
     /***/
@@ -315,4 +277,4 @@ function(module, exports, __webpack_require__) {
             value: !0
-        }), exports.statefulDefaultProps = exports.statelessDefaultProps = exports.statefulPropTypes = exports.statelessPropTypes = void 0;
-        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _isInteger = __webpack_require__(14), _isInteger2 = _interopRequireDefault(_isInteger), _react = __webpack_require__(10), _utilCommon = __webpack_require__(15), _constants = __webpack_require__(12);
+        });
+        var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _isInteger = __webpack_require__(13), _isInteger2 = _interopRequireDefault(_isInteger), _react = __webpack_require__(8), _utilCommon = __webpack_require__(14);
         isInteger.isRequired = !1;
@@ -330,42 +292,22 @@ var rowCellObject = {
             cells: _react.PropTypes.arrayOf(headCell)
-        }), rows = _react.PropTypes.arrayOf(_react.PropTypes.shape({
+        }), row = _react.PropTypes.shape({
             cells: rowCells
-        }));
-        sortKey.isRequired = !1;
-        var caption = _react.PropTypes.node, sortOrder = _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]), isFixedSize = _react.PropTypes.bool, rowsPerPage = isInteger, page = isInteger, onSetPage = _react.PropTypes.func, onSort = _react.PropTypes.func, emptyView = _react.PropTypes.node, commonPropTypes = {
-            caption: caption,
+        }), rows = _react.PropTypes.arrayOf(row);
+        sortKey.isRequired = !1, // As the files we are going to use these in also have const declarations for the
+        // props, here we are exporting them as an object for ease of use.
+        exports.default = {
             head: head,
+            isInteger: isInteger,
+            row: row,
             rows: rows,
-            emptyView: emptyView,
-            isFixedSize: isFixedSize,
-            rowsPerPage: rowsPerPage,
-            onSetPage: onSetPage,
-            onSort: onSort
-        }, commonDefaultProps = {
-            caption: null,
-            head: null,
-            rows: null,
-            emptyView: null,
-            isFixedSize: !1,
-            rowsPerPage: 1 / 0,
-            onSetPage: function() {},
-            onSort: function() {}
+            sortKey: sortKey
         };
-        exports.statelessPropTypes = (0, _extends3.default)({}, commonPropTypes, {
-            page: page,
-            sortKey: sortKey,
-            sortOrder: sortOrder
-        }), exports.statefulPropTypes = (0, _extends3.default)({}, commonPropTypes, {
-            defaultPage: page,
-            defaultSortKey: sortKey,
-            defaultSortOrder: sortOrder
-        }), exports.statelessDefaultProps = (0, _extends3.default)({}, commonDefaultProps, {
-            page: 1,
-            sortKey: null,
-            sortOrder: null
-        }), exports.statefulDefaultProps = (0, _extends3.default)({}, commonDefaultProps, {
-            defaultPage: 1,
-            defaultSortKey: null,
-            defaultSortOrder: null
-        });
+    }, /* 12 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
+    }, /* 13 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
     }, /* 14 */
@@ -377,6 +319,41 @@ /***/
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_15__;
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(16), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _constants = __webpack_require__(10), _TableHead = __webpack_require__(17), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), TableHead = function(_ref) {
+            var head = _ref.head, sortKey = _ref.sortKey, sortOrder = _ref.sortOrder, isFixedSize = _ref.isFixedSize, onSort = _ref.onSort;
+            if (!head) return null;
+            var cells = head.cells, rest = (0, _objectWithoutProperties3.default)(head, [ "cells" ]);
+            return _react2.default.createElement(_TableHead.Head, rest, _react2.default.createElement("tr", null, cells.map(function(cell, index) {
+                var isSortable = cell.isSortable, key = cell.key, content = cell.content, restCellProps = (0, 
+                _objectWithoutProperties3.default)(cell, [ "isSortable", "key", "content" ]);
+                return _react2.default.createElement(_TableHead.HeadCell, (0, _extends3.default)({
+                    key: key || index,
+                    onClick: isSortable && onSort(cell),
+                    isFixedSize: isFixedSize,
+                    isSortable: isSortable,
+                    sortOrder: key === sortKey && sortOrder
+                }, restCellProps), _react2.default.createElement("span", null, content));
+            })));
+        };
+        TableHead.propTypes = {
+            onSort: _react.PropTypes.func,
+            head: _props2.default.head,
+            sortKey: _props2.default.sortKey,
+            sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]),
+            isFixedSize: _react.PropTypes.bool
+        }, exports.default = TableHead;
     }, /* 16 */
     /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
+    }, /* 17 */
+    /***/
     function(module, exports, __webpack_require__) {
@@ -391,19 +368,47 @@ "use strict";
             value: !0
-        }), exports.TableBodyCell = exports.TableBodyRow = exports.TableHeadCell = exports.TableHead = exports.Caption = exports.Table = void 0;
-        var _taggedTemplateLiteral2 = __webpack_require__(17), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        }), exports.HeadCell = exports.Head = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  border-bottom: 2px solid #DFE1E6;\n" ], [ "\n  border-bottom: 2px solid #DFE1E6;\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n  ", "\n  border: none;\n  color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n" ], [ "\n  ", "\n  ", "\n  ", "\n  ", "\n  border: none;\n  color: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(21);
+        exports.Head = _styledComponents2.default.thead(_templateObject), exports.HeadCell = _styledComponents2.default.th(_templateObject2, function(props) {
+            return (0, _constants.onClickStyle)(props);
+        }, function(props) {
+            return (0, _constants.truncateStyle)(props);
+        }, function(props) {
+            return (0, _constants.arrowsStyle)(props);
+        }, _constants.cellStyle, _utilSharedStyles.akColorN300);
+    }, /* 18 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
+    }, /* 19 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_19__;
+    }, /* 20 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_20__;
+    }, /* 21 */
+    /***/
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.cellStyle = exports.arrowsStyle = exports.onClickStyle = exports.truncateStyle = exports.baselineUnit = exports.gridUnit = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
         _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", ";\n  ", "\n" ], [ "\n  ", "\n  ", ";\n  ", "\n" ]), _templateObject2 = (0, 
         _taggedTemplateLiteral3.default)([ "width: ", "%;" ], [ "width: ", "%;" ]), _templateObject3 = (0, 
         _taggedTemplateLiteral3.default)([ "overflow: hidden;" ], [ "overflow: hidden;" ]), _templateObject4 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  " ], [ "\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  " ]), _templateObject5 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  " ], [ "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  " ]), _templateObject5 = (0, 
         _taggedTemplateLiteral3.default)([ "\n  &:hover {\n    cursor: pointer;\n  }\n" ], [ "\n  &:hover {\n    cursor: pointer;\n  }\n" ]), _templateObject6 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -", "px;\n    border: 3px solid transparent;\n  " ], [ "\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -", "px;\n    border: 3px solid transparent;\n  " ]), _templateObject7 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ", "; \n          };\n        &:after {\n          ", ";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ", ";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", "; \n        }\n        &:after {\n          border-top: 3px solid ", "; \n        }\n      }\n    " ], [ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ", "; \n          };\n        &:after {\n          ", ";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ", ";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", "; \n        }\n        &:after {\n          border-top: 3px solid ", "; \n        }\n      }\n    " ]), _templateObject8 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n    padding: ", "px ", "px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ], [ "\n    padding: ", "px ", "px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ]), _templateObject9 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n" ], [ "\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n" ]), _templateObject10 = (0, 
-        _taggedTemplateLiteral3.default)([ "table-layout: fixed;" ], [ "table-layout: fixed;" ]), _templateObject11 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: left;\n" ], [ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: left;\n" ]), _templateObject12 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  border-bottom: 2px solid #DFE1E6;\n" ], [ "\n  border-bottom: 2px solid #DFE1E6;\n" ]), _templateObject13 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n  ", "\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ", ";\n  fontWeight: 600;\n" ], [ "\n  ", "\n  ", "\n  ", "\n  ", "\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ", ";\n  fontWeight: 600;\n" ]), _templateObject14 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ], [ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ]), _templateObject15 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "  \n" ], [ "\n  ", "\n  ", "\n  ", "  \n" ]), _styledComponents = __webpack_require__(18), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(19), _constants = __webpack_require__(12), gridUnit = parseInt(_utilSharedStyles.akGridSize, 10), baselineUnit = gridUnit / 2, truncateStyle = function(_ref) {
+        _taggedTemplateLiteral3.default)([ "\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  " ], [ "\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  " ]), _templateObject7 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            border-bottom: 3px solid ", ";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ", ";\n          border-top: 3px solid ", ";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", ";\n        }\n        &:after {\n          border-top: 3px solid ", ";\n        }\n      }\n    " ], [ "\n    & > span {\n      position: relative;\n        &:before {\n          ", ";\n            border-bottom: 3px solid ", ";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ", ";\n          border-top: 3px solid ", ";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ", ";\n        }\n        &:after {\n          border-top: 3px solid ", ";\n        }\n      }\n    " ]), _templateObject8 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ], [ "\n    border: none;\n    padding: ", "px ", "px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n" ]), _styledComponents = __webpack_require__(19), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(10), gridUnit = exports.gridUnit = parseInt(_utilSharedStyles.akGridSize, 10), baselineUnit = exports.baselineUnit = gridUnit / 2;
+        exports.truncateStyle = function(_ref) {
             var width = _ref.width, isFixedSize = _ref.isFixedSize, shouldTruncate = _ref.shouldTruncate;
@@ -413,6 +418,6 @@ return (0, _styledComponents.css)(_templateObject, width ? (0, _styledComponents.css)(_templateObject2, width) : "", isFixedSize ? (0,
             _styledComponents.css)(_templateObject4) : "");
-        }, onClickStyle = function(_ref2) {
+        }, exports.onClickStyle = function(_ref2) {
             var onClick = _ref2.onClick;
             return onClick && (0, _styledComponents.css)(_templateObject5);
-        }, arrowsStyle = function(_ref3) {
+        }, exports.arrowsStyle = function(_ref3) {
             var isSortable = _ref3.isSortable, sortOrder = _ref3.sortOrder;
@@ -422,37 +427,124 @@ if (!isSortable) return "";
             return (0, _styledComponents.css)(_templateObject7, pseudoBase, sortOrder === _constants.ASC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN40, pseudoBase, sortOrder === _constants.DESC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN40, sortOrder === _constants.ASC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN60, sortOrder === _constants.DESC ? _utilSharedStyles.akColorN300 : _utilSharedStyles.akColorN60);
-        }, cellStyle = (0, _styledComponents.css)(_templateObject8, baselineUnit, gridUnit);
-        exports.Table = _styledComponents2.default.table(_templateObject9, function(_ref4) {
-            var isFixedSize = _ref4.isFixedSize;
-            return isFixedSize && (0, _styledComponents.css)(_templateObject10);
-        }), exports.Caption = _styledComponents2.default.caption(_templateObject11, 7 * baselineUnit, gridUnit), 
-        exports.TableHead = _styledComponents2.default.thead(_templateObject12), exports.TableHeadCell = _styledComponents2.default.th(_templateObject13, function(props) {
-            return onClickStyle(props);
-        }, function(props) {
-            return truncateStyle(props);
-        }, function(props) {
-            return arrowsStyle(props);
-        }, function() {
-            return cellStyle;
-        }, _utilSharedStyles.akColorN300), exports.TableBodyRow = _styledComponents2.default.tr(_templateObject14, function(props) {
-            return onClickStyle(props);
-        }, _utilSharedStyles.akColorN10), exports.TableBodyCell = _styledComponents2.default.td(_templateObject15, function(props) {
-            return onClickStyle(props);
-        }, function(props) {
-            return truncateStyle(props);
-        }, function() {
-            return cellStyle;
+        }, exports.cellStyle = (0, _styledComponents.css)(_templateObject8, baselineUnit, gridUnit);
+    }, /* 22 */
+    /***/
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
         });
-    }, /* 17 */
+        var _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _constants = __webpack_require__(10), _TableRow = __webpack_require__(23), _TableRow2 = _interopRequireDefault(_TableRow), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), getSortedRows = function(head, rows, sortKey, sortOrder) {
+            if (!sortKey || !head) return rows;
+            var getSortingCellValue = function(cells) {
+                return cells.reduce(function(result, cell, index) {
+                    return result || head.cells[index].key === sortKey && (void 0 !== cell.key ? cell.key : cell.content);
+                }, null);
+            };
+            return rows.sort(function(a, b) {
+                var valA = getSortingCellValue(a.cells), valB = getSortingCellValue(b.cells), modifier = sortOrder === _constants.ASC ? 1 : -1;
+                return !valA || valA < valB ? -modifier : !valB || valA > valB ? modifier : 0;
+            });
+        }, Body = function(_ref) {
+            var rows = _ref.rows, head = _ref.head, sortKey = _ref.sortKey, sortOrder = _ref.sortOrder, rowsPerPage = _ref.rowsPerPage, page = _ref.page, isFixedSize = _ref.isFixedSize, sortedRows = getSortedRows(head, rows, sortKey, sortOrder) || [];
+            return _react2.default.createElement("tbody", null, sortedRows.slice((page - 1) * rowsPerPage, page * rowsPerPage).map(function(row, rowIndex) {
+                return _react2.default.createElement(_TableRow2.default, {
+                    row: row,
+                    rowIndex: rowIndex,
+                    head: head,
+                    isFixedSize: isFixedSize
+                });
+            }));
+        };
+        Body.propTypes = {
+            head: _props2.default.head,
+            rows: _props2.default.rows,
+            sortKey: _props2.default.sortKey,
+            sortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ]),
+            rowsPerPage: _props2.default.isInteger,
+            page: _props2.default.isInteger,
+            isFixedSize: _react.PropTypes.bool
+        }, exports.default = Body;
+    }, /* 23 */
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_17__;
-    }, /* 18 */
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _extends2 = __webpack_require__(12), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(16), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TableRow = __webpack_require__(24), _props = __webpack_require__(11), _props2 = _interopRequireDefault(_props), Row = function(_ref) {
+            var row = _ref.row, rowIndex = _ref.rowIndex, head = _ref.head, isFixedSize = _ref.isFixedSize, cells = row.cells, restRowProps = (0, 
+            _objectWithoutProperties3.default)(row, [ "cells" ]);
+            return _react2.default.createElement(_TableRow.TableBodyRow, (0, _extends3.default)({
+                key: rowIndex
+            }, restRowProps), cells.map(function(cell, cellIndex) {
+                var content = cell.content, restCellProps = (0, _objectWithoutProperties3.default)(cell, [ "content" ]), _ref2 = (head || {
+                    cells: []
+                }).cells[cellIndex] || {}, shouldTruncate = _ref2.shouldTruncate, width = _ref2.width;
+                return _react2.default.createElement(_TableRow.TableBodyCell, (0, _extends3.default)({}, restCellProps, {
+                    key: cellIndex,
+                    width: width,
+                    shouldTruncate: shouldTruncate,
+                    isFixedSize: isFixedSize
+                }), content);
+            }));
+        };
+        Row.propTypes = {
+            row: _props2.default.row,
+            rowIndex: _react.PropTypes.number,
+            head: _props2.default.head,
+            isFixedSize: _react.PropTypes.bool
+        }, exports.default = Row;
+    }, /* 24 */
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
-    }, /* 19 */
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.TableBodyCell = exports.TableBodyRow = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ], [ "\n  ", "\n  &:hover {\n    background: ", ";\n  }\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  ", "\n" ], [ "\n  ", "\n  ", "\n  ", "\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(20), _constants = __webpack_require__(21);
+        exports.TableBodyRow = _styledComponents2.default.tr(_templateObject, function(props) {
+            return (0, _constants.onClickStyle)(props);
+        }, _utilSharedStyles.akColorN10), exports.TableBodyCell = _styledComponents2.default.td(_templateObject2, function(props) {
+            return (0, _constants.onClickStyle)(props);
+        }, function(props) {
+            return (0, _constants.truncateStyle)(props);
+        }, _constants.cellStyle);
+    }, /* 25 */
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_19__;
-    }, /* 20 */
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.Caption = exports.Table = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(18), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n" ], [ "\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "table-layout: fixed;" ], [ "table-layout: fixed;" ]), _templateObject3 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n" ], [ "\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n" ]), _styledComponents = __webpack_require__(19), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(21);
+        exports.Table = _styledComponents2.default.table(_templateObject, function(_ref) {
+            var isFixedSize = _ref.isFixedSize;
+            return isFixedSize && (0, _styledComponents.css)(_templateObject2);
+        }), exports.Caption = _styledComponents2.default.caption(_templateObject3, _constants.gridUnit, 7 * _constants.baselineUnit);
+    }, /* 26 */
     /***/
@@ -469,9 +561,9 @@ function(module, exports, __webpack_require__) {
         });
-        var _getPrototypeOf = __webpack_require__(5), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(6), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(7), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(8), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(9), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(10), _react2 = _interopRequireDefault(_react), _stateless = __webpack_require__(2), _stateless2 = _interopRequireDefault(_stateless), _props = __webpack_require__(13), AkDynamicTable = function(_PureComponent) {
-            function AkDynamicTable() {
+        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Stateless = __webpack_require__(2), _Stateless2 = _interopRequireDefault(_Stateless), _props2 = __webpack_require__(11), _props3 = _interopRequireDefault(_props2), _constants = __webpack_require__(10), DynamicTable = function(_PureComponent) {
+            function DynamicTable() {
                 var _ref, _temp, _this, _ret;
-                (0, _classCallCheck3.default)(this, AkDynamicTable);
+                (0, _classCallCheck3.default)(this, DynamicTable);
                 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-                return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = AkDynamicTable.__proto__ || (0, 
-                _getPrototypeOf2.default)(AkDynamicTable)).call.apply(_ref, [ this ].concat(args))), 
+                return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = DynamicTable.__proto__ || (0, 
+                _getPrototypeOf2.default)(DynamicTable)).call.apply(_ref, [ this ].concat(args))), 
                 _this.state = {
@@ -498,3 +590,3 @@ page: _this.props.defaultPage,
             }
-            return (0, _inherits3.default)(AkDynamicTable, _PureComponent), (0, _createClass3.default)(AkDynamicTable, [ {
+            return (0, _inherits3.default)(DynamicTable, _PureComponent), (0, _createClass3.default)(DynamicTable, [ {
                 key: "componentWillReceiveProps",
@@ -511,21 +603,37 @@ value: function(newProps) {
                 value: function() {
-                    return _react2.default.createElement(_stateless2.default, {
-                        caption: this.props.caption,
-                        head: this.props.head,
-                        rows: this.props.rows,
-                        emptyView: this.props.emptyView,
-                        isFixedSize: this.props.isFixedSize,
-                        rowsPerPage: this.props.rowsPerPage,
+                    var _props = this.props, caption = _props.caption, emptyView = _props.emptyView, head = _props.head, isFixedSize = _props.isFixedSize, rows = _props.rows, rowsPerPage = _props.rowsPerPage, _state = this.state, page = _state.page, sortKey = _state.sortKey, sortOrder = _state.sortOrder;
+                    return _react2.default.createElement(_Stateless2.default, {
+                        caption: caption,
+                        emptyView: emptyView,
+                        head: head,
+                        isFixedSize: isFixedSize,
                         onSetPage: this.onSetPage,
                         onSort: this.onSort,
-                        page: this.state.page,
-                        sortKey: this.state.sortKey,
-                        sortOrder: this.state.sortOrder
+                        page: page,
+                        rows: rows,
+                        rowsPerPage: rowsPerPage,
+                        sortKey: sortKey,
+                        sortOrder: sortOrder
                     });
                 }
-            } ]), AkDynamicTable;
+            } ]), DynamicTable;
         }(_react.PureComponent);
-        AkDynamicTable.propTypes = _props.statefulPropTypes, AkDynamicTable.defaultProps = _props.statefulDefaultProps, 
-        exports.default = AkDynamicTable;
+        DynamicTable.propTypes = {
+            defaultPage: _props3.default.isInteger,
+            defaultSortKey: _props3.default.sortKey,
+            defaultSortOrder: _react.PropTypes.oneOf([ _constants.ASC, _constants.DESC ])
+        }, DynamicTable.defaultProps = {
+            caption: null,
+            defaultPage: 1,
+            defaultSortKey: null,
+            defaultSortOrder: null,
+            emptyView: null,
+            head: null,
+            isFixedSize: !1,
+            onSetPage: function() {},
+            onSort: function() {},
+            rows: null,
+            rowsPerPage: 1 / 0
+        }, exports.default = DynamicTable;
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/pagination"),require("babel-runtime/core-js/number/is-integer"),require("@atlaskit/util-common"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/objectWithoutProperties","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","@atlaskit/pagination","babel-runtime/core-js/number/is-integer","@atlaskit/util-common","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles"],t):"object"==typeof exports?exports["@atlaskit/dynamicTable"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/pagination"),require("babel-runtime/core-js/number/is-integer"),require("@atlaskit/util-common"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):e["@atlaskit/dynamicTable"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/objectWithoutProperties"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["@atlaskit/pagination"],e["babel-runtime/core-js/number/is-integer"],e["@atlaskit/util-common"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"])}(this,function(e,t,r,n,o,a,l,i,s,u,p,d,c,f){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.DynamicTable=t.default=void 0;var o=r(2);Object.defineProperty(t,"DynamicTable",{enumerable:!0,get:function(){return n(o).default}});var a=r(20),l=n(a);t.default=l.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){switch(e){case S.DESC:return S.ASC;case S.ASC:return S.DESC;default:return e}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(3),l=n(a),i=r(4),s=n(i),u=r(5),p=n(u),d=r(6),c=n(d),f=r(7),b=n(f),h=r(8),y=n(h),m=r(9),g=n(m),v=r(10),x=n(v),P=r(11),S=r(12),k=r(13),C=r(16),T=function(e){function t(){var e,r,n,a;(0,c.default)(this,t);for(var l=arguments.length,i=Array(l),s=0;s<l;s++)i[s]=arguments[s];return r=n=(0,y.default)(this,(e=t.__proto__||(0,p.default)(t)).call.apply(e,[this].concat(i))),n.onSort=function(e){return function(){var t=e.key;if(t){var r=t!==n.props.sortKey?S.ASC:o(n.props.sortOrder);n.onSetPage(1),n.props.onSort({key:t,item:e,sortOrder:r})}}},n.onSetPage=function(e){return n.props.onSetPage(e)},a=r,(0,y.default)(n,a)}return(0,g.default)(t,e),(0,b.default)(t,[{key:"getSortedRows",value:function(){var e=this.props,t=e.head,r=e.rows,n=e.sortKey,o=e.sortOrder;if(!n||!t)return r;var a=function(e){return e.reduce(function(e,r,o){return e||t.cells[o].key===n&&(void 0!==r.key?r.key:r.content)},null)};return r.sort(function(e,t){var r=a(e.cells),n=a(t.cells),l=o===S.ASC?1:-1;return!r||r<n?-l:!n||r>n?l:0})}},{key:"renderCaption",value:function(){var e=this.props.caption;return e?x.default.createElement(C.Caption,null,e):null}},{key:"renderHead",value:function(){var e=this,t=this.props,r=t.head,n=t.sortKey,o=t.sortOrder;if(!r)return null;var a=r.cells,i=(0,s.default)(r,["cells"]);return x.default.createElement(C.TableHead,i,x.default.createElement("tr",null,a.map(function(t,r){var a=t.isSortable,i=t.key,u=t.content,p=(0,s.default)(t,["isSortable","key","content"]),d=e.props.isFixedSize;return x.default.createElement(C.TableHeadCell,(0,l.default)({key:i||r,onClick:a&&e.onSort(t),isFixedSize:d,isSortable:a,sortOrder:i===n&&o},p),x.default.createElement("span",null,u))})))}},{key:"renderBody",value:function(){var e=this,t=this.props,r=t.rowsPerPage,n=t.page,o=this.getSortedRows();return x.default.createElement("tbody",null,(o||[]).slice((n-1)*r,n*r).map(function(t,r){return e.renderBodyRow(t,r)}))}},{key:"renderBodyRow",value:function(e,t){var r=this.props,n=r.head,o=r.isFixedSize,a=e.cells,i=(0,s.default)(e,["cells"]);return x.default.createElement(C.TableBodyRow,(0,l.default)({key:t},i),a.map(function(e,t){var r=e.content,a=(0,s.default)(e,["content"]),i=(n||{cells:[]}).cells[t]||{},u=i.shouldTruncate,p=i.width;return x.default.createElement(C.TableBodyCell,(0,l.default)({},a,{key:t,width:p,shouldTruncate:u,isFixedSize:o}),r)}))}},{key:"render",value:function(){var e=this.props,t=e.rows,r=e.isFixedSize,n=e.rowsPerPage,o=e.emptyView,a=e.page,l=t?Math.ceil(t.length/n):0;return t&&t.length?x.default.createElement("div",null,x.default.createElement(C.Table,{isFixedSize:r},this.renderCaption(),this.renderHead(),this.renderBody()),l?x.default.createElement(P.Pagination,{current:a,total:l,onSetPage:this.onSetPage}):null):o}}]),t}(v.Component);T.propTypes=k.statelessPropTypes,T.defaultProps=k.statelessDefaultProps,t.default=T},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t){e.exports=l},function(e,t){e.exports=i},function(e,t){e.exports=s},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ASC="ASC",t.DESC="DESC"},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t,r){if(void 0===e[t])return null;if(!(0,d.default)(e[t])&&e[t]!==1/0){var n="'"+t+"' should be an integer or an infinity, got "+e[t]+" instead";return(0,f.createError)(t,r,n)}return null}function a(e,t,r){for(var n=arguments.length,o=Array(n>3?n-3:0),a=3;a<n;a++)o[a-3]=arguments[a];var l=c.PropTypes.arrayOf(y).apply(void 0,[e,t,r].concat(o));if(l instanceof Error)return l;if(!e.head||!e.head.cells)return null;var i=e[t].reduce(function(t,r){return t&&r.length===e.head.cells.length},!0);return i?null:(0,f.createError)(t,r,"One of the rows has different cell-count compared to head.")}function l(e,t,r){for(var n=arguments.length,o=Array(n>3?n-3:0),a=3;a<n;a++)o[a-3]=arguments[a];var l=c.PropTypes.bool.apply(c.PropTypes,[e,t,r].concat(o));return l instanceof Error?l:e[t]&&!e.key?(0,f.createError)(t,r,"'"+t+"' can't be set to true, if the 'key' prop is missing."):null}function i(e,t,r){if(!e[t])return null;var n=e.head.cells.map(function(e){return e.key}).includes(e[t]);return n?null:(0,f.createError)(t,r,"Cell with "+e[t]+" key not found in head.")}Object.defineProperty(t,"__esModule",{value:!0}),t.statefulDefaultProps=t.statelessDefaultProps=t.statefulPropTypes=t.statelessPropTypes=void 0;var s=r(3),u=n(s),p=r(14),d=n(p),c=r(10),f=r(15),b=r(12);o.isRequired=!1;var h={key:c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.string,c.PropTypes.bool]),content:c.PropTypes.node},y=c.PropTypes.shape(h);l.isRequired=!1;var m=(0,u.default)({},h,{isSortable:l,width:c.PropTypes.number,shouldTruncate:c.PropTypes.bool}),g=c.PropTypes.shape(m),v=c.PropTypes.shape({cells:c.PropTypes.arrayOf(g)}),x=c.PropTypes.arrayOf(c.PropTypes.shape({cells:a}));i.isRequired=!1;var P=c.PropTypes.node,S=c.PropTypes.oneOf([b.ASC,b.DESC]),k=c.PropTypes.bool,C=o,T=o,w=c.PropTypes.func,O=c.PropTypes.func,q=c.PropTypes.node,_={caption:P,head:v,rows:x,emptyView:q,isFixedSize:k,rowsPerPage:C,onSetPage:w,onSort:O},E={caption:null,head:null,rows:null,emptyView:null,isFixedSize:!1,rowsPerPage:1/0,onSetPage:function(){},onSort:function(){}};t.statelessPropTypes=(0,u.default)({},_,{page:T,sortKey:i,sortOrder:S}),t.statefulPropTypes=(0,u.default)({},_,{defaultPage:T,defaultSortKey:i,defaultSortOrder:S}),t.statelessDefaultProps=(0,u.default)({},E,{page:1,sortKey:null,sortOrder:null}),t.statefulDefaultProps=(0,u.default)({},E,{defaultPage:1,defaultSortKey:null,defaultSortOrder:null})},function(e,t){e.exports=u},function(e,t){e.exports=p},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TableBodyCell=t.TableBodyRow=t.TableHeadCell=t.TableHead=t.Caption=t.Table=void 0;var o=r(17),a=n(o),l=(0,a.default)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"]),i=(0,a.default)(["width: ","%;"],["width: ","%;"]),s=(0,a.default)(["overflow: hidden;"],["overflow: hidden;"]),u=(0,a.default)(["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  "],["\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  "]),p=(0,a.default)(["\n  &:hover {\n    cursor: pointer;\n  }\n"],["\n  &:hover {\n    cursor: pointer;\n  }\n"]),d=(0,a.default)(["\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -","px;\n    border: 3px solid transparent;\n  "],["\n    position: absolute;\n    display: block;\n    width: 0;\n    height: 0;\n    right: -","px;\n    border: 3px solid transparent;\n  "]),c=(0,a.default)(["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ","; \n          };\n        &:after {\n          ",";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ",";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ","; \n        }\n        &:after {\n          border-top: 3px solid ","; \n        }\n      }\n    "],["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            content: ' ';\n            bottom: 8px;\n            border-bottom: 3px solid ","; \n          };\n        &:after {\n          ",";\n          content: ' ';\n          bottom: 0;  \n          border-top: 3px solid ",";       \n        };\n      }\n        \n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ","; \n        }\n        &:after {\n          border-top: 3px solid ","; \n        }\n      }\n    "]),f=(0,a.default)(["\n    padding: ","px ","px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"],["\n    padding: ","px ","px;\n    border: none;\n    text-align: left;    \n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"]),b=(0,a.default)(["\n  ",";\n  width: 100%;\n  border-collapse: collapse;\n"],["\n  ",";\n  width: 100%;\n  border-collapse: collapse;\n"]),h=(0,a.default)(["table-layout: fixed;"],["table-layout: fixed;"]),y=(0,a.default)(["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ","px;\n  margin-bottom: ","px;\n  text-align: left;\n"],["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-top: ","px;\n  margin-bottom: ","px;\n  text-align: left;\n"]),m=(0,a.default)(["\n  border-bottom: 2px solid #DFE1E6;\n"],["\n  border-bottom: 2px solid #DFE1E6;\n"]),g=(0,a.default)(["\n  ","\n  ","\n  ","\n  ","\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ",";\n  fontWeight: 600;\n"],["\n  ","\n  ","\n  ","\n  ","\n  position: relative;\n  vertical-align: top;\n  text-align: left;\n  border: none;\n  font-size: 12px;\n  color: ",";\n  fontWeight: 600;\n"]),v=(0,a.default)(["\n  ","\n  &:hover {\n    background: ",";\n  }\n"],["\n  ","\n  &:hover {\n    background: ",";\n  }\n"]),x=(0,a.default)(["\n  ","\n  ","\n  ","  \n"],["\n  ","\n  ","\n  ","  \n"]),P=r(18),S=n(P),k=r(19),C=r(12),T=parseInt(k.akGridSize,10),w=T/2,O=function(e){var t=e.width,r=e.isFixedSize,n=e.shouldTruncate;return(0,P.css)(l,t?(0,P.css)(i,t):"",r?(0,P.css)(s):"",r&&n?(0,P.css)(u):"")},q=function(e){var t=e.onClick;return t&&(0,P.css)(p)},_=function(e){var t=e.isSortable,r=e.sortOrder;if(!t)return"";var n=(0,P.css)(d,T);return(0,P.css)(c,n,r===C.ASC?k.akColorN300:k.akColorN40,n,r===C.DESC?k.akColorN300:k.akColorN40,r===C.ASC?k.akColorN300:k.akColorN60,r===C.DESC?k.akColorN300:k.akColorN60)},E=(0,P.css)(f,w,T);t.Table=S.default.table(b,function(e){var t=e.isFixedSize;return t&&(0,P.css)(h)}),t.Caption=S.default.caption(y,7*w,T),t.TableHead=S.default.thead(m),t.TableHeadCell=S.default.th(g,function(e){return q(e)},function(e){return O(e)},function(e){return _(e)},function(){return E},k.akColorN300),t.TableBodyRow=S.default.tr(v,function(e){return q(e)},k.akColorN10),t.TableBodyCell=S.default.td(x,function(e){return q(e)},function(e){return O(e)},function(){return E})},function(e,t){e.exports=d},function(e,t){e.exports=c},function(e,t){e.exports=f},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(5),a=n(o),l=r(6),i=n(l),s=r(7),u=n(s),p=r(8),d=n(p),c=r(9),f=n(c),b=r(10),h=n(b),y=r(2),m=n(y),g=r(13),v=function(e){function t(){var e,r,n,o;(0,i.default)(this,t);for(var l=arguments.length,s=Array(l),u=0;u<l;u++)s[u]=arguments[u];return r=n=(0,d.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(s))),n.state={page:n.props.defaultPage,sortKey:n.props.defaultSortKey,sortOrder:n.props.defaultSortOrder},n.onSetPage=function(e){n.props.onSetPage(e),n.setState({page:e})},n.onSort=function(e){var t=e.key,r=e.item,o=e.sortOrder;n.props.onSort({key:t,item:r,sortOrder:o}),n.setState({sortKey:t,sortOrder:o,page:1})},o=r,(0,d.default)(n,o)}return(0,f.default)(t,e),(0,u.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.setState({page:e.page,sortKey:e.defaultSortKey,sortOrder:e.defaultSortOrder})}},{key:"render",value:function(){return h.default.createElement(m.default,{caption:this.props.caption,head:this.props.head,rows:this.props.rows,emptyView:this.props.emptyView,isFixedSize:this.props.isFixedSize,rowsPerPage:this.props.rowsPerPage,onSetPage:this.onSetPage,onSort:this.onSort,page:this.state.page,sortKey:this.state.sortKey,sortOrder:this.state.sortOrder})}}]),t}(b.PureComponent);v.propTypes=g.statefulPropTypes,v.defaultProps=g.statefulDefaultProps,t.default=v}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/pagination"),require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/number/is-integer"),require("@atlaskit/util-common"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","@atlaskit/pagination","babel-runtime/helpers/extends","babel-runtime/core-js/number/is-integer","@atlaskit/util-common","babel-runtime/helpers/objectWithoutProperties","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles"],t):"object"==typeof exports?exports["@atlaskit/dynamicTable"]=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/pagination"),require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/number/is-integer"),require("@atlaskit/util-common"),require("babel-runtime/helpers/objectWithoutProperties"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles")):e["@atlaskit/dynamicTable"]=t(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["@atlaskit/pagination"],e["babel-runtime/helpers/extends"],e["babel-runtime/core-js/number/is-integer"],e["@atlaskit/util-common"],e["babel-runtime/helpers/objectWithoutProperties"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"])}(this,function(e,t,r,n,o,l,a,i,s,u,d,p,c,f){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.DynamicTableStateless=t.default=void 0;var o=r(2);Object.defineProperty(t,"DynamicTableStateless",{enumerable:!0,get:function(){return n(o).default}});var l=r(26),a=n(l);t.default=a.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){switch(e){case g.DESC:return g.ASC;case g.ASC:return g.DESC;default:return e}}Object.defineProperty(t,"__esModule",{value:!0});var l=r(3),a=n(l),i=r(4),s=n(i),u=r(5),d=n(u),p=r(6),c=n(p),f=r(7),b=n(f),y=r(8),h=n(y),m=r(9),g=r(10),S=r(11),v=n(S),x=r(15),P=n(x),C=r(22),w=n(C),k=r(25),T=function(e){function t(){var e,r,n,l;(0,s.default)(this,t);for(var i=arguments.length,u=Array(i),d=0;d<i;d++)u[d]=arguments[d];return r=n=(0,c.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(u))),n.onSort=function(e){return function(){var t=n.props,r=t.sortKey,l=t.sortOrder,a=t.onSort,i=e.key;if(i){var s=i!==r?g.ASC:o(l);n.onSetPage(1),a({key:i,item:e,sortOrder:s})}}},n.onSetPage=function(e){return n.props.onSetPage(e)},l=r,(0,c.default)(n,l)}return(0,b.default)(t,e),(0,d.default)(t,[{key:"render",value:function(){var e=this.props,t=e.caption,r=e.emptyView,n=e.head,o=e.isFixedSize,l=e.page,a=e.rows,i=e.rowsPerPage,s=e.sortKey,u=e.sortOrder,d=a?Math.ceil(a.length/i):0,p={rows:a,head:n,sortKey:s,sortOrder:u,rowsPerPage:i,page:l,isFixedSize:o};return a&&a.length?h.default.createElement("div",null,h.default.createElement(k.Table,{isFixedSize:o},!!t&&h.default.createElement(k.Caption,null,t),h.default.createElement(P.default,{head:n,onSort:this.onSort,sortKey:s,sortOrder:u}),h.default.createElement(w.default,p)),d?h.default.createElement(m.Pagination,{current:l,onSetPage:this.onSetPage,total:d}):null):r}}]),t}(y.Component);T.propTypes={caption:y.PropTypes.node,head:v.default.head,rows:v.default.rows,emptyView:y.PropTypes.node,isFixedSize:y.PropTypes.bool,rowsPerPage:v.default.isInteger,onSetPage:y.PropTypes.func,onSort:y.PropTypes.func,page:v.default.isInteger,sortKey:v.default.sortKey,sortOrder:y.PropTypes.oneOf([g.ASC,g.DESC])},T.defaultProps={caption:null,head:null,rows:null,emptyView:null,isFixedSize:!1,rowsPerPage:1/0,onSetPage:function(){},onSort:function(){},page:1,sortKey:null,sortOrder:null},t.default=T},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=l},function(e,t){e.exports=a},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ASC="ASC",t.DESC="DESC"},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t,r){if(void 0===e[t])return null;if(!(0,p.default)(e[t])&&e[t]!==1/0){var n="'"+t+"' should be an integer or an infinity, got "+e[t]+" instead";return(0,f.createError)(t,r,n)}return null}function l(e,t,r){for(var n=arguments.length,o=Array(n>3?n-3:0),l=3;l<n;l++)o[l-3]=arguments[l];var a=c.PropTypes.arrayOf(y).apply(void 0,[e,t,r].concat(o));if(a instanceof Error)return a;if(!e.head||!e.head.cells)return null;var i=e[t].reduce(function(t,r){return t&&r.length===e.head.cells.length},!0);return i?null:(0,f.createError)(t,r,"One of the rows has different cell-count compared to head.")}function a(e,t,r){for(var n=arguments.length,o=Array(n>3?n-3:0),l=3;l<n;l++)o[l-3]=arguments[l];var a=c.PropTypes.bool.apply(c.PropTypes,[e,t,r].concat(o));return a instanceof Error?a:e[t]&&!e.key?(0,f.createError)(t,r,"'"+t+"' can't be set to true, if the 'key' prop is missing."):null}function i(e,t,r){if(!e[t])return null;var n=e.head.cells.map(function(e){return e.key}).includes(e[t]);return n?null:(0,f.createError)(t,r,"Cell with "+e[t]+" key not found in head.")}Object.defineProperty(t,"__esModule",{value:!0});var s=r(12),u=n(s),d=r(13),p=n(d),c=r(8),f=r(14);o.isRequired=!1;var b={key:c.PropTypes.oneOfType([c.PropTypes.number,c.PropTypes.string,c.PropTypes.bool]),content:c.PropTypes.node},y=c.PropTypes.shape(b);a.isRequired=!1;var h=(0,u.default)({},b,{isSortable:a,width:c.PropTypes.number,shouldTruncate:c.PropTypes.bool}),m=c.PropTypes.shape(h),g=c.PropTypes.shape({cells:c.PropTypes.arrayOf(m)}),S=c.PropTypes.shape({cells:l}),v=c.PropTypes.arrayOf(S);i.isRequired=!1,t.default={head:g,isInteger:o,row:S,rows:v,sortKey:i}},function(e,t){e.exports=i},function(e,t){e.exports=s},function(e,t){e.exports=u},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(12),l=n(o),a=r(16),i=n(a),s=r(8),u=n(s),d=r(10),p=r(17),c=r(11),f=n(c),b=function(e){var t=e.head,r=e.sortKey,n=e.sortOrder,o=e.isFixedSize,a=e.onSort;if(!t)return null;var s=t.cells,d=(0,i.default)(t,["cells"]);return u.default.createElement(p.Head,d,u.default.createElement("tr",null,s.map(function(e,t){var s=e.isSortable,d=e.key,c=e.content,f=(0,i.default)(e,["isSortable","key","content"]);return u.default.createElement(p.HeadCell,(0,l.default)({key:d||t,onClick:s&&a(e),isFixedSize:o,isSortable:s,sortOrder:d===r&&n},f),u.default.createElement("span",null,c))})))};b.propTypes={onSort:s.PropTypes.func,head:f.default.head,sortKey:f.default.sortKey,sortOrder:s.PropTypes.oneOf([d.ASC,d.DESC]),isFixedSize:s.PropTypes.bool},t.default=b},function(e,t){e.exports=d},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.HeadCell=t.Head=void 0;var o=r(18),l=n(o),a=(0,l.default)(["\n  border-bottom: 2px solid #DFE1E6;\n"],["\n  border-bottom: 2px solid #DFE1E6;\n"]),i=(0,l.default)(["\n  ","\n  ","\n  ","\n  ","\n  border: none;\n  color: ",";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n"],["\n  ","\n  ","\n  ","\n  ","\n  border: none;\n  color: ",";\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n"]),s=r(19),u=n(s),d=r(20),p=r(21);t.Head=u.default.thead(a),t.HeadCell=u.default.th(i,function(e){return(0,p.onClickStyle)(e)},function(e){return(0,p.truncateStyle)(e)},function(e){return(0,p.arrowsStyle)(e)},p.cellStyle,d.akColorN300)},function(e,t){e.exports=p},function(e,t){e.exports=c},function(e,t){e.exports=f},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.cellStyle=t.arrowsStyle=t.onClickStyle=t.truncateStyle=t.baselineUnit=t.gridUnit=void 0;var o=r(18),l=n(o),a=(0,l.default)(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"]),i=(0,l.default)(["width: ","%;"],["width: ","%;"]),s=(0,l.default)(["overflow: hidden;"],["overflow: hidden;"]),u=(0,l.default)(["\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "],["\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]),d=(0,l.default)(["\n  &:hover {\n    cursor: pointer;\n  }\n"],["\n  &:hover {\n    cursor: pointer;\n  }\n"]),p=(0,l.default)(["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -","px;\n    width: 0;\n  "],["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -","px;\n    width: 0;\n  "]),c=(0,l.default)(["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            border-bottom: 3px solid ",";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ",";\n          border-top: 3px solid ",";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ",";\n        }\n        &:after {\n          border-top: 3px solid ",";\n        }\n      }\n    "],["\n    & > span {\n      position: relative;\n        &:before {\n          ",";\n            border-bottom: 3px solid ",";\n            bottom: 8px;\n            content: ' ';\n          };\n        &:after {\n          ",";\n          border-top: 3px solid ",";\n          bottom: 0;\n          content: ' ';\n        };\n      }\n\n      &:hover > span {\n        &:before {\n          border-bottom: 3px solid ",";\n        }\n        &:after {\n          border-top: 3px solid ",";\n        }\n      }\n    "]),f=(0,l.default)(["\n    border: none;\n    padding: ","px ","px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"],["\n    border: none;\n    padding: ","px ","px;\n    text-align: left;\n    &:first-child {\n      padding-left: 0;\n    }\n    &:last-child {\n      padding-right: 0;\n    }\n"]),b=r(19),y=r(20),h=r(10),m=t.gridUnit=parseInt(y.akGridSize,10),g=t.baselineUnit=m/2;t.truncateStyle=function(e){var t=e.width,r=e.isFixedSize,n=e.shouldTruncate;return(0,b.css)(a,t?(0,b.css)(i,t):"",r?(0,b.css)(s):"",r&&n?(0,b.css)(u):"")},t.onClickStyle=function(e){var t=e.onClick;return t&&(0,b.css)(d)},t.arrowsStyle=function(e){var t=e.isSortable,r=e.sortOrder;if(!t)return"";var n=(0,b.css)(p,m);return(0,b.css)(c,n,r===h.ASC?y.akColorN300:y.akColorN40,n,r===h.DESC?y.akColorN300:y.akColorN40,r===h.ASC?y.akColorN300:y.akColorN60,r===h.DESC?y.akColorN300:y.akColorN60)},t.cellStyle=(0,b.css)(f,g,m)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(8),l=n(o),a=r(10),i=r(23),s=n(i),u=r(11),d=n(u),p=function(e,t,r,n){if(!r||!e)return t;var o=function(t){return t.reduce(function(t,n,o){return t||e.cells[o].key===r&&(void 0!==n.key?n.key:n.content)},null)};return t.sort(function(e,t){var r=o(e.cells),l=o(t.cells),i=n===a.ASC?1:-1;return!r||r<l?-i:!l||r>l?i:0})},c=function(e){var t=e.rows,r=e.head,n=e.sortKey,o=e.sortOrder,a=e.rowsPerPage,i=e.page,u=e.isFixedSize,d=p(r,t,n,o)||[];return l.default.createElement("tbody",null,d.slice((i-1)*a,i*a).map(function(e,t){return l.default.createElement(s.default,{row:e,rowIndex:t,head:r,isFixedSize:u})}))};c.propTypes={head:d.default.head,rows:d.default.rows,sortKey:d.default.sortKey,sortOrder:o.PropTypes.oneOf([a.ASC,a.DESC]),rowsPerPage:d.default.isInteger,page:d.default.isInteger,isFixedSize:o.PropTypes.bool},t.default=c},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(12),l=n(o),a=r(16),i=n(a),s=r(8),u=n(s),d=r(24),p=r(11),c=n(p),f=function(e){var t=e.row,r=e.rowIndex,n=e.head,o=e.isFixedSize,a=t.cells,s=(0,i.default)(t,["cells"]);return u.default.createElement(d.TableBodyRow,(0,l.default)({key:r},s),a.map(function(e,t){var r=e.content,a=(0,i.default)(e,["content"]),s=(n||{cells:[]}).cells[t]||{},p=s.shouldTruncate,c=s.width;return u.default.createElement(d.TableBodyCell,(0,l.default)({},a,{key:t,width:c,shouldTruncate:p,isFixedSize:o}),r)}))};f.propTypes={row:c.default.row,rowIndex:s.PropTypes.number,head:c.default.head,isFixedSize:s.PropTypes.bool},t.default=f},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TableBodyCell=t.TableBodyRow=void 0;var o=r(18),l=n(o),a=(0,l.default)(["\n  ","\n  &:hover {\n    background: ",";\n  }\n"],["\n  ","\n  &:hover {\n    background: ",";\n  }\n"]),i=(0,l.default)(["\n  ","\n  ","\n  ","\n"],["\n  ","\n  ","\n  ","\n"]),s=r(19),u=n(s),d=r(20),p=r(21);t.TableBodyRow=u.default.tr(a,function(e){return(0,p.onClickStyle)(e)},d.akColorN10),t.TableBodyCell=u.default.td(i,function(e){return(0,p.onClickStyle)(e)},function(e){return(0,p.truncateStyle)(e)},p.cellStyle)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Caption=t.Table=void 0;var o=r(18),l=n(o),a=(0,l.default)(["\n  ",";\n  border-collapse: collapse;\n  width: 100%;\n"],["\n  ",";\n  border-collapse: collapse;\n  width: 100%;\n"]),i=(0,l.default)(["table-layout: fixed;"],["table-layout: fixed;"]),s=(0,l.default)(["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ","px;\n  margin-top: ","px;\n  text-align: left;\n"],["\n  font-size: 1.42857143em;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ","px;\n  margin-top: ","px;\n  text-align: left;\n"]),u=r(19),d=n(u),p=r(21);t.Table=d.default.table(a,function(e){var t=e.isFixedSize;return t&&(0,u.css)(i)}),t.Caption=d.default.caption(s,p.gridUnit,7*p.baselineUnit)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(3),l=n(o),a=r(4),i=n(a),s=r(5),u=n(s),d=r(6),p=n(d),c=r(7),f=n(c),b=r(8),y=n(b),h=r(2),m=n(h),g=r(11),S=n(g),v=r(10),x=function(e){function t(){var e,r,n,o;(0,i.default)(this,t);for(var a=arguments.length,s=Array(a),u=0;u<a;u++)s[u]=arguments[u];return r=n=(0,p.default)(this,(e=t.__proto__||(0,l.default)(t)).call.apply(e,[this].concat(s))),n.state={page:n.props.defaultPage,sortKey:n.props.defaultSortKey,sortOrder:n.props.defaultSortOrder},n.onSetPage=function(e){n.props.onSetPage(e),n.setState({page:e})},n.onSort=function(e){var t=e.key,r=e.item,o=e.sortOrder;n.props.onSort({key:t,item:r,sortOrder:o}),n.setState({sortKey:t,sortOrder:o,page:1})},o=r,(0,p.default)(n,o)}return(0,f.default)(t,e),(0,u.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.setState({page:e.page,sortKey:e.defaultSortKey,sortOrder:e.defaultSortOrder})}},{key:"render",value:function(){var e=this.props,t=e.caption,r=e.emptyView,n=e.head,o=e.isFixedSize,l=e.rows,a=e.rowsPerPage,i=this.state,s=i.page,u=i.sortKey,d=i.sortOrder;return y.default.createElement(m.default,{caption:t,emptyView:r,head:n,isFixedSize:o,onSetPage:this.onSetPage,onSort:this.onSort,page:s,rows:l,rowsPerPage:a,sortKey:u,sortOrder:d})}}]),t}(b.PureComponent);x.propTypes={defaultPage:S.default.isInteger,defaultSortKey:S.default.sortKey,defaultSortOrder:b.PropTypes.oneOf([v.ASC,v.DESC])},x.defaultProps={caption:null,defaultPage:1,defaultSortKey:null,defaultSortOrder:null,emptyView:null,head:null,isFixedSize:!1,onSetPage:function(){},onSort:function(){},rows:null,rowsPerPage:1/0},t.default=x}])});

package.json

 {
   "name": "@atlaskit/dynamic-table",
-  "version": "2.1.5",
+  "version": "3.0.0",
   "config": {
@@ -11,2 +11,5 @@ "access": "public"
   "ak:webpack:raw": "src/index.js",
+  "ak:component": {
+    "name": "Dynamic Table"
+  },
   "scripts": {
@@ -22,3 +25,4 @@ "prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish/single @atlaskit/dynamic-table; } || ../../node_modules/.bin/not-in-publish"
     "@atlaskit/util-shared-styles": "^1.0.1",
-    "babel-runtime": "^6.11.6"
+    "babel-runtime": "^6.11.6",
+    "styled-components": "^1.3.0"
   },
@@ -30,4 +34,3 @@ "devDependencies": {
   "peerDependencies": {
-    "react": "^15.3.2",
-    "styled-components": "^1.3.0"
+    "react": "^15.3.2"
   },
@@ -34,0 +37,0 @@ "author": "Atlassian Pty Ltd",

README.md

@@ -14,3 +14,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
 
-Interact with a [live demo of the @atlaskit/dynamic-table component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/dynamic-table/2.1.5/).
+Interact with a [live demo of the @atlaskit/dynamic-table component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/dynamic-table/3.0.0/).
 
@@ -23,3 +23,3 @@ ## Installation
 
-Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/@atlaskit/dynamic-table/2.1.5/).
+Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/@atlaskit/dynamic-table/3.0.0/).
 
@@ -26,0 +26,0 @@ _* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies._

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110668

increased by15.35%

Lines of code

1286

increased by21.32%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedstyled-components@^1.3.0