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

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,16 +1,25 @@
 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;
     };
+    isDragging: boolean;
+    setIsDragging: (value: boolean) => void;
+    contextId: string;
+    hasDragHandlers: boolean;
+    setHasDragHandlers: (value: boolean) => void;
+    fixedColumns: FixedColumns;
+    dragVariant?: DragVariant;
 }
-interface TableProviderProps extends Pick<TableContextValue, 'onColumnResize' | 'columnsOffset'> {
+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, onColumnResize, columnsOffset, }: 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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAA2B,EACzB,aAAa,EACb,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAEpC,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,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;CACH;AAED,UAAU,kBACR,SAAQ,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,GAAG,eAAe,CAAC;IACnE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,kCAGvB,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,aAAa,GACd,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAalC;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

@@ -5,21 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TableContext = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useSortableHeaders = _interopRequireDefault(require("./hooks/useSortableHeaders"));
 
+var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
+
 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 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 _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; }
+
 var TableContext = _react.default.createContext({
   sort: function sort() {},
-  columnsOffset: {}
+  isDnDEnabled: false,
+  columnsWidth: {},
+  isDragging: false,
+  setIsDragging: function setIsDragging() {},
+  contextId: '',
+  hasDragHandlers: true,
+  setHasDragHandlers: function setHasDragHandlers() {},
+  fixedColumns: {}
 });
 
 exports.TableContext = TableContext;
@@ -27,14 +46,35 @@ exports.TableContext = TableContext;
 function TableProvider(_ref) {
   var children = _ref.children,
       defaultSort = _ref.defaultSort,
+      isDnDEnabled = _ref.isDnDEnabled,
       onColumnResize = _ref.onColumnResize,
-      columnsOffset = _ref.columnsOffset;
+      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-');
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
   return _react.default.createElement(TableContext.Provider, {
     value: _objectSpread({
       onColumnResize: onColumnResize,
-      columnsOffset: columnsOffset
-    }, sortableProps)
+      fixedColumns: fixedColumns
+    }, sortableProps, {
+      isDnDEnabled: isDnDEnabled,
+      columnsWidth: columnsWidth,
+      isDragging: isDragging,
+      setIsDragging: setIsDragging,
+      contextId: contextId,
+      hasDragHandlers: hasDragHandlers,
+      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,CAwC3D;kBAxCQ,KAAK;;;;;;;;;;;;;AAoHd,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,8 +104,11 @@ function Table(props) {
       defaultSort = props.defaultSort,
       footer = props.footer,
       toolbar = props.toolbar,
-      columns = props.columns,
-      rest = _objectWithoutProperties(props, ["data", "defaultSort", "footer", "toolbar", "columns"]);
+      columnsProp = props.columns,
+      onDragEnd = props.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),
@@ -107,17 +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)
+    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
@@ -127,7 +184,8 @@ function Table(props) {
     columns: columns
   })), _react.default.createElement(_Body.default, _extends({}, rest, {
     columns: columns,
-    data: data
+    data: data,
+    onDragEnd: onDragEnd
   })))), _react.default.createElement(_Foot.default, {
     kind: rest.kind,
     variant: rest.variant,
@@ -136,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
@@ -151,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,
@@ -158,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);
 
@@ -166,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;
+  getRowKey: (0, _propTypes.requireIf)(_propTypes2.default.func, function (_ref3) {
+    var data = _ref3.data;
     return !((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,