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

package/build/esm/index.js

@@ -649,12 +649,12 @@ var expandRowsFn = function expandRowsFn(instance, _expandedState, sortedRowMode
 };
 
 //
-function getInitialState$6() {
+function getInitialState$7() {
   return {
     columnVisibility: {}
   };
 }
-function getDefaultOptions$6(instance) {
+function getDefaultOptions$7(instance) {
   return {
     onColumnVisibilityChange: makeStateUpdater('columnVisibility', instance)
   };
@@ -664,7 +664,7 @@ function getDefaultColumn$3() {
     defaultIsVisible: true
   };
 }
-function createColumn$4(column, instance) {
+function createColumn$5(column, instance) {
   return {
     getCanHide: function getCanHide() {
       return instance.getColumnCanHide(column.id);
@@ -688,7 +688,7 @@ function createColumn$4(column, instance) {
     }
   };
 }
-function getInstance$7(instance) {
+function getInstance$8(instance) {
   return {
     getVisibleFlatColumns: memo(function () {
       return [instance.getAllFlatColumns(), instance.getAllFlatColumns().filter(function (d) {
@@ -903,19 +903,19 @@ function getDefaultColumn$2() {
     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() {
@@ -935,7 +935,7 @@ function createColumn$3(column, instance) {
     }
   };
 }
-function getInstance$6(instance) {
+function getInstance$7(instance) {
   return {
     getColumnAutoAggregationFn: function getColumnAutoAggregationFn(columnId) {
       var firstRow = instance.getCoreFlatRows()[0];
@@ -1100,17 +1100,17 @@ function orderColumns(leafColumns, grouping, groupedColumnMode) {
 }
 
 //
-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));
@@ -1162,7 +1162,7 @@ function getInstance$5(instance) {
 }
 
 //
-function getInitialState$3() {
+function getInitialState$4() {
   return {
     columnPinning: {
       left: [],
@@ -1170,12 +1170,12 @@ function getInitialState$3() {
     }
   };
 }
-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);
@@ -1191,7 +1191,7 @@ function createColumn$2(column, instance) {
     }
   };
 }
-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));
@@ -1303,6 +1303,312 @@ function getInstance$4(instance) {
   };
 }
 
+//
+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 {
@@ -1354,7 +1660,7 @@ function createRow$1(row, instance) {
 }
 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;
@@ -1416,6 +1722,8 @@ function getInstance$3(instance) {
           });
         }
       };
+      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
@@ -2865,7 +3173,7 @@ function createTableInstance(options, rerender) {
 
   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 = {};
 
@@ -2877,9 +3185,9 @@ function createTableInstance(options, rerender) {
 
   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,
@@ -2936,7 +3244,7 @@ function createTableInstance(options, rerender) {
     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();
@@ -2959,11 +3267,7 @@ function createTableInstance(options, rerender) {
         throw new Error();
       }
 
-      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,
@@ -2998,7 +3302,7 @@ function createTableInstance(options, rerender) {
         }, '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;
     },
@@ -3058,7 +3362,7 @@ function createTableInstance(options, rerender) {
       return column;
     },
     getColumnWidth: function getColumnWidth(columnId) {
-      var _column$minWidth, _column$width, _column$maxWidth;
+      var _column$minWidth, _ref3, _column$maxWidth;
 
       var column = instance.getColumn(columnId);
 
@@ -3066,7 +3370,8 @@ function createTableInstance(options, rerender) {
         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 = {
@@ -3316,6 +3621,34 @@ function createTableInstance(options, rerender) {
         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;
     }
   });