@itwin/itwinui-react 1.34.1 → 1.36.0

package/esm/core/Table/Table.js

@@ -37,12 +37,11 @@ import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
 import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, } from './hooks';
-import { onExpandHandler, onFilterHandler, onSelectHandler, } from './actionHandlers';
-import { onSingleSelectHandler } from './actionHandlers/selectHandler';
-import { onTableResizeEnd, onTableResizeStart, } from './actionHandlers/resizeHandler';
+import { onExpandHandler, onFilterHandler, onSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
+import { SELECTION_CELL_ID } from './columns';
 var singleRowSelectedAction = 'singleRowSelected';
-var tableResizeStartAction = 'tableResizeStart';
+export var tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
@@ -88,9 +87,10 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 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.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, _o = props.enableColumnReordering, enableColumnReordering = _o === void 0 ? false : _o, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var _b;
+    var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _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, 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", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     useTheme();
-    var _p = React.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
+    var _q = React.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -103,6 +103,7 @@ export var Table = function (props) {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
+    var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === SELECTION_CELL_ID; });
     var tableStateReducer = React.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case TableActions.toggleSortBy:
@@ -116,13 +117,17 @@ export var Table = function (props) {
                 onExpandHandler(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = onSingleSelectHandler(newState, action, instance, onSelect, isRowDisabled);
+                newState = onSingleSelectHandler(newState, action, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case TableActions.toggleRowSelected:
             case TableActions.toggleAllRowsSelected:
             case TableActions.toggleAllPageRowsSelected: {
-                onSelectHandler(newState, instance, onSelect, isRowDisabled);
+                onSelectHandler(newState, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case tableResizeStartAction: {
@@ -139,7 +144,15 @@ export var Table = function (props) {
         return stateReducer
             ? stateReducer(newState, action, previousState, instance)
             : newState;
-    }, [isRowDisabled, onExpand, onFilter, onSelect, onSort, stateReducer]);
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onFilter,
+        onSelect,
+        onSort,
+        stateReducer,
+    ]);
     var filterTypes = React.useMemo(function () { return (__assign(__assign({}, customFilterFunctions), filterFunctions)); }, [filterFunctions]);
     var hasAnySubRows = React.useMemo(function () {
         return data.some(function (item, index) {
@@ -228,11 +241,12 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
-    var getPreparedRow = React.useCallback(function (row) {
+    var getPreparedRow = React.useCallback(function (index) {
+        var row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.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 }));
+        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 }));
     }, [
-        data.length,
+        page,
         expanderCell,
         hasAnySubRows,
         instance,
@@ -244,7 +258,7 @@ export var Table = function (props) {
         state,
         subComponent,
     ]);
-    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
+    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -268,8 +282,8 @@ export var Table = function (props) {
                             }
                         } }),
                         column.render('Header'),
-                        !isLoading && (data.length != 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        !isLoading && data.length != 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        (data.length !== 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                        data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { 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' }),
@@ -287,7 +301,7 @@ export var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-row' },

package/esm/core/Table/TableCell.js

@@ -17,7 +17,7 @@ import React from 'react';
 import cx from 'classnames';
 import { getCellStyle } from './utils';
 import { SubRowExpander } from './SubRowExpander';
-import { SELECTION_CELL_ID } from './hooks';
+import { SELECTION_CELL_ID } from './columns';
 import { DefaultCell } from './cells';
 export var TableCell = function (props) {
     var cell = props.cell, cellIndex = props.cellIndex, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
@@ -46,6 +46,6 @@ export var TableCell = function (props) {
         cellProps: cellProps,
         children: cellContent,
     };
-    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(cellRendererProps)) : (React.createElement(DefaultCell, __assign({}, cellRendererProps)))));
+    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (React.createElement(DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
 };
 export default TableCell;

package/esm/core/Table/TableRowMemoized.js

@@ -51,7 +51,9 @@ export var TableRow = function (props) {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: 'iui-row iui-expanded-content' }, subComponent(row))))));
+            React.createElement("div", { className: cx('iui-row', 'iui-expanded-content', {
+                    'iui-disabled': isDisabled,
+                }) }, subComponent(row))))));
 };
 var hasAnySelectedSubRow = function (row, selectedRowIds) {
     if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
@@ -62,14 +64,17 @@ var hasAnySelectedSubRow = function (row, selectedRowIds) {
     });
 };
 export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     return prevProp.isLast === nextProp.isLast &&
+        ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
+            ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
+        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every(function (column, index) { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
         prevProp.onRowInViewport === nextProp.onRowInViewport &&
         prevProp.onBottomReached === nextProp.onBottomReached &&
         prevProp.onClick === nextProp.onClick &&
         prevProp.row.original === nextProp.row.original &&
-        ((_a = prevProp.state.selectedRowIds) === null || _a === void 0 ? void 0 : _a[prevProp.row.id]) ===
-            ((_b = nextProp.state.selectedRowIds) === null || _b === void 0 ? void 0 : _b[nextProp.row.id]) &&
+        ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
+            ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
         // Check if sub-rows selection has changed and whether to show indeterminate state or not
         prevProp.row.subRows.some(function (subRow) {
             return hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds);
@@ -77,8 +82,8 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
             nextProp.row.subRows.some(function (subRow) {
                 return hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds);
             }) &&
-        ((_c = prevProp.state.expanded) === null || _c === void 0 ? void 0 : _c[prevProp.row.id]) ===
-            ((_d = nextProp.state.expanded) === null || _d === void 0 ? void 0 : _d[nextProp.row.id]) &&
+        ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
+            ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
         prevProp.subComponent === nextProp.subComponent &&
         prevProp.row.cells.every(function (cell, index) { return nextProp.row.cells[index].column === cell.column; }) &&
         prevProp.isDisabled === nextProp.isDisabled &&
@@ -87,5 +92,5 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
-        !nextProp.state.isTableResizing;
+        prevProp.state.isTableResizing === nextProp.state.isTableResizing;
 });

package/esm/core/Table/actionHandlers/index.d.ts

@@ -1,3 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/esm/core/Table/actionHandlers/index.js

@@ -4,4 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -12,5 +12,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRe
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: CellRendererProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
 export default DefaultCell;

package/esm/core/Table/cells/DefaultCell.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import cx from 'classnames';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -39,7 +40,9 @@ import React from 'react';
 export var DefaultCell = function (props) {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var cellElementProps = props.cellElementProps, children = props.children, cellProps = props.cellProps, rest = __rest(props, ["cellElementProps", "children", "cellProps"]);
-    return (React.createElement("div", __assign({}, cellElementProps, rest), children));
+    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
+    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, {
+            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
+        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
 };
 export default DefaultCell;

package/esm/core/Table/columns/actionColumn.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { HeaderProps } from 'react-table';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
+    columnManager?: boolean | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    disableReordering: boolean;
+    Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
+};

package/esm/core/Table/columns/actionColumn.js

@@ -0,0 +1,84 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import SvgColumnManager from '@itwin/itwinui-icons-react/cjs/icons/ColumnManager';
+import { DropdownMenu } from '../../DropdownMenu';
+import { IconButton } from '../../Buttons/IconButton';
+import { MenuItem } from '../../Menu';
+import { tableResizeStartAction } from '../Table';
+import { SELECTION_CELL_ID } from './selectionColumn';
+import { EXPANDER_CELL_ID } from './expanderColumn';
+var ACTION_CELL_ID = 'iui-table-action';
+/**
+ * Action column that adds column manager to the Table header.
+ * It is recommended to add this column to the end of the Table
+ * and to override its `Cell` prop with your row actions menu.
+ * @example
+ * {
+ *   ...ActionColumn({ columnManager: true }),
+ *   Cell: () => (
+ *     <DropdownMenu menuItems={menuItems}>
+ *       <IconButton
+ *         styleType='borderless'
+ *         onClick={(e) => e.stopPropagation()}
+ *       >
+ *         <SvgMore />
+ *       </IconButton>
+ *     </DropdownMenu>
+ *   ),
+ * },
+ */
+export var ActionColumn = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.columnManager, columnManager = _c === void 0 ? false : _c;
+    return {
+        id: ACTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        disableReordering: true,
+        Header: function (_a) {
+            var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
+            var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            if (!columnManager) {
+                return null;
+            }
+            var defaultColumnIds = [
+                SELECTION_CELL_ID,
+                EXPANDER_CELL_ID,
+                ACTION_CELL_ID,
+            ];
+            var headerCheckBoxes = function () {
+                return allColumns
+                    //Filters out any default columns made such as selection and expansion
+                    .filter(function (_a) {
+                    var id = _a.id;
+                    return !defaultColumnIds.includes(id);
+                })
+                    .map(function (column) {
+                    var checked = column.getToggleHiddenProps().checked;
+                    var onClick = function () {
+                        column.toggleHidden(checked);
+                        // If no column was resized then leave table resize handling to the flexbox
+                        if (Object.keys(state.columnResizing.columnWidths).length === 0) {
+                            return;
+                        }
+                        // Triggers an update to resize the widths of all visible columns
+                        dispatch({ type: tableResizeStartAction });
+                    };
+                    return (React.createElement(MenuItem, { key: column.id, icon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-" + column.id }), onClick: onClick, disabled: column.disableToggleVisibility },
+                        React.createElement("div", { id: "iui-column-" + column.id }, column.render('Header'))));
+                });
+            };
+            return (React.createElement(DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
+                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen },
+                    React.createElement(SvgColumnManager, null))));
+        },
+    };
+};

package/esm/core/Table/columns/expanderColumn.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CellProps, CellRendererProps, Row } from 'react-table';
+export declare const EXPANDER_CELL_ID = "iui-table-expander";
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns expanded content. If row doesn't have it, then should return `false`/`null`. */
+    subComponent?: ((row: Row<T>) => React.ReactNode) | undefined;
+    /** Function that returns whether expander is disabled */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Cell: (props: CellProps<T, any>) => JSX.Element | null;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};

package/esm/core/Table/columns/expanderColumn.js

@@ -0,0 +1,74 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { IconButton } from '../../Buttons';
+import { DefaultCell } from '../cells';
+export var EXPANDER_CELL_ID = 'iui-table-expander';
+/**
+ * Expander column that adds sub-content expander column to the Table.
+ * It is recommended to use it as the first column or after selection column.
+ * @example
+ * const subComponent = useCallback(
+ *   (row: Row) => (
+ *     <div style={{ padding: 16 }}>
+ *       <Leading>Extra information</Leading>
+ *       <pre>
+ *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+ *       </pre>
+ *     </div>
+ *   ),
+ *   [],
+ * );
+ * const isExpanderDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name2';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     ExpanderColumn({ subComponent, isDisabled: isExpanderDisabled }),
+ *     // Rest of your columns
+ *   ],
+ * ], [isExpanderDisabled, subComponent]);
+ */
+export var ExpanderColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var subComponent = props.subComponent, isDisabled = props.isDisabled;
+    return {
+        id: EXPANDER_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Cell: function (props) {
+            var row = props.row;
+            if (!(subComponent === null || subComponent === void 0 ? void 0 : subComponent(row))) {
+                return null;
+            }
+            else {
+                return (React.createElement(IconButton, { className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
+                        e.stopPropagation();
+                        row.toggleRowExpanded();
+                    }, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(props.row.original) }, React.createElement(SvgChevronRight, null)));
+            }
+        },
+        cellRenderer: function (props) { return (React.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};

package/esm/core/Table/columns/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionColumn } from './actionColumn';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn';

package/esm/core/Table/columns/index.js

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { ActionColumn } from './actionColumn';
+export { SELECTION_CELL_ID, SelectionColumn } from './selectionColumn';
+export { EXPANDER_CELL_ID, ExpanderColumn } from './expanderColumn';

package/esm/core/Table/columns/selectionColumn.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { CellProps, CellRendererProps, HeaderProps } from 'react-table';
+export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
+    /** Function that returns whether row checkbox should be disabled. */
+    isDisabled?: ((rowData: T) => boolean) | undefined;
+}) => {
+    id: string;
+    disableResizing: boolean;
+    disableGroupBy: boolean;
+    disableReordering: boolean;
+    minWidth: number;
+    width: number;
+    maxWidth: number;
+    columnClassName: string;
+    cellClassName: string;
+    Header: ({ getToggleAllRowsSelectedProps, rows, initialRows, state, }: HeaderProps<T>) => JSX.Element;
+    Cell: ({ row }: CellProps<T, any>) => JSX.Element;
+    cellRenderer: (props: CellRendererProps<T>) => JSX.Element;
+};

package/esm/core/Table/columns/selectionColumn.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+import { DefaultCell } from '../cells';
+export var SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+/**
+ * Selection column that adds selection checkbox column to the Table.
+ * It is recommended to use it as the first column.
+ * @example
+ * const isCheckboxDisabled = useCallback((rowData) => {
+ *   return rowData.name === 'Name1';
+ * }, []);
+ * const columns = useMemo(() => [
+ *   Header: 'Table',
+ *   columns: [
+ *     SelectionColumn({ isDisabled: isCheckboxDisabled }),
+ *     // Rest of your columns
+ *    ],
+ * ], [isCheckboxDisabled]);
+ */
+export var SelectionColumn = function (props) {
+    if (props === void 0) { props = {}; }
+    var isDisabled = props.isDisabled;
+    return {
+        id: SELECTION_CELL_ID,
+        disableResizing: true,
+        disableGroupBy: true,
+        disableReordering: true,
+        minWidth: 48,
+        width: 48,
+        maxWidth: 48,
+        columnClassName: 'iui-slot',
+        cellClassName: 'iui-slot',
+        Header: function (_a) {
+            var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
+            var disabled = rows.every(function (row) { return isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original); });
+            var checked = initialRows.every(function (row) { return state.selectedRowIds[row.id] || (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original)); });
+            return (React.createElement(Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { style: {}, checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
+        },
+        Cell: function (_a) {
+            var row = _a.row;
+            return (React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { style: {}, disabled: isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
+        },
+        cellRenderer: function (props) { return (React.createElement(DefaultCell, __assign({}, props, { isDisabled: function (rowData) { return !!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(rowData)); } }))); },
+    };
+};

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

@@ -44,14 +44,30 @@ export var DateRangeFilter = function (props) {
     useTheme();
     var translatedStrings = __assign(__assign({}, defaultStrings), translatedLabels);
     var _h = React.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined), from = _h[0], setFrom = _h[1];
+    var onFromChange = React.useCallback(function (date) {
+        setFrom(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        });
+    }, []);
     var _j = React.useState(((_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) ? new Date((_d = column.filterValue) === null || _d === void 0 ? void 0 : _d[1]) : undefined), to = _j[0], setTo = _j[1];
+    var onToChange = React.useCallback(function (date) {
+        setTo(function (prevDate) {
+            if (prevDate || !date) {
+                return date;
+            }
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        });
+    }, []);
     var onKeyDown = function (event) {
         if (event.key === 'Enter') {
             setFilter([from, to]);
         }
     };
     return (React.createElement(BaseFilter, null,
-        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: setFrom, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
-        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: setTo, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
+        React.createElement(DatePickerInput, { label: translatedStrings.from, date: from, onChange: onFromChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder, setFocus: true }),
+        React.createElement(DatePickerInput, { label: translatedStrings.to, date: to, onChange: onToChange, formatDate: formatDate, parseInput: parseInput, onKeyDown: onKeyDown, placeholder: placeholder }),
         React.createElement(FilterButtonBar, { setFilter: function () { return setFilter([from, to]); }, clearFilter: clearFilter, translatedLabels: translatedLabels })));
 };

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

@@ -1,5 +1,5 @@
-export { EXPANDER_CELL_ID, useExpanderCell } from './useExpanderCell';
-export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
+export { useExpanderCell } from './useExpanderCell';
+export { useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';