trotl-table 1.0.11 → 1.0.13

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { cloneElement, useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -370,7 +370,7 @@ var ArrowKeyStepper = /*#__PURE__*/function (_React$PureComponent) {
       var _this$_getScrollState3 = this._getScrollState(),
         scrollToColumn = _this$_getScrollState3.scrollToColumn,
         scrollToRow = _this$_getScrollState3.scrollToRow;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         className: className,
         onKeyDown: this._onKeyDown
       }, children({
@@ -424,7 +424,7 @@ var ArrowKeyStepper = /*#__PURE__*/function (_React$PureComponent) {
       return {};
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(ArrowKeyStepper, "defaultProps", {
   disabled: false,
   isControlled: false,
@@ -788,14 +788,14 @@ var AutoSizer = /*#__PURE__*/function (_React$Component) {
       }
       */
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         className: className,
         ref: this._setRef,
         style: _objectSpread$6(_objectSpread$6({}, outerStyle), style)
       }, children(childParams));
     }
   }]);
-}(React.Component);
+}(React$1.Component);
 _defineProperty(AutoSizer, "defaultProps", {
   onResize: function onResize() {},
   disableHeight: false,
@@ -834,7 +834,7 @@ var CellMeasurer = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper$c(this, CellMeasurer, [].concat(args));
-    _defineProperty(_this, "_child", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "_child", /*#__PURE__*/React$1.createRef());
     _defineProperty(_this, "_measure", function () {
       var _this$props = _this.props,
         cache = _this$props.cache,
@@ -975,7 +975,7 @@ var CellMeasurer = /*#__PURE__*/function (_React$PureComponent) {
       }
     }
   }]);
-}(React.PureComponent); // Used for DEV mode warning check
+}(React$1.PureComponent); // Used for DEV mode warning check
 _defineProperty(CellMeasurer, "__internalCellMeasurerFlag", false);
 if (process.env.NODE_ENV !== 'production') {
   CellMeasurer.__internalCellMeasurerFlag = true;
@@ -2557,7 +2557,7 @@ var CollectionView = /*#__PURE__*/function (_React$PureComponent) {
       // This was originally reported via clauderic/react-infinite-calendar/issues/23
       collectionStyle.overflowX = totalWidth + verticalScrollBarSize <= width ? 'hidden' : 'auto';
       collectionStyle.overflowY = totalHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto';
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props['aria-label'],
         className: clsx('ReactVirtualized__Collection', className),
@@ -2566,7 +2566,7 @@ var CollectionView = /*#__PURE__*/function (_React$PureComponent) {
         role: "grid",
         style: _objectSpread$5(_objectSpread$5({}, collectionStyle), style),
         tabIndex: 0
-      }, cellCount > 0 && /*#__PURE__*/React.createElement("div", {
+      }, cellCount > 0 && /*#__PURE__*/React$1.createElement("div", {
         className: "ReactVirtualized__Collection__innerScrollContainer",
         style: {
           height: totalHeight,
@@ -2670,7 +2670,7 @@ var CollectionView = /*#__PURE__*/function (_React$PureComponent) {
       return null;
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(CollectionView, "defaultProps", {
   'aria-label': 'grid',
   horizontalOverscanSize: 0,
@@ -3046,7 +3046,7 @@ var Collection = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var props = _extends({}, (_objectDestructuringEmpty(this.props), this.props));
-      return /*#__PURE__*/React.createElement(CollectionView, _extends({
+      return /*#__PURE__*/React$1.createElement(CollectionView, _extends({
         cellLayoutManager: this,
         isScrollingChange: this._isScrollingChange,
         ref: this._setCollectionViewRef
@@ -3168,7 +3168,7 @@ var Collection = /*#__PURE__*/function (_React$PureComponent) {
       this._collectionView = ref;
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(Collection, "defaultProps", {
   'aria-label': 'grid',
   cellGroupRenderer: defaultCellGroupRenderer
@@ -3309,7 +3309,7 @@ var ColumnSizer = /*#__PURE__*/function (_React$PureComponent) {
       }
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 ColumnSizer.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering a virtualized Grid.
@@ -5013,7 +5013,7 @@ var Grid = /*#__PURE__*/function (_React$PureComponent) {
       gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto';
       var childrenToDisplay = this._childrenToDisplay;
       var showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0;
-      return /*#__PURE__*/React.createElement("div", _extends({
+      return /*#__PURE__*/React$1.createElement("div", _extends({
         ref: this._setScrollingContainerRef
       }, containerProps, {
         "aria-label": this.props['aria-label'],
@@ -5024,7 +5024,7 @@ var Grid = /*#__PURE__*/function (_React$PureComponent) {
         role: role,
         style: _objectSpread$4(_objectSpread$4({}, gridStyle), style),
         tabIndex: tabIndex
-      }), childrenToDisplay.length > 0 && /*#__PURE__*/React.createElement("div", {
+      }), childrenToDisplay.length > 0 && /*#__PURE__*/React$1.createElement("div", {
         className: "ReactVirtualized__Grid__innerScrollContainer",
         role: containerRole,
         style: _objectSpread$4({
@@ -5558,7 +5558,7 @@ var Grid = /*#__PURE__*/function (_React$PureComponent) {
       return {};
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(Grid, "defaultProps", {
   'aria-label': 'grid',
   'aria-readonly': true,
@@ -5759,7 +5759,7 @@ var InfiniteLoader = /*#__PURE__*/function (_React$PureComponent) {
       this._registeredChild = registeredChild;
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 /**
  * Determines if the specified start/stop range is visible based on the most recently rendered range.
  */
@@ -6164,7 +6164,7 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
         scrollToIndex = _this$props.scrollToIndex,
         width = _this$props.width;
       var classNames = clsx('ReactVirtualized__List', className);
-      return /*#__PURE__*/React.createElement(Grid, _extends({}, this.props, {
+      return /*#__PURE__*/React$1.createElement(Grid, _extends({}, this.props, {
         autoContainerWidth: true,
         cellRenderer: this._cellRenderer,
         className: classNames,
@@ -6178,7 +6178,7 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
       }));
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(List, "defaultProps", {
   autoHeight: false,
   estimatedRowSize: 30,
@@ -7098,7 +7098,7 @@ var Masonry = /*#__PURE__*/function (_React$PureComponent) {
       }
       this._startIndex = startIndex;
       this._stopIndex = stopIndex;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         ref: this._setScrollingContainerRef,
         "aria-label": this.props['aria-label'],
         className: clsx('ReactVirtualized__Masonry', className),
@@ -7117,7 +7117,7 @@ var Masonry = /*#__PURE__*/function (_React$PureComponent) {
           willChange: 'transform'
         }, style),
         tabIndex: tabIndex
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React$1.createElement("div", {
         className: "ReactVirtualized__Masonry__innerScrollContainer",
         style: {
           width: '100%',
@@ -7217,7 +7217,7 @@ var Masonry = /*#__PURE__*/function (_React$PureComponent) {
       return null;
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(Masonry, "defaultProps", {
   autoHeight: false,
   keyMapper: identity,
@@ -7405,7 +7405,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         fixedRowCount = _this$props.fixedRowCount,
         rowCount = _this$props.rowCount;
       if (rowIndex === rowCount - fixedRowCount) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React$1.createElement("div", {
           key: rest.key,
           style: _objectSpread$2(_objectSpread$2({}, rest.style), {}, {
             height: SCROLLBAR_SIZE_BUFFER
@@ -7440,7 +7440,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         columnCount = _this$props3.columnCount,
         fixedColumnCount = _this$props3.fixedColumnCount;
       if (columnIndex === columnCount - fixedColumnCount) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React$1.createElement("div", {
           key: rest.key,
           style: _objectSpread$2(_objectSpread$2({}, rest.style), {}, {
             width: SCROLLBAR_SIZE_BUFFER
@@ -7689,14 +7689,14 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state4 = this.state,
         scrollLeft = _this$state4.scrollLeft,
         scrollTop = _this$state4.scrollTop;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         style: this._containerOuterStyle
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React$1.createElement("div", {
         style: this._containerTopStyle
       }, this._renderTopLeftGrid(rest), this._renderTopRightGrid(_objectSpread$2(_objectSpread$2({}, rest), {}, {
         onScroll: onScroll,
         scrollLeft: scrollLeft
-      }))), /*#__PURE__*/React.createElement("div", {
+      }))), /*#__PURE__*/React$1.createElement("div", {
         style: this._containerBottomStyle
       }, this._renderBottomLeftGrid(_objectSpread$2(_objectSpread$2({}, rest), {}, {
         onScroll: onScroll,
@@ -7902,7 +7902,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         width = this._getLeftGridWidth(props),
         scrollbarSize = this.state.showVerticalScrollbar ? this.state.scrollbarSize : 0,
         gridWidth = hideBottomLeftGridScrollbar ? width + scrollbarSize : width;
-      var bottomLeftGrid = /*#__PURE__*/React.createElement(Grid, _extends({}, props, {
+      var bottomLeftGrid = /*#__PURE__*/React$1.createElement(Grid, _extends({}, props, {
         cellRenderer: this._cellRendererBottomLeftGrid,
         className: this.props.classNameBottomLeftGrid,
         columnCount: fixedColumnCount,
@@ -7917,7 +7917,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         width: gridWidth
       }));
       if (hideBottomLeftGridScrollbar) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React$1.createElement("div", {
           className: "BottomLeftGrid_ScrollWrapper",
           style: _objectSpread$2(_objectSpread$2({}, this._bottomLeftGridStyle), {}, {
             height: height,
@@ -7937,7 +7937,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         rowCount = props.rowCount,
         scrollToColumn = props.scrollToColumn,
         scrollToRow = props.scrollToRow;
-      return /*#__PURE__*/React.createElement(Grid, _extends({}, props, {
+      return /*#__PURE__*/React$1.createElement(Grid, _extends({}, props, {
         cellRenderer: this._cellRendererBottomRightGrid,
         className: this.props.classNameBottomRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount),
@@ -7963,7 +7963,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
       if (!fixedColumnCount || !fixedRowCount) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(Grid, _extends({}, props, {
+      return /*#__PURE__*/React$1.createElement(Grid, _extends({}, props, {
         className: this.props.classNameTopLeftGrid,
         columnCount: fixedColumnCount,
         height: this._getTopGridHeight(props),
@@ -8001,7 +8001,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
           left: 0
         });
       }
-      var topRightGrid = /*#__PURE__*/React.createElement(Grid, _extends({}, props, {
+      var topRightGrid = /*#__PURE__*/React$1.createElement(Grid, _extends({}, props, {
         cellRenderer: this._cellRendererTopRightGrid,
         className: this.props.classNameTopRightGrid,
         columnCount: Math.max(0, columnCount - fixedColumnCount) + additionalColumnCount,
@@ -8017,7 +8017,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
         width: width
       }));
       if (hideTopRightGridScrollbar) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React$1.createElement("div", {
           className: "TopRightGrid_ScrollWrapper",
           style: _objectSpread$2(_objectSpread$2({}, this._topRightGridStyle), {}, {
             height: height,
@@ -8040,7 +8040,7 @@ var MultiGrid = /*#__PURE__*/function (_React$PureComponent) {
       return null;
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(MultiGrid, "defaultProps", {
   classNameBottomLeftGrid: '',
   classNameBottomRightGrid: '',
@@ -8143,7 +8143,7 @@ var ScrollSync = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 ScrollSync.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Function responsible for rendering 2 or more virtualized components.
@@ -8188,7 +8188,7 @@ function defaultHeaderRowRenderer(_ref /*:: */) {
   var className = _ref /*:: */.className,
     columns = _ref /*:: */.columns,
     style = _ref /*:: */.style;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     className: className,
     role: "row",
     style: style
@@ -8217,16 +8217,16 @@ function SortIndicator(_ref) {
     'ReactVirtualized__Table__sortableHeaderIcon--ASC': sortDirection === SortDirection.ASC,
     'ReactVirtualized__Table__sortableHeaderIcon--DESC': sortDirection === SortDirection.DESC
   });
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React$1.createElement("svg", {
     className: classNames,
     width: 18,
     height: 18,
     viewBox: "0 0 24 24"
-  }, sortDirection === SortDirection.ASC ? /*#__PURE__*/React.createElement("path", {
+  }, sortDirection === SortDirection.ASC ? /*#__PURE__*/React$1.createElement("path", {
     d: "M7 14l5-5 5 5z"
-  }) : /*#__PURE__*/React.createElement("path", {
+  }) : /*#__PURE__*/React$1.createElement("path", {
     d: "M7 10l5 5 5-5z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React$1.createElement("path", {
     d: "M0 0h24v24H0z",
     fill: "none"
   }));
@@ -8245,13 +8245,13 @@ function defaultHeaderRenderer(_ref /*:: */) {
     sortBy = _ref /*:: */.sortBy,
     sortDirection = _ref /*:: */.sortDirection;
   var showSortIndicator = sortBy === dataKey;
-  var children = [/*#__PURE__*/React.createElement("span", {
+  var children = [/*#__PURE__*/React$1.createElement("span", {
     className: "ReactVirtualized__Table__headerTruncatedText",
     key: "label",
     title: typeof label === 'string' ? label : null
   }, label)];
   if (showSortIndicator) {
-    children.push(/*#__PURE__*/React.createElement(SortIndicator, {
+    children.push(/*#__PURE__*/React$1.createElement(SortIndicator, {
       key: "SortIndicator",
       sortDirection: sortDirection
     }));
@@ -8327,7 +8327,7 @@ function defaultRowRenderer(_ref /*:: */) {
       };
     }
   }
-  return /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
+  return /*#__PURE__*/React$1.createElement("div", _extends({}, a11yProps, {
     className: className,
     key: key,
     role: "row",
@@ -8348,7 +8348,7 @@ var Column = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(Column, _React$Component);
   return _createClass(Column);
-}(React.Component);
+}(React$1.Component);
 _defineProperty(Column, "defaultProps", {
   cellDataGetter: defaultCellDataGetter,
   cellRenderer: defaultCellRenderer,
@@ -8587,7 +8587,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
 
       // Precompute and cache column styles before rendering rows and columns to speed things up
       this._cachedColumnStyles = [];
-      React.Children.toArray(children).forEach(function (column, index) {
+      React$1.Children.toArray(children).forEach(function (column, index) {
         var flexStyles = _this2._getFlexStyleForColumn(column, column.props.style || Column.defaultProps.style);
         _this2._cachedColumnStyles[index] = _objectSpread$1({
           overflow: 'hidden'
@@ -8597,10 +8597,10 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       // Note that we specify :rowCount, :scrollbarWidth, :sortBy, and :sortDirection as properties on Grid even though these have nothing to do with Grid.
       // This is done because Grid is a pure component and won't update unless its properties or state has changed.
       // Any property that should trigger a re-render of Grid then is specified here to avoid a stale display.
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         "aria-label": this.props['aria-label'],
         "aria-labelledby": this.props['aria-labelledby'],
-        "aria-colcount": React.Children.toArray(children).length,
+        "aria-colcount": React$1.Children.toArray(children).length,
         "aria-rowcount": this.props.rowCount,
         className: clsx('ReactVirtualized__Table', className),
         id: id,
@@ -8615,7 +8615,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
           paddingRight: scrollbarWidth,
           width: width
         }, rowStyleObject)
-      }), /*#__PURE__*/React.createElement(Grid, _extends({}, this.props, {
+      }), /*#__PURE__*/React$1.createElement(Grid, _extends({}, this.props, {
         elementRef: this._setGridElementRef,
         "aria-readonly": null,
         autoContainerWidth: true,
@@ -8682,7 +8682,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       // Avoid using object-spread syntax with multiple objects here,
       // Since it results in an extra method call to 'babel-runtime/helpers/extends'
       // See PR https://github.com/bvaughn/react-virtualized/pull/942
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         "aria-colindex": columnIndex + 1,
         "aria-describedby": id,
         className: clsx('ReactVirtualized__Table__rowColumn', className),
@@ -8765,7 +8765,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       // Avoid using object-spread syntax with multiple objects here,
       // Since it results in an extra method call to 'babel-runtime/helpers/extends'
       // See PR https://github.com/bvaughn/react-virtualized/pull/942
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React$1.createElement("div", {
         "aria-label": headerAriaLabel,
         "aria-sort": headerAriaSort,
         className: classNames,
@@ -8808,7 +8808,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       var rowData = rowGetter({
         index: index
       });
-      var columns = React.Children.toArray(children).map(function (column, columnIndex) {
+      var columns = React$1.Children.toArray(children).map(function (column, columnIndex) {
         return _this3._createColumn({
           column: column,
           columnIndex: columnIndex,
@@ -8869,7 +8869,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props4 = this.props,
         children = _this$props4.children,
         disableHeader = _this$props4.disableHeader;
-      var items = disableHeader ? [] : React.Children.toArray(children);
+      var items = disableHeader ? [] : React$1.Children.toArray(children);
       return items.map(function (column, index) {
         return _this4._createHeader({
           column: column,
@@ -8932,7 +8932,7 @@ var Table$1 = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(Table$1, "defaultProps", {
   disableHeader: false,
   estimatedRowSize: 30,
@@ -8968,7 +8968,7 @@ Table$1.propTypes = process.env.NODE_ENV !== "production" ? {
   autoHeight: PropTypes.bool,
   /** One or more Columns describing the data displayed in this row */
   children: function children(props) {
-    var children = React.Children.toArray(props.children);
+    var children = React$1.Children.toArray(props.children);
     for (var i = 0; i < children.length; i++) {
       var childType = children[i].type;
       if (childType !== Column && !(childType.prototype instanceof Column)) {
@@ -9347,7 +9347,7 @@ var WindowScroller = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "_positionFromLeft", 0);
     _defineProperty(_this, "_detectElementResize", void 0);
     _defineProperty(_this, "_child", void 0);
-    _defineProperty(_this, "_windowScrollerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "_windowScrollerRef", /*#__PURE__*/React$1.createRef());
     _defineProperty(_this, "state", _objectSpread(_objectSpread({}, getDimensions(_this.props.scrollElement, _this.props)), {}, {
       isScrolling: false,
       scrollLeft: 0,
@@ -9497,7 +9497,7 @@ var WindowScroller = /*#__PURE__*/function (_React$PureComponent) {
         scrollLeft = _this$state2.scrollLeft,
         height = _this$state2.height,
         width = _this$state2.width;
-      return /*#__PURE__*/React.createElement('div', {
+      return /*#__PURE__*/React$1.createElement('div', {
         ref: this._windowScrollerRef
       }, children({
         onChildScroll: this._onChildScroll,
@@ -9510,7 +9510,7 @@ var WindowScroller = /*#__PURE__*/function (_React$PureComponent) {
       }));
     }
   }]);
-}(React.PureComponent);
+}(React$1.PureComponent);
 _defineProperty(WindowScroller, "defaultProps", {
   onResize: function onResize() {},
   onScroll: function onScroll() {},
@@ -9590,7 +9590,8 @@ const DraggableRow = ({
   index,
   moveRow,
   children,
-  item,
+  row,
+  tableId,
   enableDrag,
   listRef
 }) => {
@@ -9599,7 +9600,6 @@ const DraggableRow = ({
     accept: ITEM_TYPE,
     hover(draggedItem, monitor) {
       if (!ref.current || !enableDrag) return;
-      ref.current.getBoundingClientRect();
       const clientOffset = monitor.getClientOffset();
 
       // Auto-scroll logic
@@ -9629,23 +9629,31 @@ const DraggableRow = ({
   }, drag] = useDrag({
     type: ITEM_TYPE,
     item: {
-      index
+      index,
+      row,
+      sourceTableId: tableId
     },
     canDrag: enableDrag,
     collect: monitor => ({
       isDragging: monitor.isDragging()
     })
   });
-  drag(drop(ref));
+  // Compose drag & drop refs in effect to avoid reading ref during render
+  const setRef = useCallback(node => {
+    if (node) {
+      ref.current = node;
+      drag(drop(node));
+    }
+  }, [drag, drop]);
   return /*#__PURE__*/React__default.createElement("div", {
-    ref: ref,
+    ref: setRef,
     style: {
       opacity: isDragging ? 0.5 : 1,
       cursor: enableDrag ? "move" : "default"
     }
   }, children);
 };
-function Table({
+function TableInner({
   tableId = "default",
   columns = [],
   data = [],
@@ -9662,7 +9670,12 @@ function Table({
   deleteCallback = null,
   buttons = ["view", "edit", "delete"],
   enableDragRow = false,
-  enableSearchUrlParam = false
+  enableSearchUrlParam = false,
+  enableMultiSelect = false,
+  enableExternalRowDrop = false,
+  onExternalRowDrop = () => {},
+  useExternalDndContext = false,
+  customColumns = []
 }) {
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = useState([]);
@@ -9800,7 +9813,7 @@ function Table({
   const toggleGroup = gid => {
     setExpandedGroups(prev => ({
       ...prev,
-      [gid]: !Boolean(prev[gid])
+      [gid]: !prev[gid]
     }));
   };
   useEffect(() => {
@@ -9913,40 +9926,90 @@ function Table({
   const showDelete = buttons.includes("delete");
   const showActions = showView || showEdit || showDelete;
 
-  // MOVE ROW
-  const moveRow = useCallback((fromIndex, toIndex) => {
+  // MOVE ROW (internal + between groups)
+  // moveRow: allow toIndex to be null or an object { emptyGroupId } for empty group drop
+  const moveRow = useCallback((fromIndex, toIndexOrGroup) => {
     const from = tableDataFlat[fromIndex];
-    const to = tableDataFlat[toIndex];
-    if (!from || !to || from.type !== "row" || to.type !== "row") return;
-
-    // Only reorder within the same group to keep grouping consistent
-    if (isGrouped && from.groupId !== to.groupId) return;
+    let to = null;
+    let emptyGroupId = null;
+    if (typeof toIndexOrGroup === 'object' && toIndexOrGroup && toIndexOrGroup.emptyGroupId) {
+      emptyGroupId = toIndexOrGroup.emptyGroupId;
+    } else {
+      to = tableDataFlat[toIndexOrGroup];
+    }
+    if (!from || from.type !== "row" || toIndexOrGroup !== null && !to && !emptyGroupId) return;
     setLocalData(prev => {
       if (isGrouped) {
-        // Reorder within the target group
-        const gid = from.groupId;
-        return prev.map(group => {
+        // Remove from old group
+        let movedRow;
+        const newGroups = prev.map(group => {
           const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
-          if (groupId !== gid) return group;
-          const rows = [...group.rows];
-          const fromPos = rows.findIndex(r => r.id === from.row.id);
-          const toPos = rows.findIndex(r => r.id === to.row.id);
-          if (fromPos === -1 || toPos === -1) return group;
-          const [moved] = rows.splice(fromPos, 1);
-          rows.splice(toPos, 0, moved);
-          return {
-            ...group,
-            rows
-          };
+          if (groupId === from.groupId) {
+            const rows = [...group.rows];
+            const fromPos = rows.findIndex(r => r.id === from.row.id);
+            if (fromPos !== -1) {
+              [movedRow] = rows.splice(fromPos, 1);
+            }
+            return {
+              ...group,
+              rows
+            };
+          }
+          return group;
+        });
+        if (!movedRow) return prev;
+        // Insert into new group at correct position
+        return newGroups.map(group => {
+          const groupId = group[groupKey] ?? group.groupId ?? group.groupName;
+          // If dropping into empty group
+          if (emptyGroupId && groupId === emptyGroupId) {
+            const rows = [...group.rows];
+            if (groupKey && movedRow[groupKey] !== undefined) {
+              movedRow = {
+                ...movedRow,
+                [groupKey]: groupId
+              };
+            }
+            rows.push(movedRow);
+            return {
+              ...group,
+              rows
+            };
+          }
+          // Normal drop
+          if (to && groupId === to.groupId) {
+            const rows = [...group.rows];
+            const toPos = rows.findIndex(r => r.id === to.row.id);
+            if (groupKey && movedRow[groupKey] !== undefined) {
+              movedRow = {
+                ...movedRow,
+                [groupKey]: groupId
+              };
+            }
+            if (toPos === -1) {
+              rows.push(movedRow);
+            } else {
+              rows.splice(toPos, 0, movedRow);
+            }
+            return {
+              ...group,
+              rows
+            };
+          }
+          return group;
         });
       } else {
         // Ungrouped: reorder the flat list
         const arr = Array.isArray(prev) ? [...prev] : [];
         const fromPos = arr.findIndex(r => r.id === from.row.id);
-        const toPos = arr.findIndex(r => r.id === to.row.id);
-        if (fromPos === -1 || toPos === -1) return prev;
+        const toPos = to ? arr.findIndex(r => r.id === to.row.id) : -1;
+        if (fromPos === -1 || to && toPos === -1) return prev;
         const [moved] = arr.splice(fromPos, 1);
-        arr.splice(toPos, 0, moved);
+        if (to) {
+          arr.splice(toPos, 0, moved);
+        } else {
+          arr.push(moved);
+        }
         return arr;
       }
     });
@@ -9964,12 +10027,81 @@ function Table({
       const gid = item.groupId;
       const rows = groupRowsById[gid] || [];
       const allSelected = rows.length > 0 && rows.every(r => selectedRows.includes(r.id));
+
+      // If expanded and group is empty and drag enabled, make the group header itself a drop target
+      if (item.expanded && rows.length === 0 && enableDragRow) {
+        // For empty group, drop target pushes into this group
+        const GroupHeaderDrop = () => {
+          const ref = useRef(null);
+          const [, drop] = useDrop({
+            accept: ITEM_TYPE,
+            drop(draggedItem) {
+              if (draggedItem && typeof draggedItem.index === "number") {
+                moveRow(draggedItem.index, {
+                  emptyGroupId: gid
+                });
+              }
+            },
+            canDrop: () => true,
+            collect: monitor => ({
+              isOver: monitor.isOver(),
+              canDrop: monitor.canDrop()
+            })
+          });
+          drop(ref);
+          return /*#__PURE__*/React__default.createElement("div", {
+            ref: ref,
+            key: key,
+            style: {
+              ...style,
+              background: '#f6f6fa',
+              border: '2px dashed #bbb',
+              textAlign: 'center',
+              color: '#888',
+              minHeight: rowHeight,
+              display: 'flex',
+              alignItems: 'center'
+            },
+            className: "table-row group-row empty-group-drop",
+            onClick: () => toggleGroup(gid)
+          }, enableMultiSelect && showDelete && /*#__PURE__*/React__default.createElement("div", {
+            className: "table-cell checkbox-cell"
+          }, /*#__PURE__*/React__default.createElement("input", {
+            type: "checkbox",
+            checked: allSelected,
+            onChange: e => {
+              e.stopPropagation();
+              const ids = rows.map(r => r.id);
+              if (allSelected) {
+                setSelectedRows(prev => prev.filter(id => !ids.includes(id)));
+              } else {
+                setSelectedRows(prev => [...prev, ...ids.filter(id => !prev.includes(id))]);
+              }
+            },
+            onClick: e => e.stopPropagation()
+          })), showKey && /*#__PURE__*/React__default.createElement("div", {
+            className: "table-cell key-cell"
+          }), /*#__PURE__*/React__default.createElement("div", {
+            className: "table-cell group-header",
+            style: {
+              width: '100%'
+            }
+          }, item.expanded ? "▾" : "▸", " ", item.groupName, " (0) \u2014 Drop here to move into this group"), columns.slice(1).map((_, i) => /*#__PURE__*/React__default.createElement("div", {
+            key: i,
+            className: "table-cell"
+          })), showActions && /*#__PURE__*/React__default.createElement("div", {
+            className: "table-cell action-cell"
+          }));
+        };
+        return /*#__PURE__*/React__default.createElement(GroupHeaderDrop, null);
+      }
+      // Default: normal group header
       return /*#__PURE__*/React__default.createElement("div", {
         key: key,
         style: style,
         className: "table-row group-row",
         onClick: () => toggleGroup(gid)
-      }, /*#__PURE__*/React__default.createElement("div", {
+      }, enableMultiSelect && showDelete && /*#__PURE__*/React__default.createElement("div", {
         className: "table-cell checkbox-cell"
       }, /*#__PURE__*/React__default.createElement("input", {
         type: "checkbox",
@@ -9977,7 +10109,11 @@ function Table({
         onChange: e => {
           e.stopPropagation();
           const ids = rows.map(r => r.id);
-          ids.forEach(id => toggleRowSelection(tableId, id));
+          if (allSelected) {
+            setSelectedRows(prev => prev.filter(id => !ids.includes(id)));
+          } else {
+            setSelectedRows(prev => [...prev, ...ids.filter(id => !prev.includes(id))]);
+          }
         },
         onClick: e => e.stopPropagation()
       })), showKey && /*#__PURE__*/React__default.createElement("div", {
@@ -9993,11 +10129,25 @@ function Table({
     }
     const row = item.row;
     const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
+
+    // Compose columns + custom columns
+    const allColumns = [...columns];
+    // Insert custom columns at specified places
+    if (Array.isArray(customColumns)) {
+      customColumns.forEach(col => {
+        if (typeof col.place === 'number') {
+          allColumns.splice(col.place, 0, {
+            ...col,
+            isCustom: true
+          });
+        }
+      });
+    }
     const content = /*#__PURE__*/React__default.createElement("div", {
       key: key,
       style: style,
       className: "table-row"
-    }, showDelete && /*#__PURE__*/React__default.createElement("div", {
+    }, enableMultiSelect && showDelete && /*#__PURE__*/React__default.createElement("div", {
       className: "table-cell checkbox-cell"
     }, /*#__PURE__*/React__default.createElement("input", {
       type: "checkbox",
@@ -10005,10 +10155,22 @@ function Table({
       onChange: () => toggleRowSelection(row.id)
     })), showKey && /*#__PURE__*/React__default.createElement("div", {
       className: "table-cell key-cell"
-    }, visualIndex), columns.map((col, i) => /*#__PURE__*/React__default.createElement("div", {
-      key: i,
-      className: "table-cell"
-    }, renderCell(row[col.accessor], col.accessor))), showActions && /*#__PURE__*/React__default.createElement("div", {
+    }, visualIndex), allColumns.map((col, i) => {
+      let cellStyle = col.isCustom && col.style ? {
+        ...col.style
+      } : undefined;
+      if (col.isCustom && col.style && col.style.width) {
+        cellStyle = cellStyle || {};
+        cellStyle.minWidth = col.style.width;
+        cellStyle.maxWidth = col.style.width;
+        cellStyle.width = col.style.width;
+      }
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: i,
+        className: "table-cell",
+        style: cellStyle
+      }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(row[col.accessor], col.accessor, row));
+    }), showActions && /*#__PURE__*/React__default.createElement("div", {
       className: "table-cell action-cell"
     }, showView && /*#__PURE__*/React__default.createElement("button", {
       className: "action-btn-table",
@@ -10038,20 +10200,59 @@ function Table({
         key: key,
         index: index,
         moveRow: moveRow,
-        item: item,
+        row: row,
+        tableId: tableId,
         enableDrag: true,
         listRef: listRef
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, tableId, viewCallback, editCallback, enableDragRow, moveRow]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, viewCallback, editCallback, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
-  return /*#__PURE__*/React__default.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "table-container"
+
+  // Table-level drop target only when using external DnD context
+  const tableContainerRef = useRef(null);
+  const [{
+    isOver: isExternalOver,
+    canDrop: canExternalDrop
+  }, externalDrop] = useDrop({
+    accept: ITEM_TYPE,
+    drop: draggedItem => {
+      if (!useExternalDndContext) return; // safety
+      if (!enableExternalRowDrop || isGrouped) return;
+      if (!draggedItem || draggedItem.sourceTableId === tableId) return;
+      onExternalRowDrop(draggedItem.row, draggedItem.sourceTableId, tableId);
+    }
+  });
+  const setTableRef = useCallback(node => {
+    tableContainerRef.current = node;
+    if (node && useExternalDndContext && enableExternalRowDrop) {
+      externalDrop(node);
+    }
+  }, [useExternalDndContext, enableExternalRowDrop, externalDrop]);
+
+  // Compose columns + custom columns for header
+  const allColumns = [...columns];
+  if (Array.isArray(customColumns)) {
+    customColumns.forEach(col => {
+      if (typeof col.place === 'number') {
+        allColumns.splice(col.place, 0, {
+          ...col,
+          isCustom: true
+        });
+      }
+    });
+  }
+  const tableMarkup = /*#__PURE__*/React__default.createElement("div", {
+    className: "table-container",
+    ref: setTableRef,
+    style: useExternalDndContext && enableExternalRowDrop ? {
+      transition: 'background 0.15s',
+      background: isExternalOver && canExternalDrop ? 'rgba(100,108,255,0.15)' : undefined,
+      outline: isExternalOver && canExternalDrop ? '2px dashed #646cff' : undefined
+    } : undefined
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "table-header",
     style: {
@@ -10062,7 +10263,7 @@ function Table({
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "table-row header-row"
-  }, showDelete && /*#__PURE__*/React__default.createElement("div", {
+  }, enableMultiSelect && showDelete && /*#__PURE__*/React__default.createElement("div", {
     className: "table-cell checkbox-cell"
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "checkbox",
@@ -10077,14 +10278,29 @@ function Table({
     }
   })), showKey && /*#__PURE__*/React__default.createElement("div", {
     className: "table-cell key-cell"
-  }, "#"), columns.map((col, i) => /*#__PURE__*/React__default.createElement("div", {
-    key: i,
-    className: "table-cell",
-    onClick: () => setSort(col.accessor),
-    style: {
-      cursor: "pointer"
+  }, "#"), allColumns.map((col, i) => {
+    // For custom columns, apply width and textAlign to header cell
+    let cellStyle = col.isCustom && col.style ? {
+      ...col.style,
+      cursor: undefined,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: col.style.textAlign === 'center' ? 'center' : col.style.textAlign === 'right' ? 'flex-end' : 'flex-start'
+    } : {
+      cursor: col.isCustom ? undefined : "pointer"
+    };
+    if (col.isCustom && col.style && col.style.width) {
+      cellStyle.minWidth = col.style.width;
+      cellStyle.maxWidth = col.style.width;
+      cellStyle.width = col.style.width;
     }
-  }, col.header, sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"))), showActions && /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: i,
+      className: "table-cell",
+      style: cellStyle,
+      onClick: col.isCustom ? undefined : () => setSort(col.accessor)
+    }, col.isCustom ? col.header ?? '' : col.header, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
+  }), showActions && /*#__PURE__*/React__default.createElement("div", {
     className: "table-cell action-cell"
   }, "Action"))), /*#__PURE__*/React__default.createElement("div", {
     className: "main-table",
@@ -10110,11 +10326,65 @@ function Table({
     cancelLabel: "Cancel",
     showCancel: true,
     showConfirm: true
-  }, /*#__PURE__*/React__default.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React__default.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?"))));
+  }, /*#__PURE__*/React__default.createElement("p", null, "Are you sure you want to delete ", /*#__PURE__*/React__default.createElement("strong", null, pendingDelete?.name || pendingDelete?.id), "?")));
+  return tableMarkup;
+}
+function Table(props) {
+  const {
+    useExternalDndContext = false
+  } = props;
+  if (useExternalDndContext) {
+    return /*#__PURE__*/React__default.createElement(TableInner, props);
+  }
+  // Provide DnD context when not supplied externally
+  return /*#__PURE__*/React__default.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React__default.createElement(TableInner, props));
+}
+
+function Switch({
+  checked,
+  onChange
+}) {
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    style: {
+      display: "none"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 36,
+      height: 20,
+      background: checked ? "#4caf50" : "#ccc",
+      borderRadius: 12,
+      position: "relative",
+      transition: "background 0.2s",
+      display: "inline-block"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: checked ? 18 : 2,
+      top: 2,
+      width: 16,
+      height: 16,
+      background: "#fff",
+      borderRadius: "50%",
+      transition: "left 0.2s"
+    }
+  })));
 }
 
 // src/index.js
- // if you want named import
+ // named exports for both
 
-export { Table, Table as default };
+export { Switch, Table, Table as default };
 //# sourceMappingURL=index.esm.js.map