@tanstack/react-table 8.0.0-alpha.1 → 8.0.0-alpha.2

package/build/umd/index.development.js

@@ -675,12 +675,12 @@
   };
 
   //
-  function getInitialState$6() {
+  function getInitialState$7() {
     return {
       columnVisibility: {}
     };
   }
-  function getDefaultOptions$6(instance) {
+  function getDefaultOptions$7(instance) {
     return {
       onColumnVisibilityChange: makeStateUpdater('columnVisibility', instance)
     };
@@ -690,7 +690,7 @@
       defaultIsVisible: true
     };
   }
-  function createColumn$4(column, instance) {
+  function createColumn$5(column, instance) {
     return {
       getCanHide: function getCanHide() {
         return instance.getColumnCanHide(column.id);
@@ -714,7 +714,7 @@
       }
     };
   }
-  function getInstance$7(instance) {
+  function getInstance$8(instance) {
     return {
       getVisibleFlatColumns: memo(function () {
         return [instance.getAllFlatColumns(), instance.getAllFlatColumns().filter(function (d) {
@@ -929,19 +929,19 @@
       aggregationType: 'auto'
     };
   }
-  function getInitialState$5() {
+  function getInitialState$6() {
     return {
       grouping: []
     };
   }
-  function getDefaultOptions$5(instance) {
+  function getDefaultOptions$6(instance) {
     return {
       onGroupingChange: makeStateUpdater('grouping', instance),
       autoResetGrouping: true,
       groupedColumnMode: 'reorder'
     };
   }
-  function createColumn$3(column, instance) {
+  function createColumn$4(column, instance) {
     return {
       aggregationType: column.aggregationType,
       getCanGroup: function getCanGroup() {
@@ -961,7 +961,7 @@
       }
     };
   }
-  function getInstance$6(instance) {
+  function getInstance$7(instance) {
     return {
       getColumnAutoAggregationFn: function getColumnAutoAggregationFn(columnId) {
         var firstRow = instance.getCoreFlatRows()[0];
@@ -1126,17 +1126,17 @@
   }
 
   //
-  function getInitialState$4() {
+  function getInitialState$5() {
     return {
       columnOrder: []
     };
   }
-  function getDefaultOptions$4(instance) {
+  function getDefaultOptions$5(instance) {
     return {
       onColumnOrderChange: makeStateUpdater('columnOrder', instance)
     };
   }
-  function getInstance$5(instance) {
+  function getInstance$6(instance) {
     return {
       setColumnOrder: function setColumnOrder(updater) {
         return instance.options.onColumnOrderChange == null ? void 0 : instance.options.onColumnOrderChange(updater, functionalUpdate(updater, instance.getState().columnOrder));
@@ -1188,7 +1188,7 @@
   }
 
   //
-  function getInitialState$3() {
+  function getInitialState$4() {
     return {
       columnPinning: {
         left: [],
@@ -1196,12 +1196,12 @@
       }
     };
   }
-  function getDefaultOptions$3(instance) {
+  function getDefaultOptions$4(instance) {
     return {
       onColumnPinningChange: makeStateUpdater('columnPinning', instance)
     };
   }
-  function createColumn$2(column, instance) {
+  function createColumn$3(column, instance) {
     return {
       getCanPin: function getCanPin() {
         return instance.getColumnCanPin(column.id);
@@ -1217,7 +1217,7 @@
       }
     };
   }
-  function getInstance$4(instance) {
+  function getInstance$5(instance) {
     return {
       setColumnPinning: function setColumnPinning(updater) {
         return instance.options.onColumnPinningChange == null ? void 0 : instance.options.onColumnPinningChange(updater, functionalUpdate(updater, instance.getState().columnPinning));
@@ -1329,6 +1329,312 @@
     };
   }
 
+  //
+  var defaultColumnSizing = {
+    width: 150,
+    minWidth: 20,
+    maxWidth: Number.MAX_SAFE_INTEGER
+  };
+  function getInitialState$3() {
+    return {
+      columnSizing: {},
+      columnSizingInfo: {
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        isResizingColumn: false,
+        columnSizingStart: []
+      }
+    };
+  }
+  function getDefaultOptions$3(instance) {
+    return {
+      columnResizeMode: 'onEnd',
+      onColumnSizingChange: makeStateUpdater('columnSizing', instance),
+      onColumnSizingInfoChange: makeStateUpdater('columnSizingInfo', instance)
+    };
+  }
+  function getInstance$4(instance) {
+    return {
+      setColumnSizing: function setColumnSizing(updater) {
+        return instance.options.onColumnSizingChange == null ? void 0 : instance.options.onColumnSizingChange(updater, functionalUpdate(updater, instance.getState().columnSizing));
+      },
+      setColumnSizingInfo: function setColumnSizingInfo(updater) {
+        return instance.options.onColumnSizingInfoChange == null ? void 0 : instance.options.onColumnSizingInfoChange(updater, functionalUpdate(updater, instance.getState().columnSizingInfo));
+      },
+      resetColumnSizing: function resetColumnSizing() {
+        var _instance$initialStat;
+
+        instance.setColumnSizing((_instance$initialStat = instance.initialState.columnSizing) != null ? _instance$initialStat : {});
+      },
+      resetHeaderSizeInfo: function resetHeaderSizeInfo() {
+        var _instance$initialStat2;
+
+        instance.setColumnSizingInfo((_instance$initialStat2 = instance.initialState.columnSizingInfo) != null ? _instance$initialStat2 : {});
+      },
+      resetColumnSize: function resetColumnSize(columnId) {
+        instance.setColumnSizing(function (_ref) {
+          _ref[columnId];
+              var rest = _objectWithoutPropertiesLoose(_ref, [columnId].map(_toPropertyKey));
+
+          return rest;
+        });
+      },
+      resetHeaderSize: function resetHeaderSize(headerId) {
+        var header = instance.getHeader(headerId);
+
+        if (!header) {
+          return;
+        }
+
+        return instance.resetColumnSize(header.column.id);
+      },
+      getHeaderCanResize: function getHeaderCanResize(headerId) {
+        var header = instance.getHeader(headerId);
+
+        if (!header) {
+          throw new Error();
+        }
+
+        return instance.getColumnCanResize(header.column.id);
+      },
+      getColumnCanResize: function getColumnCanResize(columnId) {
+        var _ref2, _ref3, _column$enableResizin;
+
+        var column = instance.getColumn(columnId);
+
+        if (!column) {
+          throw new Error();
+        }
+
+        return (_ref2 = (_ref3 = (_column$enableResizin = column.enableResizing) != null ? _column$enableResizin : instance.options.enableColumnResizing) != null ? _ref3 : column.defaultCanResize) != null ? _ref2 : true;
+      },
+      getColumnIsResizing: function getColumnIsResizing(columnId) {
+        var column = instance.getColumn(columnId);
+
+        if (!column) {
+          throw new Error();
+        }
+
+        return instance.getState().columnSizingInfo.isResizingColumn === columnId;
+      },
+      getHeaderIsResizing: function getHeaderIsResizing(headerId) {
+        var header = instance.getHeader(headerId);
+
+        if (!header) {
+          throw new Error();
+        }
+
+        return instance.getColumnIsResizing(header.column.id);
+      },
+      getHeaderResizerProps: function getHeaderResizerProps(headerId, userProps) {
+        var header = instance.getHeader(headerId);
+
+        if (!header) {
+          return;
+        }
+
+        var column = instance.getColumn(header.column.id);
+
+        if (!column) {
+          return;
+        }
+
+        var canResize = column.getCanResize();
+
+        var onResizeStart = function onResizeStart(e) {
+          if (isTouchStartEvent(e)) {
+            // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+            if (e.touches && e.touches.length > 1) {
+              return;
+            }
+          }
+
+          var columnSizingStart = header.getLeafHeaders().map(function (d) {
+            return [d.column.id, d.getWidth()];
+          });
+          var clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
+
+          var updateOffset = function updateOffset(eventType, clientXPos) {
+            if (typeof clientXPos !== 'number') {
+              return;
+            }
+
+            var newColumnSizing = {};
+            instance.setColumnSizingInfo(function (old) {
+              var _old$startOffset, _old$startSize;
+
+              var deltaOffset = clientXPos - ((_old$startOffset = old == null ? void 0 : old.startOffset) != null ? _old$startOffset : 0);
+              var deltaPercentage = Math.max(deltaOffset / ((_old$startSize = old == null ? void 0 : old.startSize) != null ? _old$startSize : 0), -0.999999);
+              old.columnSizingStart.forEach(function (_ref4) {
+                var columnId = _ref4[0],
+                    headerWidth = _ref4[1];
+                newColumnSizing[columnId] = Math.max(headerWidth + headerWidth * deltaPercentage, 0);
+              });
+              return _extends({}, old, {
+                deltaOffset: deltaOffset,
+                deltaPercentage: deltaPercentage
+              });
+            });
+
+            if (instance.options.columnResizeMode === 'onChange' || eventType === 'end') {
+              instance.setColumnSizing(function (old) {
+                return _extends({}, old, newColumnSizing);
+              });
+            }
+          };
+
+          var onMove = function onMove(clientXPos) {
+            return updateOffset('move', clientXPos);
+          };
+
+          var onEnd = function onEnd(clientXPos) {
+            updateOffset('end', clientXPos);
+            instance.setColumnSizingInfo(function (old) {
+              return _extends({}, old, {
+                isResizingColumn: false,
+                startOffset: null,
+                startSize: null,
+                deltaOffset: null,
+                deltaPercentage: null,
+                columnSizingStart: []
+              });
+            });
+          };
+
+          var mouseEvents = {
+            moveHandler: function moveHandler(e) {
+              return onMove(e.clientX);
+            },
+            upHandler: function upHandler(e) {
+              document.removeEventListener('mousemove', mouseEvents.moveHandler);
+              document.removeEventListener('mouseup', mouseEvents.upHandler);
+              onEnd(e.clientX);
+            }
+          };
+          var touchEvents = {
+            moveHandler: function moveHandler(e) {
+              if (e.cancelable) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+
+              onMove(e.touches[0].clientX);
+              return false;
+            },
+            upHandler: function upHandler(e) {
+              document.removeEventListener('touchmove', touchEvents.moveHandler);
+              document.removeEventListener('touchend', touchEvents.upHandler);
+
+              if (e.cancelable) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+
+              onEnd(e.touches[0].clientX);
+            }
+          };
+          var passiveIfSupported = passiveEventSupported() ? {
+            passive: false
+          } : false;
+
+          if (isTouchStartEvent(e)) {
+            document.addEventListener('touchmove', touchEvents.moveHandler, passiveIfSupported);
+            document.addEventListener('touchend', touchEvents.upHandler, passiveIfSupported);
+          } else {
+            document.addEventListener('mousemove', mouseEvents.moveHandler, passiveIfSupported);
+            document.addEventListener('mouseup', mouseEvents.upHandler, passiveIfSupported);
+          }
+
+          instance.setColumnSizingInfo(function (old) {
+            return _extends({}, old, {
+              startOffset: clientX,
+              startSize: header.getWidth(),
+              deltaOffset: 0,
+              deltaPercentage: 0,
+              columnSizingStart: columnSizingStart,
+              isResizingColumn: header.column.id
+            });
+          });
+        };
+
+        var initialProps = canResize ? {
+          title: 'Toggle Grouping',
+          draggable: false,
+          role: 'separator',
+          onMouseDown: function onMouseDown(e) {
+            e.persist();
+            onResizeStart(e);
+          },
+          onTouchStart: function onTouchStart(e) {
+            e.persist();
+            onResizeStart(e);
+          }
+        } : {};
+        return propGetter(initialProps, userProps);
+      }
+    };
+  }
+  function createColumn$2(column, instance) {
+    return {
+      getIsResizing: function getIsResizing() {
+        return instance.getColumnIsResizing(column.id);
+      },
+      getCanResize: function getCanResize() {
+        return instance.getColumnCanResize(column.id);
+      },
+      resetSize: function resetSize() {
+        return instance.resetColumnSize(column.id);
+      }
+    };
+  }
+  function createHeader(header, instance) {
+    return {
+      getIsResizing: function getIsResizing() {
+        return instance.getHeaderIsResizing(header.id);
+      },
+      getCanResize: function getCanResize() {
+        return instance.getHeaderCanResize(header.id);
+      },
+      getResizerProps: function getResizerProps(userProps) {
+        return instance.getHeaderResizerProps(header.id, userProps);
+      },
+      resetSize: function resetSize() {
+        return instance.resetHeaderSize(header.id);
+      }
+    };
+  }
+  var passiveSupported = null;
+  function passiveEventSupported() {
+    if (typeof passiveSupported === 'boolean') return passiveSupported;
+    var supported = false;
+
+    try {
+      var options = {
+        get passive() {
+          supported = true;
+          return false;
+        }
+
+      };
+
+      var noop = function noop() {};
+
+      window.addEventListener('test', noop, options);
+      window.removeEventListener('test', noop);
+    } catch (err) {
+      supported = false;
+    }
+
+    passiveSupported = supported;
+    return passiveSupported;
+  }
+
+  function isTouchStartEvent(e) {
+    return e.type === 'touchstart';
+  }
+
   //
   function createRow$1(row, instance) {
     return {
@@ -1380,7 +1686,7 @@
   }
   function getInstance$3(instance) {
     return {
-      createHeader: function createHeader(column, options) {
+      createHeader: function createHeader$1(column, options) {
         var _options$id;
 
         var id = (_options$id = options.id) != null ? _options$id : column.id;
@@ -1442,6 +1748,8 @@
             });
           }
         };
+        header = Object.assign(header, createHeader(header, instance)); // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+
         return header;
       },
       // Header Groups
@@ -2891,7 +3199,7 @@
 
     var instance = {};
 
-    var defaultOptions = _extends({}, getDefaultOptions$6(instance), getDefaultOptions$4(instance), getDefaultOptions$3(instance), getDefaultOptions$2(instance), getDefaultOptions$1(instance), getDefaultOptions$5(instance), getDefaultOptions(instance));
+    var defaultOptions = _extends({}, getDefaultOptions$7(instance), getDefaultOptions$5(instance), getDefaultOptions$4(instance), getDefaultOptions$2(instance), getDefaultOptions$1(instance), getDefaultOptions$6(instance), getDefaultOptions(instance), getDefaultOptions$3(instance));
 
     var defaultState = {};
 
@@ -2903,9 +3211,9 @@
 
     instance.options = buildOptions(options);
 
-    var initialState = _extends({}, getInitialState$6(), getInitialState$4(), getInitialState$3(), getInitialState$2(), getInitialState$1(), getInitialState$5(), getInitialState(), (_options$initialState = options.initialState) != null ? _options$initialState : {});
+    var initialState = _extends({}, getInitialState$7(), getInitialState$5(), getInitialState$4(), getInitialState$2(), getInitialState$1(), getInitialState$6(), getInitialState(), getInitialState$3(), (_options$initialState = options.initialState) != null ? _options$initialState : {});
 
-    var finalInstance = _extends({}, instance, getInstance$7(instance), getInstance$5(instance), getInstance$4(instance), getInstance$3(instance), getInstance$2(instance), getInstance$1(instance), getInstance$6(instance), getInstance(instance), {
+    var finalInstance = _extends({}, instance, getInstance$8(instance), getInstance$6(instance), getInstance$5(instance), getInstance$3(instance), getInstance$2(instance), getInstance$1(instance), getInstance$7(instance), getInstance(instance), getInstance$4(instance), {
       rerender: rerender,
       initialState: initialState,
       internalState: initialState,
@@ -2962,7 +3270,7 @@
       getColumnDefs: function getColumnDefs() {
         return instance.options.columns;
       },
-      createColumn: function createColumn$5(columnDef, depth, parent) {
+      createColumn: function createColumn$6(columnDef, depth, parent) {
         var _ref2, _columnDef$id;
 
         var defaultColumn = instance.getDefaultColumn();
@@ -2983,11 +3291,7 @@
           }
         }
 
-        var column = _extends({
-          width: 150,
-          minWidth: 20,
-          maxWidth: Number.MAX_SAFE_INTEGER
-        }, defaultColumn, columnDef, {
+        var column = _extends({}, defaultColumnSizing, defaultColumn, columnDef, {
           id: "" + id,
           accessorFn: accessorFn,
           parent: parent,
@@ -3022,7 +3326,7 @@
           }, 'column.getLeafColumns', instance.options.debug)
         });
 
-        column = Object.assign(column, createColumn$4(column, instance), createColumn$2(column, instance), createColumn$1(column, instance), createColumn(column, instance), createColumn$3(column, instance)); // Yes, we have to convert instance to uknown, because we know more than the compiler here.
+        column = Object.assign(column, createColumn$5(column, instance), createColumn$3(column, instance), createColumn$1(column, instance), createColumn(column, instance), createColumn$4(column, instance), createColumn$2(column, instance)); // Yes, we have to convert instance to uknown, because we know more than the compiler here.
 
         return column;
       },
@@ -3082,7 +3386,7 @@
         return column;
       },
       getColumnWidth: function getColumnWidth(columnId) {
-        var _column$minWidth, _column$width, _column$maxWidth;
+        var _column$minWidth, _ref3, _column$maxWidth;
 
         var column = instance.getColumn(columnId);
 
@@ -3090,7 +3394,8 @@
           throw new Error();
         }
 
-        return Math.min(Math.max((_column$minWidth = column.minWidth) != null ? _column$minWidth : 0, (_column$width = column.width) != null ? _column$width : 0), (_column$maxWidth = column.maxWidth) != null ? _column$maxWidth : 0);
+        var columnSize = instance.getState().columnSizing[column.id];
+        return Math.min(Math.max((_column$minWidth = column.minWidth) != null ? _column$minWidth : defaultColumnSizing.minWidth, (_ref3 = columnSize != null ? columnSize : column.width) != null ? _ref3 : defaultColumnSizing.width), (_column$maxWidth = column.maxWidth) != null ? _column$maxWidth : defaultColumnSizing.maxWidth);
       },
       createCell: function createCell$1(row, column, value) {
         var cell = {
@@ -3334,6 +3639,34 @@
           key: cell.id,
           role: 'gridcell'
         }, userProps);
+      },
+      getTableWidth: function getTableWidth() {
+        var _instance$getHeaderGr, _instance$getHeaderGr2;
+
+        return (_instance$getHeaderGr = (_instance$getHeaderGr2 = instance.getHeaderGroups()[0]) == null ? void 0 : _instance$getHeaderGr2.headers.reduce(function (sum, header) {
+          return sum + header.getWidth();
+        }, 0)) != null ? _instance$getHeaderGr : 0;
+      },
+      getLeftTableWidth: function getLeftTableWidth() {
+        var _instance$getLeftHead, _instance$getLeftHead2;
+
+        return (_instance$getLeftHead = (_instance$getLeftHead2 = instance.getLeftHeaderGroups()[0]) == null ? void 0 : _instance$getLeftHead2.headers.reduce(function (sum, header) {
+          return sum + header.getWidth();
+        }, 0)) != null ? _instance$getLeftHead : 0;
+      },
+      getCenterTableWidth: function getCenterTableWidth() {
+        var _instance$getCenterHe, _instance$getCenterHe2;
+
+        return (_instance$getCenterHe = (_instance$getCenterHe2 = instance.getCenterHeaderGroups()[0]) == null ? void 0 : _instance$getCenterHe2.headers.reduce(function (sum, header) {
+          return sum + header.getWidth();
+        }, 0)) != null ? _instance$getCenterHe : 0;
+      },
+      getRightTableWidth: function getRightTableWidth() {
+        var _instance$getRightHea, _instance$getRightHea2;
+
+        return (_instance$getRightHea = (_instance$getRightHea2 = instance.getRightHeaderGroups()[0]) == null ? void 0 : _instance$getRightHea2.headers.reduce(function (sum, header) {
+          return sum + header.getWidth();
+        }, 0)) != null ? _instance$getRightHea : 0;
       }
     });