@itwin/itwinui-react 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.5.1
+
+### Patch Changes
+
+- 9ad85ff2: The different density settings for table will now also affect horizontal spacing.
+
 ## 2.5.0
 
 ### Minor Changes

package/cjs/core/Table/SubRowExpander.d.ts

@@ -5,6 +5,7 @@ export declare type SubRowExpanderProps<T extends Record<string, unknown>> = {
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     isDisabled: boolean;
     cellProps: CellProps<T>;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => JSX.Element;
 export default SubRowExpander;

package/cjs/core/Table/SubRowExpander.js

@@ -12,8 +12,10 @@ const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 const Buttons_1 = require("../Buttons");
 const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell } = props;
-    return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
+    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (react_1.default.createElement(Buttons_1.IconButton, { style: {
+            marginRight: density === 'default' || density === undefined ? 8 : 4,
+        }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
         }, disabled: isDisabled }, react_1.default.createElement(utils_1.SvgChevronRight, { style: {

package/cjs/core/Table/Table.js

@@ -204,7 +204,7 @@ const Table = (props) => {
         getSubRows,
         initialState: { pageSize, ...props.initialState },
         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);
+    }, 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, density), react_table_1.useColumnOrder, (0, hooks_1.useColumnDragAndDrop)(enableColumnReordering), hooks_1.useStickyColumns);
     const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
     let headerGroups = _headerGroups;
     if (columns.length === 1 && 'columns' in columns[0]) {
@@ -342,7 +342,7 @@ const Table = (props) => {
     const getPreparedRow = react_1.default.useCallback((index) => {
         const 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: bodyRef.current, 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), density: density }));
     }, [
         page,
         prepareRow,
@@ -357,6 +357,7 @@ const Table = (props) => {
         expanderCell,
         enableVirtualization,
         tableRowRef,
+        density,
     ]);
     const virtualizedItemRenderer = react_1.default.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

package/cjs/core/Table/TableCell.d.ts

@@ -7,6 +7,7 @@ export declare type TableCellProps<T extends Record<string, unknown>> = {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => JSX.Element;
 export default TableCell;

package/cjs/core/Table/TableCell.js

@@ -15,7 +15,7 @@ const SubRowExpander_1 = require("./SubRowExpander");
 const columns_1 = require("./columns");
 const cells_1 = require("./cells");
 const TableCell = (props) => {
-    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, } = props;
+    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
         cell.row.cells.findIndex((c) => c.column.id !== columns_1.SELECTION_CELL_ID);
     const getSubRowStyle = () => {
@@ -23,9 +23,20 @@ const TableCell = (props) => {
             return undefined;
         }
         // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        // 16 = initial_cell_padding, 35 = 27 + 8 = expander_width + margin
+        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
+        let cellPadding = 16;
+        let expanderMargin = 8;
+        if (density === 'condensed') {
+            cellPadding = 12;
+            expanderMargin = 4;
+        }
+        else if (density === 'extra-condensed') {
+            cellPadding = 8;
+            expanderMargin = 4;
+        }
+        const multiplier = 26 + expanderMargin; // 26 = expander width
         return {
-            paddingLeft: 16 + (cell.row.depth + (cell.row.canExpand ? 0 : 1)) * 35,
+            paddingLeft: cellPadding + dynamicMargin * multiplier,
         };
     };
     const cellElementProps = cell.getCellProps({
@@ -43,7 +54,7 @@ const TableCell = (props) => {
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
     const cellContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (react_1.default.createElement(SubRowExpander_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell })),
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (react_1.default.createElement(SubRowExpander_1.SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,

package/cjs/core/Table/TableRowMemoized.d.ts

@@ -25,6 +25,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -45,4 +46,5 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;

package/cjs/core/Table/TableRowMemoized.js

@@ -20,7 +20,7 @@ const TableCell_1 = require("./TableCell");
  */
 const TableRow = (props) => {
     var _a;
-    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, } = props;
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
     const onIntersect = react_1.default.useCallback(() => {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
@@ -62,7 +62,7 @@ const TableRow = (props) => {
                 (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
             } }, row.cells.map((cell, index) => {
-            return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
+            return (react_1.default.createElement(TableCell_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (react_1.default.createElement(utils_1.WithCSSTransition, { in: row.isExpanded },
             react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
@@ -104,5 +104,6 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, (prevProp, nex
         prevProp.state.sticky.isScrolledToLeft ===
             nextProp.state.sticky.isScrolledToLeft &&
         prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight;
+            nextProp.state.sticky.isScrolledToRight &&
+        prevProp.density === nextProp.density;
 });

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

@@ -16,6 +16,7 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns whether row checkbox should be disabled. */
     isDisabled?: ((rowData: T) => boolean) | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => {
     id: string;
     disableResizing: boolean;

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

@@ -25,15 +25,16 @@ exports.SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 const SelectionColumn = (props = {}) => {
-    const { isDisabled } = props;
+    const { isDisabled, density } = props;
+    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
     return {
         id: exports.SELECTION_CELL_ID,
         disableResizing: true,
         disableGroupBy: true,
         disableReordering: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
+        minWidth: densityWidth,
+        width: densityWidth,
+        maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {

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

@@ -1,2 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined, density?: 'default' | 'condensed' | 'extra-condensed') => (hooks: Hooks<T>) => void;

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

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectionCell = void 0;
 const columns_1 = require("../columns");
-const useSelectionCell = (isSelectable, selectionMode, isRowDisabled) => (hooks) => {
+const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
     if (!isSelectable) {
         return;
     }
     hooks.allColumns.push((columns) => selectionMode === 'single' ||
         columns.find((c) => c.id === columns_1.SELECTION_CELL_ID)
         ? columns
-        : [(0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled }), ...columns]);
+        : [
+            (0, columns_1.SelectionColumn)({ isDisabled: isRowDisabled, density: density }),
+            ...columns,
+        ]);
 };
 exports.useSelectionCell = useSelectionCell;

package/esm/core/Table/SubRowExpander.d.ts

@@ -5,6 +5,7 @@ export declare type SubRowExpanderProps<T extends Record<string, unknown>> = {
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
     isDisabled: boolean;
     cellProps: CellProps<T>;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const SubRowExpander: <T extends Record<string, unknown>>(props: SubRowExpanderProps<T>) => JSX.Element;
 export default SubRowExpander;

package/esm/core/Table/SubRowExpander.js

@@ -6,8 +6,10 @@ import React from 'react';
 import { SvgChevronRight } from '../utils';
 import { IconButton } from '../Buttons';
 export const SubRowExpander = (props) => {
-    const { cell, isDisabled, cellProps, expanderCell } = props;
-    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
+    const { cell, isDisabled, cellProps, expanderCell, density } = props;
+    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { style: {
+            marginRight: density === 'default' || density === undefined ? 8 : 4,
+        }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: (e) => {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
         }, disabled: isDisabled }, React.createElement(SvgChevronRight, { style: {

package/esm/core/Table/Table.js

@@ -198,7 +198,7 @@ export const Table = (props) => {
         getSubRows,
         initialState: { pageSize, ...props.initialState },
         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);
+    }, useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useGlobalFilter, useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled, density), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
     const { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter, } = instance;
     let headerGroups = _headerGroups;
     if (columns.length === 1 && 'columns' in columns[0]) {
@@ -336,7 +336,7 @@ export const Table = (props) => {
     const getPreparedRow = React.useCallback((index) => {
         const 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: bodyRef.current, 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), density: density }));
     }, [
         page,
         prepareRow,
@@ -351,6 +351,7 @@ export const Table = (props) => {
         expanderCell,
         enableVirtualization,
         tableRowRef,
+        density,
     ]);
     const virtualizedItemRenderer = React.useCallback((index) => getPreparedRow(index), [getPreparedRow]);
     const updateStickyState = () => {

package/esm/core/Table/TableCell.d.ts

@@ -7,6 +7,7 @@ export declare type TableCellProps<T extends Record<string, unknown>> = {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;
+    density?: 'default' | 'condensed' | 'extra-condensed';
 };
 export declare const TableCell: <T extends Record<string, unknown>>(props: TableCellProps<T>) => JSX.Element;
 export default TableCell;

package/esm/core/Table/TableCell.js

@@ -9,7 +9,7 @@ import { SubRowExpander } from './SubRowExpander';
 import { SELECTION_CELL_ID } from './columns';
 import { DefaultCell } from './cells';
 export const TableCell = (props) => {
-    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, } = props;
+    const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
         cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
     const getSubRowStyle = () => {
@@ -17,9 +17,20 @@ export const TableCell = (props) => {
             return undefined;
         }
         // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        // 16 = initial_cell_padding, 35 = 27 + 8 = expander_width + margin
+        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
+        let cellPadding = 16;
+        let expanderMargin = 8;
+        if (density === 'condensed') {
+            cellPadding = 12;
+            expanderMargin = 4;
+        }
+        else if (density === 'extra-condensed') {
+            cellPadding = 8;
+            expanderMargin = 4;
+        }
+        const multiplier = 26 + expanderMargin; // 26 = expander width
         return {
-            paddingLeft: 16 + (cell.row.depth + (cell.row.canExpand ? 0 : 1)) * 35,
+            paddingLeft: cellPadding + dynamicMargin * multiplier,
         };
     };
     const cellElementProps = cell.getCellProps({
@@ -37,7 +48,7 @@ export const TableCell = (props) => {
         ...{ cell, row: cell.row, value: cell.value, column: cell.column },
     };
     const cellContent = (React.createElement(React.Fragment, null,
-        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell })),
+        tableHasSubRows && hasSubRowExpander && cell.row.canExpand && (React.createElement(SubRowExpander, { cell: cell, isDisabled: isDisabled, cellProps: cellProps, expanderCell: expanderCell, density: density })),
         cell.render('Cell')));
     const cellRendererProps = {
         cellElementProps,

package/esm/core/Table/TableRowMemoized.d.ts

@@ -25,6 +25,7 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -45,4 +46,5 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
     bodyRef: HTMLDivElement | null;
     tableRowRef?: React.Ref<HTMLDivElement> | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => JSX.Element;

package/esm/core/Table/TableRowMemoized.js

@@ -14,7 +14,7 @@ import { TableCell } from './TableCell';
  */
 export const TableRow = (props) => {
     var _a;
-    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, } = props;
+    const { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, bodyRef, tableRowRef, density, } = props;
     const onIntersect = React.useCallback(() => {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
@@ -56,7 +56,7 @@ export const TableRow = (props) => {
                 (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
             } }, row.cells.map((cell, index) => {
-            return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
+            return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
             React.createElement("div", { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
@@ -97,5 +97,6 @@ export const TableRowMemoized = React.memo(TableRow, (prevProp, nextProp) => {
         prevProp.state.sticky.isScrolledToLeft ===
             nextProp.state.sticky.isScrolledToLeft &&
         prevProp.state.sticky.isScrolledToRight ===
-            nextProp.state.sticky.isScrolledToRight;
+            nextProp.state.sticky.isScrolledToRight &&
+        prevProp.density === nextProp.density;
 });

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

@@ -16,6 +16,7 @@ export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 export declare const SelectionColumn: <T extends Record<string, unknown>>(props?: {
     /** Function that returns whether row checkbox should be disabled. */
     isDisabled?: ((rowData: T) => boolean) | undefined;
+    density?: "default" | "condensed" | "extra-condensed" | undefined;
 }) => {
     id: string;
     disableResizing: boolean;

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

@@ -19,15 +19,16 @@ export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
  * ], [isCheckboxDisabled]);
  */
 export const SelectionColumn = (props = {}) => {
-    const { isDisabled } = props;
+    const { isDisabled, density } = props;
+    const densityWidth = density === 'condensed' ? 42 : density === 'extra-condensed' ? 34 : 48;
     return {
         id: SELECTION_CELL_ID,
         disableResizing: true,
         disableGroupBy: true,
         disableReordering: true,
-        minWidth: 48,
-        width: 48,
-        maxWidth: 48,
+        minWidth: densityWidth,
+        width: densityWidth,
+        maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
         Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {

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

@@ -1,2 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;
+export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, selectionMode: 'multi' | 'single', isRowDisabled?: ((rowData: T) => boolean) | undefined, density?: 'default' | 'condensed' | 'extra-condensed') => (hooks: Hooks<T>) => void;

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

@@ -1,10 +1,13 @@
 import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
-export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled) => (hooks) => {
+export const useSelectionCell = (isSelectable, selectionMode, isRowDisabled, density = 'default') => (hooks) => {
     if (!isSelectable) {
         return;
     }
     hooks.allColumns.push((columns) => selectionMode === 'single' ||
         columns.find((c) => c.id === SELECTION_CELL_ID)
         ? columns
-        : [SelectionColumn({ isDisabled: isRowDisabled }), ...columns]);
+        : [
+            SelectionColumn({ isDisabled: isRowDisabled, density: density }),
+            ...columns,
+        ]);
 };

package/package.json

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