@decisiv/ui-components 2.0.1-alpha.8 → 2.0.1-alpha.97

package/lib/components/Table/Body.js

@@ -9,22 +9,40 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
 var _DataRow = _interopRequireDefault(require("./DataRow"));
 
 var _utils = require("./utils");
 
+var _DraggableWrapper = _interopRequireDefault(require("./DraggableWrapper"));
+
+var _Provider = require("./Provider");
+
+var _joinClassnames = _interopRequireDefault(require("../../utils/joinClassnames"));
+
+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 }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
 
 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; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-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 GroupHeaderRow(props) {
   var _props$GroupHeader = props.GroupHeader,
       GroupHeader = _props$GroupHeader === void 0 ? function () {
@@ -36,10 +54,16 @@ function GroupHeaderRow(props) {
       _props$getRowAttrs = props.getRowAttrs,
       getRowAttrs = _props$getRowAttrs === void 0 ? function () {} : _props$getRowAttrs,
       groupData = props.groupData,
-      groupId = props.groupId;
+      groupId = props.groupId,
+      provided = props.provided;
+  var customRowAttrs = getRowAttrs(groupData, {
+    isGroupHeaderRow: true
+  });
   return _react.default.createElement("tr", _extends({
-    className: "group-header-row"
-  }, getRowAttrs(groupData, true)), _react.default.createElement("th", _extends({
+    ref: provided && provided.innerRef
+  }, customRowAttrs, {
+    className: (0, _joinClassnames.default)('group-header-row', customRowAttrs && customRowAttrs.className)
+  }, provided ? _objectSpread({}, provided.draggableProps, {}, provided.dragHandleProps) : {}), _react.default.createElement("th", _extends({
     id: groupId,
     colSpan: columns.length,
     scope: "colgroup"
@@ -48,48 +72,168 @@ function GroupHeaderRow(props) {
   }))));
 }
 
+function DroppableWrapper(_ref) {
+  var children = _ref.children,
+      onDragEnd = _ref.onDragEnd,
+      onBeforeDragStart = _ref.onBeforeDragStart;
+
+  var _useContext = (0, _react.useContext)(_Provider.TableContext),
+      isDnDEnabled = _useContext.isDnDEnabled,
+      contextId = _useContext.contextId;
+
+  if (!isDnDEnabled) return children();
+  return _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd,
+    onBeforeDragStart: onBeforeDragStart
+  }, _react.default.createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "droppable-".concat(contextId)
+  }, children));
+}
+
 function Body(props) {
   var columns = props.columns,
       data = props.data,
       _props$getRowKey = props.getRowKey,
       getRowKey = _props$getRowKey === void 0 ? _utils.defaultGetRowKey : _props$getRowKey,
       kind = props.kind,
-      variant = props.variant;
-  return _react.default.createElement("tbody", null, data.map(function (dataObj, dataIndex) {
-    if ((0, _utils.isGroupData)(dataObj, props)) {
-      var groupData = (0, _omit.default)(dataObj, props.rowDataPath);
-      var groupId = getRowKey(_objectSpread({}, dataObj, {
-        isGroupHeader: true
-      }));
-      return _react.default.createElement(_react.default.Fragment, {
-        key: groupId
-      }, _react.default.createElement(GroupHeaderRow, _extends({
-        groupData: groupData,
-        groupId: groupId
-      }, props)), (0, _get.default)(dataObj, props.rowDataPath).map(function (rowData, rowIndex) {
+      variant = props.variant,
+      onDragEndProp = props.onDragEnd,
+      getRowAttrs = props.getRowAttrs;
+  var positions = [];
+
+  var _useContext2 = (0, _react.useContext)(_Provider.TableContext),
+      setIsDragging = _useContext2.setIsDragging,
+      contextId = _useContext2.contextId,
+      isDnDEnabled = _useContext2.isDnDEnabled,
+      setHasDragHandlers = _useContext2.setHasDragHandlers;
+
+  var onDragEnd = (0, _react.useCallback)(function (_ref2) {
+    var source = _ref2.source,
+        destination = _ref2.destination;
+    setIsDragging(false);
+    if (!destination || !onDragEndProp) return;
+
+    var _positions$source$ind = _slicedToArray(positions[source.index], 2),
+        fromGroup = _positions$source$ind[0],
+        fromIndex = _positions$source$ind[1];
+
+    var _positions$destinatio = _slicedToArray(positions[destination.index], 2),
+        toGroup = _positions$destinatio[0],
+        toIndex = _positions$destinatio[1];
+
+    var hasGroups = fromIndex !== undefined || toIndex !== undefined;
+    var fixedGroup = toGroup;
+    var fixedIndex = toIndex;
+
+    if (!hasGroups) {
+      onDragEndProp(fromGroup, toGroup);
+      return;
+    } // when dropping in a header place
+
+
+    if (toIndex === undefined) {
+      if (toGroup === 0) return;
+
+      if (fromGroup >= toGroup) {
+        // it is actually aiming to the last position of previous group
+        var _positions = _slicedToArray(positions[destination.index - 1], 2);
+
+        fixedGroup = _positions[0];
+        fixedIndex = _positions[1];
+        fixedIndex += 1;
+      } else {
+        // aiming for the first position of the group
+        fixedIndex = 0;
+      }
+    } else if (fromGroup < toGroup) fixedIndex += 1;
+
+    onDragEndProp([fromGroup, fromIndex], [fixedGroup, fixedIndex]);
+  }, [setIsDragging, onDragEndProp, positions]);
+  var onBeforeDragStart = (0, _react.useCallback)(function () {
+    setIsDragging(true);
+  }, [setIsDragging]);
+  (0, _react.useEffect)(function () {
+    if (!isDnDEnabled) return;
+    var dragHandlers = document.querySelectorAll("[data-drag-handle-context-id=".concat(contextId, "]"));
+    if (dragHandlers.length > 0) setHasDragHandlers(true);
+  }, [contextId, isDnDEnabled, setHasDragHandlers]);
+  return _react.default.createElement(DroppableWrapper, {
+    onDragEnd: onDragEnd,
+    onBeforeDragStart: onBeforeDragStart
+  }, function (droppableProvided) {
+    var dndIndex = -1;
+    return _react.default.createElement("tbody", _extends({
+      ref: droppableProvided && droppableProvided.innerRef
+    }, droppableProvided ? droppableProvided.droppableProps : {}), data.map(function (dataObj, dataIndex) {
+      dndIndex += 1;
+      positions[dndIndex] = [dataIndex];
+
+      if ((0, _utils.isGroupData)(dataObj, props)) {
+        var groupData = (0, _omit.default)(dataObj, props.rowDataPath);
+        var groupId = getRowKey(dataObj, {
+          isGroupHeaderRow: true
+        });
+        return _react.default.createElement(_react.default.Fragment, {
+          key: groupId
+        }, _react.default.createElement(_DraggableWrapper.default, {
+          id: groupId,
+          dndIndex: dndIndex,
+          isDragDisabled: true
+        }, function (provided) {
+          return _react.default.createElement(GroupHeaderRow, _extends({
+            groupData: groupData,
+            groupId: groupId,
+            provided: provided,
+            getRowAttrs: getRowAttrs
+          }, props));
+        }), (0, _get.default)(dataObj, props.rowDataPath).map(function (rowData, rowIndex) {
+          dndIndex += 1;
+          positions[dndIndex] = [dataIndex, rowIndex];
+          var rowKey = getRowKey(rowData, {
+            isGroupHeaderRow: false
+          });
+          return _react.default.createElement(_DraggableWrapper.default, {
+            key: rowKey,
+            id: rowKey || dndIndex.toString(),
+            dndIndex: dndIndex
+          }, function (provided) {
+            return _react.default.createElement(_DataRow.default, {
+              className: "group-data-row",
+              columns: columns,
+              groupData: groupData,
+              groupId: groupId,
+              key: rowKey,
+              kind: kind,
+              rowData: rowData,
+              rowIndex: rowIndex,
+              variant: variant,
+              provided: provided,
+              getRowAttrs: getRowAttrs
+            });
+          });
+        }));
+      }
+
+      var rowKey = getRowKey(dataObj, {
+        isGroupHeaderRow: false
+      });
+      return _react.default.createElement(_DraggableWrapper.default, {
+        key: rowKey,
+        id: rowKey || dndIndex.toString(),
+        dndIndex: dndIndex
+      }, function (provided) {
         return _react.default.createElement(_DataRow.default, {
-          className: "group-data-row",
           columns: columns,
-          groupData: groupData,
-          groupId: groupId,
-          key: getRowKey(rowData),
           kind: kind,
-          rowData: rowData,
-          rowIndex: rowIndex,
-          variant: variant
+          rowData: dataObj,
+          rowIndex: dataIndex,
+          variant: variant,
+          provided: provided,
+          getRowAttrs: getRowAttrs
         });
-      }));
-    }
-
-    return _react.default.createElement(_DataRow.default, {
-      columns: columns,
-      key: getRowKey(dataObj),
-      kind: kind,
-      rowData: dataObj,
-      rowIndex: dataIndex,
-      variant: variant
-    });
-  }));
+      });
+    }), droppableProvided && droppableProvided.placeholder);
+  });
 }
 
 var _default = Body;

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

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Container.ts"],"names":[],"mappings":"AAGA,OAAe,EAAO,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAMrE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,aAAK,yBAAyB,GAAG,IAAI,CACnC,UAAU,CAAC,MAAM,EAAE,CAAC,EACpB,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CACzC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,yBAAyB;IAC7D,SAAS,EAAE,OAAO,CAAC;CACpB;AAyBD,QAAA,MAAM,mBAAmB;;;CAkDxB,CAAC;AAEF,oBAAY,aAAa,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAI7D,QAAA,MAAM,qBAAqB;;;CAU1B,CAAC;AAEF,oBAAY,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AACjE,oBAAY,eAAe,GAAG,MAAM,qBAAqB,CAAC;AAI1D,QAAA,MAAM,sBAAsB;;;CA4B3B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,MAAM,OAAO,sBAAsB,CAAC;AAInE,QAAA,MAAM,SAAS,qFAsNd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Container.ts"],"names":[],"mappings":"AAGA,OAAe,EAAO,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAMrE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,aAAK,yBAAyB,GAAG,IAAI,CACnC,UAAU,CAAC,MAAM,EAAE,CAAC,EACpB,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CACzC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,yBAAyB;IAC7D,SAAS,EAAE,OAAO,CAAC;CACpB;AAyBD,QAAA,MAAM,mBAAmB;;;CAqDxB,CAAC;AAEF,oBAAY,aAAa,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAI7D,QAAA,MAAM,qBAAqB;;;CAU1B,CAAC;AAEF,oBAAY,qBAAqB,GAAG,OAAO,qBAAqB,CAAC;AACjE,oBAAY,eAAe,GAAG,MAAM,qBAAqB,CAAC;AAI1D,QAAA,MAAM,sBAAsB;;;CA4B3B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,MAAM,OAAO,sBAAsB,CAAC;AAInE,QAAA,MAAM,SAAS,qFA0Od,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Table/Container.js

@@ -31,7 +31,7 @@ var heightModifiers = (0, _dynamicModifiers.applyDynamicModifiers)('height', fun
 });
 var kindModifiersConfig = {
   primary: function primary() {
-    return (0, _styledComponents.css)(["table{thead{tr{th{background-color:", ";border-bottom-color:", ";}}}tbody{tr:nth-of-type(even) td{background-color:", ";}tr:nth-of-type(odd) td{background-color:", ";}tr.group-header-row{th{background-color:", ";border-bottom-color:", ";}}tr.group-data-row-even{background-color:", ";}tr.group-data-row-odd{background-color:", ";}}}"], (0, _toColorString.default)(_designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.fullMoon50, _designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_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.opacity.fullMoon50));
+    return (0, _styledComponents.css)(["table{thead{tr{th{background-color:", ";border-bottom-color:", ";}}}tbody{tr:nth-of-type(even) td{background-color:", ";}tr:nth-of-type(odd) td{background-color:", ";}tr.group-header-row{th{background-color:", ";border-bottom-color:", ";}}tr.group-data-row-even{background-color:", ";}tr.group-data-row-odd{background-color:", ";}}}"], (0, _toColorString.default)(_designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.charcoal15, _designTokens.color.base.halfMoon), (0, _rgbaToHex.default)(_designTokens.color.opacity.fullMoon50, _designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_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.fullMoon50, _designTokens.color.base.snowWhite));
   },
   secondary: function secondary() {
     return '';
@@ -60,7 +60,7 @@ var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)(varia
 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;}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, _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%;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;}}}}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.handle-container,td.handle-container{width:1px;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.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);
 
 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":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAcvC,iBAAS,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAyD/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,16 +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");
 
-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 _Grip = _interopRequireDefault(require("./Grip"));
+
+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; }
@@ -45,36 +47,61 @@ function DataRow(props) {
       kind = props.kind,
       rowData = props.rowData,
       rowIndex = props.rowIndex,
-      variant = props.variant;
+      variant = props.variant,
+      provided = props.provided;
 
   var _useContext = (0, _react.useContext)(_Provider.TableContext),
-      columnsOffset = _useContext.columnsOffset;
-
+      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({
-    className: makeClassName(className, rowIndex)
-  }, getRowAttrs(rowData)), 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 () {} : _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,
-      className: fixed,
-      style: _objectSpread({}, fixed ? _defineProperty({}, fixed, columnsOffset[name]) : {})
-    }, getCellAttrs(rowData, name)), _react.default.createElement("div", null, _react.default.createElement(DataCell, _extends({}, rest, {
+      headers: groupId ? "".concat(name, " ").concat(groupId) : undefined
+    }, customAttrs, {
+      className: (0, _joinClassnames.default)(fixedColumn && fixedColumn.alignment, customAttrs.className),
+      style: _objectSpread({}, customAttrs.style || {}, {}, isDragging ? {
+        width: columnsWidth[name]
+      } : {}, {}, fixedColumn ? _defineProperty({}, fixedColumn.alignment, fixedColumn.offset) : {})
+    }), _react.default.createElement("div", null, _react.default.createElement(DataCell, _extends({}, rest, {
       colIndex: colIndex,
       groupData: groupData,
       kind: kind,
       name: name,
       rowData: rowData,
       rowIndex: rowIndex,
-      variant: variant
+      variant: variant,
+      DragHandle: provided && _react.default.createElement("div", _extends({
+        "data-drag-handle-context-id": contextId
+      }, provided.dragHandleProps), _react.default.createElement(_Grip.default, null))
     }))));
   }));
 }

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DraggableWrapperProps } from './types';
+declare const DraggableWrapper: ({ id, dndIndex, isDragDisabled, children, }: DraggableWrapperProps) => JSX.Element;
+export default DraggableWrapper;
+//# sourceMappingURL=DraggableWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Table/DraggableWrapper.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,QAAA,MAAM,gBAAgB,qFAoBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Table/DraggableWrapper.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+
+var _Provider = require("./Provider");
+
+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 DraggableWrapper = function DraggableWrapper(_ref) {
+  var id = _ref.id,
+      dndIndex = _ref.dndIndex,
+      isDragDisabled = _ref.isDragDisabled,
+      children = _ref.children;
+
+  var _useContext = (0, _react.useContext)(_Provider.TableContext),
+      isDnDEnabled = _useContext.isDnDEnabled;
+
+  if (isDnDEnabled) {
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      draggableId: String(id),
+      index: dndIndex,
+      key: id,
+      isDragDisabled: isDragDisabled
+    }, children);
+  }
+
+  return children();
+};
+
+var _default = DraggableWrapper;
+exports.default = _default;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=Grip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Grip.tsx"],"names":[],"mappings":";;AAEA,wBAgBE"}

package/lib/components/Table/Grip.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return _react.default.createElement("svg", {
+    style: {
+      margin: '0 5px'
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "8",
+    height: "16",
+    viewBox: "0 0 8 16",
+    fill: "none"
+  }, _react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0.75C1.30964 0.75 0.75 1.30964 0.75 2C0.75 2.69036 1.30964 3.25 2 3.25C2.69036 3.25 3.25 2.69036 3.25 2C3.25 1.30964 2.69036 0.75 2 0.75ZM2 4.75C1.30964 4.75 0.75 5.30964 0.75 6C0.75 6.69036 1.30964 7.25 2 7.25C2.69036 7.25 3.25 6.69036 3.25 6C3.25 5.30964 2.69036 4.75 2 4.75ZM0.75 10C0.75 9.30964 1.30964 8.75 2 8.75C2.69036 8.75 3.25 9.30964 3.25 10C3.25 10.6904 2.69036 11.25 2 11.25C1.30964 11.25 0.75 10.6904 0.75 10ZM6 4.75C5.30964 4.75 4.75 5.30964 4.75 6C4.75 6.69036 5.30964 7.25 6 7.25C6.69036 7.25 7.25 6.69036 7.25 6C7.25 5.30964 6.69036 4.75 6 4.75ZM4.75 2C4.75 1.30964 5.30964 0.75 6 0.75C6.69036 0.75 7.25 1.30964 7.25 2C7.25 2.69036 6.69036 3.25 6 3.25C5.30964 3.25 4.75 2.69036 4.75 2ZM6 8.75C5.30964 8.75 4.75 9.30964 4.75 10C4.75 10.6904 5.30964 11.25 6 11.25C6.69036 11.25 7.25 10.6904 7.25 10C7.25 9.30964 6.69036 8.75 6 8.75ZM0.75 14C0.75 13.3096 1.30964 12.75 2 12.75C2.69036 12.75 3.25 13.3096 3.25 14C3.25 14.6904 2.69036 15.25 2 15.25C1.30964 15.25 0.75 14.6904 0.75 14ZM6 12.75C5.30964 12.75 4.75 13.3096 4.75 14C4.75 14.6904 5.30964 15.25 6 15.25C6.69036 15.25 7.25 14.6904 7.25 14C7.25 13.3096 6.69036 12.75 6 12.75Z",
+    fill: "#1C6EE6"
+  }));
+};
+
+exports.default = _default;

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,CAY/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,17 +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,
-        rest = _objectWithoutProperties(_ref2, ["DataCell", "name", "getCellKey"]);
+        CustomHeaderCell = _ref2.HeaderCell,
+        getCellAttrs = _ref2.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,CA4BvD;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,25 @@ 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)(),
       _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
@@ -59,15 +71,17 @@ function HeaderCell(props) {
       dimensions = _useBreakpointObserve2[1].dimensions;
 
   (0, _react.useEffect)(function () {
-    fixed && onColumnResize && onColumnResize(name, dimensions.width || 0);
-  }, [onColumnResize, dimensions, fixed, name]);
+    (!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;