@decisiv/ui-components 2.0.1-alpha.17 → 2.0.1-alpha.173

package/lib/components/Table/Container.js

@@ -15,12 +15,16 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledComponentsModifiers = require("styled-components-modifiers");
 
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
 var _dynamicModifiers = require("../../utils/dynamicModifiers");
 
 var _rgbaToHex = _interopRequireDefault(require("../../utils/rgbaToHex"));
 
 var _styleModifiers = require("../../utils/styleModifiers");
 
+var _skyPlane = _interopRequireDefault(require("../../utils/skyPlane"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,11 +60,12 @@ var variantModifiersConfig = {
   }
 };
 var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)(variantModifiersConfig, 'variant');
+var onFocusStyles = (0, _styledComponents.css)(["border-color:", ";", " opacity:0.8;outline:", " solid 1px;border-radius:2px;&:active{border-color:", ";box-shadow:", ";opacity:0.8;}&:focus:not(:active){border-color:", ";", "}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _skyPlane.default)(), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40));
 
 var Container = _styledComponents.default.div.withConfig({
   displayName: "Container",
   componentId: "sc-79cwvb-0"
-})(["font-size:", ";width:100%;overflow:hidden;table{border-spacing:0;border-collapse:collapse;height:100%;text-align:left;width:100%;thead{height:100%;tr{height:100%;th{background-color:", ";box-shadow:inset 0px -2px ", ";height:100%;padding-bottom:0;padding-top:0;vertical-align:top;position:sticky;top:0;z-index:3;}th.left:after,th.right:after{content:' ';position:absolute;top:0;pointer-events:none;height:100%;}th.left:after{right:0;box-shadow:1px 0px ", ";width:1px;}th.right:after{left:-1px;box-shadow:inset -1px 0px ", ";width:1px;}th > div{box-sizing:border-box;display:flex;height:100%;font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";text-transform:uppercase;> .fluid{margin:-", " -", ";padding:", " ", ";}}th:first-of-type > div{padding-left:", ";> .fluid{margin-left:-", ";padding-left:", ";width:calc(100% + ", ");}}th:last-of-type > div{padding-right:", ";> .fluid{margin-right:-", ";padding-right:", ";width:calc(100% + ", ");}}th.left,th.right{z-index:4;position:sticky;}}}tbody{tr:last-of-type{td,th{border-bottom:1px solid ", ";}}tr:first-of-type{td,th{border-top:none;}}tr{td,th{border-top:1px solid ", ";}td{background-color:", ";background-clip:padding-box;}background-color:", ";td > div,th > div{align-items:center;display:flex;padding-left:", ";padding-right:", ";}td:first-of-type > div,th:first-of-type > div{padding-left:", ";}td:last-of-type > div,th:last-of-type > div{padding-right:", ";}th > div{align-items:center;display:flex;font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";}th.left,td.left,th.right,td.right{position:sticky;z-index:2;}td.left:after,th.left:after,td.right:after,th.right:after{content:' ';position:absolute;top:0;pointer-events:none;height:100%;}td.left:after,th.left:after{right:0;box-shadow:1px 0px ", ";width:1px;}td.right:after,th.right:after{left:-1px;box-shadow:inset -1px 0px ", ";width:1px;}}tr.group-header-row > th{background-color:", ";border-bottom:2px solid ", ";}}}", " ", " ", ";", ";", ";"], (0, _rem.default)(_designTokens.typography.size.alias.default), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, _designTokens.typography.height.alias.tall, (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 3), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 3), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, _designTokens.typography.height.alias.tall, (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.snowWhite), (0, _styleModifiers.when)('hasFooter', (0, _styledComponents.css)(["table{tbody{tr:last-of-type{td,th{border-bottom:none;}}}}"])), heightModifiers, kindModifiers, variantModifiers, scrollModifiers);
+})(["font-size:", ";width:100%;overflow:hidden;table{border-spacing:0;border-collapse:collapse;height:100%;text-align:left;width:100%;background-color:", ";thead{height:100%;tr{height:100%;th{background-color:", ";box-shadow:inset 0px -2px ", ";height:100%;padding-bottom:0;padding-top:0;vertical-align:top;position:sticky;top:0;z-index:3;}th.left:after,th.right:after{content:' ';position:absolute;top:0;pointer-events:none;height:100%;}th.left:after{right:0;box-shadow:1px 0px ", ";width:1px;}th:not(.right) + th.right:after{left:-1px;box-shadow:inset -1px 0px ", ";width:1px;}th > div{box-sizing:border-box;display:flex;height:100%;font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";text-transform:uppercase;> .fluid{margin:-", " -", ";padding:", " ", ";}}th:first-of-type > div{padding-left:", ";> .fluid{margin-left:-", ";padding-left:", ";width:calc(100% + ", ");}}th:last-of-type > div{padding-right:", ";> .fluid{margin-right:-", ";padding-right:", ";width:calc(100% + ", ");}}th.left,th.right{z-index:4;position:sticky;}th.handle-container{width:1px;div{padding-left:0;padding-right:0;}}}}td.handle-container{path:hover{fill:", ";}*:focus{", ";}}tbody{tr:last-of-type{td,th{border-bottom:1px solid ", ";}}tr:first-of-type{td,th{border-top:none;}}tr{&:active{", ";}&:focus{", ";}&:focus-visible{", ";}td,th{border-top:1px solid ", ";}td{background-color:", ";background-clip:padding-box;}background-color:", ";td > div,th > div{align-items:center;display:flex;padding-left:", ";padding-right:", ";}td:first-of-type > div,th:first-of-type > div{padding-left:", ";}td:last-of-type > div,th:last-of-type > div{padding-right:", ";}th.handle-container,td.handle-container{width:1px;&:active{cursor:grab;}div{padding-left:0;padding-right:0;}}th > div{align-items:center;display:flex;font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";}th.left,td.left,th.right,td.right{position:sticky;z-index:2;}td.left:after,th.left:after,td.right:after,th.right:after{content:' ';position:absolute;top:0;pointer-events:none;height:100%;}td.left:after,th.left:after{right:0;box-shadow:1px 0px ", ";width:1px;}td:not(.right) + td.right:after,th:not(.right) + th.right:after{left:-1px;box-shadow:inset -1px 0px ", ";width:1px;}}tr.group-header-row > th{background-color:", ";border-bottom:2px solid ", ";}}}", " ", " ", ";", ";", ";"], (0, _rem.default)(_designTokens.typography.size.alias.default), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, _designTokens.typography.height.alias.tall, (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 3), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 3), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), onFocusStyles, (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), onFocusStyles, onFocusStyles, onFocusStyles, (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, _designTokens.typography.height.alias.tall, (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.snowWhite), (0, _styleModifiers.when)('hasFooter', (0, _styledComponents.css)(["table{tbody{tr:last-of-type{td,th{border-bottom:none;}}}}"])), heightModifiers, kindModifiers, variantModifiers, scrollModifiers);
 
 var _default = Container;
 exports.default = _default;

package/lib/components/Table/DataRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DataRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAevC,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAoF/D;;AAGD,wBAAkC"}
+{"version":3,"file":"DataRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DataRow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAgBvC,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAwG/D;;AAGD,wBAAkC"}

package/lib/components/Table/DataRow.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Provider = require("./Provider");
 
 var _Grip = _interopRequireDefault(require("./Grip"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+var _joinClassnames = _interopRequireDefault(require("../../utils/joinClassnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
@@ -51,38 +51,46 @@ function DataRow(props) {
       provided = props.provided;
 
   var _useContext = (0, _react.useContext)(_Provider.TableContext),
-      columnsOffset = _useContext.columnsOffset;
-
-  var _useContext2 = (0, _react.useContext)(_Provider.TableContext),
-      columnsWidth = _useContext2.columnsWidth,
-      isDragging = _useContext2.isDragging,
-      hasDragHandlers = _useContext2.hasDragHandlers,
-      contextId = _useContext2.contextId;
-
+      columnsWidth = _useContext.columnsWidth,
+      fixedColumns = _useContext.fixedColumns,
+      isDragging = _useContext.isDragging,
+      hasDragHandlers = _useContext.hasDragHandlers,
+      contextId = _useContext.contextId,
+      _useContext$dragVaria = _useContext.dragVariant,
+      dragVariant = _useContext$dragVaria === void 0 ? 'row' : _useContext$dragVaria;
+
+  var customRowAttrs = getRowAttrs(rowData, {
+    isGroupHeaderRow: false
+  });
   return _react.default.createElement("tr", _extends({
-    ref: provided && provided.innerRef,
-    className: makeClassName(className, rowIndex)
-  }, getRowAttrs(rowData), provided ? provided.draggableProps : {}, provided && !hasDragHandlers ? provided.dragHandleProps : {}), columns.map(function (_ref, colIndex) {
+    ref: provided && provided.innerRef
+  }, customRowAttrs, {
+    className: (0, _joinClassnames.default)(makeClassName(className, rowIndex), customRowAttrs && customRowAttrs.className)
+  }, provided ? provided.draggableProps : {}, provided && !hasDragHandlers && dragVariant === 'row' ? provided.dragHandleProps : {}), columns.map(function (_ref, colIndex) {
     var DataCell = _ref.DataCell,
+        HeaderCell = _ref.HeaderCell,
         _ref$getCellAttrs = _ref.getCellAttrs,
         getCellAttrs = _ref$getCellAttrs === void 0 ? function () {
       return {};
     } : _ref$getCellAttrs,
         _ref$getCellKey = _ref.getCellKey,
-        getCellKey = _ref$getCellKey === void 0 ? _get.default : _ref$getCellKey,
+        getCellKey = _ref$getCellKey === void 0 ? function (_rowData, columnName) {
+      return columnName;
+    } : _ref$getCellKey,
         name = _ref.name,
         fixed = _ref.fixed,
-        rest = _objectWithoutProperties(_ref, ["DataCell", "getCellAttrs", "getCellKey", "name", "fixed"]);
+        rest = _objectWithoutProperties(_ref, ["DataCell", "HeaderCell", "getCellAttrs", "getCellKey", "name", "fixed"]);
 
     var customAttrs = getCellAttrs(rowData, name);
+    var fixedColumn = fixedColumns[name];
     return _react.default.createElement("td", _extends({
       key: getCellKey(rowData, name),
       headers: groupId ? "".concat(name, " ").concat(groupId) : undefined
     }, customAttrs, {
-      className: "".concat(fixed || '', " ").concat(customAttrs.className || ''),
+      className: (0, _joinClassnames.default)(fixedColumn && fixedColumn.alignment, customAttrs.className),
       style: _objectSpread({}, customAttrs.style || {}, {}, isDragging ? {
         width: columnsWidth[name]
-      } : {}, {}, fixed ? _defineProperty({}, fixed, columnsOffset[name]) : {})
+      } : {}, {}, fixedColumn ? _defineProperty({}, fixedColumn.alignment, fixedColumn.offset) : {})
     }), _react.default.createElement("div", null, _react.default.createElement(DataCell, _extends({}, rest, {
       colIndex: colIndex,
       groupData: groupData,

package/lib/components/Table/Head.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HeadProps } from './types';
-declare function Head<TData>({ columns }: HeadProps<TData>): JSX.Element;
+declare function Head<TData>({ columns, ...restHeadProps }: HeadProps<TData>): JSX.Element;
 declare const _default: typeof Head;
 export default _default;
 //# sourceMappingURL=Head.d.ts.map

package/lib/components/Table/Head.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Head.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Head.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,iBAAS,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAkB/D;;AAGD,wBAA+B"}
+{"version":3,"file":"Head.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Head.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,iBAAS,IAAI,CAAC,KAAK,EAAE,EACnB,OAAO,EACP,GAAG,aAAa,EACjB,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CA6BhC;;AAGD,wBAA+B"}

package/lib/components/Table/Head.js

@@ -18,18 +18,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function Head(_ref) {
-  var columns = _ref.columns;
-  return _react.default.createElement("thead", null, _react.default.createElement("tr", null, columns.map(function (_ref2) {
+  var columns = _ref.columns,
+      restHeadProps = _objectWithoutProperties(_ref, ["columns"]);
+
+  return _react.default.createElement("thead", null, _react.default.createElement("tr", null, columns.map(function (_ref2, colIndex) {
     var DataCell = _ref2.DataCell,
         name = _ref2.name,
         getCellKey = _ref2.getCellKey,
+        CustomHeaderCell = _ref2.HeaderCell,
         getCellAttrs = _ref2.getCellAttrs,
-        rest = _objectWithoutProperties(_ref2, ["DataCell", "name", "getCellKey", "getCellAttrs"]);
+        rest = _objectWithoutProperties(_ref2, ["DataCell", "name", "getCellKey", "HeaderCell", "getCellAttrs"]);
 
     return _react.default.createElement(_HeaderCell.default, _extends({
+      colIndex: colIndex,
       key: name,
-      name: name
-    }, rest));
+      name: name,
+      CustomHeaderCell: CustomHeaderCell
+    }, rest, restHeadProps));
   })));
 }
 

package/lib/components/Table/HeaderCell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/HeaderCell/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAA2B,MAAM,SAAS,CAAC;AAYnE,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAgCvD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/HeaderCell/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAA2B,MAAM,SAAS,CAAC;AA0BnE,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAkCvD;AAED,eAAe,UAAU,CAAC"}

package/lib/components/Table/HeaderCell/index.js

@@ -13,6 +13,8 @@ var _SortableHeaderCell = _interopRequireDefault(require("./SortableHeaderCell")
 
 var _Provider = require("../Provider");
 
+var _joinClassnames = _interopRequireDefault(require("../../../utils/joinClassnames"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -43,15 +45,24 @@ function isSortableHeader(config) {
   return false;
 }
 
+function CellRenderer(_ref) {
+  var CustomHeaderCell = _ref.CustomHeaderCell,
+      rest = _objectWithoutProperties(_ref, ["CustomHeaderCell"]);
+
+  if (CustomHeaderCell) return _react.default.createElement(CustomHeaderCell, rest);
+  if (isSortableHeader(rest)) return _react.default.createElement(_SortableHeaderCell.default, rest);
+  var title = rest.title;
+  return _react.default.createElement("span", null, title);
+}
+
 function HeaderCell(props) {
   var name = props.name,
-      title = props.title,
       fixed = props.fixed,
-      rest = _objectWithoutProperties(props, ["name", "title", "fixed"]);
+      getHeaderCellAttrs = props.getHeaderCellAttrs;
 
   var _useContext = (0, _react.useContext)(_Provider.TableContext),
       onColumnResize = _useContext.onColumnResize,
-      columnsOffset = _useContext.columnsOffset,
+      fixedColumns = _useContext.fixedColumns,
       isDragging = _useContext.isDragging;
 
   var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
@@ -62,13 +73,15 @@ function HeaderCell(props) {
   (0, _react.useEffect)(function () {
     (!isDragging || fixed) && onColumnResize && onColumnResize(name, dimensions.width || 0);
   }, [onColumnResize, dimensions, fixed, name, isDragging]);
+  var fixedColumn = fixedColumns[name];
+  var customAttrs = getHeaderCellAttrs && getHeaderCellAttrs(name) || {};
   return _react.default.createElement("th", {
     ref: ref,
     id: name,
     scope: "col",
-    className: fixed,
-    style: _objectSpread({}, fixed ? _defineProperty({}, fixed, columnsOffset[name]) : {})
-  }, _react.default.createElement("div", null, isSortableHeader(props) ? _react.default.createElement(_SortableHeaderCell.default, props) : _react.default.createElement("span", rest, title)));
+    className: (0, _joinClassnames.default)(fixedColumn && fixedColumn.alignment, customAttrs.className),
+    style: _objectSpread({}, fixedColumn ? _defineProperty({}, fixedColumn.alignment, fixedColumn.offset) : {}, {}, customAttrs.style || {})
+  }, _react.default.createElement("div", null, _react.default.createElement(CellRenderer, props)));
 }
 
 var _default = HeaderCell;

package/lib/components/Table/HeaderCell/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SortingTypes } from '../hooks/useSortableHeaders';
 import { KindModifiers, VariantModifiers } from '../types';
 export interface HeaderCellProps {
@@ -6,8 +7,12 @@ export interface HeaderCellProps {
     sortBy?: (sortingType: SortingTypes) => void;
     title?: string;
     variant?: VariantModifiers;
-    fixed?: 'left' | 'right';
+    colIndex: number;
+    CustomHeaderCell?: (props: CustomHeaderCellProps) => JSX.Element;
+    fixed?: boolean;
+    getHeaderCellAttrs?: (columnName: string) => object | undefined;
 }
+export declare type CustomHeaderCellProps = Pick<HeaderCellProps, 'kind' | 'name' | 'variant' | 'title'>;
 export interface SortableHeaderCellProps extends HeaderCellProps {
     sortBy: (sortingType: SortingTypes) => void;
     title: string;

package/lib/components/Table/HeaderCell/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/HeaderCell/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,MAAM,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/HeaderCell/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACjE;AAED,oBAAY,qBAAqB,GAAG,IAAI,CACtC,eAAe,EACf,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CACtC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,MAAM,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/components/Table/HeaderCell/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Table/Provider.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 import { SortableState, UseSortableHeaders } from './hooks/useSortableHeaders';
+import { FixedColumns, DragVariant } from './types';
 interface TableContextValue extends UseSortableHeaders {
     isDnDEnabled: boolean;
     onColumnResize?: (columnName: string, width: number) => void;
-    columnsOffset: {
-        [name: string]: number;
-    };
     columnsWidth: {
         [id: string]: number;
     };
@@ -14,12 +12,14 @@ interface TableContextValue extends UseSortableHeaders {
     contextId: string;
     hasDragHandlers: boolean;
     setHasDragHandlers: (value: boolean) => void;
+    fixedColumns: FixedColumns;
+    dragVariant?: DragVariant;
 }
-interface TableProviderProps extends Pick<TableContextValue, 'onColumnResize' | 'columnsOffset' | 'columnsWidth' | 'isDnDEnabled'> {
+interface TableProviderProps extends Pick<TableContextValue, 'onColumnResize' | 'fixedColumns' | 'columnsWidth' | 'isDnDEnabled' | 'hasDragHandlers' | 'setHasDragHandlers' | 'dragVariant'> {
     children: JSX.Element;
     defaultSort?: SortableState;
 }
 export declare const TableContext: React.Context<TableContextValue>;
-declare function TableProvider({ children, defaultSort, isDnDEnabled, onColumnResize, columnsOffset, columnsWidth, }: TableProviderProps): JSX.Element;
+declare function TableProvider({ children, defaultSort, isDnDEnabled, onColumnResize, columnsWidth, fixedColumns, hasDragHandlers, setHasDragHandlers, dragVariant, }: TableProviderProps): JSX.Element;
 export default TableProvider;
 //# sourceMappingURL=Provider.d.ts.map

package/lib/components/Table/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAA2B,EACzB,aAAa,EACb,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAGpC,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE;QACb,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB,CAAC;IACF,YAAY,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,UAAU,kBACR,SAAQ,IAAI,CACV,iBAAiB,EACjB,gBAAgB,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CACrE;IACD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,kCAUvB,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACd,aAAa,EACb,YAAY,GACb,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAwBlC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAA2B,EACzB,aAAa,EACb,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEpD,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,YAAY,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,UAAU,kBACR,SAAQ,IAAI,CACV,iBAAiB,EACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,cAAc,GACd,iBAAiB,GACjB,oBAAoB,GACpB,aAAa,CAChB;IACD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,kCAUvB,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,WAAW,GACZ,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAwBlC;AAED,eAAe,aAAa,CAAC"}

package/lib/components/Table/Provider.js

@@ -31,14 +31,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var TableContext = _react.default.createContext({
   sort: function sort() {},
-  columnsOffset: {},
   isDnDEnabled: false,
   columnsWidth: {},
   isDragging: false,
   setIsDragging: function setIsDragging() {},
   contextId: '',
   hasDragHandlers: true,
-  setHasDragHandlers: function setHasDragHandlers() {}
+  setHasDragHandlers: function setHasDragHandlers() {},
+  fixedColumns: {}
 });
 
 exports.TableContext = TableContext;
@@ -48,8 +48,11 @@ function TableProvider(_ref) {
       defaultSort = _ref.defaultSort,
       isDnDEnabled = _ref.isDnDEnabled,
       onColumnResize = _ref.onColumnResize,
-      columnsOffset = _ref.columnsOffset,
-      columnsWidth = _ref.columnsWidth;
+      columnsWidth = _ref.columnsWidth,
+      fixedColumns = _ref.fixedColumns,
+      hasDragHandlers = _ref.hasDragHandlers,
+      setHasDragHandlers = _ref.setHasDragHandlers,
+      dragVariant = _ref.dragVariant;
   var sortableProps = (0, _useSortableHeaders.default)(defaultSort);
   var contextId = (0, _useUniqueId.default)(undefined, 'table-');
 
@@ -58,15 +61,10 @@ function TableProvider(_ref) {
       isDragging = _useState2[0],
       setIsDragging = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasDragHandlers = _useState4[0],
-      setHasDragHandlers = _useState4[1];
-
   return _react.default.createElement(TableContext.Provider, {
     value: _objectSpread({
       onColumnResize: onColumnResize,
-      columnsOffset: columnsOffset
+      fixedColumns: fixedColumns
     }, sortableProps, {
       isDnDEnabled: isDnDEnabled,
       columnsWidth: columnsWidth,
@@ -74,7 +72,8 @@ function TableProvider(_ref) {
       setIsDragging: setIsDragging,
       contextId: contextId,
       hasDragHandlers: hasDragHandlers,
-      setHasDragHandlers: setHasDragHandlers
+      setHasDragHandlers: setHasDragHandlers,
+      dragVariant: dragVariant
     })
   }, children);
 }

package/lib/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAW,UAAU,EAAE,MAAM,SAAS,CAAC;AAG9C,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,iBAAS,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAwD3D;kBAxDQ,KAAK;;;;;;;;;;;;;AAoId,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAW,UAAU,EAAgB,MAAM,SAAS,CAAC;AAI5D,OAAO,EACL,SAAS,EACT,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,iBAAS,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAoG3D;kBApGQ,KAAK;;;;;;;;;;;;;AAuNd,eAAe,KAAK,CAAC"}

package/lib/components/Table/index.js

@@ -63,6 +63,8 @@ var _types = require("./types");
 
 var _utils = require("./utils");
 
+var _Grip = _interopRequireDefault(require("./Grip"));
+
 var _useSortableHeaders = require("./hooks/useSortableHeaders");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -71,6 +73,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -94,9 +104,11 @@ function Table(props) {
       defaultSort = props.defaultSort,
       footer = props.footer,
       toolbar = props.toolbar,
-      columns = props.columns,
+      columnsProp = props.columns,
       onDragEnd = props.onDragEnd,
-      rest = _objectWithoutProperties(props, ["data", "defaultSort", "footer", "toolbar", "columns", "onDragEnd"]);
+      _props$dragVariant = props.dragVariant,
+      dragVariant = _props$dragVariant === void 0 ? 'row' : _props$dragVariant,
+      rest = _objectWithoutProperties(props, ["data", "defaultSort", "footer", "toolbar", "columns", "onDragEnd", "dragVariant"]);
 
   var _useState = (0, _react.useState)({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -108,19 +120,61 @@ function Table(props) {
       return _objectSpread({}, prevColumnsWidth, _defineProperty({}, name, width));
     });
   }, []);
+  var isDnDEnabled = !!onDragEnd;
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasDragHandlers = _useState4[0],
+      setHasDragHandlers = _useState4[1];
+
+  var columns = (0, _react.useMemo)(function () {
+    if (isDnDEnabled && !hasDragHandlers) {
+      return [{
+        name: 'default-drag-handle',
+        DataCell: function DataCell(_ref) {
+          var DragHandle = _ref.DragHandle;
+
+          if (dragVariant === 'handle') {
+            var defaultHandle = _react.default.cloneElement(DragHandle, {
+              'data-drag-handle-context-id': undefined
+            });
+
+            return defaultHandle;
+          }
+
+          return _react.default.createElement("div", null, _react.default.createElement(_Grip.default, null));
+        },
+        getHeaderCellAttrs: function getHeaderCellAttrs() {
+          return {
+            className: 'handle-container'
+          };
+        },
+        getCellAttrs: function getCellAttrs() {
+          return {
+            className: 'handle-container'
+          };
+        },
+        getCellKey: function getCellKey() {
+          return 'default-drag-handle';
+        },
+        fixed: columnsProp[0].fixed
+      }].concat(_toConsumableArray(columnsProp));
+    }
 
-  var _useMemo = (0, _react.useMemo)(function () {
+    return columnsProp;
+  }, [isDnDEnabled, hasDragHandlers, columnsProp, dragVariant]);
+  var fixedColumns = (0, _react.useMemo)(function () {
     return (0, _utils.calculateOffsets)(columns, columnsWidth);
-  }, [columns, columnsWidth]),
-      leftColumnsOffset = _useMemo.leftColumnsOffset,
-      rightColumnsOffset = _useMemo.rightColumnsOffset;
-
+  }, [columns, columnsWidth]);
   return _react.default.createElement(_Provider.default, {
     defaultSort: defaultSort,
     onColumnResize: onColumnResize,
-    columnsOffset: _objectSpread({}, leftColumnsOffset, {}, rightColumnsOffset),
-    isDnDEnabled: !!onDragEnd,
-    columnsWidth: columnsWidth
+    columnsWidth: columnsWidth,
+    fixedColumns: fixedColumns,
+    isDnDEnabled: isDnDEnabled,
+    hasDragHandlers: hasDragHandlers,
+    setHasDragHandlers: setHasDragHandlers,
+    dragVariant: dragVariant
   }, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Toolbar.default, {
     kind: rest.kind,
     toolbar: toolbar
@@ -140,8 +194,8 @@ function Table(props) {
 }
 
 Table.propTypes = _objectSpread({}, _schema.default.propTypes, {
-  GroupHeader: (0, _propTypes.requireIf)(_propTypes2.default.elementType, function (_ref) {
-    var rowDataPath = _ref.rowDataPath;
+  GroupHeader: (0, _propTypes.requireIf)(_propTypes2.default.elementType, function (_ref2) {
+    var rowDataPath = _ref2.rowDataPath;
     return !!rowDataPath;
   }),
   // eslint-disable-next-line react/require-default-props
@@ -155,6 +209,34 @@ Table.propTypes = _objectSpread({}, _schema.default.propTypes, {
       return new Error("You have set a column as fixed but the Table doesn't have horizontal scroll, you need to enable it via scroll prop for this feature to work correctly");
     }
 
+    var previousColumn = null;
+    var isleColumnIndex = null;
+
+    for (var index = 0; index < columns.length; index += 1) {
+      var column = columns[index];
+
+      if (previousColumn && column.fixed && !previousColumn.fixed) {
+        isleColumnIndex = index;
+        break;
+      }
+
+      previousColumn = column;
+    }
+
+    previousColumn = null;
+
+    for (var _index = columns.length - 1; _index >= 0; _index -= 1) {
+      var _column = columns[_index];
+
+      if (previousColumn && _column.fixed && !previousColumn.fixed) {
+        if (isleColumnIndex && isleColumnIndex <= _index) {
+          return new Error("Column [".concat(_column.name, "] will not be fixed. Fixed columns must be consecutive, grouped at the beginning or at the end of the array."));
+        }
+      }
+
+      previousColumn = _column;
+    }
+
     _propTypes2.default.checkPropTypes({
       columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
         DataCell: _propTypes2.default.elementType.isRequired,
@@ -162,7 +244,7 @@ Table.propTypes = _objectSpread({}, _schema.default.propTypes, {
         name: _propTypes2.default.string.isRequired,
         sortBy: _propTypes2.default.func,
         title: _propTypes2.default.string,
-        fixed: _propTypes2.default.oneOf(['right', 'left'])
+        fixed: _propTypes2.default.bool
       }))
     }, props, propName, componentName);
 
@@ -170,16 +252,24 @@ Table.propTypes = _objectSpread({}, _schema.default.propTypes, {
   },
   toolbar: _propTypes2.default.elementType,
   footer: _propTypes2.default.elementType,
-  getRowKey: (0, _propTypes.requireIf)(_propTypes2.default.func, function (_ref2) {
-    var data = _ref2.data;
-    return !((0, _get.default)(data, '0.key') || (0, _get.default)(data, '0.id'));
+  getRowKey: (0, _propTypes.requireIf)(_propTypes2.default.func, function (_ref3) {
+    var data = _ref3.data;
+    return !!data && data.length > 0 && !((0, _get.default)(data, '0.key') || (0, _get.default)(data, '0.id'));
   }),
-  height: (0, _propTypes.requireIf)(_propTypes2.default.string, function (_ref3) {
-    var scroll = _ref3.scroll,
-        size = _ref3.size;
+  height: (0, _propTypes.requireIf)(_propTypes2.default.string, function (_ref4) {
+    var scroll = _ref4.scroll,
+        size = _ref4.size;
     return (0, _modifiersPropApplies.default)('y', scroll, size);
   }),
-  scroll: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['x', 'y']), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['x', 'y'])), _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.oneOf(['x', 'y']), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['x', 'y']))]))])
+  scroll: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['x', 'y']), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['x', 'y'])), _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.oneOf(['x', 'y']), _propTypes2.default.arrayOf(_propTypes2.default.oneOf(['x', 'y']))]))]),
+  // eslint-disable-next-line react/require-default-props
+  dragVariant: function dragVariant(_ref5) {
+    var onDragEnd = _ref5.onDragEnd,
+        props = _objectWithoutProperties(_ref5, ["onDragEnd"]);
+
+    if (!onDragEnd && 'dragVariant' in props) return new Error('You have set dragVariant prop but Drag-and-Drop sorting is not enabled, you can enable it by passing [onDragEnd] callback');
+    return null;
+  }
 });
 Table.defaultProps = {
   GroupHeader: undefined,