@blueprintjs/table - npm Package Compare versions

Comparing version 1.23.0 to 1.24.0

dist/common/index.js

@@ -19,4 +19,6 @@ /**
 exports.Utils = utils_1.Utils;
-// NOTE: Errors is not exported in public API
+// NOTE: The following are not exported in the public API:
+// - Errors
+// - internal/
 
 //# sourceMappingURL=index.js.map

dist/common/rect.d.ts

@@ -46,2 +46,3 @@ /// <reference types="react" />
     containsY(clientY: number): boolean;
+    equals(rect: Rect): boolean;
 }

dist/common/rect.js

@@ -91,2 +91,9 @@ /**
     };
+    Rect.prototype.equals = function (rect) {
+        return rect != null
+            && this.left === rect.left
+            && this.top === rect.top
+            && this.width === rect.width
+            && this.height === rect.height;
+    };
     return Rect;
@@ -93,0 +100,0 @@ }());

dist/quadrants/tableQuadrantStack.d.ts

@@ -106,2 +106,6 @@ /// <reference types="react" />
     constructor(props: ITableQuadrantStackProps, context?: any);
+    /**
+     * Scroll the main quadrant to the specified scroll offset, keeping all other quadrants in sync.
+     */
+    scrollToPosition(scrollLeft: number, scrollTop: number): void;
     componentDidMount(): void;
@@ -149,3 +153,3 @@ componentDidUpdate(): void;
     private syncQuadrantSizes();
-    private syncRowHeaderSize(rowHeaderElement, width);
+    private maybeSyncRowHeaderSize(rowHeaderElement, width);
     private findColumnHeader(quadrantType);
@@ -156,2 +160,3 @@ private findRowHeader(quadrantType);
     private adjustHorizontalGuides(horizontalGuides, quadrantType);
+    private getRowHeaderWidth(quadrantType);
 }

dist/quadrants/tableQuadrantStack.js

@@ -232,2 +232,12 @@ /**
     }
+    /**
+     * Scroll the main quadrant to the specified scroll offset, keeping all other quadrants in sync.
+     */
+    TableQuadrantStack.prototype.scrollToPosition = function (scrollLeft, scrollTop) {
+        var scrollContainer = this.quadrantRefs[tableQuadrant_1.QuadrantType.MAIN].scrollContainer;
+        this.wasMainQuadrantScrollChangedFromOtherOnWheelCallback = false;
+        // this will trigger the main quadrant's scroll callback below
+        scrollContainer.scrollLeft = scrollLeft;
+        scrollContainer.scrollTop = scrollTop;
+    };
     TableQuadrantStack.prototype.componentDidMount = function () {
@@ -329,6 +339,6 @@ this.emitRefs();
         // resize top and top-left quadrant row headers if main quadrant scrolls
-        this.syncRowHeaderSize(topQuadrantRowHeaderElement, rowHeaderWidth);
-        this.syncRowHeaderSize(topLeftQuadrantRowHeaderElement, rowHeaderWidth);
+        this.maybeSyncRowHeaderSize(topQuadrantRowHeaderElement, rowHeaderWidth);
+        this.maybeSyncRowHeaderSize(topLeftQuadrantRowHeaderElement, rowHeaderWidth);
     };
-    TableQuadrantStack.prototype.syncRowHeaderSize = function (rowHeaderElement, width) {
+    TableQuadrantStack.prototype.maybeSyncRowHeaderSize = function (rowHeaderElement, width) {
         if (rowHeaderElement == null) {
@@ -355,3 +365,3 @@ return;
         var scrollAmount = this.quadrantRefs[quadrantType].scrollContainer.scrollLeft;
-        var rowHeaderWidth = this.quadrantRefs[quadrantType].rowHeader.clientWidth;
+        var rowHeaderWidth = this.getRowHeaderWidth(quadrantType);
         var adjustedVerticalGuides = verticalGuides != null
@@ -370,2 +380,8 @@ ? verticalGuides.map(function (verticalGuide) { return verticalGuide - scrollAmount + rowHeaderWidth; })
     };
+    TableQuadrantStack.prototype.getRowHeaderWidth = function (quadrantType) {
+        // unlike the column header, the row header can be toggled, so we need to handle the case
+        // when it's not showing
+        var rowHeader = this.quadrantRefs[quadrantType].rowHeader;
+        return rowHeader == null ? 0 : rowHeader.clientWidth;
+    };
     return TableQuadrantStack;
@@ -372,0 +388,0 @@ }(core_1.AbstractComponent));

dist/table.d.ts

@@ -14,2 +14,3 @@ /// <reference types="react" />
 import { Rect } from "./common/rect";
+import { RenderMode } from "./common/renderMode";
 import { IColumnWidths } from "./headers/columnHeader";
@@ -123,2 +124,7 @@ import { IRowHeaderRenderer, IRowHeights } from "./headers/rowHeader";
     /**
+     * An optional callback invoked when all cells in view have completely rendered.
+     * Will be invoked on initial mount and whenever cells update (e.g., on scroll).
+     */
+    onCompleteRender?: () => void;
+    /**
      * If you want to do something after the copy or if you want to notify the
@@ -164,2 +170,9 @@ * user if a copy fails, you may provide this optional callback.
     /**
+     * Dictates how cells should be rendered. Supported modes are:
+     * - `RenderMode.BATCH`: renders cells in batches to improve performance
+     * - `RenderMode.NONE`: renders cells synchronously all at once
+     * @default RenderMode.BATCH
+     */
+    renderMode?: RenderMode;
+    /**
      * Render each row's header cell.
@@ -285,2 +298,3 @@ */
     private refHandlers;
+    private quadrantStackInstance;
     private columnHeaderElement;
@@ -291,6 +305,2 @@ private mainQuadrantElement;
     constructor(props: ITableProps, context?: any);
-    shouldComponentUpdate(nextProps: ITableProps, nextState: ITableState): boolean;
-    componentWillReceiveProps(nextProps: ITableProps): void;
-    render(): JSX.Element;
-    renderHotkeys(): JSX.Element;
     /**
@@ -302,2 +312,24 @@ * Resize all rows in the table to the height of the tallest visible cell in the specified columns.
     /**
+     * Scrolls the table to the target region in a fashion appropriate to the target region's
+     * cardinality:
+     *
+     * - CELLS: Scroll the top-left cell in the target region to the top-left corner of the viewport.
+     * - FULL_ROWS: Scroll the top-most row in the target region to the top of the viewport.
+     * - FULL_COLUMNS: Scroll the left-most column in the target region to the left side of the viewport.
+     * - FULL_TABLE: Scroll the top-left cell in the table to the top-left corner of the viewport.
+     *
+     * If there are active frozen rows and/or columns, the target region will be positioned in the
+     * top-left corner of the non-frozen area (unless the target region itself is in the frozen
+     * area).
+     *
+     * If the target region is close to the bottom-right corner of the table, this function will
+     * simply scroll the target region as close to the top-left as possible until the bottom-right
+     * corner is reached.
+     */
+    scrollToRegion(region: IRegion): void;
+    shouldComponentUpdate(nextProps: ITableProps, nextState: ITableState): boolean;
+    componentWillReceiveProps(nextProps: ITableProps): void;
+    render(): JSX.Element;
+    renderHotkeys(): JSX.Element;
+    /**
      * When the component mounts, the HTML Element refs will be available, so
@@ -340,2 +372,3 @@ * we constructor the Locator, which queries the elements' bounding
     private maybeRenderCopyHotkey();
+    private handleCompleteRender;
     private handleFocusMoveLeft;
@@ -342,0 +375,0 @@ private handleFocusMoveLeftInternal;

dist/table.js

@@ -19,3 +19,6 @@ /**
 var grid_1 = require("./common/grid");
+var FocusedCellUtils = require("./common/internal/focusedCellUtils");
+var ScrollUtils = require("./common/internal/scrollUtils");
 var rect_1 = require("./common/rect");
+var renderMode_1 = require("./common/renderMode");
 var utils_1 = require("./common/utils");
@@ -40,2 +43,3 @@ var columnHeader_1 = require("./headers/columnHeader");
             mainQuadrant: function (ref) { return _this.mainQuadrantElement = ref; },
+            quadrantStack: function (ref) { return _this.quadrantStackInstance = ref; },
             rowHeader: function (ref) { return _this.rowHeaderElement = ref; },
@@ -152,3 +156,3 @@ scrollContainer: function (ref) { return _this.scrollContainerElement = ref; },
             var _a = _this, grid = _a.grid, locator = _a.locator;
-            var _b = _this.props, allowMultipleSelection = _b.allowMultipleSelection, fillBodyWithGhostCells = _b.fillBodyWithGhostCells, loadingOptions = _b.loadingOptions, renderBodyContextMenu = _b.renderBodyContextMenu, selectedRegionTransform = _b.selectedRegionTransform;
+            var _b = _this.props, allowMultipleSelection = _b.allowMultipleSelection, fillBodyWithGhostCells = _b.fillBodyWithGhostCells, loadingOptions = _b.loadingOptions, renderBodyContextMenu = _b.renderBodyContextMenu, renderMode = _b.renderMode, selectedRegionTransform = _b.selectedRegionTransform;
             var numFrozenColumns = _this.getNumFrozenColumnsClamped();
@@ -164,15 +168,19 @@ var numFrozenRows = _this.getNumFrozenRowsClamped();
             var rowIndexEnd = showFrozenRowsOnly ? numFrozenRows : rowIndices.rowIndexEnd;
-            return (
-            // <div
-            //     className={classes}
-            //     onScroll={this.handleBodyScroll}
-            //     ref={this.setBodyRef}
-            // >
-            //     <div className={Classes.TABLE_BODY_SCROLL_CLIENT} style={style}>
-            // {...rowIndices}
-            // {...columnIndices}
-            React.createElement("div", null,
-                React.createElement(tableBody_1.TableBody, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.bodyCellRenderer, grid: grid, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onFocus: _this.handleFocus, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd, numFrozenColumns: showFrozenColumnsOnly ? numFrozenColumns : undefined, numFrozenRows: showFrozenRowsOnly ? numFrozenRows : undefined }),
+            // the main quadrant contains all cells in the table, so listen only to that quadrant
+            var onCompleteRender = quadrantType === tableQuadrant_1.QuadrantType.MAIN
+                ? _this.handleCompleteRender
+                : undefined;
+            return (React.createElement("div", null,
+                React.createElement(tableBody_1.TableBody, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.bodyCellRenderer, grid: grid, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onCompleteRender: onCompleteRender, onFocus: _this.handleFocus, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, renderMode: renderMode, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd, numFrozenColumns: showFrozenColumnsOnly ? numFrozenColumns : undefined, numFrozenRows: showFrozenRowsOnly ? numFrozenRows : undefined }),
                 _this.maybeRenderRegions(_this.styleBodyRegion, quadrantType)));
         };
+        _this.handleCompleteRender = function () {
+            // the first onCompleteRender is triggered before the viewportRect is
+            // defined and the second after the viewportRect has been set. the cells
+            // will only actually render once the viewportRect is defined though, so
+            // we defer invoking onCompleteRender until that check passes.
+            if (_this.state.viewportRect != null) {
+                core_1.Utils.safeInvoke(_this.props.onCompleteRender);
+            }
+        };
         _this.handleFocusMoveLeft = function (e) { return _this.handleFocusMove(e, "left"); };
@@ -195,2 +203,5 @@ _this.handleFocusMoveLeftInternal = function (e) { return _this.handleFocusMoveInternal(e, "left"); };
             var fixedWidth = _this.grid.getWidth();
+            // include a correction in some cases to hide borders along quadrant boundaries
+            var alignmentCorrection = 1;
+            var alignmentCorrectionString = "-" + alignmentCorrection + "px";
             switch (cardinality) {
@@ -200,19 +211,19 @@ case regions_2.RegionCardinality.CELLS:
                 case regions_2.RegionCardinality.FULL_COLUMNS:
-                    style.top = "-1px";
-                    style.height = fixedHeight;
+                    style.top = alignmentCorrectionString;
+                    style.height = fixedHeight + alignmentCorrection;
                     return style;
                 case regions_2.RegionCardinality.FULL_ROWS:
-                    style.left = "-1px";
-                    style.width = fixedWidth;
+                    style.left = alignmentCorrectionString;
+                    style.width = fixedWidth + alignmentCorrection;
                     if (canHideRightBorder) {
-                        style.right = "-1px";
+                        style.right = alignmentCorrectionString;
                     }
                     return style;
                 case regions_2.RegionCardinality.FULL_TABLE:
-                    style.left = "-1px";
-                    style.top = "-1px";
-                    style.width = fixedWidth;
-                    style.height = fixedHeight;
+                    style.left = alignmentCorrectionString;
+                    style.top = alignmentCorrectionString;
+                    style.width = fixedWidth + alignmentCorrection;
+                    style.height = fixedHeight + alignmentCorrection;
                     if (canHideRightBorder) {
-                        style.right = "-1px";
+                        style.right = alignmentCorrectionString;
                     }
@@ -552,3 +563,8 @@ return style;
             _this.setState({ viewportRect: nextViewportRect });
-            _this.invokeOnVisibleCellsChangeCallback(nextViewportRect);
+            var viewportRect = _this.state.viewportRect;
+            var didViewportChange = (viewportRect != null && !viewportRect.equals(nextViewportRect))
+                || (viewportRect == null && nextViewportRect != null);
+            if (didViewportChange) {
+                _this.invokeOnVisibleCellsChangeCallback(nextViewportRect);
+            }
         };
@@ -582,11 +598,3 @@ _this.getMaxFrozenColumnIndex = function () {
         var selectedRegions = (props.selectedRegions == null) ? [] : props.selectedRegions;
-        var focusedCell;
-        if (props.enableFocus) {
-            if (props.focusedCell != null) {
-                focusedCell = props.focusedCell;
-            }
-            else {
-                focusedCell = { col: 0, row: 0, focusSelectionIndex: 0 };
-            }
-        }
+        var focusedCell = FocusedCellUtils.getInitialFocusedCell(props.enableFocus, props.focusedCell, undefined, selectedRegions);
         _this.state = {
@@ -612,2 +620,56 @@ columnWidths: newColumnWidths,
     };
+    // Instance methods
+    // ================
+    /**
+     * Resize all rows in the table to the height of the tallest visible cell in the specified columns.
+     * If no indices are provided, default to using the tallest visible cell from all columns in view.
+     */
+    Table.prototype.resizeRowsByTallestCell = function (columnIndices) {
+        var _this = this;
+        var tallest = 0;
+        if (columnIndices == null) {
+            // Consider all columns currently in viewport
+            var viewportColumnIndices = this.grid.getColumnIndicesInRect(this.state.viewportRect);
+            for (var col = viewportColumnIndices.columnIndexStart; col <= viewportColumnIndices.columnIndexEnd; col++) {
+                tallest = Math.max(tallest, this.locator.getTallestVisibleCellInColumn(col));
+            }
+        }
+        else {
+            var columnIndicesArray = Array.isArray(columnIndices) ? columnIndices : [columnIndices];
+            var tallestByColumns = columnIndicesArray.map(function (col) { return _this.locator.getTallestVisibleCellInColumn(col); });
+            tallest = Math.max.apply(Math, tallestByColumns);
+        }
+        var rowHeights = Array(this.state.rowHeights.length).fill(tallest);
+        this.invalidateGrid();
+        this.setState({ rowHeights: rowHeights });
+    };
+    /**
+     * Scrolls the table to the target region in a fashion appropriate to the target region's
+     * cardinality:
+     *
+     * - CELLS: Scroll the top-left cell in the target region to the top-left corner of the viewport.
+     * - FULL_ROWS: Scroll the top-most row in the target region to the top of the viewport.
+     * - FULL_COLUMNS: Scroll the left-most column in the target region to the left side of the viewport.
+     * - FULL_TABLE: Scroll the top-left cell in the table to the top-left corner of the viewport.
+     *
+     * If there are active frozen rows and/or columns, the target region will be positioned in the
+     * top-left corner of the non-frozen area (unless the target region itself is in the frozen
+     * area).
+     *
+     * If the target region is close to the bottom-right corner of the table, this function will
+     * simply scroll the target region as close to the top-left as possible until the bottom-right
+     * corner is reached.
+     */
+    Table.prototype.scrollToRegion = function (region) {
+        var _a = this.state.viewportRect, currScrollLeft = _a.left, currScrollTop = _a.top;
+        var numFrozenRows = this.getNumFrozenRowsClamped();
+        var numFrozenColumns = this.getNumFrozenColumnsClamped();
+        var _b = ScrollUtils.getScrollPositionForRegion(region, currScrollLeft, currScrollTop, this.grid.getCumulativeWidthBefore, this.grid.getCumulativeHeightBefore, numFrozenRows, numFrozenColumns), scrollLeft = _b.scrollLeft, scrollTop = _b.scrollTop;
+        var correctedScrollLeft = this.shouldDisableHorizontalScroll() ? 0 : scrollLeft;
+        var correctedScrollTop = this.shouldDisableVerticalScroll() ? 0 : scrollTop;
+        // defer to the quadrant stack to keep all quadrant positions in sync
+        this.quadrantStackInstance.scrollToPosition(correctedScrollLeft, correctedScrollTop);
+    };
+    // React lifecycle
+    // ===============
     Table.prototype.shouldComponentUpdate = function (nextProps, nextState) {
@@ -618,4 +680,4 @@ var propKeysBlacklist = { exclude: Table_1.SHALLOW_COMPARE_PROP_KEYS_BLACKLIST };
             || !utils_1.Utils.shallowCompareKeys(this.state, nextState, stateKeysBlacklist)
-            || !utils_1.Utils.deepCompareKeys(this.props, nextProps, ["selectedRegions"])
-            || !utils_1.Utils.deepCompareKeys(this.state, nextState, ["selectedRegions"]);
+            || !utils_1.Utils.deepCompareKeys(this.props, nextProps, Table_1.SHALLOW_COMPARE_PROP_KEYS_BLACKLIST)
+            || !utils_1.Utils.deepCompareKeys(this.state, nextState, Table_1.SHALLOW_COMPARE_STATE_KEYS_BLACKLIST);
     };
@@ -654,5 +716,3 @@ Table.prototype.componentWillReceiveProps = function (nextProps) {
         }
-        var newFocusedCellCoordinates = (focusedCell == null)
-            ? this.state.focusedCell
-            : focusedCell;
+        var newFocusedCell = FocusedCellUtils.getInitialFocusedCell(enableFocus, focusedCell, this.state.focusedCell, newSelectedRegions);
         this.childrenArray = newChildArray;
@@ -663,3 +723,3 @@ this.columnIdToIndex = Table_1.createColumnIdIndex(this.childrenArray);
             columnWidths: newColumnWidths,
-            focusedCell: enableFocus ? newFocusedCellCoordinates : undefined,
+            focusedCell: newFocusedCell,
             rowHeights: newRowHeights,
@@ -680,3 +740,3 @@ selectedRegions: newSelectedRegions,
         return (React.createElement("div", { className: classes, ref: this.setRootTableRef, onScroll: this.handleRootScroll },
-            React.createElement(tableQuadrantStack_1.TableQuadrantStack, { bodyRef: this.setBodyRef, columnHeaderRef: this.refHandlers.columnHeader, grid: this.grid, handleColumnResizeGuide: this.handleColumnResizeGuide, handleColumnsReordering: this.handleColumnsReordering, handleRowResizeGuide: this.handleRowResizeGuide, handleRowsReordering: this.handleRowsReordering, isHorizontalScrollDisabled: this.shouldDisableHorizontalScroll(), isRowHeaderShown: isRowHeaderShown, isVerticalScrollDisabled: this.shouldDisableVerticalScroll(), numFrozenColumns: this.getNumFrozenColumnsClamped(), numFrozenRows: this.getNumFrozenRowsClamped(), onScroll: this.handleBodyScroll, quadrantRef: this.refHandlers.mainQuadrant, renderBody: this.renderBody, renderColumnHeader: this.renderColumnHeader, renderMenu: this.renderMenu, renderRowHeader: this.renderRowHeader, rowHeaderRef: this.refHandlers.rowHeader, scrollContainerRef: this.refHandlers.scrollContainer }),
+            React.createElement(tableQuadrantStack_1.TableQuadrantStack, { bodyRef: this.setBodyRef, columnHeaderRef: this.refHandlers.columnHeader, grid: this.grid, handleColumnResizeGuide: this.handleColumnResizeGuide, handleColumnsReordering: this.handleColumnsReordering, handleRowResizeGuide: this.handleRowResizeGuide, handleRowsReordering: this.handleRowsReordering, isHorizontalScrollDisabled: this.shouldDisableHorizontalScroll(), isRowHeaderShown: isRowHeaderShown, isVerticalScrollDisabled: this.shouldDisableVerticalScroll(), numFrozenColumns: this.getNumFrozenColumnsClamped(), numFrozenRows: this.getNumFrozenRowsClamped(), onScroll: this.handleBodyScroll, quadrantRef: this.refHandlers.mainQuadrant, ref: this.refHandlers.quadrantStack, renderBody: this.renderBody, renderColumnHeader: this.renderColumnHeader, renderMenu: this.renderMenu, renderRowHeader: this.renderRowHeader, rowHeaderRef: this.refHandlers.rowHeader, scrollContainerRef: this.refHandlers.scrollContainer }),
             React.createElement("div", { className: classNames(Classes.TABLE_OVERLAY_LAYER, "bp-table-reordering-cursor-overlay") }),
@@ -691,25 +751,2 @@ React.createElement(guides_1.GuideLayer, { className: Classes.TABLE_RESIZE_GUIDES, verticalGuides: verticalGuides, horizontalGuides: horizontalGuides })));
     /**
-     * Resize all rows in the table to the height of the tallest visible cell in the specified columns.
-     * If no indices are provided, default to using the tallest visible cell from all columns in view.
-     */
-    Table.prototype.resizeRowsByTallestCell = function (columnIndices) {
-        var _this = this;
-        var tallest = 0;
-        if (columnIndices == null) {
-            // Consider all columns currently in viewport
-            var viewportColumnIndices = this.grid.getColumnIndicesInRect(this.state.viewportRect);
-            for (var col = viewportColumnIndices.columnIndexStart; col <= viewportColumnIndices.columnIndexEnd; col++) {
-                tallest = Math.max(tallest, this.locator.getTallestVisibleCellInColumn(col));
-            }
-        }
-        else {
-            var columnIndicesArray = Array.isArray(columnIndices) ? columnIndices : [columnIndices];
-            var tallestByColumns = columnIndicesArray.map(function (col) { return _this.locator.getTallestVisibleCellInColumn(col); });
-            tallest = Math.max.apply(Math, tallestByColumns);
-        }
-        var rowHeights = Array(this.state.rowHeights.length).fill(tallest);
-        this.invalidateGrid();
-        this.setState({ rowHeights: rowHeights });
-    };
-    /**
      * When the component mounts, the HTML Element refs will be available, so
@@ -933,8 +970,12 @@ * we constructor the Locator, which queries the elements' bounding
         if (didScrollTopChange || didScrollLeftChange) {
-            // we need to modify the body element explicitly for the viewport to shift
+            // we need to modify the scroll container explicitly for the viewport to shift. in so
+            // doing, we add the size of the header elements, which are not technically part of the
+            // "grid" concept (the grid only consists of body cells at present).
             if (didScrollTopChange) {
-                this.bodyElement.scrollTop = nextScrollTop;
+                var topCorrection = this.shouldDisableVerticalScroll() ? 0 : this.columnHeaderElement.clientHeight;
+                this.scrollContainerElement.scrollTop = nextScrollTop + topCorrection;
             }
             if (didScrollLeftChange) {
-                this.bodyElement.scrollLeft = nextScrollLeft;
+                var leftCorrection = this.shouldDisableHorizontalScroll() ? 0 : this.rowHeaderElement.clientWidth;
+                this.scrollContainerElement.scrollLeft = nextScrollLeft + leftCorrection;
             }
@@ -983,6 +1024,6 @@ var nextViewportRect = new rect_1.Rect(nextScrollLeft, nextScrollTop, viewportRect.width, viewportRect.height);
     numRows: 0,
+    renderMode: renderMode_1.RenderMode.BATCH,
     renderRowHeader: rowHeader_1.renderDefaultRowHeader,
     selectionModes: regions_2.SelectionModes.ALL,
 };
-// these blacklists are identical, but we still need two definitions due to the different typings
 Table.SHALLOW_COMPARE_PROP_KEYS_BLACKLIST = [
@@ -993,2 +1034,3 @@ "selectedRegions",
     "selectedRegions",
+    "viewportRect",
 ];
@@ -995,0 +1037,0 @@ Table = Table_1 = tslib_1.__decorate([

dist/tableBody.d.ts

@@ -13,2 +13,3 @@ /// <reference types="react" />
 import { Rect } from "./common/rect";
+import { RenderMode } from "./common/renderMode";
 import { IContextMenuRenderer } from "./interactions/menus";
@@ -45,2 +46,6 @@ import { ISelectableProps } from "./interactions/selectable";
     /**
+     * An optional callback invoked when all cells in view have completely rendered.
+     */
+    onCompleteRender?: () => void;
+    /**
      * The `Rect` bounds of the visible viewport with respect to its parent
@@ -56,2 +61,10 @@ * scrollable pane.
     renderBodyContextMenu?: IContextMenuRenderer;
+    /**
+     * Dictates how cells should be rendered. Supported modes are:
+     * - `RenderMode.BATCH`: renders cells in batches to improve
+     *   performance
+     * - `RenderMode.NONE`: renders cells synchronously all at once
+     * @default RenderMode.BATCH
+     */
+    renderMode?: RenderMode;
 }
@@ -61,2 +74,3 @@ export declare class TableBody extends React.Component<ITableBodyProps, {}> {
         loading: boolean;
+        renderMode: RenderMode;
     };
@@ -71,7 +85,12 @@ /**
     private batcher;
+    private isRenderingBatchedCells;
+    componentDidMount(): void;
     shouldComponentUpdate(nextProps: ITableBodyProps): boolean;
     componentWillUpdate(nextProps?: ITableBodyProps): void;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
     renderContextMenu: (e: React.MouseEvent<HTMLElement>) => JSX.Element;
+    private renderBatchedCells();
+    private renderAllCells();
     private renderNewCell;
@@ -82,2 +101,3 @@ private renderCell;
     private locateDrag;
+    private maybeInvokeOnCompleteRender();
 }

dist/tableBody.js

@@ -10,2 +10,3 @@ /**
 var tslib_1 = require("tslib");
+var core_1 = require("@blueprintjs/core");
 var classNames = require("classnames");
@@ -18,2 +19,3 @@ var React = require("react");
 var rect_1 = require("./common/rect");
+var renderMode_1 = require("./common/renderMode");
 var utils_1 = require("./common/utils");
@@ -54,2 +56,3 @@ var menus_1 = require("./interactions/menus");
         _this.batcher = new batcher_1.Batcher();
+        _this.isRenderingBatchedCells = false;
         _this.renderContextMenu = function (e) {
@@ -63,2 +66,4 @@ var _a = _this.props, selectedRegions = _a.selectedRegions, renderBodyContextMenu = _a.renderBodyContextMenu, grid = _a.grid;
         };
+        // Cell renderers
+        // ==============
         _this.renderNewCell = function (row, col) {
@@ -85,2 +90,4 @@ var _a = _this.props, columnIndexEnd = _a.columnIndexEnd, grid = _a.grid, rowIndexEnd = _a.rowIndexEnd;
         };
+        // Callbacks
+        // =========
         _this.handleSelectionEnd = function () {
@@ -113,2 +120,5 @@ _this.activationCell = null; // not strictly required, but good practice
     };
+    TableBody.prototype.componentDidMount = function () {
+        this.maybeInvokeOnCompleteRender();
+    };
     TableBody.prototype.shouldComponentUpdate = function (nextProps) {
@@ -125,2 +135,5 @@ var propKeysWhitelist = { include: UPDATE_PROPS_KEYS };
     };
+    TableBody.prototype.componentDidUpdate = function () {
+        this.maybeInvokeOnCompleteRender();
+    };
     TableBody.prototype.componentWillUnmount = function () {
@@ -130,4 +143,19 @@ this.batcher.cancelOutstandingCallback();
     TableBody.prototype.render = function () {
+        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, grid = _a.grid, numFrozenColumns = _a.numFrozenColumns, numFrozenRows = _a.numFrozenRows, onFocus = _a.onFocus, onSelection = _a.onSelection, renderMode = _a.renderMode, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+        var cells = (renderMode === renderMode_1.RenderMode.BATCH)
+            ? this.renderBatchedCells()
+            : this.renderAllCells();
+        var defaultStyle = grid.getRect().sizeStyle();
+        var style = {
+            height: (numFrozenRows != null) ? grid.getCumulativeHeightAt(numFrozenRows - 1) : defaultStyle.height,
+            width: (numFrozenColumns != null) ? grid.getCumulativeWidthAt(numFrozenColumns - 1) : defaultStyle.width,
+        };
+        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onFocus: onFocus, onSelection: onSelection, onSelectionEnd: this.handleSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+            React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: classNames(Classes.TABLE_BODY_VIRTUAL_CLIENT, Classes.TABLE_CELL_CLIENT), renderContextMenu: this.renderContextMenu, style: style }, cells)));
+    };
+    // Render modes
+    // ============
+    TableBody.prototype.renderBatchedCells = function () {
         var _this = this;
-        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, grid = _a.grid, numFrozenColumns = _a.numFrozenColumns, numFrozenRows = _a.numFrozenRows, onFocus = _a.onFocus, onSelection = _a.onSelection, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+        var _a = this.props, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart;
         // render cells in batches
@@ -145,10 +173,28 @@ this.batcher.startNewBatch();
         var cells = this.batcher.getList();
-        var defaultStyle = grid.getRect().sizeStyle();
-        var style = {
-            height: (numFrozenRows != null) ? grid.getCumulativeHeightAt(numFrozenRows - 1) : defaultStyle.height,
-            width: (numFrozenColumns != null) ? grid.getCumulativeWidthAt(numFrozenColumns - 1) : defaultStyle.width,
-        };
-        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onFocus: onFocus, onSelection: onSelection, onSelectionEnd: this.handleSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
-            React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: classNames(Classes.TABLE_BODY_VIRTUAL_CLIENT, Classes.TABLE_CELL_CLIENT), renderContextMenu: this.renderContextMenu, style: style }, cells)));
+        return cells;
     };
+    TableBody.prototype.renderAllCells = function () {
+        var _a = this.props, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, grid = _a.grid, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart;
+        var cells = [];
+        for (var rowIndex = rowIndexStart; rowIndex <= rowIndexEnd; rowIndex++) {
+            for (var columnIndex = columnIndexStart; columnIndex <= columnIndexEnd; columnIndex++) {
+                var extremaClasses = grid.getExtremaClasses(rowIndex, columnIndex, rowIndexEnd, columnIndexEnd);
+                var isGhost = grid.isGhostIndex(rowIndex, columnIndex);
+                cells.push(this.renderCell(rowIndex, columnIndex, extremaClasses, isGhost));
+            }
+        }
+        return cells;
+    };
+    TableBody.prototype.maybeInvokeOnCompleteRender = function () {
+        var _a = this.props, onCompleteRender = _a.onCompleteRender, renderMode = _a.renderMode;
+        if (renderMode === renderMode_1.RenderMode.BATCH
+            && this.isRenderingBatchedCells
+            && this.batcher.isDone()) {
+            this.isRenderingBatchedCells = false;
+            core_1.Utils.safeInvoke(onCompleteRender);
+        }
+        else if (renderMode === renderMode_1.RenderMode.NONE) {
+            core_1.Utils.safeInvoke(onCompleteRender);
+        }
+    };
     return TableBody;
@@ -158,2 +204,3 @@ }(React.Component));
     loading: false,
+    renderMode: renderMode_1.RenderMode.BATCH,
 };
@@ -160,0 +207,0 @@ exports.TableBody = TableBody;

package.json

 {
   "name": "@blueprintjs/table",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "Scalable interactive table component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/common/index.ts

@@ -13,2 +13,5 @@ /**
 export { Utils } from "./utils";
-// NOTE: Errors is not exported in public API
+
+// NOTE: The following are not exported in the public API:
+// - Errors
+// - internal/

src/common/rect.ts

@@ -114,2 +114,10 @@ /**
     }
+
+    public equals(rect: Rect) {
+        return rect != null
+            && this.left === rect.left
+            && this.top === rect.top
+            && this.width === rect.width
+            && this.height === rect.height;
+    }
 }

src/docs.md

@@ -213,2 +213,21 @@ ---
 
+@#### Instance methods
+
+- `resizeRowsByTallestCell(columnIndices?: number | number[]): void` – Resizes all rows in the
+   table to the height of the tallest visible cell in the specified columns. If no indices are
+   provided, defaults to using the tallest visible cell from all columns in view.
+- `scrollToRegion(region: IRegion): void` – Scrolls the table to the target region in a
+  fashion appropriate to the target region's cardinality:
+    - `CELLS`: Scroll the top-left cell in the target region to the top-left corner of the viewport.
+    - `FULL_ROWS`: Scroll the top-most row in the target region to the top of the viewport.
+    - `FULL_COLUMNS`: Scroll the left-most column in the target region to the left side of the viewport.
+    - `FULL_TABLE`: Scroll the top-left cell in the table to the top-left corner of the viewport.
+
+  If there are active frozen rows and/or columns, the target region will be positioned in the top-left
+  corner of the non-frozen area (unless the target region itself is in the frozen area).
+
+  If the target region is close to the bottom-right corner of the table, this function will simply
+  scroll the target region as close to the top-left as possible until the bottom-right corner is
+  reached.
+
 @interface ITableProps
@@ -215,0 +234,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2635951

increased by3.07%

Number of package files

226

increased by5.61%

Lines of code

27154

increased by3.29%

No dependency changes