@itwin/itwinui-react 1.46.0 → 1.47.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.47.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.46.0...v1.47.0) (2022-10-03)
+
+### What's new
+
+* **Table:** Column resize modes ([#835](https://www.github.com/iTwin/iTwinUI-react/issues/835)) ([771a517](https://www.github.com/iTwin/iTwinUI-react/commit/771a517aa2031d5936521764a09613b6433ff283))
+
+
+### Fixes
+
+* **Table:** Fixed when fast resizing caused Table to throw an error ([#848](https://www.github.com/iTwin/iTwinUI-react/issues/848)) ([058ad3a](https://www.github.com/iTwin/iTwinUI-react/commit/058ad3a7c1bb4a3198a4dde1105cca47a2ef2998))
+
 ## [1.46.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.45.0...v1.46.0) (2022-09-20)
 
 ### What's new

package/cjs/core/Table/Table.js

@@ -104,9 +104,9 @@ var flattenColumns = function (columns) {
  */
 var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.columnResizeMode, columnResizeMode = _m === void 0 ? 'fit' : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
     (0, utils_1.useTheme)();
-    var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
+    var ownerDocument = react_1.default.useRef();
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -125,24 +125,26 @@ var Table = function (props) {
     }, [columns]);
     var disableUserSelect = react_1.default.useCallback(function (e) {
         if (e.key === 'Shift') {
-            ownerDocument &&
-                (ownerDocument.documentElement.style.userSelect = 'none');
+            ownerDocument.current &&
+                (ownerDocument.current.documentElement.style.userSelect = 'none');
         }
-    }, [ownerDocument]);
+    }, []);
     var enableUserSelect = react_1.default.useCallback(function (e) {
         if (e.key === 'Shift') {
-            ownerDocument && (ownerDocument.documentElement.style.userSelect = '');
+            ownerDocument.current &&
+                (ownerDocument.current.documentElement.style.userSelect = '');
         }
-    }, [ownerDocument]);
+    }, []);
     react_1.default.useEffect(function () {
         if (!isSelectable || selectionMode !== 'multi') {
             return;
         }
-        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.addEventListener('keydown', disableUserSelect);
-        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.addEventListener('keyup', enableUserSelect);
+        var ownerDoc = ownerDocument.current;
+        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
+        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
         return function () {
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.removeEventListener('keydown', disableUserSelect);
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.removeEventListener('keyup', enableUserSelect);
+            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
+            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
         };
     }, [
         isSelectable,
@@ -212,7 +214,7 @@ var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
+    var instance = (0, react_table_1.useTable)(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState), columnResizeMode: columnResizeMode }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useGlobalFilter, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, selectionMode, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders, visibleColumns = instance.visibleColumns, setGlobalFilter = instance.setGlobalFilter;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -290,6 +292,7 @@ var Table = function (props) {
     var previousTableWidth = react_1.default.useRef(0);
     var onTableResize = react_1.default.useCallback(function (_a) {
         var width = _a.width;
+        instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
         }
@@ -305,7 +308,7 @@ var Table = function (props) {
             return;
         }
         dispatch({ type: exports.tableResizeStartAction });
-    }, [dispatch, state.columnResizing.columnWidths, flatHeaders]);
+    }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
     var resizeRef = (0, utils_1.useResizeObserver)(onTableResize)[0];
     // Flexbox handles columns resize so we take new column widths before browser repaints.
     react_1.default.useLayoutEffect(function () {
@@ -321,12 +324,10 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
-    // Using `useState` to rerender rows when table body ref is available
-    var _s = react_1.default.useState(null), bodyRefState = _s[0], setBodyRefState = _s[1];
     var getPreparedRow = react_1.default.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRefState, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
+        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
     }, [
         page,
         prepareRow,
@@ -339,7 +340,6 @@ var Table = function (props) {
         hasAnySubRows,
         instance,
         expanderCell,
-        bodyRefState,
         enableVirtualization,
         tableRowRef,
     ]);
@@ -368,9 +368,10 @@ var Table = function (props) {
         // Call only on init
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var isHeaderDirectClick = react_1.default.useRef(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
-                setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
+                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
@@ -389,7 +390,8 @@ var Table = function (props) {
                         className: 'iui-row',
                     });
                     return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                        var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', {
+                        var _a = column.getSortByToggleProps(), onClick = _a.onClick, restSortProps = __rest(_a, ["onClick"]);
+                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: (0, classnames_1.default)('iui-cell', {
                                 'iui-actionable': column.canSort,
                                 'iui-sorted': column.isSorted,
                                 'iui-cell-sticky': !!column.sticky,
@@ -399,16 +401,25 @@ var Table = function (props) {
                                     columnRefs.current[column.id] = el;
                                     column.resizeWidth = el.getBoundingClientRect().width;
                                 }
+                            }, onMouseDown: function () {
+                                isHeaderDirectClick.current = true;
+                            }, onClick: function (e) {
+                                // Prevents from triggering sort when resizing and mouse is released in the middle of header
+                                if (isHeaderDirectClick.current) {
+                                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                    isHeaderDirectClick.current = false;
+                                }
                             } }),
                             column.render('Header'),
                             (showFilterButton(column) ||
                                 showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
-                                showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                                showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column })),
                                 showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSortedDesc ||
                                     (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
-                                index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
+                                (index !== headerGroup.headers.length - 1 ||
+                                    columnResizeMode === 'expand') && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
                                 react_1.default.createElement("div", { className: 'iui-resizer-bar' }))),
                             enableColumnReordering &&
                                 !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-reorder-bar' })),
@@ -423,7 +434,7 @@ var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: (0, utils_1.mergeRefs)(bodyRef, setBodyRefState), onScroll: function () {
+            }), { ref: bodyRef, onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -4,7 +4,6 @@ import '@itwin/itwinui-css/css/table.css';
 import { StylingProps } from '../../utils';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
-    ownerDocument?: Document;
 } & StylingProps;
 /**
  * Handles showing filter icon and opening filter component.

package/cjs/core/Table/filters/FilterToggle.js

@@ -41,9 +41,9 @@ var Buttons_1 = require("../../Buttons");
  * Handles showing filter icon and opening filter component.
  */
 var FilterToggle = function (props) {
-    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? (0, utils_1.getDocument)() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
+    var column = props.column, className = props.className, rest = __rest(props, ["column", "className"]);
     (0, utils_1.useTheme)();
-    var _b = react_1.default.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _a = react_1.default.useState(false), isVisible = _a[0], setIsVisible = _a[1];
     var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
     var setFilter = react_1.default.useCallback(function (filterValue) {
         column.setFilter(filterValue);
@@ -54,7 +54,7 @@ var FilterToggle = function (props) {
         close();
     }, [close, column]);
     var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
-    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
+    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close },
         react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort

package/cjs/core/Table/hooks/useResizeColumns.d.ts

@@ -1,5 +1,37 @@
+/**
+ * Copied from react-table as useResizeColumns and made some changes:
+ *  - Added TS typings
+ *  - Added sibling/next column resize when resizing
+ *  - Favoring min/max widths when resizing
+ *  - Added owner document support
+ * @link https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useResizeColumns.js
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) 2016 Tanner Linsley
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
 import { Hooks } from 'react-table';
 export declare const useResizeColumns: {
-    <T extends Record<string, unknown>>(ownerDocument: Document | undefined): (hooks: Hooks<T>) => void;
+    <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined>): (hooks: Hooks<T>) => void;
     pluginName: string;
 };

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -33,24 +33,19 @@ var isTouchEvent = function (event) {
 };
 var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
     var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
-    if (!ownerDocument) {
-        return props;
-    }
-    var dispatch = instance.dispatch, flatHeaders = instance.flatHeaders;
+    var dispatch = instance.dispatch;
     var onResizeStart = function (e, header) {
+        var _a, _b, _c;
         // lets not respond to multiple touches (e.g. 2 or 3 fingers)
         if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
             return;
         }
-        // Setting `width` here because it might take several rerenders until actual column width is set.
-        flatHeaders.forEach(function (h) {
-            if (!h.width) {
-                h.width = h.resizeWidth;
-            }
-        });
-        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [d.id, d.width]; });
+        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
+            d.id,
+            getHeaderWidth(d),
+        ]; });
         var nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, d.width]; })
+            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
             : [];
         var clientX = isTouchEvent(e)
             ? Math.round(e.touches[0].clientX)
@@ -69,8 +64,10 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 moveHandler: function (e) { return dispatchMove(e.clientX); },
                 upEvent: 'mouseup',
                 upHandler: function () {
-                    ownerDocument.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    ownerDocument.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    var _a, _b, _c;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
                     dispatchEnd();
                 },
             },
@@ -85,8 +82,9 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 },
                 upEvent: 'touchend',
                 upHandler: function () {
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    var _a, _b;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
                     dispatchEnd();
                 },
             },
@@ -97,13 +95,16 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
         var passiveIfSupported = passiveEventSupported()
             ? { passive: false }
             : false;
-        ownerDocument.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        ownerDocument.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        if (!isTouchEvent(e)) {
+            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+        }
         dispatch({
             type: react_table_1.actions.columnStartResizing,
             columnId: header.id,
-            columnWidth: header.width,
-            nextColumnWidth: nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.width,
+            columnWidth: getHeaderWidth(header),
+            nextColumnWidth: getHeaderWidth(nextHeader),
             headerIdWidths: headerIdWidths,
             nextHeaderIdWidths: nextHeaderIdWidths,
             clientX: clientX,
@@ -120,6 +121,8 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 e.persist();
                 // Prevents from triggering drag'n'drop
                 e.preventDefault();
+                // Prevents from triggering sort
+                e.stopPropagation();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
@@ -155,13 +158,29 @@ var reducer = function (newState, action, previousState, instance) {
     if (action.type === react_table_1.actions.columnResizing) {
         var clientX = action.clientX;
         var _a = newState.columnResizing, _b = _a.startX, startX = _b === void 0 ? 0 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? 1 : _c, _d = _a.nextColumnWidth, nextColumnWidth = _d === void 0 ? 1 : _d, _e = _a.headerIdWidths, headerIdWidths = _e === void 0 ? [] : _e, _f = _a.nextHeaderIdWidths, nextHeaderIdWidths = _f === void 0 ? [] : _f;
+        if (!instance) {
+            return newState;
+        }
         var deltaX = clientX - startX;
         var newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
-        var newNextColumnWidths = getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth);
-        if (!isNewColumnWidthsValid(newColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders) ||
-            !isNewColumnWidthsValid(newNextColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders)) {
+        var isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
+            instance.tableWidth;
+        var newNextColumnWidths = (instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'fit' ||
+            ((instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'expand' && isTableWidthDecreasing)
+            ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
+            : {};
+        if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
+            !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
+            !isNewTableWidthValid(__assign(__assign({}, newColumnWidths), newNextColumnWidths), instance)) {
             return newState;
         }
+        // Setting `width` here because it might take several rerenders until actual column width is set.
+        // Also setting after the actual resize happened.
+        instance === null || instance === void 0 ? void 0 : instance.flatHeaders.forEach(function (h) {
+            if (!h.width) {
+                h.width = h.resizeWidth;
+            }
+        });
         return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { columnWidths: __assign(__assign(__assign({}, newState.columnResizing.columnWidths), newColumnWidths), newNextColumnWidths) }) });
     }
     if (action.type === react_table_1.actions.columnDoneResizing) {
@@ -201,25 +220,53 @@ var isNewColumnWidthsValid = function (columnWidths, headers) {
     }
     return true;
 };
+var isNewTableWidthValid = function (columnWidths, instance) {
+    if (instance.columnResizeMode === 'fit') {
+        return true;
+    }
+    var newTableWidth = 0;
+    for (var _i = 0, _a = instance.flatHeaders; _i < _a.length; _i++) {
+        var header = _a[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    // `tableWidth` is whole number therefore we need to round the `newTableWidth`
+    if (Math.round(newTableWidth) < instance.tableWidth) {
+        return false;
+    }
+    return true;
+};
 var useInstanceBeforeDimensions = function (instance) {
-    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing;
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing, columnResizeMode = instance.columnResizeMode;
     var getInstance = (0, react_table_1.useGetLatest)(instance);
     flatHeaders.forEach(function (header, index) {
         var _a;
         var resizeWidth = columnResizing.columnWidths[header.id];
         header.width = resizeWidth || header.width || header.originalWidth;
         header.isResizing = columnResizing.isResizingColumn === header.id;
-        var headerToResize = header.disableResizing
+        var headerToResize = header.disableResizing && columnResizeMode === 'fit'
             ? getPreviousResizableHeader(header, instance)
             : header;
-        var nextResizableHeader = getNextResizableHeader(header, instance);
+        // When `columnResizeMode` is `expand` and it is a last column,
+        // then try to find some column on the left side to resize
+        // when table width is decreasing.
+        var nextResizableHeader = columnResizeMode === 'expand' && index === flatHeaders.length - 1
+            ? getPreviousResizableHeader(header, instance)
+            : getNextResizableHeader(header, instance);
         header.canResize =
             header.disableResizing != null ? !header.disableResizing : true;
         // Show resizer when header is resizable or when next header is resizable
         // and there is resizable columns on the left side of the resizer.
-        header.isResizerVisible =
-            (header.canResize && !!nextResizableHeader) ||
-                (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+        if (columnResizeMode === 'fit') {
+            header.isResizerVisible =
+                (header.canResize && !!nextResizableHeader) ||
+                    (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+            // When resize mode is `expand` show resizer on the current resizable column.
+        }
+        else {
+            header.isResizerVisible = header.canResize && !!headerToResize;
+        }
         header.getResizerProps = (0, react_table_1.makePropGetter)(getHooks().getResizerProps, {
             instance: getInstance(),
             header: headerToResize,
@@ -259,6 +306,19 @@ function getLeafHeaders(header) {
     recurseHeader(header);
     return leafHeaders;
 }
+var getHeaderWidth = function (header) {
+    return Number(header.width || header.resizeWidth || 0);
+};
+var calculateTableWidth = function (columnWidths, headers) {
+    var newTableWidth = 0;
+    for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
+        var header = headers_1[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    return newTableWidth;
+};
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
 var passiveSupported = null;
 var passiveEventSupported = function () {

package/cjs/types/react-table-config.d.ts

@@ -28,11 +28,22 @@ declare module 'react-table' {
          * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing.
          */
         data: D[];
+        /**
+         * Column's resize mode.
+         *  - `fit` - when resizing it affects current and the next column,
+         *   e.g. when increasing width of current column, next column's width will decrease.
+         *  - `expand` - when resizing it affects only the current column,
+         *   e.g. when increasing width of the current column, next column's width remains the same.
+         * @default 'fit'
+         */
+        columnResizeMode?: 'fit' | 'expand';
     }
     interface Hooks<D extends object = {}> extends UseExpandedHooks<D>, UseGroupByHooks<D>, UseRowSelectHooks<D>, UseSortByHooks<D> {
     }
     interface TableInstance<D extends object = {}> extends UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowStateInstanceProps<D>, UseSortByInstanceProps<D> {
         initialRows: Row<D>[];
+        columnResizeMode: TableOptions['columnResizeMode'];
+        tableWidth: number;
     }
     interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
         columnResizing: {

package/esm/core/Table/Table.js

@@ -28,7 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useTheme, useResizeObserver, mergeRefs } from '../utils';
+import { useTheme, useResizeObserver } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import SvgSortDown from '@itwin/itwinui-icons-react/cjs/icons/SortDown';
 import SvgSortUp from '@itwin/itwinui-icons-react/cjs/icons/SortUp';
@@ -98,9 +98,9 @@ var flattenColumns = function (columns) {
  */
 export var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.columnResizeMode, columnResizeMode = _m === void 0 ? 'fit' : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
     useTheme();
-    var _q = React.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
+    var ownerDocument = React.useRef();
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -119,24 +119,26 @@ export var Table = function (props) {
     }, [columns]);
     var disableUserSelect = React.useCallback(function (e) {
         if (e.key === 'Shift') {
-            ownerDocument &&
-                (ownerDocument.documentElement.style.userSelect = 'none');
+            ownerDocument.current &&
+                (ownerDocument.current.documentElement.style.userSelect = 'none');
         }
-    }, [ownerDocument]);
+    }, []);
     var enableUserSelect = React.useCallback(function (e) {
         if (e.key === 'Shift') {
-            ownerDocument && (ownerDocument.documentElement.style.userSelect = '');
+            ownerDocument.current &&
+                (ownerDocument.current.documentElement.style.userSelect = '');
         }
-    }, [ownerDocument]);
+    }, []);
     React.useEffect(function () {
         if (!isSelectable || selectionMode !== 'multi') {
             return;
         }
-        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.addEventListener('keydown', disableUserSelect);
-        ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.addEventListener('keyup', enableUserSelect);
+        var ownerDoc = ownerDocument.current;
+        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keydown', disableUserSelect);
+        ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.addEventListener('keyup', enableUserSelect);
         return function () {
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.removeEventListener('keydown', disableUserSelect);
-            ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.removeEventListener('keyup', enableUserSelect);
+            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keydown', disableUserSelect);
+            ownerDoc === null || ownerDoc === void 0 ? void 0 : ownerDoc.removeEventListener('keyup', enableUserSelect);
         };
     }, [
         isSelectable,
@@ -206,7 +208,7 @@ export var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
+    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState), columnResizeMode: columnResizeMode }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders, visibleColumns = instance.visibleColumns, setGlobalFilter = instance.setGlobalFilter;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -284,6 +286,7 @@ export var Table = function (props) {
     var previousTableWidth = React.useRef(0);
     var onTableResize = React.useCallback(function (_a) {
         var width = _a.width;
+        instance.tableWidth = width;
         if (width === previousTableWidth.current) {
             return;
         }
@@ -299,7 +302,7 @@ export var Table = function (props) {
             return;
         }
         dispatch({ type: tableResizeStartAction });
-    }, [dispatch, state.columnResizing.columnWidths, flatHeaders]);
+    }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
     var resizeRef = useResizeObserver(onTableResize)[0];
     // Flexbox handles columns resize so we take new column widths before browser repaints.
     React.useLayoutEffect(function () {
@@ -315,12 +318,10 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
-    // Using `useState` to rerender rows when table body ref is available
-    var _s = React.useState(null), bodyRefState = _s[0], setBodyRefState = _s[1];
     var getPreparedRow = React.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRefState, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
+        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRef.current, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
     }, [
         page,
         prepareRow,
@@ -333,7 +334,6 @@ export var Table = function (props) {
         hasAnySubRows,
         instance,
         expanderCell,
-        bodyRefState,
         enableVirtualization,
         tableRowRef,
     ]);
@@ -362,9 +362,10 @@ export var Table = function (props) {
         // Call only on init
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: function (element) {
-                setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
+                ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
                 }
@@ -383,7 +384,8 @@ export var Table = function (props) {
                         className: 'iui-row',
                     });
                     return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                        var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', {
+                        var _a = column.getSortByToggleProps(), onClick = _a.onClick, restSortProps = __rest(_a, ["onClick"]);
+                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: cx('iui-cell', {
                                 'iui-actionable': column.canSort,
                                 'iui-sorted': column.isSorted,
                                 'iui-cell-sticky': !!column.sticky,
@@ -393,16 +395,25 @@ export var Table = function (props) {
                                     columnRefs.current[column.id] = el;
                                     column.resizeWidth = el.getBoundingClientRect().width;
                                 }
+                            }, onMouseDown: function () {
+                                isHeaderDirectClick.current = true;
+                            }, onClick: function (e) {
+                                // Prevents from triggering sort when resizing and mouse is released in the middle of header
+                                if (isHeaderDirectClick.current) {
+                                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                                    isHeaderDirectClick.current = false;
+                                }
                             } }),
                             column.render('Header'),
                             (showFilterButton(column) ||
                                 showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
-                                showFilterButton(column) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                                showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
                                 showSortButton(column) && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSortedDesc ||
                                     (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
-                                index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
+                                (index !== headerGroup.headers.length - 1 ||
+                                    columnResizeMode === 'expand') && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
                                 React.createElement("div", { className: 'iui-resizer-bar' }))),
                             enableColumnReordering &&
                                 !column.disableReordering && (React.createElement("div", { className: 'iui-reorder-bar' })),
@@ -417,7 +428,7 @@ export var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: mergeRefs(bodyRef, setBodyRefState), onScroll: function () {
+            }), { ref: bodyRef, onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();

package/esm/core/Table/filters/FilterToggle.d.ts

@@ -4,7 +4,6 @@ import '@itwin/itwinui-css/css/table.css';
 import { StylingProps } from '../../utils';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
-    ownerDocument?: Document;
 } & StylingProps;
 /**
  * Handles showing filter icon and opening filter component.

package/esm/core/Table/filters/FilterToggle.js

@@ -29,15 +29,15 @@ import SvgFilter from '@itwin/itwinui-icons-react/cjs/icons/Filter';
 import React from 'react';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/table.css';
-import { useTheme, Popover, getDocument } from '../../utils';
+import { useTheme, Popover } from '../../utils';
 import { IconButton } from '../../Buttons';
 /**
  * Handles showing filter icon and opening filter component.
  */
 export var FilterToggle = function (props) {
-    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? getDocument() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
+    var column = props.column, className = props.className, rest = __rest(props, ["column", "className"]);
     useTheme();
-    var _b = React.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
     var close = React.useCallback(function () { return setIsVisible(false); }, []);
     var setFilter = React.useCallback(function (filterValue) {
         column.setFilter(filterValue);
@@ -48,7 +48,7 @@ export var FilterToggle = function (props) {
         close();
     }, [close, column]);
     var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
-    return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
+    return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close },
         React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: cx('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort

package/esm/core/Table/hooks/useResizeColumns.d.ts

@@ -1,5 +1,37 @@
+/**
+ * Copied from react-table as useResizeColumns and made some changes:
+ *  - Added TS typings
+ *  - Added sibling/next column resize when resizing
+ *  - Favoring min/max widths when resizing
+ *  - Added owner document support
+ * @link https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useResizeColumns.js
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) 2016 Tanner Linsley
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
 import { Hooks } from 'react-table';
 export declare const useResizeColumns: {
-    <T extends Record<string, unknown>>(ownerDocument: Document | undefined): (hooks: Hooks<T>) => void;
+    <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined>): (hooks: Hooks<T>) => void;
     pluginName: string;
 };

package/esm/core/Table/hooks/useResizeColumns.js

@@ -29,24 +29,19 @@ var isTouchEvent = function (event) {
 };
 var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
     var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
-    if (!ownerDocument) {
-        return props;
-    }
-    var dispatch = instance.dispatch, flatHeaders = instance.flatHeaders;
+    var dispatch = instance.dispatch;
     var onResizeStart = function (e, header) {
+        var _a, _b, _c;
         // lets not respond to multiple touches (e.g. 2 or 3 fingers)
         if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
             return;
         }
-        // Setting `width` here because it might take several rerenders until actual column width is set.
-        flatHeaders.forEach(function (h) {
-            if (!h.width) {
-                h.width = h.resizeWidth;
-            }
-        });
-        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [d.id, d.width]; });
+        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
+            d.id,
+            getHeaderWidth(d),
+        ]; });
         var nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, d.width]; })
+            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
             : [];
         var clientX = isTouchEvent(e)
             ? Math.round(e.touches[0].clientX)
@@ -65,8 +60,10 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 moveHandler: function (e) { return dispatchMove(e.clientX); },
                 upEvent: 'mouseup',
                 upHandler: function () {
-                    ownerDocument.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    ownerDocument.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    var _a, _b, _c;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
                     dispatchEnd();
                 },
             },
@@ -81,8 +78,9 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 },
                 upEvent: 'touchend',
                 upHandler: function () {
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    var _a, _b;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
                     dispatchEnd();
                 },
             },
@@ -93,13 +91,16 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
         var passiveIfSupported = passiveEventSupported()
             ? { passive: false }
             : false;
-        ownerDocument.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        ownerDocument.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        if (!isTouchEvent(e)) {
+            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+        }
         dispatch({
             type: actions.columnStartResizing,
             columnId: header.id,
-            columnWidth: header.width,
-            nextColumnWidth: nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.width,
+            columnWidth: getHeaderWidth(header),
+            nextColumnWidth: getHeaderWidth(nextHeader),
             headerIdWidths: headerIdWidths,
             nextHeaderIdWidths: nextHeaderIdWidths,
             clientX: clientX,
@@ -116,6 +117,8 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 e.persist();
                 // Prevents from triggering drag'n'drop
                 e.preventDefault();
+                // Prevents from triggering sort
+                e.stopPropagation();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
@@ -151,13 +154,29 @@ var reducer = function (newState, action, previousState, instance) {
     if (action.type === actions.columnResizing) {
         var clientX = action.clientX;
         var _a = newState.columnResizing, _b = _a.startX, startX = _b === void 0 ? 0 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? 1 : _c, _d = _a.nextColumnWidth, nextColumnWidth = _d === void 0 ? 1 : _d, _e = _a.headerIdWidths, headerIdWidths = _e === void 0 ? [] : _e, _f = _a.nextHeaderIdWidths, nextHeaderIdWidths = _f === void 0 ? [] : _f;
+        if (!instance) {
+            return newState;
+        }
         var deltaX = clientX - startX;
         var newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
-        var newNextColumnWidths = getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth);
-        if (!isNewColumnWidthsValid(newColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders) ||
-            !isNewColumnWidthsValid(newNextColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders)) {
+        var isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
+            instance.tableWidth;
+        var newNextColumnWidths = (instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'fit' ||
+            ((instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'expand' && isTableWidthDecreasing)
+            ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
+            : {};
+        if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
+            !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
+            !isNewTableWidthValid(__assign(__assign({}, newColumnWidths), newNextColumnWidths), instance)) {
             return newState;
         }
+        // Setting `width` here because it might take several rerenders until actual column width is set.
+        // Also setting after the actual resize happened.
+        instance === null || instance === void 0 ? void 0 : instance.flatHeaders.forEach(function (h) {
+            if (!h.width) {
+                h.width = h.resizeWidth;
+            }
+        });
         return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { columnWidths: __assign(__assign(__assign({}, newState.columnResizing.columnWidths), newColumnWidths), newNextColumnWidths) }) });
     }
     if (action.type === actions.columnDoneResizing) {
@@ -197,25 +216,53 @@ var isNewColumnWidthsValid = function (columnWidths, headers) {
     }
     return true;
 };
+var isNewTableWidthValid = function (columnWidths, instance) {
+    if (instance.columnResizeMode === 'fit') {
+        return true;
+    }
+    var newTableWidth = 0;
+    for (var _i = 0, _a = instance.flatHeaders; _i < _a.length; _i++) {
+        var header = _a[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    // `tableWidth` is whole number therefore we need to round the `newTableWidth`
+    if (Math.round(newTableWidth) < instance.tableWidth) {
+        return false;
+    }
+    return true;
+};
 var useInstanceBeforeDimensions = function (instance) {
-    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing;
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing, columnResizeMode = instance.columnResizeMode;
     var getInstance = useGetLatest(instance);
     flatHeaders.forEach(function (header, index) {
         var _a;
         var resizeWidth = columnResizing.columnWidths[header.id];
         header.width = resizeWidth || header.width || header.originalWidth;
         header.isResizing = columnResizing.isResizingColumn === header.id;
-        var headerToResize = header.disableResizing
+        var headerToResize = header.disableResizing && columnResizeMode === 'fit'
             ? getPreviousResizableHeader(header, instance)
             : header;
-        var nextResizableHeader = getNextResizableHeader(header, instance);
+        // When `columnResizeMode` is `expand` and it is a last column,
+        // then try to find some column on the left side to resize
+        // when table width is decreasing.
+        var nextResizableHeader = columnResizeMode === 'expand' && index === flatHeaders.length - 1
+            ? getPreviousResizableHeader(header, instance)
+            : getNextResizableHeader(header, instance);
         header.canResize =
             header.disableResizing != null ? !header.disableResizing : true;
         // Show resizer when header is resizable or when next header is resizable
         // and there is resizable columns on the left side of the resizer.
-        header.isResizerVisible =
-            (header.canResize && !!nextResizableHeader) ||
-                (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+        if (columnResizeMode === 'fit') {
+            header.isResizerVisible =
+                (header.canResize && !!nextResizableHeader) ||
+                    (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+            // When resize mode is `expand` show resizer on the current resizable column.
+        }
+        else {
+            header.isResizerVisible = header.canResize && !!headerToResize;
+        }
         header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
             instance: getInstance(),
             header: headerToResize,
@@ -255,6 +302,19 @@ function getLeafHeaders(header) {
     recurseHeader(header);
     return leafHeaders;
 }
+var getHeaderWidth = function (header) {
+    return Number(header.width || header.resizeWidth || 0);
+};
+var calculateTableWidth = function (columnWidths, headers) {
+    var newTableWidth = 0;
+    for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
+        var header = headers_1[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    return newTableWidth;
+};
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
 var passiveSupported = null;
 var passiveEventSupported = function () {

package/esm/types/react-table-config.d.ts

@@ -28,11 +28,22 @@ declare module 'react-table' {
          * If some rows don't have sub-data, it is recommended to pass an empty array to `subRows` for consistent spacing.
          */
         data: D[];
+        /**
+         * Column's resize mode.
+         *  - `fit` - when resizing it affects current and the next column,
+         *   e.g. when increasing width of current column, next column's width will decrease.
+         *  - `expand` - when resizing it affects only the current column,
+         *   e.g. when increasing width of the current column, next column's width remains the same.
+         * @default 'fit'
+         */
+        columnResizeMode?: 'fit' | 'expand';
     }
     interface Hooks<D extends object = {}> extends UseExpandedHooks<D>, UseGroupByHooks<D>, UseRowSelectHooks<D>, UseSortByHooks<D> {
     }
     interface TableInstance<D extends object = {}> extends UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowStateInstanceProps<D>, UseSortByInstanceProps<D> {
         initialRows: Row<D>[];
+        columnResizeMode: TableOptions['columnResizeMode'];
+        tableWidth: number;
     }
     interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
         columnResizing: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",