@react-stately/layout 3.9.1-nightly.3608 → 3.9.1-nightly.3611

package/dist/main.js

@@ -32,9 +32,27 @@ $parcel$export(module.exports, "TableLayout", () => $67c493497dcda343$export$624
 const $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT = 48;
 class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyvirtualizer.Layout) {
     getLayoutInfo(key) {
-        return this.layoutInfos.get(key);
+        let res = this.layoutInfos.get(key);
+        // If the layout info wasn't found, it might be outside the bounds of the area that we've
+        // computed layout for so far. This can happen when accessing a random key, e.g pressing Home/End.
+        // Compute the full layout and try again.
+        if (!res && this.validRect.area < this.contentSize.area && this.lastCollection) {
+            this.lastValidRect = this.validRect;
+            this.validRect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(0, 0, Infinity, Infinity);
+            this.rootNodes = this.buildCollection();
+            this.validRect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(0, 0, this.contentSize.width, this.contentSize.height);
+            res = this.layoutInfos.get(key);
+        }
+        return res;
     }
     getVisibleLayoutInfos(rect) {
+        // If layout hasn't yet been done for the requested rect, union the
+        // new rect with the existing valid rect, and recompute.
+        if (!this.validRect.containsRect(rect) && this.lastCollection) {
+            this.lastValidRect = this.validRect;
+            this.validRect = this.validRect.union(rect);
+            this.rootNodes = this.buildCollection();
+        }
         let res = [];
         let addNodes = (nodes)=>{
             for (let node of nodes)if (this.isVisible(node, rect)) {
@@ -49,14 +67,23 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
     isVisible(node, rect) {
         return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
     }
-    validate(invalidationContext) {
+    shouldInvalidateEverything(invalidationContext) {
         // Invalidate cache if the size of the collection changed.
         // In this case, we need to recalculate the entire layout.
-        this.invalidateEverything = invalidationContext.sizeChanged;
+        return invalidationContext.sizeChanged;
+    }
+    validate(invalidationContext) {
         this.collection = this.virtualizer.collection;
+        // Reset valid rect if we will have to invalidate everything.
+        // Otherwise we can reuse cached layout infos outside the current visible rect.
+        this.invalidateEverything = this.shouldInvalidateEverything(invalidationContext);
+        if (this.invalidateEverything) {
+            this.lastValidRect = this.validRect;
+            this.validRect = this.virtualizer.getVisibleRect();
+        }
         this.rootNodes = this.buildCollection();
         // Remove deleted layout nodes
-        if (this.lastCollection) {
+        if (this.lastCollection && this.collection !== this.lastCollection) {
             for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) {
                 let layoutNode = this.layoutNodes.get(key);
                 if (layoutNode) {
@@ -69,14 +96,28 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
         }
         this.lastWidth = this.virtualizer.visibleRect.width;
         this.lastCollection = this.collection;
+        this.invalidateEverything = false;
     }
     buildCollection() {
         let y = this.padding;
+        let skipped = 0;
         let nodes = [];
         for (let node of this.collection){
+            var _rowHeight;
+            let rowHeight = (_rowHeight = this.rowHeight) !== null && _rowHeight !== void 0 ? _rowHeight : this.estimatedRowHeight;
+            // Skip rows before the valid rectangle unless they are already cached.
+            if (node.type === "item" && y + rowHeight < this.validRect.y && !this.isValid(node, y)) {
+                y += rowHeight;
+                skipped++;
+                continue;
+            }
             let layoutNode = this.buildChild(node, 0, y);
             y = layoutNode.layoutInfo.rect.maxY;
             nodes.push(layoutNode);
+            if (node.type === "item" && y > this.validRect.maxY) {
+                y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
+                break;
+            }
         }
         if (this.isLoading) {
             var _loaderHeight;
@@ -101,9 +142,12 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
         this.contentSize = new (0, $cMJQZ$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y + this.padding);
         return nodes;
     }
-    buildChild(node, x, y) {
+    isValid(node, y) {
         let cached = this.layoutNodes.get(node.key);
-        if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) return cached;
+        return !this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y && cached.layoutInfo.rect.intersects(this.lastValidRect) && cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.validRect));
+    }
+    buildChild(node, x, y) {
+        if (this.isValid(node, y)) return this.layoutNodes.get(node.key);
         let layoutNode = this.buildNode(node, x, y);
         layoutNode.node = node;
         var _parentKey;
@@ -150,17 +194,34 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
         let rect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(0, y, width, 0);
         let layoutInfo = new (0, $cMJQZ$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
         let startY = y;
+        let skipped = 0;
         let children = [];
         for (let child of node.childNodes){
+            var _rowHeight;
+            let rowHeight = (_rowHeight = this.rowHeight) !== null && _rowHeight !== void 0 ? _rowHeight : this.estimatedRowHeight;
+            // Skip rows before the valid rectangle unless they are already cached.
+            if (y + rowHeight < this.validRect.y && !this.isValid(node, y)) {
+                y += rowHeight;
+                skipped++;
+                continue;
+            }
             let layoutNode = this.buildChild(child, x, y);
             y = layoutNode.layoutInfo.rect.maxY;
             children.push(layoutNode);
+            if (y > this.validRect.maxY) {
+                // Estimate the remaining height for rows that we don't need to layout right now.
+                y += ([
+                    ...node.childNodes
+                ].length - (children.length + skipped)) * rowHeight;
+                break;
+            }
         }
         rect.height = y - startY;
         return {
             header: header,
             layoutInfo: layoutInfo,
-            children: children
+            children: children,
+            validRect: layoutInfo.rect.intersection(this.validRect)
         };
     }
     buildItem(node, x, y) {
@@ -174,10 +235,8 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
             // or the content of the item changed.
             let previousLayoutNode = this.layoutNodes.get(node.key);
             if (previousLayoutNode) {
-                let curNode = this.collection.getItem(node.key);
-                let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
                 rectHeight = previousLayoutNode.layoutInfo.rect.height;
-                isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.layoutInfo.estimatedSize;
+                isEstimated = width !== this.lastWidth || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
             } else {
                 rectHeight = this.estimatedRowHeight;
                 isEstimated = true;
@@ -191,7 +250,8 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
         layoutInfo.allowOverflow = true;
         layoutInfo.estimatedSize = isEstimated;
         return {
-            layoutInfo: layoutInfo
+            layoutInfo: layoutInfo,
+            validRect: layoutInfo.rect
         };
     }
     updateItemSize(key, size) {
@@ -218,8 +278,8 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
     updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
         let n = this.layoutNodes.get(key);
         if (n) {
-            // Invalidate by clearing node.
-            n.node = null;
+            // Invalidate by reseting validRect.
+            n.validRect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)();
             // Replace layout info in LayoutNode
             if (n.header === oldLayoutInfo) n.header = newLayoutInfo;
             else if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
@@ -368,6 +428,9 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
         this.lastWidth = 0;
         this.lastCollection = null;
         this.allowDisabledKeyFocus = options.allowDisabledKeyFocus;
+        this.lastValidRect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)();
+        this.validRect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)();
+        this.contentSize = new (0, $cMJQZ$reactstatelyvirtualizer.Size)();
     }
 }
 
@@ -386,17 +449,71 @@ class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $cMJQZ$reactstatelyv
 
 
 class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$export$cacbb3924155d68e) {
-    buildCollection() {
+    shouldInvalidateEverything(invalidationContext) {
         // If columns changed, clear layout cache.
-        if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i)=>c.key !== this.lastCollection.columns[i].key)) // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
-        this.invalidateEverything = true;
+        return super.shouldInvalidateEverything(invalidationContext) || !this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i)=>c.key !== this.lastCollection.columns[i].key || c.props.width !== this.lastCollection.columns[i].props.width || c.props.minWidth !== this.lastCollection.columns[i].props.minWidth || c.props.maxWidth !== this.lastCollection.columns[i].props.maxWidth);
+    }
+    getResizerPosition() {
+        var ref;
+        return (ref = this.getLayoutInfo(this.resizingColumn)) === null || ref === void 0 ? void 0 : ref.rect.maxX;
+    }
+    getColumnWidth(key) {
+        var ref;
+        return (ref = this.columnLayout.getColumnWidth(key)) !== null && ref !== void 0 ? ref : 0;
+    }
+    getColumnMinWidth(key) {
+        let column = this.collection.columns.find((col)=>col.key === key);
+        if (!column) return 0;
+        return this.columnLayout.getColumnMinWidth(key);
+    }
+    getColumnMaxWidth(key) {
+        let column = this.collection.columns.find((col)=>col.key === key);
+        if (!column) return 0;
+        return this.columnLayout.getColumnMaxWidth(key);
+    }
+    // outside, where this is called, should call props.onColumnResizeStart...
+    onColumnResizeStart(key) {
+        this.resizingColumn = key;
+    }
+    // only way to call props.onColumnResize with the new size outside of Layout is to send the result back
+    onColumnResize(key, width) {
+        let newControlled = new Map(Array.from(this.controlledColumns).map(([key, entry])=>[
+                key,
+                entry.props.width
+            ]));
+        let newSizes = this.columnLayout.resizeColumnWidth(this.virtualizer.visibleRect.width, this.collection, newControlled, this.uncontrolledWidths, key, width);
+        let map = new Map(Array.from(this.uncontrolledColumns).map(([key])=>[
+                key,
+                newSizes.get(key)
+            ]));
+        map.set(key, width);
+        this.uncontrolledWidths = map;
+        // relayoutNow still uses setState, should happen at the same time the parent
+        // component's state is processed as a result of props.onColumnResize
+        if (this.uncontrolledWidths.size > 0) this.virtualizer.relayoutNow({
+            sizeChanged: true
+        });
+        return newSizes;
+    }
+    onColumnResizeEnd() {
+        this.resizingColumn = null;
+    }
+    buildCollection() {
         // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
         let loadingState = this.collection.body.props.loadingState;
         this.wasLoading = this.isLoading;
         this.isLoading = loadingState === "loading" || loadingState === "loadingMore";
+        this.stickyColumnIndices = [];
+        for (let column of this.collection.columns)// The selection cell and any other sticky columns always need to be visible.
+        // In addition, row headers need to be in the DOM for accessibility labeling.
+        if (column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
+        let [controlledColumns, uncontrolledColumns] = this.columnLayout.splitColumnsIntoControlledAndUncontrolled(this.collection.columns);
+        this.controlledColumns = controlledColumns;
+        this.uncontrolledColumns = uncontrolledColumns;
+        let colWidths = this.columnLayout.recombineColumns(this.collection.columns, this.uncontrolledWidths, uncontrolledColumns, controlledColumns);
+        this.columnWidths = this.columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, this.collection, colWidths);
         let header = this.buildHeader();
         let body = this.buildBody(0);
-        this.stickyColumnIndices = this.collection.columns.filter((c)=>c.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(c.key)).map((c)=>c.index);
         this.lastPersistedKeys = null;
         body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
         this.contentSize = new (0, $cMJQZ$reactstatelyvirtualizer.Size)(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
@@ -423,7 +540,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         this.layoutInfos.set("header", layoutInfo);
         return {
             layoutInfo: layoutInfo,
-            children: children
+            children: children,
+            validRect: layoutInfo.rect
         };
     }
     buildHeaderRow(headerRow, x, y) {
@@ -444,7 +562,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         rect.width = x;
         return {
             layoutInfo: row,
-            children: columns
+            children: columns,
+            validRect: rect
         };
     }
     setChildHeights(children, height) {
@@ -456,7 +575,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         }
     }
     // used to get the column widths when rendering to the DOM
-    getColumnWidth_(node) {
+    getRenderedColumnWidth(node) {
         var _colspan;
         let colspan = (_colspan = node.colspan) !== null && _colspan !== void 0 ? _colspan : 1;
         var _colIndex;
@@ -464,7 +583,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         let width = 0;
         for(let i = colIndex; i < colIndex + colspan; i++){
             let column = this.collection.columns[i];
-            if ((column === null || column === void 0 ? void 0 : column.key) != null) width += this.getColumnWidth(column.key);
+            if ((column === null || column === void 0 ? void 0 : column.key) != null) width += this.columnWidths.get(column.key);
         }
         return width;
     }
@@ -477,10 +596,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
             // or the content of the item changed.
             let previousLayoutNode = this.layoutNodes.get(node.key);
             if (previousLayoutNode) {
-                let curNode = this.collection.getItem(node.key);
-                let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
                 height = previousLayoutNode.layoutInfo.rect.height;
-                isEstimated = curNode !== lastNode || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
+                isEstimated = node !== previousLayoutNode.node || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
             } else {
                 height = estimatedHeight;
                 isEstimated = true;
@@ -493,7 +610,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
     }
     buildColumn(node, x, y) {
         var ref;
-        let width = this.getColumnWidth_(node);
+        let width = this.getRenderedColumnWidth(node);
         let { height: height , isEstimated: isEstimated  } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
         let rect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(x, y, width, height);
         let layoutInfo = new (0, $cMJQZ$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
@@ -501,21 +618,36 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
         layoutInfo.estimatedSize = isEstimated;
         return {
-            layoutInfo: layoutInfo
+            layoutInfo: layoutInfo,
+            validRect: layoutInfo.rect
         };
     }
     buildBody(y) {
         let rect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(0, y, 0, 0);
         let layoutInfo = new (0, $cMJQZ$reactstatelyvirtualizer.LayoutInfo)("rowgroup", "body", rect);
         let startY = y;
+        let skipped = 0;
         let width = 0;
         let children = [];
         for (let node of this.collection.body.childNodes){
+            var _rowHeight;
+            let rowHeight = ((_rowHeight = this.rowHeight) !== null && _rowHeight !== void 0 ? _rowHeight : this.estimatedRowHeight) + 1;
+            // Skip rows before the valid rectangle unless they are already cached.
+            if (y + rowHeight < this.validRect.y && !this.isValid(node, y)) {
+                y += rowHeight;
+                skipped++;
+                continue;
+            }
             let layoutNode = this.buildChild(node, 0, y);
             layoutNode.layoutInfo.parentKey = "body";
             y = layoutNode.layoutInfo.rect.maxY;
             width = Math.max(width, layoutNode.layoutInfo.rect.width);
             children.push(layoutNode);
+            if (y > this.validRect.maxY) {
+                // Estimate the remaining height for rows that we don't need to layout right now.
+                y += (this.collection.size - (skipped + children.length)) * rowHeight;
+                break;
+            }
         }
         if (this.isLoading) {
             // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
@@ -525,7 +657,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
             loader.isSticky = !this.disableSticky && children.length === 0;
             this.layoutInfos.set("loader", loader);
             children.push({
-                layoutInfo: loader
+                layoutInfo: loader,
+                validRect: loader.rect
             });
             y = loader.rect.maxY;
             width = Math.max(width, rect1.width);
@@ -536,7 +669,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
             empty.isSticky = !this.disableSticky;
             this.layoutInfos.set("empty", empty);
             children.push({
-                layoutInfo: empty
+                layoutInfo: empty,
+                validRect: empty.rect
             });
             y = empty.rect.maxY;
             width = Math.max(width, rect2.width);
@@ -546,7 +680,8 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         this.layoutInfos.set("body", layoutInfo);
         return {
             layoutInfo: layoutInfo,
-            children: children
+            children: children,
+            validRect: layoutInfo.rect.intersection(this.validRect)
         };
     }
     buildNode(node, x, y) {
@@ -569,23 +704,32 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         let layoutInfo = new (0, $cMJQZ$reactstatelyvirtualizer.LayoutInfo)("row", node.key, rect);
         let children = [];
         let height = 0;
-        for (let child of node.childNodes){
-            let layoutNode = this.buildChild(child, x, y);
-            x = layoutNode.layoutInfo.rect.maxX;
-            height = Math.max(height, layoutNode.layoutInfo.rect.height);
-            children.push(layoutNode);
+        for (let child of node.childNodes)if (x > this.validRect.maxX) {
+            // Adjust existing cached layoutInfo to ensure that it is out of view.
+            // This can happen due to column resizing.
+            let layoutNode = this.layoutNodes.get(child.key);
+            if (layoutNode) {
+                layoutNode.layoutInfo.rect.x = x;
+                x += layoutNode.layoutInfo.rect.width;
+            }
+        } else {
+            let layoutNode1 = this.buildChild(child, x, y);
+            x = layoutNode1.layoutInfo.rect.maxX;
+            height = Math.max(height, layoutNode1.layoutInfo.rect.height);
+            children.push(layoutNode1);
         }
         this.setChildHeights(children, height);
-        rect.width = x;
+        rect.width = this.layoutInfos.get("header").rect.width;
         rect.height = height + 1; // +1 for bottom border
         return {
             layoutInfo: layoutInfo,
-            children: children
+            children: children,
+            validRect: rect.intersection(this.validRect)
         };
     }
     buildCell(node, x, y) {
         var ref;
-        let width = this.getColumnWidth_(node);
+        let width = this.getRenderedColumnWidth(node);
         let { height: height , isEstimated: isEstimated  } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
         let rect = new (0, $cMJQZ$reactstatelyvirtualizer.Rect)(x, y, width, height);
         let layoutInfo = new (0, $cMJQZ$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
@@ -593,10 +737,18 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
         layoutInfo.estimatedSize = isEstimated;
         return {
-            layoutInfo: layoutInfo
+            layoutInfo: layoutInfo,
+            validRect: rect
         };
     }
     getVisibleLayoutInfos(rect) {
+        // If layout hasn't yet been done for the requested rect, union the
+        // new rect with the existing valid rect, and recompute.
+        if (!this.validRect.containsRect(rect) && this.lastCollection) {
+            this.lastValidRect = this.validRect;
+            this.validRect = this.validRect.union(rect);
+            this.rootNodes = this.buildCollection();
+        }
         let res = [];
         this.buildPersistedIndices();
         for (let node of this.rootNodes){
@@ -623,8 +775,10 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
                     let persistIndex = 0;
                     while(persistedRowIndices && persistIndex < persistedRowIndices.length && persistedRowIndices[persistIndex] < firstVisibleRow){
                         let idx = persistedRowIndices[persistIndex];
-                        res.push(node.children[idx].layoutInfo);
-                        this.addVisibleLayoutInfos(res, node.children[idx], rect);
+                        if (idx < node.children.length) {
+                            res.push(node.children[idx].layoutInfo);
+                            this.addVisibleLayoutInfos(res, node.children[idx], rect);
+                        }
                         persistIndex++;
                     }
                     for(let i = firstVisibleRow; i <= lastVisibleRow; i++){
@@ -636,7 +790,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
                     // Add persisted rows after the visible rows.
                     while(persistedRowIndices && persistIndex < persistedRowIndices.length){
                         let idx1 = persistedRowIndices[persistIndex++];
-                        res.push(node.children[idx1].layoutInfo);
+                        if (idx1 < node.children.length) res.push(node.children[idx1].layoutInfo);
                     }
                     break;
                 }
@@ -650,7 +804,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
                     let persistedCellIndices = this.persistedIndices.get(node.layoutInfo.key) || this.stickyColumnIndices;
                     while(stickyIndex < persistedCellIndices.length && persistedCellIndices[stickyIndex] < firstVisibleCell){
                         let idx2 = persistedCellIndices[stickyIndex];
-                        res.push(node.children[idx2].layoutInfo);
+                        if (idx2 < node.children.length) res.push(node.children[idx2].layoutInfo);
                         stickyIndex++;
                     }
                     for(let i1 = firstVisibleCell; i1 <= lastVisibleCell; i1++){
@@ -661,7 +815,7 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
                     // Add any remaining sticky cells after the visible cells.
                     while(stickyIndex < persistedCellIndices.length){
                         let idx3 = persistedCellIndices[stickyIndex++];
-                        res.push(node.children[idx3].layoutInfo);
+                        if (idx3 < node.children.length) res.push(node.children[idx3].layoutInfo);
                     }
                     break;
                 }
@@ -728,12 +882,19 @@ class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$ex
     }
     constructor(options){
         super(options);
+        (0, $67c493497dcda343$import$d76420afe0f7f8c4$2e2bcd8739ae039)(this, "columnWidths", new Map());
         (0, $67c493497dcda343$import$d76420afe0f7f8c4$2e2bcd8739ae039)(this, "wasLoading", false);
         (0, $67c493497dcda343$import$d76420afe0f7f8c4$2e2bcd8739ae039)(this, "isLoading", false);
         (0, $67c493497dcda343$import$d76420afe0f7f8c4$2e2bcd8739ae039)(this, "lastPersistedKeys", null);
         (0, $67c493497dcda343$import$d76420afe0f7f8c4$2e2bcd8739ae039)(this, "persistedIndices", new Map());
+        this.collection = options.initialCollection;
         this.stickyColumnIndices = [];
         this.disableSticky = this.checkChrome105();
+        this.columnLayout = options.columnLayout;
+        let [controlledColumns, uncontrolledColumns] = this.columnLayout.splitColumnsIntoControlledAndUncontrolled(this.collection.columns);
+        this.controlledColumns = controlledColumns;
+        this.uncontrolledColumns = uncontrolledColumns;
+        this.uncontrolledWidths = this.columnLayout.getInitialUncontrolledWidths(uncontrolledColumns);
     }
 }