@infinite-table/infinite-react 0.0.1-canary.9 → 0.0.1

package/index.js

@@ -643,6 +643,41 @@ function isControlled(propName, props) {
   return controlled;
 }
 
+// src/components/VirtualBrain/ScrollListener.ts
+var initialScrollPosition = {
+  scrollLeft: 0,
+  scrollTop: 0
+};
+var ScrollListener = class {
+  constructor() {
+    this.scrollPosition = initialScrollPosition;
+    this.onScrollFns = [];
+    this.getScrollPosition = () => {
+      return this.scrollPosition;
+    };
+    this.onScroll = (fn) => {
+      this.onScrollFns.push(fn);
+      return () => {
+        this.onScrollFns = this.onScrollFns.filter((f) => f !== fn);
+      };
+    };
+    this.setScrollPosition = (scrollPosition) => {
+      this.scrollPosition = scrollPosition;
+      this.notifyScrollChange();
+    };
+    this.destroy = () => {
+      this.onScrollFns = [];
+    };
+  }
+  notifyScrollChange() {
+    const { scrollPosition } = this;
+    const fns = this.onScrollFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i](scrollPosition);
+    }
+  }
+};
+
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
 function computeColumnGroupsDepths(columnGroups) {
   const map = new Map();
@@ -677,7 +712,7 @@ function getInitialState(params) {
   const generatedColumns = new Map();
   const pivotColumns = props.pivotColumns;
   return {
-    rowHeight: typeof props.rowHeight === "number" ? props.rowHeight : 0,
+    rowHeightComputed: typeof props.rowHeight === "number" ? props.rowHeight : 0,
     headerHeight: typeof props.headerHeight === "number" ? props.headerHeight : 0,
     domRef: (0, import_react2.createRef)(),
     bodyDOMRef: (0, import_react2.createRef)(),
@@ -700,6 +735,8 @@ function getInitialState(params) {
     generatedColumns,
     columnOrder: (_c = isControlled("columnOrder", props) ? props.columnOrder : props.defaultColumnOrder) != null ? _c : true,
     computedColumnGroups,
+    pinnedStartScrollListener: new ScrollListener(),
+    pinnedEndScrollListener: new ScrollListener(),
     columnGroups,
     collapsedColumnGroups,
     columnGroupsDepthsMap,
@@ -731,6 +768,8 @@ function deriveReadOnlyState(params) {
     rowStyle: props.rowStyle,
     rowProps: props.rowProps,
     rowClassName: props.rowClassName,
+    pinnedStartMaxWidth: props.pinnedStartMaxWidth,
+    pinnedEndMaxWidth: props.pinnedEndMaxWidth,
     groupRenderStrategy: (_e = props.groupRenderStrategy) != null ? _e : "multi-column",
     pivotTotalColumnPosition,
     columnMinWidth: (_f = props.columnMinWidth) != null ? _f : 30,
@@ -1024,6 +1063,8 @@ var getComputedVisibleColumns = ({
   columnMinWidth,
   columnMaxWidth,
   columnDefaultWidth,
+  pinnedStartMaxWidth,
+  pinnedEndMaxWidth,
   sortable,
   sortInfo,
   setSortInfo,
@@ -1205,6 +1246,8 @@ var getComputedVisibleColumns = ({
     }
     prevPinned = computedPinned;
   });
+  const computedPinnedStartWidth = pinnedStartMaxWidth != null ? Math.min(pinnedStartMaxWidth, computedPinnedStartColumnsWidth) : computedPinnedStartColumnsWidth;
+  const computedPinnedEndWidth = pinnedEndMaxWidth != null ? Math.min(pinnedEndMaxWidth, computedPinnedEndColumnsWidth) : computedPinnedEndColumnsWidth;
   const result = {
     computedRemainingSpace: bodySize.width - (totalPinnedStartWidth + totalPinnedEndWidth + totalUnpinnedWidth),
     computedPinnedStartColumnsWidth,
@@ -1217,7 +1260,9 @@ var getComputedVisibleColumns = ({
     computedPinnedEndOffset: computedPinnedStartColumnsWidth + computedUnpinnedColumnsWidth,
     computedUnpinnedColumns,
     computedVisibleColumns,
-    computedVisibleColumnsMap
+    computedVisibleColumnsMap,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth
   };
   return result;
 };
@@ -1323,6 +1368,8 @@ var useComputedVisibleColumns = ({
   setSortInfo,
   columnOrder,
   columnPinning,
+  pinnedEndMaxWidth,
+  pinnedStartMaxWidth,
   columnVisibility,
   columnVisibilityAssumeVisible
 }) => {
@@ -1341,7 +1388,9 @@ var useComputedVisibleColumns = ({
     computedPinnedEndColumnsWidth,
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
-    computedPinnedEndOffset
+    computedPinnedEndOffset,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth
   } = (0, import_react8.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
@@ -1354,6 +1403,8 @@ var useComputedVisibleColumns = ({
       sortInfo,
       setSortInfo,
       multiSort,
+      pinnedEndMaxWidth,
+      pinnedStartMaxWidth,
       draggableColumns,
       columnOrder,
       columnPinning,
@@ -1374,6 +1425,8 @@ var useComputedVisibleColumns = ({
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible,
+    pinnedEndMaxWidth,
+    pinnedStartMaxWidth,
     columnPinning,
     columnsRenderId,
     visibilityRenderId,
@@ -1381,6 +1434,8 @@ var useComputedVisibleColumns = ({
   ]);
   const result = {
     columns,
+    computedPinnedEndWidth,
+    computedPinnedStartWidth,
     computedRemainingSpace,
     computedUnpinnedOffset,
     computedPinnedEndOffset,
@@ -3128,7 +3183,7 @@ function useComputed() {
   (0, import_react18.useState)(() => {
     componentState.onRowHeightChange.onChange((rowHeight) => {
       if (rowHeight) {
-        componentActions.rowHeight = rowHeight;
+        componentActions.rowHeightComputed = rowHeight;
       }
     });
     componentState.onHeaderHeightChange.onChange((headerHeight) => {
@@ -3157,13 +3212,17 @@ function useComputed() {
     computedUnpinnedColumnsWidth,
     computedUnpinnedOffset,
     computedPinnedEndOffset,
-    computedRemainingSpace
+    computedRemainingSpace,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth
   } = useComputedVisibleColumns({
     columns: componentState.computedPivotColumns || componentState.columns,
     generatedColumns: componentState.generatedColumns,
     columnMinWidth: componentState.columnMinWidth,
     columnMaxWidth: componentState.columnMaxWidth,
     columnDefaultWidth: componentState.columnDefaultWidth,
+    pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
+    pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
@@ -3198,7 +3257,13 @@ function useComputed() {
   if (colWidthSum > scrollLeft) {
     columnRenderStartIndex--;
   }
+  const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
+  const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedVisibleColumns,
     computedColumnOrder,
     computedRemainingSpace,
@@ -3268,8 +3333,8 @@ function getScrollbarWidth() {
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
 var React11 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
-  const height = getScrollbarWidth();
-  if (!height) {
+  const scrollbarWidth2 = getScrollbarWidth();
+  if (!scrollbarWidth2) {
     return null;
   }
   return /* @__PURE__ */ React11.createElement("div", {
@@ -3278,15 +3343,14 @@ function HorizontalScrollbarPlaceholderFn(props) {
       position: "absolute",
       overflow: "visible",
       overflowX: "scroll",
-      height,
       bottom: 0
     }, props.style)
   });
 }
 var HorizontalScrollbarPlaceholder = React11.memo(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
-  const width = getScrollbarWidth();
-  if (!width) {
+  const scrollbarWidth2 = getScrollbarWidth();
+  if (!scrollbarWidth2) {
     return null;
   }
   return /* @__PURE__ */ React11.createElement("div", {
@@ -3295,7 +3359,6 @@ function VerticalScrollbarPlaceholderFn(props) {
       position: "absolute",
       overflow: "visible",
       overflowY: "scroll",
-      width,
       bottom: 0
     }, props.style)
   });
@@ -4277,7 +4340,23 @@ var UPDATE_SCROLL = (node, scrollPosition) => {
   node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, 0px, 0px)`;
 };
 function InfiniteTableHeaderUnvirtualizedFn(props) {
-  const _a = props, { columns, scrollable, brain, totalWidth } = _a, domProps = __objRest(_a, ["columns", "scrollable", "brain", "totalWidth"]);
+  const _a = props, {
+    columns,
+    scrollable,
+    classNameModifiers,
+    brain,
+    scrollListener,
+    totalWidth,
+    availableWidth
+  } = _a, domProps = __objRest(_a, [
+    "columns",
+    "scrollable",
+    "classNameModifiers",
+    "brain",
+    "scrollListener",
+    "totalWidth",
+    "availableWidth"
+  ]);
   const {
     componentState: {
       computedColumnGroups,
@@ -4318,23 +4397,27 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   });
   const style = __spreadValues({}, domProps == null ? void 0 : domProps.style);
   if (totalWidth != null) {
-    style.width = totalWidth;
+    style.width = availableWidth;
   }
   (0, import_react26.useEffect)(() => {
-    if (!brain || !scrollable) {
+    const scroller = brain || scrollListener;
+    if (!scroller || !scrollable) {
       return;
     }
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL(domRef.current, scrollPosition);
     };
-    const removeOnScroll = brain.onScroll(onScroll);
+    const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
-  }, [brain]);
+  }, [brain, scrollListener]);
   return /* @__PURE__ */ React21.createElement("div", __spreadProps(__spreadValues({}, domProps), {
-    ref: domRef,
-    className: join(ICSS.flexFlow.row, ICSS.display.flex, TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, domProps.className),
+    className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, domProps.className, ...(classNameModifiers || []).filter(Boolean).map((modifier) => `${TableHeaderClassName2}--${modifier}`)),
     style
-  }), children);
+  }), /* @__PURE__ */ React21.createElement("div", {
+    style: { width: totalWidth },
+    className: join(ICSS.flexFlow.row, ICSS.display.flex),
+    ref: domRef
+  }, children));
 }
 var InfiniteTableHeaderUnvirtualized = React21.memo(InfiniteTableHeaderUnvirtualizedFn);
 
@@ -4347,11 +4430,21 @@ function TableHeaderWrapper(props) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedPinnedStartColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedPinnedEndColumnsWidth,
-    computedUnpinnedColumnsWidth
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow
   } = tableContextValue.computed;
   const {
-    componentState: { virtualizeHeader, headerHeight, columnGroupsMaxDepth }
+    componentState: {
+      virtualizeHeader,
+      headerHeight,
+      columnGroupsMaxDepth,
+      pinnedStartScrollListener,
+      pinnedEndScrollListener
+    }
   } = tableContextValue;
   const hasPinnedStart = computedPinnedStartColumns.length > 0;
   const hasPinnedEnd = computedPinnedEndColumns.length > 0;
@@ -4362,15 +4455,17 @@ function TableHeaderWrapper(props) {
     brain,
     style: {
       position: "absolute",
-      left: computedPinnedStartColumnsWidth,
+      left: computedPinnedStartWidth,
       width: computedUnpinnedColumnsWidth,
       height: columnGroupsMaxDepth || headerHeight
     },
+    availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   }) : /* @__PURE__ */ React22.createElement(InfiniteTableHeaderUnvirtualized, {
     brain,
     scrollable: true,
     columns: computedUnpinnedColumns,
+    availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
   return /* @__PURE__ */ React22.createElement("div", {
@@ -4383,18 +4478,34 @@ function TableHeaderWrapper(props) {
     style: {
       left: 0,
       position: "absolute",
-      width: computedPinnedStartColumnsWidth
+      width: computedPinnedStartWidth
     },
+    availableWidth: computedPinnedStartWidth,
+    totalWidth: computedPinnedStartColumnsWidth,
     columns: computedPinnedStartColumns,
-    totalWidth: computedPinnedStartColumnsWidth
+    scrollable: computedPinnedStartOverflow,
+    classNameModifiers: [
+      "pinned",
+      "pinned-start",
+      computedPinnedStartOverflow ? "overflow" : ""
+    ],
+    scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
   }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React22.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
-      width: computedPinnedEndColumnsWidth
+      width: computedPinnedEndWidth
     },
     columns: computedPinnedEndColumns,
-    totalWidth: computedPinnedEndColumnsWidth
+    availableWidth: computedPinnedEndWidth,
+    totalWidth: computedPinnedEndColumnsWidth,
+    scrollable: computedPinnedEndOverflow,
+    classNameModifiers: [
+      "pinned",
+      "pinned-end",
+      computedPinnedEndOverflow ? "overflow" : ""
+    ],
+    scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
   }) : null, scrollbars.vertical ? /* @__PURE__ */ React22.createElement(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
@@ -4444,13 +4555,6 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "IT-VirtualScrollContainer";
-var defaultClasName = [
-  ICSS.position.fixed,
-  ICSS.height["100%"],
-  ICSS.width["100%"],
-  ICSS.left[0],
-  ICSS.top[0]
-].join(" ");
 var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4467,7 +4571,6 @@ var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2
     className: [
       className,
       rootClassName6,
-      defaultClasName,
       getScrollableClassName(scrollable)
     ].join(" ")
   }, children);
@@ -4513,7 +4616,6 @@ var UPDATE_SCROLL2 = (node, scrollPosition) => {
 var CLASSES = join(ICSS.height["0"], ICSS.width["0"], ICSS.willChange.transform);
 var debug4 = dbg("VirtuaList");
 var rootClassName7 = "IList";
-var defaultClasses = [ICSS.position.relative, ICSS.transform.translate3D000];
 var VirtualList = (props) => {
   const _a = props, {
     scrollable,
@@ -4577,7 +4679,7 @@ var VirtualList = (props) => {
   const width = mainAxis === "horizontal" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const height = mainAxis === "vertical" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const domProps = __spreadProps(__spreadValues({}, restDOMProps), {
-    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, ...defaultClasses)
+    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, ICSS.transform.translate3D000)
   });
   if (false) {
     domProps["data-cmp-name"] = `VirtualList`;
@@ -4587,7 +4689,8 @@ var VirtualList = (props) => {
     onContainerScroll
   }, /* @__PURE__ */ React25.createElement("div", {
     ref: domRef,
-    className: CLASSES
+    className: CLASSES,
+    "data-name": "scroll-transform-target"
   }, /* @__PURE__ */ React25.createElement(RawList, {
     brain: virtualBrain,
     renderItem,
@@ -4861,8 +4964,8 @@ function useUnpinnedRendering(params) {
     verticalVirtualBrain,
     horizontalVirtualBrain,
     computedUnpinnedColumnsWidth,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedUnpinnedColumns,
     getState
   } = params;
@@ -4917,8 +5020,8 @@ function useUnpinnedRendering(params) {
       height: bodySize.height,
       top: 0,
       position: "absolute",
-      left: computedPinnedStartColumnsWidth,
-      right: computedPinnedEndColumnsWidth
+      left: computedPinnedStartWidth,
+      right: computedPinnedEndWidth
     },
     count: getData().length,
     rowHeight,
@@ -5017,7 +5120,7 @@ function useOnMount(domRef, props) {
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 var rootClassName10 = "IList";
-var defaultClasses2 = [
+var defaultClasses = [
   ICSS.willChange.transform,
   ICSS.position.relative,
   ICSS.transform.translate3D000
@@ -5051,8 +5154,6 @@ var RowListWithExternalScrolling = (props) => {
           const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
           node.dataset.renderStartIndex = renderStartIndex;
           node.dataset.renderEndIndex = renderEndIndex;
-          node.dataset.scrollLeft = scrollPosition.scrollLeft;
-          node.dataset.scrollTop = scrollPosition.scrollTop;
         }
         if (updateScroll) {
           updateScroll(node, scrollPosition);
@@ -5069,7 +5170,7 @@ var RowListWithExternalScrolling = (props) => {
   const domProps = {
     ref: domRef,
     style,
-    className: join(className, rootClassName10, `${rootClassName10}--vertical`, ...defaultClasses2)
+    className: join(className, rootClassName10, `${rootClassName10}--vertical`, ...defaultClasses)
   };
   if (false) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
@@ -5082,9 +5183,74 @@ var RowListWithExternalScrolling = (props) => {
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var UPDATE_SCROLL3 = (node, scrollPosition) => {
-  node.style.transform = `translate3d(0px, ${-scrollPosition.scrollTop}px, 0px)`;
+var UPDATE_SCROLL3 = (node, brainScrollPosition, horizontalPinnedScrollPosition) => {
+  node.style.transform = `translate3d(${horizontalPinnedScrollPosition ? -horizontalPinnedScrollPosition.scrollLeft : 0}px, ${-brainScrollPosition.scrollTop}px, 0px)`;
 };
+var PinnedRowsContainerClassName = `ITablePinnedRows`;
+function PinnedRowsContainer(props) {
+  const {
+    maxWidth,
+    pinning,
+    rowWidth,
+    height,
+    pinnedScrollListener,
+    hasOverflow,
+    brain,
+    renderRow
+  } = props;
+  const style = React32.useMemo(() => {
+    const result = pinning === "end" ? {
+      width: rowWidth,
+      height,
+      right: 0
+    } : {};
+    if (!hasOverflow && pinning === "end") {
+      result.position = "absolute";
+    }
+    if (hasOverflow) {
+      result.height = getScrollbarWidth();
+      result.width = getScrollbarWidth();
+    }
+    return result;
+  }, [height, rowWidth, pinning, hasOverflow]);
+  const updateScroll = (0, import_react36.useCallback)((node, scrollPosition) => {
+    UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
+  }, [hasOverflow, pinnedScrollListener]);
+  const rowListProps = {
+    style,
+    brain,
+    renderRow,
+    updateScroll,
+    className: join(`${PinnedRowsContainerClassName}`, `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`)
+  };
+  if (hasOverflow) {
+    return /* @__PURE__ */ React32.createElement(VirtualScrollContainer, {
+      scrollable: {
+        horizontal: true,
+        vertical: false
+      },
+      style: {
+        width: maxWidth,
+        height,
+        position: "absolute",
+        [pinning === "start" ? "left" : "right"]: 0,
+        [pinning === "start" ? "right" : "left"]: "unset"
+      },
+      onContainerScroll: pinnedScrollListener == null ? void 0 : pinnedScrollListener.setScrollPosition,
+      className: join(`${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
+    }, /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+      onMount: (node) => {
+        pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
+          updateScroll(node, brain.getScrollPosition(), scrollPosition);
+        });
+      }
+    })), /* @__PURE__ */ React32.createElement(SpacePlaceholder, {
+      width: rowWidth,
+      height: 1
+    }));
+  }
+  return /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+}
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns } = params;
   const renderPinnedRow = (0, import_react36.useCallback)((rowInfo) => {
@@ -5104,7 +5270,7 @@ function useRenderPinnedRow(params) {
   }, [columnsWidth, columns]);
   return renderPinnedRow;
 }
-function usePinnedEndRendering(params) {
+function usePinnedRenderingForSide(side, params) {
   const {
     getState,
     getData,
@@ -5112,7 +5278,15 @@ function usePinnedEndRendering(params) {
     bodySize,
     computedPinnedEndColumns,
     computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedPinnedStartColumnsWidth,
     verticalVirtualBrain,
+    computedPinnedEndWidth,
+    computedPinnedEndOverflow,
+    computedPinnedStartWidth,
+    computedPinnedStartOverflow,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener,
     repaintId,
     toggleGroupRow,
     scrollbars: {
@@ -5120,31 +5294,54 @@ function usePinnedEndRendering(params) {
       horizontal: hasHorizontalScrollbar
     }
   } = params;
-  const renderRowPinnedEnd = useRenderPinnedRow({
+  const count = getData().length;
+  const rowWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const columns = side === "start" ? computedPinnedStartColumns : computedPinnedEndColumns;
+  const columnsWidth = side === "start" ? computedPinnedStartColumnsWidth : computedPinnedEndColumnsWidth;
+  const maxWidth = side === "start" ? computedPinnedStartWidth : computedPinnedEndWidth;
+  const hasOverflow = side === "start" ? computedPinnedStartOverflow : computedPinnedEndOverflow;
+  const pinnedScrollListener = side === "start" ? pinnedStartScrollListener : pinnedEndScrollListener;
+  const renderRowPinned = useRenderPinnedRow({
     getData,
     getState,
     toggleGroupRow,
-    columns: computedPinnedEndColumns,
-    columnsWidth: computedPinnedEndColumnsWidth
+    columns,
+    columnsWidth
   });
-  const pinnedEndList = computedPinnedEndColumns.length && rowHeight !== 0 ? /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, {
-    repaintId: `${repaintId}-pin-end-${rowHeight}`,
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React32.createElement(PinnedRowsContainer, {
+    pinning: side,
+    pinnedScrollListener,
+    hasOverflow,
+    rowHeight,
+    rowWidth,
+    maxWidth,
+    height: bodySize.height,
+    count,
+    repaintId: `${repaintId}-pin-${side}-${rowHeight}`,
     brain: verticalVirtualBrain,
-    renderRow: renderRowPinnedEnd,
-    style: {
-      position: "absolute",
-      height: bodySize.height,
-      width: computedPinnedEndColumnsWidth,
-      right: 0
-    },
-    updateScroll: UPDATE_SCROLL3
+    renderRow: renderRowPinned
   }) : null;
-  const pinnedEndScrollbarPlaceholder = pinnedEndList && hasHorizontalScrollbar ? /* @__PURE__ */ React32.createElement(HorizontalScrollbarPlaceholder, {
-    style: {
-      width: computedPinnedEndColumnsWidth,
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React32.createElement(HorizontalScrollbarPlaceholder, {
+    style: side === "end" ? {
+      width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
+    } : {
+      width: columnsWidth,
+      left: 0
     }
   }) : null;
+  return {
+    renderRowPinned,
+    pinnedList,
+    pinnedScrollbarPlaceholder
+  };
+}
+function usePinnedEndRendering(params) {
+  const {
+    renderRowPinned: renderRowPinnedEnd,
+    pinnedList: pinnedEndList,
+    pinnedScrollbarPlaceholder: pinnedEndScrollbarPlaceholder
+  } = usePinnedRenderingForSide("end", params);
   return {
     renderRowPinnedEnd,
     pinnedEndList,
@@ -5153,40 +5350,16 @@ function usePinnedEndRendering(params) {
 }
 function usePinnedStartRendering(params) {
   const {
-    getData,
-    getState,
-    rowHeight,
-    computedPinnedStartColumns,
-    computedPinnedStartColumnsWidth,
-    verticalVirtualBrain,
-    toggleGroupRow,
-    repaintId,
-    scrollbars: { horizontal: hasHorizontalScrollbar }
-  } = params;
-  const renderRowPinnedStart = useRenderPinnedRow({
-    getData,
-    getState,
-    toggleGroupRow,
-    columns: computedPinnedStartColumns,
-    columnsWidth: computedPinnedStartColumnsWidth
-  });
-  const pinnedStartList = computedPinnedStartColumns.length && rowHeight !== 0 ? /* @__PURE__ */ React32.createElement(RowListWithExternalScrolling, {
-    repaintId: `${repaintId}-pin-start-${rowHeight}`,
-    brain: verticalVirtualBrain,
-    renderRow: renderRowPinnedStart,
-    updateScroll: UPDATE_SCROLL3
-  }) : null;
-  const pinnedStartScrollbarPlaceholder = pinnedStartList && hasHorizontalScrollbar ? /* @__PURE__ */ React32.createElement(HorizontalScrollbarPlaceholder, {
-    style: {
-      width: computedPinnedStartColumnsWidth,
-      left: 0
-    }
-  }) : null;
-  return {
+    renderRowPinned: renderRowPinnedStart,
+    pinnedList: pinnedStartList,
+    pinnedScrollbarPlaceholder: pinnedStartScrollbarPlaceholder
+  } = usePinnedRenderingForSide("start", params);
+  const result = {
     renderRowPinnedStart,
     pinnedStartList,
     pinnedStartScrollbarPlaceholder
   };
+  return result;
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -5194,7 +5367,7 @@ var import_react38 = __toModule(require("react"));
 
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
-var initialScrollPosition = {
+var initialScrollPosition2 = {
   scrollLeft: 0,
   scrollTop: 0
 };
@@ -5203,7 +5376,7 @@ var SORT_ASC = (a, b) => a - b;
 var VirtualBrain = class extends Logger {
   constructor(options) {
     super(`VirtualBrain:${options.mainAxis}`);
-    this.scrollPosition = initialScrollPosition;
+    this.scrollPosition = initialScrollPosition2;
     this.scrollPositionOnMainAxis = 0;
     this.totalSize = 0;
     this.onScrollFns = [];
@@ -5557,8 +5730,8 @@ function useYourBrain(param) {
   const {
     dataArray,
     computedUnpinnedColumns,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     rowHeight,
     bodySize
   } = param;
@@ -5591,13 +5764,9 @@ function useYourBrain(param) {
   (0, import_react38.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
-      width: Math.max(bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth, 0)
+      width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
     });
-  }, [
-    bodySize.width,
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth
-  ]);
+  }, [bodySize.width, computedPinnedStartWidth, computedPinnedEndWidth]);
   return { horizontalVirtualBrain, verticalVirtualBrain };
 }
 
@@ -5634,13 +5803,23 @@ function useListRendering(param) {
     computedPinnedEndColumns,
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
     computedUnpinnedColumns,
-    computedUnpinnedColumnsWidth
+    computedUnpinnedColumnsWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow
   } = computed;
-  const { componentState: dataSourceState } = useDataSourceContextValue();
+  const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
   const getData = useLatest(dataArray);
-  const { rowHeight } = componentState;
+  const {
+    rowHeightComputed: rowHeight,
+    pinnedStartMaxWidth,
+    pinnedEndMaxWidth,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener
+  } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
   const repaintIdRef = (0, import_react39.useRef)(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
@@ -5648,9 +5827,9 @@ function useListRendering(param) {
   }
   const repaintId = repaintIdRef.current;
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
+    computedPinnedStartWidth: computed.computedPinnedStartWidth,
+    computedPinnedEndWidth: computed.computedPinnedEndWidth,
     computedUnpinnedColumns: computed.computedUnpinnedColumns,
-    computedPinnedStartColumnsWidth: computed.computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth: computed.computedPinnedEndColumnsWidth,
     rowHeight,
     dataArray,
     bodySize
@@ -5675,7 +5854,9 @@ function useListRendering(param) {
         setColumnVisibility: (columnVisibility) => {
           componentActions.columnVisibility = columnVisibility;
         },
-        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations
+        setColumnAggregations: (columnAggregations) => componentActions.columnAggregations = columnAggregations,
+        getState,
+        getDataSourceState
       };
       onReady(imperativeApi);
     }
@@ -5685,7 +5866,7 @@ function useListRendering(param) {
     horizontalVirtualBrain,
     domRef
   });
-  const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
+  const { componentActions: dataSourceActions } = useDataSourceContextValue();
   const toggleGroupRow = (0, import_react39.useCallback)((groupKeys) => {
     const newState = new GroupRowsState(getDataSourceState().groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -5696,14 +5877,22 @@ function useListRendering(param) {
     scrollbars,
     computedPinnedStartColumns,
     computedPinnedEndColumns,
+    computedPinnedStartWidth,
+    computedPinnedEndWidth,
+    computedPinnedStartOverflow,
+    computedPinnedEndOverflow,
     computedPinnedStartColumnsWidth,
     computedPinnedEndColumnsWidth,
     getData,
     getState,
     toggleGroupRow,
+    pinnedStartMaxWidth,
+    pinnedEndMaxWidth,
     repaintId,
     rowHeight,
-    verticalVirtualBrain
+    verticalVirtualBrain,
+    pinnedStartScrollListener,
+    pinnedEndScrollListener
   };
   const centerRenderingParams = __spreadProps(__spreadValues({}, pinnedRenderingParams), {
     columnShifts,
@@ -5964,7 +6153,7 @@ var useLicense = (licenseKey) => {
   const valid = (0, import_react41.useMemo)(() => {
     return isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.1-canary.9"
+      version: "0.0.1"
     });
   }, [licenseKey]);
   return valid;
@@ -6050,7 +6239,6 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     headerHeightCSSVar
   } = componentState;
   const { columnShifts, bodySize } = componentState;
-  const className = join(InfiniteTableClassName, columnShifts ? `${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className);
   const {
     pinnedStartList,
     pinnedEndList,
@@ -6070,6 +6258,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     computed
   });
   const licenseValid = useLicense(licenseKey);
+  const className = join(InfiniteTableClassName, columnShifts ? `${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, pinnedStartList ? `${InfiniteTableClassName}--has-pinned-start` : null, pinnedEndList ? `${InfiniteTableClassName}--has-pinned-end` : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null);
   return /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({
     ref: domRef
   }, domProps), {
@@ -6105,7 +6294,10 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  globalThis.getState = getState;
+  if (false) {
+    globalThis.getState = getState;
+    globalThis.getComputed = getComputed;
+  }
   const contextValue = {
     componentActions,
     componentState,