@blueprintjs/table - npm Package Compare versions

Comparing version 1.21.0 to 1.22.0

dist/cell/formats/truncatedFormat.js

@@ -46,7 +46,6 @@ /**
                 }];
-            var iconClasses = classNames(core_1.Classes.ICON_STANDARD, core_1.Classes.iconClass("more"));
             return (React.createElement("div", { className: className },
                 React.createElement("div", { className: Classes.TABLE_TRUNCATED_VALUE, ref: this.handleContentDivRef }, cellContent),
                 React.createElement(core_1.Popover, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, tetherOptions: { constraints: constraints }, content: popoverContent, position: core_1.Position.BOTTOM, useSmartArrowPositioning: true },
-                    React.createElement("span", { className: iconClasses }))));
+                    React.createElement(core_1.Icon, { iconName: "more" }))));
         }
@@ -53,0 +52,0 @@ else {

dist/common/classes.d.ts

@@ -40,2 +40,9 @@ export declare const TABLE_BODY = "bp-table-body";
 export declare const TABLE_POPOVER_WHITESPACE_PRE = "bp-table-popover-whitespace-pre";
+export declare const TABLE_QUADRANT = "bp-table-quadrant";
+export declare const TABLE_QUADRANT_BODY_CONTAINER = "bp-table-quadrant-body-container";
+export declare const TABLE_QUADRANT_LEFT = "bp-table-quadrant-left";
+export declare const TABLE_QUADRANT_MAIN = "bp-table-quadrant-main";
+export declare const TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container";
+export declare const TABLE_QUADRANT_TOP = "bp-table-quadrant-top";
+export declare const TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left";
 export declare const TABLE_REGION = "bp-table-region";
@@ -55,2 +62,3 @@ export declare const TABLE_REORDER_HANDLE = "bp-table-reorder-handle";
 export declare const TABLE_ROW_HEADERS = "bp-table-row-headers";
+export declare const TABLE_ROW_HEADERS_CELLS_CONTAINER = "bp-table-row-headers-cells-container";
 export declare const TABLE_ROW_NAME = "bp-table-row-name";
@@ -57,0 +65,0 @@ export declare const TABLE_ROW_NAME_TEXT = "bp-table-row-name-text";

dist/common/classes.js

@@ -48,2 +48,9 @@ /*
 exports.TABLE_POPOVER_WHITESPACE_PRE = "bp-table-popover-whitespace-pre";
+exports.TABLE_QUADRANT = "bp-table-quadrant";
+exports.TABLE_QUADRANT_BODY_CONTAINER = "bp-table-quadrant-body-container";
+exports.TABLE_QUADRANT_LEFT = "bp-table-quadrant-left";
+exports.TABLE_QUADRANT_MAIN = "bp-table-quadrant-main";
+exports.TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container";
+exports.TABLE_QUADRANT_TOP = "bp-table-quadrant-top";
+exports.TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left";
 exports.TABLE_REGION = "bp-table-region";
@@ -63,2 +70,3 @@ exports.TABLE_REORDER_HANDLE = "bp-table-reorder-handle";
 exports.TABLE_ROW_HEADERS = "bp-table-row-headers";
+exports.TABLE_ROW_HEADERS_CELLS_CONTAINER = "bp-table-row-headers-cells-container";
 exports.TABLE_ROW_NAME = "bp-table-row-name";
@@ -65,0 +73,0 @@ exports.TABLE_ROW_NAME_TEXT = "bp-table-row-name-text";

dist/common/errors.d.ts

 export declare const COLUMN_HEADER_CELL_MENU_DEPRECATED: string;
 export declare const ROW_HEADER_CELL_MENU_DEPRECATED: string;
+export declare const QUADRANT_ON_SCROLL_UNNECESSARILY_DEFINED: string;
+export declare const TABLE_NON_COLUMN_CHILDREN_WARNING: string;
+export declare const TABLE_NUM_FROZEN_COLUMNS_BOUND_WARNING: string;
+export declare const TABLE_NUM_FROZEN_ROWS_BOUND_WARNING: string;

dist/common/errors.js

@@ -13,3 +13,7 @@ /*
 exports.ROW_HEADER_CELL_MENU_DEPRECATED = deprec + " <RowHeaderCell> menu is deprecated. Use renderMenu instead.";
+exports.QUADRANT_ON_SCROLL_UNNECESSARILY_DEFINED = ns + " <TableQuadrant> onScroll need not be defined for any quadrant aside from the MAIN quadrant.";
+exports.TABLE_NON_COLUMN_CHILDREN_WARNING = ns + " <Table> Children of Table must be Columns\"";
+exports.TABLE_NUM_FROZEN_COLUMNS_BOUND_WARNING = ns + " <Table> numFrozenColumns must be in [0, number of columns]";
+exports.TABLE_NUM_FROZEN_ROWS_BOUND_WARNING = ns + " <Table> numFrozenRows must be in [0, numRows]";
 
 //# sourceMappingURL=errors.js.map

dist/common/utils.d.ts

@@ -30,2 +30,3 @@ /// <reference types="react" />
     toBase26Alpha(num: number): string;
+    toBase26CellName(rowIndex: number, columnIndex: number): string;
     binarySearch(value: number, high: number, lookup: (index: number) => number): number;
@@ -32,0 +33,0 @@ arrayOfLength<T>(array: T[], length: number, fillValue: T): T[];

dist/common/utils.js

@@ -86,2 +86,9 @@ /**
     /**
+     * Returns traditional spreadsheet-style cell names
+     * e.g. (A1, B2, ..., Z44, AA1) with rows 1-indexed.
+     */
+    toBase26CellName: function (rowIndex, columnIndex) {
+        return "" + exports.Utils.toBase26Alpha(columnIndex) + (rowIndex + 1);
+    },
+    /**
      * Performs the binary search algorithm to find the index of the `value`
@@ -88,0 +95,0 @@ * parameter in a sorted list of numbers. If `value` is not in the list, the

dist/headers/columnHeader.js

@@ -23,15 +23,20 @@ /**
         _this.wrapCells = function (cells) {
-            var _a = _this.props, grid = _a.grid, viewportRect = _a.viewportRect, columnIndexStart = _a.columnIndexStart;
-            // always set width so that the layout can push out the element unless it overflows.
+            var _a = _this.props, columnIndexStart = _a.columnIndexStart, grid = _a.grid;
+            var tableWidth = grid.getRect().width;
+            var scrollLeftCorrection = _this.props.grid.getCumulativeWidthBefore(columnIndexStart);
             var style = {
-                width: grid.getRect().width + "px",
+                // only header cells in view will render, but we need to reposition them to stay in view
+                // as we scroll horizontally.
+                transform: "translateX(" + (scrollLeftCorrection || 0) + "px)",
+                // reduce the width to clamp the sliding window as we approach the final headers; otherwise,
+                // we'll have tons of useless whitespace at the end.
+                width: tableWidth - scrollLeftCorrection,
             };
-            // use CSS translation to offset the cells
-            if (viewportRect != null) {
-                style.transform = "translate3d(" + (grid.getColumnRect(columnIndexStart).left - viewportRect.left) + "px, 0, 0)";
-            }
             var classes = classNames(Classes.TABLE_THEAD, Classes.TABLE_COLUMN_HEADER_TR, (_b = {},
                 _b[Classes.TABLE_DRAGGABLE] = (_this.props.onSelection != null),
                 _b));
-            return (React.createElement("div", { style: style, className: classes }, cells));
+            // add a wrapper set to the full-table width to ensure container styles stretch from the first
+            // cell all the way to the last
+            return (React.createElement("div", { style: { width: tableWidth } },
+                React.createElement("div", { style: style, className: classes }, cells)));
             var _b;
@@ -38,0 +43,0 @@ };

dist/headers/columnHeaderCell.d.ts

 /// <reference types="react" />
 import * as React from "react";
-import { AbstractComponent, IProps } from "@blueprintjs/core";
+import { AbstractComponent, IconName, IProps } from "@blueprintjs/core";
 import { IHeaderCellProps } from "./headerCell";
@@ -46,5 +46,5 @@ export interface IColumnNameProps {
      * The icon name for the header's menu button.
-     * @default 'chevron-down'
+     * @default "chevron-down"
      */
-    menuIconName?: string;
+    menuIconName?: IconName;
 }
@@ -51,0 +51,0 @@ export interface IColumnHeaderCellState {

dist/headers/columnHeaderCell.js

@@ -100,3 +100,2 @@ /**
         }
-        var popoverTargetClasses = classNames(core_1.Classes.ICON_STANDARD, core_1.Classes.iconClass(menuIconName));
         var constraints = [{
@@ -117,3 +116,3 @@ attachment: "together",
             React.createElement(core_1.Popover, { tetherOptions: { constraints: constraints }, content: content, position: core_1.Position.BOTTOM, className: Classes.TABLE_TH_MENU, popoverDidOpen: this.handlePopoverDidOpen, popoverWillClose: this.handlePopoverWillClose, useSmartArrowPositioning: true },
-                React.createElement("span", { className: popoverTargetClasses }))));
+                React.createElement(core_1.Icon, { iconName: menuIconName }))));
         var _b;
@@ -120,0 +119,0 @@ };

dist/headers/header.d.ts

 /// <reference types="react" />
 import * as React from "react";
-import { Grid, Rect } from "../common";
+import { Grid } from "../common";
 import { IClientCoordinates } from "../interactions/draggable";
@@ -40,7 +40,2 @@ import { IReorderableProps } from "../interactions/reorderable";
     /**
-     * The `Rect` bounds of the visible viewport with respect to its parent
-     * scrollable pane.
-     */
-    viewportRect: Rect;
-    /**
      * This callback is called while the user is resizing a header cell. The guides
@@ -47,0 +42,0 @@ * array contains pixel offsets for where to display the resize guides in

dist/headers/header.js

@@ -23,3 +23,2 @@ /**
     "startIndex",
-    "viewportRect",
 ];
@@ -26,0 +25,0 @@ var Header = (function (_super) {

dist/headers/rowHeader.d.ts

@@ -35,3 +35,2 @@ /// <reference types="react" />
     private getMouseCoordinate;
-    private getStartIndex;
     private handleResizeEnd;
@@ -38,0 +37,0 @@ private handleSizeChanged;

dist/headers/rowHeader.js

@@ -25,14 +25,17 @@ /**
         _this.wrapCells = function (cells) {
-            var _a = _this.props, grid = _a.grid, viewportRect = _a.viewportRect;
-            // always set height so that the layout can push out the element unless it overflows.
+            var _a = _this.props, rowIndexStart = _a.rowIndexStart, grid = _a.grid;
+            var tableHeight = grid.getRect().height;
+            var scrollTopCorrection = _this.props.grid.getCumulativeHeightBefore(rowIndexStart);
             var style = {
-                height: grid.getRect().height + "px",
+                // reduce the height to clamp the sliding window as we approach the final headers; otherwise,
+                // we'll have tons of useless whitespace at the end.
+                height: tableHeight - scrollTopCorrection,
+                // only header cells in view will render, but we need to reposition them to stay in view
+                // as we scroll vertically.
+                transform: "translateY(" + (scrollTopCorrection || 0) + "px)",
             };
-            // use CSS translation to offset the cells
-            if (viewportRect != null) {
-                var startIndex = _this.getStartIndex();
-                var topOffset = grid.getRowRect(startIndex).top - viewportRect.top;
-                style.transform = "translate3d(0, " + topOffset + "px, 0)";
-            }
-            return (React.createElement("div", { style: style }, cells));
+            // add a wrapper set to the full-table height to ensure container styles stretch from the first
+            // cell all the way to the last
+            return (React.createElement("div", { style: { height: tableHeight } },
+                React.createElement("div", { className: Classes.TABLE_ROW_HEADERS_CELLS_CONTAINER, style: style }, cells)));
         };
@@ -55,5 +58,2 @@ _this.convertPointToRow = function (clientXOrY, useMidpoint) {
         };
-        _this.getStartIndex = function () {
-            return _this.props.rowIndexStart;
-        };
         _this.handleResizeEnd = function (index, size) {
@@ -60,0 +60,0 @@ _this.props.onResizeGuide(null);

dist/layers/regions.d.ts

@@ -10,4 +10,5 @@ /// <reference types="react" />
 import * as React from "react";
+import { QuadrantType } from "../quadrants/tableQuadrant";
 import { IRegion } from "../regions";
-export declare type IRegionStyler = (region: IRegion) => React.CSSProperties;
+export declare type IRegionStyler = (region: IRegion, quadrantType?: QuadrantType) => React.CSSProperties;
 export interface IRegionLayerProps extends IProps {
@@ -14,0 +15,0 @@ /**

dist/locator.d.ts

@@ -40,6 +40,14 @@ import { Grid } from "./common/grid";
     private bodyElement;
+    private static CELL_HORIZONTAL_PADDING;
     private grid;
-    private static CELL_HORIZONTAL_PADDING;
-    constructor(tableElement: HTMLElement, bodyElement: HTMLElement, grid: Grid);
-    setGrid(grid: Grid): void;
+    private rowHeaderWidth;
+    private columnHeaderHeight;
+    private numFrozenRows;
+    private numFrozenColumns;
+    constructor(tableElement: HTMLElement, bodyElement: HTMLElement);
+    setGrid(grid: Grid): this;
+    setNumFrozenRows(numFrozenRows: number): this;
+    setNumFrozenColumns(numFrozenColumns: number): this;
+    setColumnHeaderHeight(columnHeaderHeight: number): this;
+    setRowHeaderWidth(rowHeaderWidth: number): this;
     getViewportRect(): Rect;
@@ -59,4 +67,4 @@ getWidestVisibleCellInColumn(columnIndex: number): number;
     private convertCellMidpointToClientY;
-    private toTableRelativeX;
-    private toTableRelativeY;
+    private toGridX;
+    private toGridY;
 }

dist/locator.js

@@ -13,7 +13,10 @@ /**
 var Locator = (function () {
-    function Locator(tableElement, bodyElement, grid) {
+    function Locator(tableElement, bodyElement) {
         var _this = this;
         this.tableElement = tableElement;
         this.bodyElement = bodyElement;
-        this.grid = grid;
+        this.rowHeaderWidth = 0;
+        this.columnHeaderHeight = 0;
+        this.numFrozenRows = 0;
+        this.numFrozenColumns = 0;
         this.convertCellIndexToClientX = function (index) {
@@ -35,12 +38,53 @@ return _this.grid.getCumulativeWidthAt(index);
         };
-        this.toTableRelativeX = function (clientX) {
-            return _this.bodyElement.scrollLeft + clientX - _this.bodyElement.getBoundingClientRect().left;
+        this.toGridX = function (clientX) {
+            var tableOffsetFromPageLeft = _this.tableElement.getBoundingClientRect().left;
+            var cursorOffsetFromTableLeft = clientX - tableOffsetFromPageLeft;
+            var cursorOffsetFromGridLeft = cursorOffsetFromTableLeft - _this.rowHeaderWidth;
+            var scrollOffsetFromTableLeft = _this.bodyElement.scrollLeft;
+            var isCursorWithinFrozenColumns = _this.numFrozenColumns != null
+                && _this.numFrozenColumns > 0
+                && cursorOffsetFromGridLeft <= _this.grid.getCumulativeWidthBefore(_this.numFrozenColumns);
+            // the frozen-column region doesn't scroll, so ignore the scroll distance in that case
+            return isCursorWithinFrozenColumns
+                ? cursorOffsetFromGridLeft
+                : cursorOffsetFromGridLeft + scrollOffsetFromTableLeft;
         };
-        this.toTableRelativeY = function (clientY) {
-            return _this.bodyElement.scrollTop + clientY - _this.bodyElement.getBoundingClientRect().top;
+        this.toGridY = function (clientY) {
+            var tableOffsetFromPageTop = _this.tableElement.getBoundingClientRect().top;
+            var cursorOffsetFromTableTop = clientY - tableOffsetFromPageTop;
+            var cursorOffsetFromGridTop = cursorOffsetFromTableTop - _this.columnHeaderHeight;
+            var scrollOffsetFromTableTop = _this.bodyElement.scrollTop;
+            var isCursorWithinFrozenRows = _this.numFrozenRows != null
+                && _this.numFrozenRows > 0
+                && cursorOffsetFromGridTop <= _this.grid.getCumulativeHeightBefore(_this.numFrozenRows);
+            return isCursorWithinFrozenRows
+                ? cursorOffsetFromGridTop
+                : cursorOffsetFromGridTop + scrollOffsetFromTableTop;
         };
+        // empty constructor
     }
+    // Setters
+    // =======
     Locator.prototype.setGrid = function (grid) {
         this.grid = grid;
+        return this;
     };
+    Locator.prototype.setNumFrozenRows = function (numFrozenRows) {
+        this.numFrozenRows = numFrozenRows;
+        return this;
+    };
+    Locator.prototype.setNumFrozenColumns = function (numFrozenColumns) {
+        this.numFrozenColumns = numFrozenColumns;
+        return this;
+    };
+    Locator.prototype.setColumnHeaderHeight = function (columnHeaderHeight) {
+        this.columnHeaderHeight = columnHeaderHeight;
+        return this;
+    };
+    Locator.prototype.setRowHeaderWidth = function (rowHeaderWidth) {
+        this.rowHeaderWidth = rowHeaderWidth;
+        return this;
+    };
+    // Getters
+    // =======
     Locator.prototype.getViewportRect = function () {
@@ -89,2 +133,4 @@ return new rect_1.Rect(this.bodyElement.scrollLeft, this.bodyElement.scrollTop, this.bodyElement.clientWidth, this.bodyElement.clientHeight);
     };
+    // Converters
+    // ==========
     Locator.prototype.convertPointToColumn = function (clientX, useMidpoint) {
@@ -95,6 +141,6 @@ var tableRect = this.getTableRect();
         }
-        var tableX = this.toTableRelativeX(clientX);
+        var gridX = this.toGridX(clientX);
         var limit = useMidpoint ? this.grid.numCols : this.grid.numCols - 1;
         var lookupFn = useMidpoint ? this.convertCellMidpointToClientX : this.convertCellIndexToClientX;
-        return utils_1.Utils.binarySearch(tableX, limit, lookupFn);
+        return utils_1.Utils.binarySearch(gridX, limit, lookupFn);
     };
@@ -106,14 +152,16 @@ Locator.prototype.convertPointToRow = function (clientY, useMidpoint) {
         }
-        var tableY = this.toTableRelativeY(clientY);
+        var gridY = this.toGridY(clientY);
         var limit = useMidpoint ? this.grid.numRows : this.grid.numRows - 1;
         var lookupFn = useMidpoint ? this.convertCellMidpointToClientY : this.convertCellIndexToClientY;
-        return utils_1.Utils.binarySearch(tableY, limit, lookupFn);
+        return utils_1.Utils.binarySearch(gridY, limit, lookupFn);
     };
     Locator.prototype.convertPointToCell = function (clientX, clientY) {
-        var tableX = this.toTableRelativeX(clientX);
-        var tableY = this.toTableRelativeY(clientY);
-        var col = utils_1.Utils.binarySearch(tableX, this.grid.numCols - 1, this.convertCellIndexToClientX);
-        var row = utils_1.Utils.binarySearch(tableY, this.grid.numRows - 1, this.convertCellIndexToClientY);
+        var gridX = this.toGridX(clientX);
+        var gridY = this.toGridY(clientY);
+        var col = utils_1.Utils.binarySearch(gridX, this.grid.numCols - 1, this.convertCellIndexToClientX);
+        var row = utils_1.Utils.binarySearch(gridY, this.grid.numRows - 1, this.convertCellIndexToClientY);
         return { col: col, row: row };
     };
+    // Private helpers
+    // ===============
     Locator.prototype.getTableRect = function () {
@@ -120,0 +168,0 @@ return rect_1.Rect.wrap(this.tableElement.getBoundingClientRect());

dist/table.d.ts

@@ -100,2 +100,10 @@ /// <reference types="react" />
     /**
+     * The number of columns to freeze to the left side of the table, counting from the leftmost column.
+     */
+    numFrozenColumns?: number;
+    /**
+     * The number of rows to freeze to the top of the table, counting from the topmost row.
+     */
+    numFrozenRows?: number;
+    /**
      * The number of rows in the table.
@@ -272,6 +280,9 @@ */
     private columnIdToIndex;
-    private menuElement;
     private resizeSensorDetach;
     private rootTableElement;
+    private refHandlers;
+    private columnHeaderElement;
+    private mainQuadrantElement;
     private rowHeaderElement;
+    private scrollContainerElement;
     constructor(props: ITableProps, context?: any);
@@ -300,4 +311,5 @@ shouldComponentUpdate(nextProps: ITableProps, nextState: ITableState): boolean;
     private handleCopy;
-    private renderMenu();
-    private syncMenuWidth();
+    private shouldDisableVerticalScroll();
+    private shouldDisableHorizontalScroll();
+    private renderMenu;
     private maybeScrollTableIntoView();
@@ -308,6 +320,6 @@ private selectAll;
     private columnHeaderCellRenderer;
-    private renderColumnHeader();
-    private renderRowHeader();
+    private renderColumnHeader;
+    private renderRowHeader;
     private bodyCellRenderer;
-    private renderBody();
+    private renderBody;
     private isGuidesShowing();
@@ -324,3 +336,3 @@ private isSelectionModeEnabled(selectionMode);
      */
-    private maybeRenderRegions(getRegionStyle);
+    private maybeRenderRegions(getRegionStyle, quadrantType?);
     private maybeRenderCopyHotkey();
@@ -345,4 +357,2 @@ private handleFocusMoveLeft;
     private handleBodyScroll;
-    private handleColumnResizeGuide;
-    private handleRowResizeGuide;
     private clearSelection;
@@ -361,8 +371,13 @@ private handleFocusMove;
     private hasLoadingOption;
+    private updateLocator();
     private updateViewportRect;
     private invokeOnVisibleCellsChangeCallback(viewportRect);
+    private getMaxFrozenColumnIndex;
+    private getMaxFrozenRowIndex;
+    private getNumFrozenColumnsClamped(props?);
+    private getNumFrozenRowsClamped(props?);
+    private handleColumnResizeGuide;
+    private handleRowResizeGuide;
     private setBodyRef;
-    private setMenuRef;
     private setRootTableRef;
-    private setRowHeaderRef;
 }

dist/table.js

@@ -17,2 +17,3 @@ /**
 var clipboard_1 = require("./common/clipboard");
+var Errors = require("./common/errors");
 var grid_1 = require("./common/grid");
@@ -28,2 +29,4 @@ var rect_1 = require("./common/rect");
 var locator_1 = require("./locator");
+var tableQuadrant_1 = require("./quadrants/tableQuadrant");
+var tableQuadrantStack_1 = require("./quadrants/tableQuadrantStack");
 var regions_2 = require("./regions");
@@ -35,2 +38,8 @@ var tableBody_1 = require("./tableBody");
         var _this = _super.call(this, props, context) || this;
+        _this.refHandlers = {
+            columnHeader: function (ref) { return _this.columnHeaderElement = ref; },
+            mainQuadrant: function (ref) { return _this.mainQuadrantElement = ref; },
+            rowHeader: function (ref) { return _this.rowHeaderElement = ref; },
+            scrollContainer: function (ref) { return _this.scrollContainerElement = ref; },
+        };
         _this.handleCopy = function (e) {
@@ -53,2 +62,9 @@ var grid = _this.grid;
         };
+        _this.renderMenu = function (refHandler) {
+            var classes = classNames(Classes.TABLE_MENU, (_a = {},
+                _a[Classes.TABLE_SELECTION_ENABLED] = _this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_TABLE),
+                _a));
+            return (React.createElement("div", { className: classes, ref: refHandler, onClick: _this.selectAll }, _this.maybeRenderRegions(_this.styleMenuRegion)));
+            var _a;
+        };
         _this.selectAll = function () {
@@ -60,3 +76,3 @@ var selectionHandler = _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_TABLE);
             // move the focus cell to the top left
-            var newFocusedCellCoordinates = regions_2.Regions.getFocusCellCoordinatesFromRegion(regions_2.RegionCardinality.FULL_TABLE);
+            var newFocusedCellCoordinates = regions_2.Regions.getFocusCellCoordinatesFromRegion(regions_2.Regions.table());
             var fullFocusCellCoordinates = {
@@ -94,2 +110,34 @@ col: newFocusedCellCoordinates.col,
         };
+        _this.renderColumnHeader = function (refHandler, resizeHandler, reorderingHandler, showFrozenColumnsOnly) {
+            if (showFrozenColumnsOnly === void 0) { showFrozenColumnsOnly = false; }
+            var _a = _this, grid = _a.grid, locator = _a.locator;
+            var _b = _this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
+            var _c = _this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isColumnReorderable = _c.isColumnReorderable, isColumnResizable = _c.isColumnResizable, loadingOptions = _c.loadingOptions, maxColumnWidth = _c.maxColumnWidth, minColumnWidth = _c.minColumnWidth, selectedRegionTransform = _c.selectedRegionTransform;
+            var classes = classNames(Classes.TABLE_COLUMN_HEADERS, (_d = {},
+                _d[Classes.TABLE_SELECTION_ENABLED] = _this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_COLUMNS),
+                _d));
+            var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
+            var columnIndexStart = showFrozenColumnsOnly ? 0 : columnIndices.columnIndexStart;
+            var columnIndexEnd = showFrozenColumnsOnly ? _this.getMaxFrozenColumnIndex() : columnIndices.columnIndexEnd;
+            return (React.createElement("div", { className: classes, ref: refHandler },
+                React.createElement(columnHeader_1.ColumnHeader, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.columnHeaderCellRenderer, grid: grid, isReorderable: isColumnReorderable, isResizable: isColumnResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS), locator: locator, maxColumnWidth: maxColumnWidth, minColumnWidth: minColumnWidth, onColumnWidthChanged: _this.handleColumnWidthChanged, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onReordered: _this.handleColumnsReordered, onReordering: reorderingHandler, onResizeGuide: resizeHandler, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd }, _this.props.children),
+                _this.maybeRenderRegions(_this.styleColumnHeaderRegion)));
+            var _d;
+        };
+        _this.renderRowHeader = function (refHandler, resizeHandler, reorderingHandler, showFrozenRowsOnly) {
+            if (showFrozenRowsOnly === void 0) { showFrozenRowsOnly = false; }
+            var _a = _this, grid = _a.grid, locator = _a.locator;
+            var _b = _this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
+            var _c = _this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isRowReorderable = _c.isRowReorderable, isRowResizable = _c.isRowResizable, loadingOptions = _c.loadingOptions, maxRowHeight = _c.maxRowHeight, minRowHeight = _c.minRowHeight, renderRowHeader = _c.renderRowHeader, selectedRegionTransform = _c.selectedRegionTransform;
+            var classes = classNames(Classes.TABLE_ROW_HEADERS, (_d = {},
+                _d[Classes.TABLE_SELECTION_ENABLED] = _this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_ROWS),
+                _d));
+            var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
+            var rowIndexStart = showFrozenRowsOnly ? 0 : rowIndices.rowIndexStart;
+            var rowIndexEnd = showFrozenRowsOnly ? _this.getMaxFrozenRowIndex() : rowIndices.rowIndexEnd;
+            return (React.createElement("div", { className: classes, ref: refHandler },
+                React.createElement(rowHeader_1.RowHeader, { allowMultipleSelection: allowMultipleSelection, grid: grid, locator: locator, isReorderable: isRowReorderable, isResizable: isRowResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onResizeGuide: resizeHandler, onReordered: _this.handleRowsReordered, onReordering: reorderingHandler, onRowHeightChanged: _this.handleRowHeightChanged, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd }),
+                _this.maybeRenderRegions(_this.styleRowHeaderRegion)));
+            var _d;
+        };
         _this.bodyCellRenderer = function (rowIndex, columnIndex) {
@@ -104,2 +152,30 @@ var columnProps = _this.getColumnProps(columnIndex);
         };
+        _this.renderBody = function (quadrantType, showFrozenRowsOnly, showFrozenColumnsOnly) {
+            if (showFrozenRowsOnly === void 0) { showFrozenRowsOnly = false; }
+            if (showFrozenColumnsOnly === void 0) { showFrozenColumnsOnly = false; }
+            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 numFrozenColumns = _this.getNumFrozenColumnsClamped();
+            var numFrozenRows = _this.getNumFrozenRowsClamped();
+            var _c = _this.state, selectedRegions = _c.selectedRegions, viewportRect = _c.viewportRect /*, verticalGuides, horizontalGuides*/;
+            // const style = grid.getRect().sizeStyle();
+            var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
+            var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
+            var columnIndexStart = showFrozenColumnsOnly ? 0 : columnIndices.columnIndexStart;
+            var columnIndexEnd = showFrozenColumnsOnly ? numFrozenColumns : columnIndices.columnIndexEnd;
+            var rowIndexStart = showFrozenRowsOnly ? 0 : rowIndices.rowIndexStart;
+            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 }),
+                _this.maybeRenderRegions(_this.styleBodyRegion, quadrantType)));
+        };
         _this.handleFocusMoveLeft = function (e) { return _this.handleFocusMove(e, "left"); };
@@ -113,5 +189,11 @@ _this.handleFocusMoveLeftInternal = function (e) { return _this.handleFocusMoveInternal(e, "left"); };
         _this.handleFocusMoveDownInternal = function (e) { return _this.handleFocusMoveInternal(e, "down"); };
-        _this.styleBodyRegion = function (region) {
+        _this.styleBodyRegion = function (region, quadrantType) {
+            var numFrozenColumns = _this.props.numFrozenColumns;
             var cardinality = regions_2.Regions.getRegionCardinality(region);
             var style = _this.grid.getRegionStyle(region);
+            // ensure we're not showing borders at the boundary of the frozen-columns area
+            var canHideRightBorder = (quadrantType === tableQuadrant_1.QuadrantType.TOP_LEFT || quadrantType === tableQuadrant_1.QuadrantType.LEFT)
+                && numFrozenColumns != null && numFrozenColumns > 0;
+            var fixedHeight = _this.grid.getHeight();
+            var fixedWidth = _this.grid.getWidth();
             switch (cardinality) {
@@ -122,5 +204,10 @@ case regions_2.RegionCardinality.CELLS:
                     style.top = "-1px";
+                    style.height = fixedHeight;
                     return style;
                 case regions_2.RegionCardinality.FULL_ROWS:
                     style.left = "-1px";
+                    style.width = fixedWidth;
+                    if (canHideRightBorder) {
+                        style.right = "-1px";
+                    }
                     return style;
@@ -130,2 +217,7 @@ case regions_2.RegionCardinality.FULL_TABLE:
                     style.top = "-1px";
+                    style.width = fixedWidth;
+                    style.height = fixedHeight;
+                    if (canHideRightBorder) {
+                        style.right = "-1px";
+                    }
                     return style;
@@ -170,7 +262,5 @@ default:
                     style.bottom = "-1px";
-                    style.transform = "translate3d(" + -viewportRect.left + "px, 0, 0)";
                     return style;
                 case regions_2.RegionCardinality.FULL_COLUMNS:
                     style.bottom = "-1px";
-                    style.transform = "translate3d(" + -viewportRect.left + "px, 0, 0)";
                     return style;
@@ -194,7 +284,5 @@ default:
                     style.right = "-1px";
-                    style.transform = "translate3d(0, " + -viewportRect.top + "px, 0)";
                     return style;
                 case regions_2.RegionCardinality.FULL_ROWS:
                     style.right = "-1px";
-                    style.transform = "translate3d(0, " + -viewportRect.top + "px, 0)";
                     return style;
@@ -270,8 +358,2 @@ default:
         };
-        _this.handleColumnResizeGuide = function (verticalGuides) {
-            _this.setState({ verticalGuides: verticalGuides });
-        };
-        _this.handleRowResizeGuide = function (horizontalGuides) {
-            _this.setState({ horizontalGuides: horizontalGuides });
-        };
         _this.clearSelection = function (_selectedRegions) {
@@ -451,6 +533,4 @@ _this.handleSelection([]);
         };
-        _this.handleColumnsReordering = function (oldIndex, newIndex, length) {
-            var guideIndex = utils_1.Utils.reorderedIndexToGuideIndex(oldIndex, newIndex, length);
-            var leftOffset = _this.grid.getCumulativeWidthBefore(guideIndex);
-            _this.setState({ isReordering: true, verticalGuides: [leftOffset] });
+        _this.handleColumnsReordering = function (verticalGuides) {
+            _this.setState({ isReordering: true, verticalGuides: verticalGuides });
         };
@@ -461,6 +541,4 @@ _this.handleColumnsReordered = function (oldIndex, newIndex, length) {
         };
-        _this.handleRowsReordering = function (oldIndex, newIndex, length) {
-            var guideIndex = utils_1.Utils.reorderedIndexToGuideIndex(oldIndex, newIndex, length);
-            var topOffset = _this.grid.getCumulativeHeightBefore(guideIndex);
-            _this.setState({ isReordering: true, horizontalGuides: [topOffset] });
+        _this.handleRowsReordering = function (horizontalGuides) {
+            _this.setState({ isReordering: true, horizontalGuides: horizontalGuides });
         };
@@ -485,7 +563,19 @@ _this.handleRowsReordered = function (oldIndex, newIndex, length) {
         };
+        _this.getMaxFrozenColumnIndex = function () {
+            var numFrozenColumns = _this.getNumFrozenColumnsClamped();
+            return (numFrozenColumns != null) ? numFrozenColumns - 1 : undefined;
+        };
+        _this.getMaxFrozenRowIndex = function () {
+            var numFrozenRows = _this.getNumFrozenRowsClamped();
+            return (numFrozenRows != null) ? numFrozenRows - 1 : undefined;
+        };
+        _this.handleColumnResizeGuide = function (verticalGuides) {
+            _this.setState({ verticalGuides: verticalGuides });
+        };
+        _this.handleRowResizeGuide = function (horizontalGuides) {
+            _this.setState({ horizontalGuides: horizontalGuides });
+        };
         _this.setBodyRef = function (ref) { return _this.bodyElement = ref; };
-        _this.setMenuRef = function (ref) { return _this.menuElement = ref; };
         _this.setRootTableRef = function (ref) { return _this.rootTableElement = ref; };
-        _this.setRowHeaderRef = function (ref) { return _this.rowHeaderElement = ref; };
-        var _a = _this.props, defaultRowHeight = _a.defaultRowHeight, defaultColumnWidth = _a.defaultColumnWidth, numRows = _a.numRows, columnWidths = _a.columnWidths, rowHeights = _a.rowHeights, children = _a.children;
+        var _a = _this.props, children = _a.children, columnWidths = _a.columnWidths, defaultRowHeight = _a.defaultRowHeight, defaultColumnWidth = _a.defaultColumnWidth, numRows = _a.numRows, rowHeights = _a.rowHeights;
         _this.childrenArray = React.Children.toArray(children);
@@ -540,4 +630,5 @@ _this.columnIdToIndex = Table_1.createColumnIdIndex(_this.childrenArray);
         var _this = this;
-        var defaultRowHeight = nextProps.defaultRowHeight, defaultColumnWidth = nextProps.defaultColumnWidth, columnWidths = nextProps.columnWidths, enableFocus = nextProps.enableFocus, focusedCell = nextProps.focusedCell, rowHeights = nextProps.rowHeights, children = nextProps.children, numRows = nextProps.numRows, selectedRegions = nextProps.selectedRegions, selectionModes = nextProps.selectionModes;
+        var children = nextProps.children, columnWidths = nextProps.columnWidths, defaultColumnWidth = nextProps.defaultColumnWidth, defaultRowHeight = nextProps.defaultRowHeight, enableFocus = nextProps.enableFocus, focusedCell = nextProps.focusedCell, numRows = nextProps.numRows, rowHeights = nextProps.rowHeights, selectedRegions = nextProps.selectedRegions, selectionModes = nextProps.selectionModes;
         var newChildArray = React.Children.toArray(children);
+        var numCols = newChildArray.length;
         // Try to maintain widths of columns by looking up the width of the
@@ -554,3 +645,3 @@ // column that had the same `ID` prop. If none is found, use the
         var newColumnWidths = this.state.columnWidths;
-        newColumnWidths = utils_1.Utils.arrayOfLength(newColumnWidths, newChildArray.length, defaultColumnWidth);
+        newColumnWidths = utils_1.Utils.arrayOfLength(newColumnWidths, numCols, defaultColumnWidth);
         newColumnWidths = utils_1.Utils.assignSparseValues(newColumnWidths, previousColumnWidths);
@@ -561,3 +652,2 @@ newColumnWidths = utils_1.Utils.assignSparseValues(newColumnWidths, columnWidths);
         newRowHeights = utils_1.Utils.assignSparseValues(newRowHeights, rowHeights);
-        var numCols = newColumnWidths.length;
         var newSelectedRegions = selectedRegions;
@@ -588,15 +678,15 @@ if (selectedRegions == null) {
         var _a = this.props, className = _a.className, isRowHeaderShown = _a.isRowHeaderShown;
+        var _b = this.state, horizontalGuides = _b.horizontalGuides, verticalGuides = _b.verticalGuides;
         this.validateGrid();
-        var classes = classNames(Classes.TABLE_CONTAINER, (_b = {},
-            _b[Classes.TABLE_REORDERING] = this.state.isReordering,
-            _b), className);
+        var classes = classNames(Classes.TABLE_CONTAINER, (_c = {},
+            _c[Classes.TABLE_REORDERING] = this.state.isReordering,
+            _c[Classes.TABLE_NO_VERTICAL_SCROLL] = this.shouldDisableVerticalScroll(),
+            _c[Classes.TABLE_NO_HORIZONTAL_SCROLL] = this.shouldDisableHorizontalScroll(),
+            _c[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.CELLS),
+            _c), className);
         return (React.createElement("div", { className: classes, ref: this.setRootTableRef, onScroll: this.handleRootScroll },
-            React.createElement("div", { className: Classes.TABLE_TOP_CONTAINER },
-                isRowHeaderShown ? this.renderMenu() : undefined,
-                this.renderColumnHeader()),
-            React.createElement("div", { className: Classes.TABLE_BOTTOM_CONTAINER },
-                isRowHeaderShown ? this.renderRowHeader() : undefined,
-                this.renderBody()),
-            React.createElement("div", { className: classNames(Classes.TABLE_OVERLAY_LAYER, "bp-table-reordering-cursor-overlay") })));
-        var _b;
+            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("div", { className: classNames(Classes.TABLE_OVERLAY_LAYER, "bp-table-reordering-cursor-overlay") }),
+            React.createElement(guides_1.GuideLayer, { className: Classes.TABLE_RESIZE_GUIDES, verticalGuides: verticalGuides, horizontalGuides: horizontalGuides })));
+        var _c;
     };
@@ -638,3 +728,4 @@ Table.prototype.renderHotkeys = function () {
         this.validateGrid();
-        this.locator = new locator_1.Locator(this.rootTableElement, this.bodyElement, this.grid);
+        this.locator = new locator_1.Locator(this.mainQuadrantElement, this.scrollContainerElement);
+        this.updateLocator();
         this.updateViewportRect(this.locator.getViewportRect());
@@ -646,3 +737,2 @@ this.resizeSensorDetach = resizeSensor_1.ResizeSensor.attach(this.rootTableElement, function () {
         });
-        this.syncMenuWidth();
     };
@@ -658,23 +748,31 @@ Table.prototype.componentWillUnmount = function () {
             this.validateGrid();
-            this.locator.setGrid(this.grid);
+            this.updateLocator();
         }
-        this.syncMenuWidth();
         this.maybeScrollTableIntoView();
     };
     Table.prototype.validateProps = function (props) {
-        var WARNING_MESSAGE = "Children of Table must be Columns";
-        React.Children.forEach(props.children, function (child) {
+        var children = props.children, numFrozenColumns = props.numFrozenColumns, numFrozenRows = props.numFrozenRows, numRows = props.numRows;
+        var numColumns = React.Children.count(children);
+        React.Children.forEach(children, function (child) {
             // save as a variable so that union type narrowing works
-            var cType = child.type;
-            if (typeof cType === "string") {
-                console.warn(WARNING_MESSAGE);
+            var childType = child.type;
+            if (typeof childType === "string") {
+                console.warn(Errors.TABLE_NON_COLUMN_CHILDREN_WARNING);
             }
             else {
-                var isColumn = cType.prototype === column_1.Column.prototype || column_1.Column.prototype.isPrototypeOf(cType);
+                var isColumn = childType.prototype === column_1.Column.prototype || column_1.Column.prototype.isPrototypeOf(childType);
                 if (!isColumn) {
-                    console.warn(WARNING_MESSAGE);
+                    console.warn(Errors.TABLE_NON_COLUMN_CHILDREN_WARNING);
                 }
             }
         });
+        if (numFrozenColumns != null && (numFrozenColumns < 0 || numFrozenColumns > numColumns)) {
+            console.warn(Errors.TABLE_NUM_FROZEN_COLUMNS_BOUND_WARNING);
+        }
+        if (numFrozenRows != null && (numFrozenRows < 0 || (numRows != null && numFrozenRows > numRows))) {
+            console.warn(Errors.TABLE_NUM_FROZEN_ROWS_BOUND_WARNING);
+        }
     };
+    // Quadrant refs
+    // =============
     Table.prototype.moveFocusCell = function (primaryAxis, secondaryAxis, isUpOrLeft, newFocusedCell, focusCellRegion) {
@@ -723,15 +821,19 @@ var grid = this.grid;
     };
-    Table.prototype.renderMenu = function () {
-        var classes = classNames(Classes.TABLE_MENU, (_a = {},
-            _a[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_TABLE),
-            _a));
-        return (React.createElement("div", { className: classes, ref: this.setMenuRef, onClick: this.selectAll }, this.maybeRenderRegions(this.styleMenuRegion)));
-        var _a;
+    Table.prototype.shouldDisableVerticalScroll = function () {
+        var fillBodyWithGhostCells = this.props.fillBodyWithGhostCells;
+        var viewportRect = this.state.viewportRect;
+        var rowIndices = this.grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
+        var isViewportUnscrolledVertically = viewportRect != null && viewportRect.top === 0;
+        var areRowHeadersLoading = this.hasLoadingOption(this.props.loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS);
+        var areGhostRowsVisible = fillBodyWithGhostCells && this.grid.isGhostIndex(rowIndices.rowIndexEnd, 0);
+        return areGhostRowsVisible && (isViewportUnscrolledVertically || areRowHeadersLoading);
     };
-    Table.prototype.syncMenuWidth = function () {
-        var _a = this, menuElement = _a.menuElement, rowHeaderElement = _a.rowHeaderElement;
-        if (menuElement != null && rowHeaderElement != null) {
-            var width = rowHeaderElement.getBoundingClientRect().width;
-            menuElement.style.width = width + "px";
-        }
+    Table.prototype.shouldDisableHorizontalScroll = function () {
+        var fillBodyWithGhostCells = this.props.fillBodyWithGhostCells;
+        var viewportRect = this.state.viewportRect;
+        var columnIndices = this.grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
+        var isViewportUnscrolledHorizontally = viewportRect != null && viewportRect.left === 0;
+        var areGhostColumnsVisible = fillBodyWithGhostCells && this.grid.isGhostIndex(0, columnIndices.columnIndexEnd);
+        var areColumnHeadersLoading = this.hasLoadingOption(this.props.loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS);
+        return areGhostColumnsVisible && (isViewportUnscrolledHorizontally || areColumnHeadersLoading);
     };
@@ -754,56 +856,2 @@ Table.prototype.maybeScrollTableIntoView = function () {
     };
-    Table.prototype.renderColumnHeader = function () {
-        var _a = this, grid = _a.grid, locator = _a.locator;
-        var _b = this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
-        var _c = this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isColumnReorderable = _c.isColumnReorderable, isColumnResizable = _c.isColumnResizable, loadingOptions = _c.loadingOptions, maxColumnWidth = _c.maxColumnWidth, minColumnWidth = _c.minColumnWidth, selectedRegionTransform = _c.selectedRegionTransform;
-        var classes = classNames(Classes.TABLE_COLUMN_HEADERS, (_d = {},
-            _d[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_COLUMNS),
-            _d));
-        var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
-        return (React.createElement("div", { className: classes },
-            React.createElement(columnHeader_1.ColumnHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.columnHeaderCellRenderer, grid: grid, isReorderable: isColumnReorderable, isResizable: isColumnResizable, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS), locator: locator, maxColumnWidth: maxColumnWidth, minColumnWidth: minColumnWidth, onColumnWidthChanged: this.handleColumnWidthChanged, onFocus: this.handleFocus, onLayoutLock: this.handleLayoutLock, onReordered: this.handleColumnsReordered, onReordering: this.handleColumnsReordering, onResizeGuide: this.handleColumnResizeGuide, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, columnIndices), this.props.children),
-            this.maybeRenderRegions(this.styleColumnHeaderRegion)));
-        var _d;
-    };
-    Table.prototype.renderRowHeader = function () {
-        var _a = this, grid = _a.grid, locator = _a.locator;
-        var _b = this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
-        var _c = this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isRowReorderable = _c.isRowReorderable, isRowResizable = _c.isRowResizable, loadingOptions = _c.loadingOptions, maxRowHeight = _c.maxRowHeight, minRowHeight = _c.minRowHeight, renderRowHeader = _c.renderRowHeader, selectedRegionTransform = _c.selectedRegionTransform;
-        var classes = classNames(Classes.TABLE_ROW_HEADERS, (_d = {},
-            _d[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_ROWS),
-            _d));
-        var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
-        return (React.createElement("div", { className: classes, ref: this.setRowHeaderRef },
-            React.createElement(rowHeader_1.RowHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, grid: grid, locator: locator, isReorderable: isRowReorderable, isResizable: isRowResizable, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onFocus: this.handleFocus, onLayoutLock: this.handleLayoutLock, onResizeGuide: this.handleRowResizeGuide, onReordered: this.handleRowsReordered, onReordering: this.handleRowsReordering, onRowHeightChanged: this.handleRowHeightChanged, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices)),
-            this.maybeRenderRegions(this.styleRowHeaderRegion)));
-        var _d;
-    };
-    Table.prototype.renderBody = function () {
-        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 _c = this.state, selectedRegions = _c.selectedRegions, viewportRect = _c.viewportRect, verticalGuides = _c.verticalGuides, horizontalGuides = _c.horizontalGuides;
-        var style = grid.getRect().sizeStyle();
-        var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
-        var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
-        var noVerticalScroll = fillBodyWithGhostCells &&
-            grid.isGhostIndex(rowIndices.rowIndexEnd, 0) &&
-            viewportRect != null && viewportRect.top === 0 ||
-            this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS);
-        var noHorizontalScroll = fillBodyWithGhostCells &&
-            grid.isGhostIndex(0, columnIndices.columnIndexEnd) &&
-            viewportRect != null && viewportRect.left === 0 ||
-            this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS);
-        // disable scroll for ghost cells
-        var classes = classNames(Classes.TABLE_BODY, (_d = {},
-            _d[Classes.TABLE_NO_HORIZONTAL_SCROLL] = noHorizontalScroll,
-            _d[Classes.TABLE_NO_VERTICAL_SCROLL] = noVerticalScroll,
-            _d[Classes.TABLE_SELECTION_ENABLED] = this.isSelectionModeEnabled(regions_2.RegionCardinality.CELLS),
-            _d));
-        return (React.createElement("div", { className: classes, onScroll: this.handleBodyScroll, ref: this.setBodyRef },
-            React.createElement("div", { className: Classes.TABLE_BODY_SCROLL_CLIENT, style: style },
-                React.createElement(tableBody_1.TableBody, tslib_1.__assign({ 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 }, rowIndices, columnIndices)),
-                this.maybeRenderRegions(this.styleBodyRegion),
-                React.createElement(guides_1.GuideLayer, { className: Classes.TABLE_RESIZE_GUIDES, verticalGuides: verticalGuides, horizontalGuides: horizontalGuides }))));
-        var _d;
-    };
     Table.prototype.isGuidesShowing = function () {
@@ -845,3 +893,3 @@ return this.state.verticalGuides != null || this.state.horizontalGuides != null;
      */
-    Table.prototype.maybeRenderRegions = function (getRegionStyle) {
+    Table.prototype.maybeRenderRegions = function (getRegionStyle, quadrantType) {
         if (this.isGuidesShowing() && !this.state.isReordering) {
@@ -853,3 +901,3 @@ // we want to show guides *and* the selection styles when reordering rows or columns
         return regionGroups.map(function (regionGroup, index) {
-            var regionStyles = regionGroup.regions.map(getRegionStyle);
+            var regionStyles = regionGroup.regions.map(function (region) { return getRegionStyle(region, quadrantType); });
             return (React.createElement(regions_1.RegionLayer, { className: classNames(regionGroup.className), key: index, regions: regionGroup.regions, regionStyles: regionStyles }));
@@ -909,2 +957,11 @@ });
     };
+    Table.prototype.updateLocator = function () {
+        var rowHeaderWidth = this.rowHeaderElement == null ? 0 : this.rowHeaderElement.getBoundingClientRect().width;
+        var columnHeaderHeight = this.columnHeaderElement == null ? 0 : this.columnHeaderElement.getBoundingClientRect().height;
+        this.locator.setGrid(this.grid)
+            .setNumFrozenRows(this.getNumFrozenRowsClamped())
+            .setNumFrozenColumns(this.getNumFrozenColumnsClamped())
+            .setRowHeaderWidth(rowHeaderWidth)
+            .setColumnHeaderHeight(columnHeaderHeight);
+    };
     Table.prototype.invokeOnVisibleCellsChangeCallback = function (viewportRect) {
@@ -915,2 +972,13 @@ var columnIndices = this.grid.getColumnIndicesInRect(viewportRect);
     };
+    Table.prototype.getNumFrozenColumnsClamped = function (props) {
+        if (props === void 0) { props = this.props; }
+        var numFrozenColumns = props.numFrozenColumns;
+        var numColumns = React.Children.count(props.children);
+        return utils_1.Utils.clamp(numFrozenColumns, 0, numColumns);
+    };
+    Table.prototype.getNumFrozenRowsClamped = function (props) {
+        if (props === void 0) { props = this.props; }
+        var numFrozenRows = props.numFrozenRows, numRows = props.numRows;
+        return utils_1.Utils.clamp(numFrozenRows, 0, numRows);
+    };
     return Table;
@@ -917,0 +985,0 @@ }(core_1.AbstractComponent));

dist/tableBody.d.ts

@@ -36,2 +36,10 @@ /// <reference types="react" />
     /**
+     * The number of columns to freeze to the left side of the table, counting from the leftmost column.
+     */
+    numFrozenColumns?: number;
+    /**
+     * The number of rows to freeze to the top of the table, counting from the topmost row.
+     */
+    numFrozenRows?: number;
+    /**
      * The `Rect` bounds of the visible viewport with respect to its parent
@@ -38,0 +46,0 @@ * scrollable pane.

dist/tableBody.js

@@ -124,3 +124,3 @@ /**
         var _this = this;
-        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, grid = _a.grid, onFocus = _a.onFocus, onSelection = _a.onSelection, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+        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;
         // render cells in batches
@@ -138,3 +138,7 @@ this.batcher.startNewBatch();
         var cells = this.batcher.getList();
-        var style = grid.getRect().sizeStyle();
+        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 },
@@ -141,0 +145,0 @@ React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: classNames(Classes.TABLE_BODY_VIRTUAL_CLIENT, Classes.TABLE_CELL_CLIENT), renderContextMenu: this.renderContextMenu, style: style }, cells)));

examples/index.ts

@@ -13,4 +13,5 @@ /**
 export * from "./tableFormatsExample";
+export * from "./tableFreezingExample";
 export * from "./tableLoadingExample";
 export * from "./tableReorderableExample";
 export * from "./tableSortableExample";

package.json

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

src/common/classes.ts

@@ -47,2 +47,9 @@ /*
 export const TABLE_POPOVER_WHITESPACE_PRE = "bp-table-popover-whitespace-pre";
+export const TABLE_QUADRANT = "bp-table-quadrant";
+export const TABLE_QUADRANT_BODY_CONTAINER = "bp-table-quadrant-body-container";
+export const TABLE_QUADRANT_LEFT = "bp-table-quadrant-left";
+export const TABLE_QUADRANT_MAIN = "bp-table-quadrant-main";
+export const TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container";
+export const TABLE_QUADRANT_TOP = "bp-table-quadrant-top";
+export const TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left";
 export const TABLE_REGION = "bp-table-region";
@@ -62,2 +69,3 @@ export const TABLE_REORDER_HANDLE = "bp-table-reorder-handle";
 export const TABLE_ROW_HEADERS = "bp-table-row-headers";
+export const TABLE_ROW_HEADERS_CELLS_CONTAINER = "bp-table-row-headers-cells-container";
 export const TABLE_ROW_NAME = "bp-table-row-name";
@@ -64,0 +72,0 @@ export const TABLE_ROW_NAME_TEXT = "bp-table-row-name-text";

src/common/errors.ts

@@ -16,1 +16,13 @@ /*
     `${deprec} <RowHeaderCell> menu is deprecated. Use renderMenu instead.`;
+
+export const QUADRANT_ON_SCROLL_UNNECESSARILY_DEFINED =
+    `${ns} <TableQuadrant> onScroll need not be defined for any quadrant aside from the MAIN quadrant.`;
+
+export const TABLE_NON_COLUMN_CHILDREN_WARNING =
+    `${ns} <Table> Children of Table must be Columns"`;
+
+export const TABLE_NUM_FROZEN_COLUMNS_BOUND_WARNING =
+    `${ns} <Table> numFrozenColumns must be in [0, number of columns]`;
+
+export const TABLE_NUM_FROZEN_ROWS_BOUND_WARNING =
+    `${ns} <Table> numFrozenRows must be in [0, numRows]`;

src/common/utils.ts

@@ -101,2 +101,10 @@ /**
     /**
+     * Returns traditional spreadsheet-style cell names
+     * e.g. (A1, B2, ..., Z44, AA1) with rows 1-indexed.
+     */
+    toBase26CellName(rowIndex: number, columnIndex: number) {
+        return `${Utils.toBase26Alpha(columnIndex)}${rowIndex + 1}`;
+    },
+
+    /**
      * Performs the binary search algorithm to find the index of the `value`
@@ -103,0 +111,0 @@ * parameter in a sorted list of numbers. If `value` is not in the list, the

src/docs.md

@@ -30,3 +30,3 @@ ---
 
-@## Making a table
+@## Basic usage
 
@@ -64,4 +64,6 @@ To create a table, you must define the rows and columns. Add children to the `Table` to create columns,
 
-@## Sortable content
+@## Features
 
+@### Sorting
+
 Because the table is **data-agnostic**, you can display complex data in the
@@ -80,3 +82,3 @@ table and perform arbitrary operations on it.
 
-@## Editable content
+@### Editing
 
@@ -98,3 +100,3 @@ To make your table editable, use the `EditableCell` and
 
-@## Reorderable content
+@### Reordering
 
@@ -119,3 +121,3 @@ The table supports column and row reordering via the `isColumnReorderable` and `isRowReorderable`
 
-@## Loading states
+@### Loading states
 
@@ -131,3 +133,3 @@ When fetching or updating data, it may be desirable to show a loading state. The table components
 
-@### Table loading states
+@#### Table loading states
 
@@ -139,3 +141,3 @@ `Table` exposes a `loadingOptions` prop that allows you to control the loading state behavior of all
 
-@### Column loading states
+@#### Column loading states
 
@@ -147,3 +149,3 @@ `Column` exposes a `loadingOptions` prop that allows you to control the loading state behavior of an
 
-@### Cells
+@#### Cells
 
@@ -156,3 +158,3 @@ `Cell`, `EditableCell`, `ColumnHeaderCell`, and `RowHeaderCell` expose a `loading` prop for granular
 
-@## Formatted content
+@### Formatting
 
@@ -169,2 +171,13 @@ To display long strings or native JavaScript objects, we provide
 
+@### Freezing
+
+The table supports column and row freezing via the `numFrozenColumns` and `numFrozenRows` props,
+respectively. Passing `numFrozenColumns={n}` will freeze the `n` leftmost columns in place, while
+all other columns remain scrollable. Likewise, passing `numFrozenRows={m}` will freeze the `m`
+topmost rows in place, while all other rows remain scrollable.
+
+Here's an example of a table with 1 frozen columns and 2 frozen rows:
+
+@reactExample TableFreezingExample
+
 @## JavaScript API
@@ -171,0 +184,0 @@

src/locator.ts

@@ -52,13 +52,48 @@ /**
 
+    private grid: Grid;
+
+    private rowHeaderWidth = 0;
+    private columnHeaderHeight = 0;
+
+    private numFrozenRows = 0;
+    private numFrozenColumns = 0;
+
     public constructor(
         private tableElement: HTMLElement,
         private bodyElement: HTMLElement,
-        private grid: Grid,
     ) {
+        // empty constructor
     }
 
+    // Setters
+    // =======
+
     public setGrid(grid: Grid) {
         this.grid = grid;
+        return this;
     }
 
+    public setNumFrozenRows(numFrozenRows: number) {
+        this.numFrozenRows = numFrozenRows;
+        return this;
+    }
+
+    public setNumFrozenColumns(numFrozenColumns: number) {
+        this.numFrozenColumns = numFrozenColumns;
+        return this;
+    }
+
+    public setColumnHeaderHeight(columnHeaderHeight: number) {
+        this.columnHeaderHeight = columnHeaderHeight;
+        return this;
+    }
+
+    public setRowHeaderWidth(rowHeaderWidth: number) {
+        this.rowHeaderWidth = rowHeaderWidth;
+        return this;
+    }
+
+    // Getters
+    // =======
+
     public getViewportRect() {
@@ -112,2 +147,5 @@ return new Rect(
 
+    // Converters
+    // ==========
+
     public convertPointToColumn(clientX: number, useMidpoint?: boolean): number {
@@ -118,6 +156,6 @@ const tableRect = this.getTableRect();
         }
-        const tableX = this.toTableRelativeX(clientX);
+        const gridX = this.toGridX(clientX);
         const limit = useMidpoint ? this.grid.numCols : this.grid.numCols - 1;
         const lookupFn = useMidpoint ? this.convertCellMidpointToClientX : this.convertCellIndexToClientX;
-        return Utils.binarySearch(tableX, limit, lookupFn);
+        return Utils.binarySearch(gridX, limit, lookupFn);
     }
@@ -130,16 +168,19 @@
         }
-        const tableY = this.toTableRelativeY(clientY);
+        const gridY = this.toGridY(clientY);
         const limit = useMidpoint ? this.grid.numRows : this.grid.numRows - 1;
         const lookupFn = useMidpoint ? this.convertCellMidpointToClientY : this.convertCellIndexToClientY;
-        return Utils.binarySearch(tableY, limit, lookupFn);
+        return Utils.binarySearch(gridY, limit, lookupFn);
     }
 
     public convertPointToCell(clientX: number, clientY: number) {
-        const tableX = this.toTableRelativeX(clientX);
-        const tableY = this.toTableRelativeY(clientY);
-        const col = Utils.binarySearch(tableX, this.grid.numCols - 1, this.convertCellIndexToClientX);
-        const row = Utils.binarySearch(tableY, this.grid.numRows - 1, this.convertCellIndexToClientY);
+        const gridX = this.toGridX(clientX);
+        const gridY = this.toGridY(clientY);
+        const col = Utils.binarySearch(gridX, this.grid.numCols - 1, this.convertCellIndexToClientX);
+        const row = Utils.binarySearch(gridY, this.grid.numRows - 1, this.convertCellIndexToClientY);
         return {col, row};
     }
 
+    // Private helpers
+    // ===============
+
     private getTableRect() {
@@ -169,9 +210,32 @@ return Rect.wrap(this.tableElement.getBoundingClientRect());
 
-    private toTableRelativeX = (clientX: number) => {
-        return this.bodyElement.scrollLeft + clientX - this.bodyElement.getBoundingClientRect().left;
+    private toGridX = (clientX: number) => {
+        const tableOffsetFromPageLeft = this.tableElement.getBoundingClientRect().left;
+        const cursorOffsetFromTableLeft = clientX - tableOffsetFromPageLeft;
+        const cursorOffsetFromGridLeft = cursorOffsetFromTableLeft - this.rowHeaderWidth;
+        const scrollOffsetFromTableLeft = this.bodyElement.scrollLeft;
+
+        const isCursorWithinFrozenColumns = this.numFrozenColumns != null
+            && this.numFrozenColumns > 0
+            && cursorOffsetFromGridLeft <= this.grid.getCumulativeWidthBefore(this.numFrozenColumns);
+
+        // the frozen-column region doesn't scroll, so ignore the scroll distance in that case
+        return isCursorWithinFrozenColumns
+            ? cursorOffsetFromGridLeft
+            : cursorOffsetFromGridLeft + scrollOffsetFromTableLeft;
     }
 
-    private toTableRelativeY = (clientY: number) => {
-        return this.bodyElement.scrollTop + clientY - this.bodyElement.getBoundingClientRect().top;
+    private toGridY = (clientY: number) => {
+        const tableOffsetFromPageTop = this.tableElement.getBoundingClientRect().top;
+        const cursorOffsetFromTableTop = clientY - tableOffsetFromPageTop;
+        const cursorOffsetFromGridTop = cursorOffsetFromTableTop - this.columnHeaderHeight;
+        const scrollOffsetFromTableTop = this.bodyElement.scrollTop;
+
+        const isCursorWithinFrozenRows = this.numFrozenRows != null
+            && this.numFrozenRows > 0
+            && cursorOffsetFromGridTop <= this.grid.getCumulativeHeightBefore(this.numFrozenRows);
+
+        return isCursorWithinFrozenRows
+            ? cursorOffsetFromGridTop
+            : cursorOffsetFromGridTop + scrollOffsetFromTableTop;
     }
 }

No alert changes

Improved metrics

Total package byte prevSize

2461148

increased by12.96%

Number of package files

213

increased by5.45%

Lines of code

26245

increased by10.54%

No dependency changes