@decisiv/ui-components 2.0.0 → 2.0.1-alpha.100

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

@@ -5,12 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
 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; } }
+
+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; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
@@ -23,12 +45,43 @@ 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,
-      rest = _objectWithoutProperties(props, ["name", "title"]);
+      fixed = props.fixed,
+      getHeaderCellAttrs = props.getHeaderCellAttrs;
+
+  var _useContext = (0, _react.useContext)(_Provider.TableContext),
+      onColumnResize = _useContext.onColumnResize,
+      fixedColumns = _useContext.fixedColumns,
+      isDragging = _useContext.isDragging;
+
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      ref = _useBreakpointObserve2[0],
+      dimensions = _useBreakpointObserve2[1].dimensions;
 
-  return isSortableHeader(props) ? _react.default.createElement(_SortableHeaderCell.default, props) : _react.default.createElement("span", rest, title);
+  (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: (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,7 +7,12 @@ export interface HeaderCellProps {
     sortBy?: (sortingType: SortingTypes) => void;
     title?: string;
     variant?: VariantModifiers;
+    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;CAC5B;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,10 +1,25 @@
 import React from 'react';
 import { SortableState, UseSortableHeaders } from './hooks/useSortableHeaders';
-interface TableProviderProps {
+import { FixedColumns, DragVariant } from './types';
+interface TableContextValue extends UseSortableHeaders {
+    isDnDEnabled: boolean;
+    onColumnResize?: (columnName: string, width: number) => void;
+    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' | 'fixedColumns' | 'columnsWidth' | 'isDnDEnabled' | 'hasDragHandlers' | 'setHasDragHandlers' | 'dragVariant'> {
     children: JSX.Element;
     defaultSort?: SortableState;
 }
-export declare const TableContext: React.Context<UseSortableHeaders>;
-declare function TableProvider({ children, defaultSort, }: TableProviderProps): JSX.Element;
+export declare const TableContext: React.Context<TableContextValue>;
+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;AAIpC,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mCAEvB,CAAC;AAEH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAYlC;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,30 +5,76 @@ 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() {}
+  sort: function sort() {},
+  isDnDEnabled: false,
+  columnsWidth: {},
+  isDragging: false,
+  setIsDragging: function setIsDragging() {},
+  contextId: '',
+  hasDragHandlers: true,
+  setHasDragHandlers: function setHasDragHandlers() {},
+  fixedColumns: {}
 });
 
 exports.TableContext = TableContext;
 
 function TableProvider(_ref) {
   var children = _ref.children,
-      defaultSort = _ref.defaultSort;
+      defaultSort = _ref.defaultSort,
+      isDnDEnabled = _ref.isDnDEnabled,
+      onColumnResize = _ref.onColumnResize,
+      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({}, sortableProps)
+    value: _objectSpread({
+      onColumnResize: onColumnResize,
+      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;AAE9C,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,CAiB3D;kBAjBQ,KAAK;;;;;;;;;;;;;AAqEd,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

@@ -41,7 +41,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _modifiersPropApplies = _interopRequireDefault(require("../../utils/modifiersPropApplies"));
 
@@ -61,17 +61,39 @@ var _schema = _interopRequireDefault(require("./schema"));
 
 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; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _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; }
 
 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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -82,17 +104,88 @@ function Table(props) {
       defaultSort = props.defaultSort,
       footer = props.footer,
       toolbar = props.toolbar,
-      rest = _objectWithoutProperties(props, ["data", "defaultSort", "footer", "toolbar"]);
+      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),
+      columnsWidth = _useState2[0],
+      setColumnsWidth = _useState2[1];
+
+  var onColumnResize = (0, _react.useCallback)(function (name, width) {
+    setColumnsWidth(function (prevColumnsWidth) {
+      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));
+    }
+
+    return columnsProp;
+  }, [isDnDEnabled, hasDragHandlers, columnsProp, dragVariant]);
+  var fixedColumns = (0, _react.useMemo)(function () {
+    return (0, _utils.calculateOffsets)(columns, columnsWidth);
+  }, [columns, columnsWidth]);
   return _react.default.createElement(_Provider.default, {
-    defaultSort: defaultSort
+    defaultSort: defaultSort,
+    onColumnResize: onColumnResize,
+    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
   }), _react.default.createElement(_Container.default, _extends({}, rest, {
     hasFooter: !!footer
-  }), _react.default.createElement("table", null, _react.default.createElement(_Head.default, rest), _react.default.createElement(_Body.default, _extends({}, rest, {
-    data: data
+  }), _react.default.createElement("table", null, _react.default.createElement(_Head.default, _extends({}, rest, {
+    columns: columns
+  })), _react.default.createElement(_Body.default, _extends({}, rest, {
+    columns: columns,
+    data: data,
+    onDragEnd: onDragEnd
   })))), _react.default.createElement(_Foot.default, {
     kind: rest.kind,
     variant: rest.variant,
@@ -101,29 +194,82 @@ 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;
   }),
-  columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    DataCell: _propTypes2.default.elementType.isRequired,
-    getCellKey: _propTypes2.default.func,
-    name: _propTypes2.default.string.isRequired,
-    sortBy: _propTypes2.default.func,
-    title: _propTypes2.default.string
-  })).isRequired,
+  // eslint-disable-next-line react/require-default-props
+  columns: function columns(props, propName, componentName) {
+    var scroll = props.scroll,
+        columns = props.columns;
+
+    if (columns.some(function (column) {
+      return !!column.fixed;
+    }) && (Array.isArray(scroll) ? !scroll.includes('x') : scroll !== 'x')) {
+      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,
+        getCellKey: _propTypes2.default.func,
+        name: _propTypes2.default.string.isRequired,
+        sortBy: _propTypes2.default.func,
+        title: _propTypes2.default.string,
+        fixed: _propTypes2.default.bool
+      }))
+    }, props, propName, componentName);
+
+    return null;
+  },
   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,