@blueprintjs/table - npm Package Compare versions

Comparing version 1.22.1 to 1.23.0

dist/common/classes.d.ts

@@ -13,9 +13,11 @@ export declare const TABLE_BODY = "bp-table-body";
 export declare const TABLE_COLUMN_HEADERS = "bp-table-column-headers";
+export declare const TABLE_COLUMN_HEADER_CELL = "bp-table-column-header-cell";
 export declare const TABLE_COLUMN_NAME = "bp-table-column-name";
 export declare const TABLE_COLUMN_NAME_TEXT = "bp-table-column-name-text";
 export declare const TABLE_CONTAINER = "bp-table-container";
-export declare const TABLE_DRAGGABLE = "bp-table-draggable";
 export declare const TABLE_DRAGGING = "bp-table-dragging";
 export declare const TABLE_EDITABLE_NAME = "bp-table-editable-name";
 export declare const TABLE_FOCUS_REGION = "bp-table-focus-region";
+export declare const TABLE_HAS_INTERACTION_BAR = "bp-table-has-interaction-bar";
+export declare const TABLE_HAS_REORDER_HANDLE = "bp-table-has-reorder-handle";
 export declare const TABLE_HEADER = "bp-table-header";
@@ -22,0 +24,0 @@ export declare const TABLE_HEADER_ACTIVE = "bp-table-header-active";

dist/common/classes.js

@@ -21,9 +21,11 @@ /*
 exports.TABLE_COLUMN_HEADERS = "bp-table-column-headers";
+exports.TABLE_COLUMN_HEADER_CELL = "bp-table-column-header-cell";
 exports.TABLE_COLUMN_NAME = "bp-table-column-name";
 exports.TABLE_COLUMN_NAME_TEXT = "bp-table-column-name-text";
 exports.TABLE_CONTAINER = "bp-table-container";
-exports.TABLE_DRAGGABLE = "bp-table-draggable";
 exports.TABLE_DRAGGING = "bp-table-dragging";
 exports.TABLE_EDITABLE_NAME = "bp-table-editable-name";
 exports.TABLE_FOCUS_REGION = "bp-table-focus-region";
+exports.TABLE_HAS_INTERACTION_BAR = "bp-table-has-interaction-bar";
+exports.TABLE_HAS_REORDER_HANDLE = "bp-table-has-reorder-handle";
 exports.TABLE_HEADER = "bp-table-header";
@@ -30,0 +32,0 @@ exports.TABLE_HEADER_ACTIVE = "bp-table-header-active";

dist/headers/columnHeader.js

@@ -34,5 +34,3 @@ /**
             };
-            var classes = classNames(Classes.TABLE_THEAD, Classes.TABLE_COLUMN_HEADER_TR, (_b = {},
-                _b[Classes.TABLE_DRAGGABLE] = (_this.props.onSelection != null),
-                _b));
+            var classes = classNames(Classes.TABLE_THEAD, Classes.TABLE_COLUMN_HEADER_TR);
             // add a wrapper set to the full-table width to ensure container styles stretch from the first
@@ -42,3 +40,2 @@ // cell all the way to the last
                 React.createElement("div", { style: style, className: classes }, cells)));
-            var _b;
         };
@@ -45,0 +42,0 @@ _this.convertPointToColumn = function (clientXOrY, useMidpoint) {

dist/headers/columnHeaderCell.js

@@ -57,6 +57,11 @@ /**
         spreadableProps = tslib_1.__rest(_a, ["isColumnReorderable", "isColumnSelected", "menuIconName", "name", "renderName", "useInteractionBar"]);
-        return (React.createElement(headerCell_1.HeaderCell, tslib_1.__assign({ isReorderable: this.props.isColumnReorderable, isSelected: this.props.isColumnSelected }, spreadableProps),
+        var classes = classNames(spreadableProps.className, Classes.TABLE_COLUMN_HEADER_CELL, (_b = {},
+            _b[Classes.TABLE_HAS_INTERACTION_BAR] = useInteractionBar,
+            _b[Classes.TABLE_HAS_REORDER_HANDLE] = this.props.reorderHandle != null,
+            _b));
+        return (React.createElement(headerCell_1.HeaderCell, tslib_1.__assign({ isReorderable: this.props.isColumnReorderable, isSelected: this.props.isColumnSelected }, spreadableProps, { className: classes }),
             this.renderName(),
             this.maybeRenderContent(),
             this.props.loading ? undefined : this.props.resizeHandle));
+        var _b;
     };
@@ -72,3 +77,3 @@ ColumnHeaderCell.prototype.validateProps = function (nextProps) {
     ColumnHeaderCell.prototype.renderName = function () {
-        var _a = this.props, index = _a.index, loading = _a.loading, name = _a.name, renderName = _a.renderName, useInteractionBar = _a.useInteractionBar;
+        var _a = this.props, index = _a.index, loading = _a.loading, name = _a.name, renderName = _a.renderName, reorderHandle = _a.reorderHandle, useInteractionBar = _a.useInteractionBar;
         var dropdownMenu = this.maybeRenderDropdownMenu();
@@ -80,3 +85,3 @@ var defaultName = React.createElement("div", { className: Classes.TABLE_TRUNCATED_TEXT }, name);
                 React.createElement("div", { className: Classes.TABLE_INTERACTION_BAR },
-                    this.props.reorderHandle,
+                    reorderHandle,
                     dropdownMenu),
@@ -88,2 +93,3 @@ React.createElement(HorizontalCellDivider, null),
             return (React.createElement("div", { className: Classes.TABLE_COLUMN_NAME, title: name },
+                reorderHandle,
                 dropdownMenu,
@@ -90,0 +96,0 @@ React.createElement("div", { className: Classes.TABLE_COLUMN_NAME_TEXT }, nameComponent)));

dist/headers/header.d.ts

@@ -182,4 +182,4 @@ /// <reference types="react" />
     private renderCell;
-    private isReorderHandleEnabled(cell);
-    private maybeRenderReorderHandle(cell, index);
+    private isReorderHandleEnabled();
+    private maybeRenderReorderHandle(index);
     private isColumnHeader();
@@ -186,0 +186,0 @@ private wrapInDragReorderable(index, children, disabled?);

dist/headers/header.js

@@ -69,9 +69,8 @@ /**
         _this.renderCell = function (index, extremaClasses) {
-            var _a = _this.props, getIndexClass = _a.getIndexClass, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions;
+            var _a = _this.props, getIndexClass = _a.getIndexClass, selectedRegions = _a.selectedRegions;
             var cell = _this.props.renderHeaderCell(index);
             var isLoading = cell.props.loading != null ? cell.props.loading : _this.props.loading;
             var isSelected = _this.props.isCellSelected(index);
-            var isEntireCellTargetReorderable = _this.isEntireCellTargetReorderable(cell, isSelected);
+            var isEntireCellTargetReorderable = _this.isEntireCellTargetReorderable(isSelected);
             var className = classNames(extremaClasses, (_b = {},
-                _b[Classes.TABLE_DRAGGABLE] = onSelection != null,
                 _b[Classes.TABLE_HEADER_REORDERABLE] = isEntireCellTargetReorderable,
@@ -86,3 +85,3 @@ _b), _this.props.getCellIndexClass(index), cell.props.className);
                 _c.loading = isLoading,
-                _c.reorderHandle = _this.maybeRenderReorderHandle(cell, index),
+                _c.reorderHandle = _this.maybeRenderReorderHandle(index),
                 _c);
@@ -92,5 +91,5 @@ var modifiedHandleSizeChanged = function (size) { return _this.props.handleSizeChanged(index, size); };
             var modifiedHandleResizeHandleDoubleClick = function () { return _this.props.handleResizeDoubleClick(index); };
-            var baseChildren = (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: _this.props.allowMultipleSelection, disabled: isEntireCellTargetReorderable, ignoredSelectors: ["." + Classes.TABLE_REORDER_HANDLE], key: getIndexClass(index), locateClick: _this.locateClick, locateDrag: _this.locateDragForSelection, onFocus: _this.props.onFocus, onSelection: _this.handleDragSelectableSelection, onSelectionEnd: _this.handleDragSelectableSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: _this.props.selectedRegionTransform },
+            var baseChildren = (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: _this.props.allowMultipleSelection, disabled: isEntireCellTargetReorderable, ignoredSelectors: ["." + Classes.TABLE_REORDER_HANDLE_TARGET], key: getIndexClass(index), locateClick: _this.locateClick, locateDrag: _this.locateDragForSelection, onFocus: _this.props.onFocus, onSelection: _this.handleDragSelectableSelection, onSelectionEnd: _this.handleDragSelectableSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: _this.props.selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: _this.props.isResizable, maxSize: _this.props.maxSize, minSize: _this.props.minSize, onDoubleClick: modifiedHandleResizeHandleDoubleClick, onLayoutLock: _this.props.onLayoutLock, onResizeEnd: modifiedHandleResizeEnd, onSizeChanged: modifiedHandleSizeChanged, orientation: _this.props.resizeOrientation, size: _this.props.getCellSize(index) }, React.cloneElement(cell, cellProps))));
-            return _this.isReorderHandleEnabled(cell)
+            return _this.isReorderHandleEnabled()
                 ? baseChildren // reordering will be handled by interacting with the reorder handle
@@ -108,3 +107,3 @@ : _this.wrapInDragReorderable(index, baseChildren, !isEntireCellTargetReorderable);
         };
-        _this.isEntireCellTargetReorderable = function (cell, isSelected) {
+        _this.isEntireCellTargetReorderable = function (isSelected) {
             var selectedRegions = _this.props.selectedRegions;
@@ -119,3 +118,3 @@ // although reordering may be generally enabled for this row/column (via props.isReorderable), the
                 && selectedRegions.length === 1
-                && !_this.isReorderHandleEnabled(cell);
+                && !_this.isReorderHandleEnabled();
         };
@@ -153,8 +152,8 @@ return _this;
     };
-    Header.prototype.isReorderHandleEnabled = function (cell) {
+    Header.prototype.isReorderHandleEnabled = function () {
         // the reorder handle can only appear in the column interaction bar
-        return this.isColumnHeader() && cell.props.useInteractionBar && this.props.isReorderable;
+        return this.isColumnHeader() && this.props.isReorderable;
     };
-    Header.prototype.maybeRenderReorderHandle = function (cell, index) {
-        return !this.isReorderHandleEnabled(cell)
+    Header.prototype.maybeRenderReorderHandle = function (index) {
+        return !this.isReorderHandleEnabled()
             ? undefined
@@ -161,0 +160,0 @@ : this.wrapInDragReorderable(index, React.createElement("div", { className: Classes.TABLE_REORDER_HANDLE_TARGET },

dist/interactions/reorderable.js

@@ -71,4 +71,5 @@ /**
             _this.props.onReordered(oldIndex, reorderedIndex, length);
+            // the newly reordered region becomes the only selection
             var newRegion = _this.props.toRegion(reorderedIndex, reorderedIndex + length - 1);
-            _this.props.onSelection(regions_1.Regions.update(_this.props.selectedRegions, newRegion));
+            _this.props.onSelection(regions_1.Regions.update([], newRegion));
             // resetting is not strictly required, but it's cleaner
@@ -75,0 +76,0 @@ _this.selectedRegionStartIndex = undefined;

package.json

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

src/common/classes.ts

@@ -20,9 +20,11 @@ /*
 export const TABLE_COLUMN_HEADERS = "bp-table-column-headers";
+export const TABLE_COLUMN_HEADER_CELL = "bp-table-column-header-cell";
 export const TABLE_COLUMN_NAME = "bp-table-column-name";
 export const TABLE_COLUMN_NAME_TEXT = "bp-table-column-name-text";
 export const TABLE_CONTAINER = "bp-table-container";
-export const TABLE_DRAGGABLE = "bp-table-draggable";
 export const TABLE_DRAGGING = "bp-table-dragging";
 export const TABLE_EDITABLE_NAME = "bp-table-editable-name";
 export const TABLE_FOCUS_REGION = "bp-table-focus-region";
+export const TABLE_HAS_INTERACTION_BAR = "bp-table-has-interaction-bar";
+export const TABLE_HAS_REORDER_HANDLE = "bp-table-has-reorder-handle";
 export const TABLE_HEADER = "bp-table-header";
@@ -29,0 +31,0 @@ export const TABLE_HEADER_ACTIVE = "bp-table-header-active";

src/docs.md

@@ -99,18 +99,48 @@ ---
 
-The table supports column and row reordering via the `isColumnReorderable` and `isRowReorderable`
-props, respectively. The table also requires the `FULL_COLUMNS` selection mode to be enabled for
-column reordering and the `FULL_ROWS` selection mode to be enabled for row reordering; these can be
-set via the `selectionModes` prop.
+The table supports drag-reordering of columns and rows via the `isColumnReorderable` and `isRowReorderable`
+props, respectively.
 
-To reorder a single row or column, first click its header cell to select it, then click and drag the
-header cell again to move it elsewhere. Likewise, to reorder multiple consecutive rows or columns at
-once, click and drag across multiple header cells to select the range, then click and drag anywhere in
-the selected header cells to move them as a group.
+#### Reordering columns
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h5>Column reordering with interaction bar enabled</h5>
-    When the interaction bar is enabled, the table will show handle icons in the interaction bar that
-    you can drag directly without having to make a selection first.
-</div>
+When `isColumnReorderable={true}`, a drag handle will appear in the column header (or in the
+interaction bar, if `useInteractionBar={true}`).
 
+##### Single column
+
+To reorder a single column, click and drag the desired column's drag handle to the left or right,
+then release. This will work whether or not column selection is enabled.
+
+##### Multiple columns
+
+To allow reordering of multiple contiguous columns at once, first set the following additional
+props:
+
+- `allowMultipleSelection={true}`
+- `selectionModes={[RegionCardinality.FULL_COLUMNS, ...]}`
+
+Then drag-select the desired columns into a single selection, and grab any selected column's drag
+handle to reorder the entire selected block.
+
+##### Edge cases
+
+With disjoint column selections (specified via <kbd>Cmd</kbd> or <kbd>Ctrl</kbd> + click),
+only the selection containing the target drag handle will be reordered. All other
+selections will be cleared afterward.
+
+Reordering a column contained in two overlapping selections will currently result in undefined
+behavior.
+
+#### Reordering rows
+
+Rows do not have a drag handle, so they must be selected before reordering. To reorder a selection
+of one or more rows, simply click and drag anywhere in a selected row header, then release. Note
+that the following props must be set for row reordering to work:
+
+- `isRowHeaderShown={true}`
+- `isRowReorderable={true}`
+- `selectionModes={[RegionCardinality.FULL_ROWS, ...]}`
+- `allowMultipleSelection={true}` (to optionally enable multi-row reordering)
+
+#### Example
+
 @reactExample TableReorderableExample
@@ -117,0 +147,0 @@

No alert changes

Improved metrics

Total package byte prevSize

2557432

increased by0.14%

Lines of code

26290

increased by0.1%

No dependency changes