@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/Table/SubRowExpander.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { SvgChevronRight } from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+export const SubRowExpander = (props)=>{
+    let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
+    return React.createElement(React.Fragment, null, expanderCell ? expanderCell(cellProps) : React.createElement(IconButton, {
+        "aria-label": "Toggle sub row",
+        "aria-expanded": cell.row.isExpanded ? 'true' : 'false',
+        style: {
+            marginInlineEnd: 'default' === density || void 0 === density ? 8 : 4
+        },
+        className: "iui-table-row-expander",
+        styleType: "borderless",
+        size: "small",
+        onClick: (e)=>{
+            e.stopPropagation();
+            cell.row.toggleRowExpanded();
+        },
+        disabled: isDisabled,
+        ...rest
+    }, React.createElement(SvgChevronRight, {
+        style: {
+            transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0
+        }
+    })));
+};

package/DEV-esm/core/Table/Table.js

@@ -0,0 +1,518 @@
+import * as 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/ProgressRadial.js';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, useLatestRef, useVirtualScroll } from '../../utils/index.js';
+import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
+import { TableRowMemoized } from './TableRowMemoized.js';
+import { FilterToggle } from './filters/index.js';
+import { customFilterFunctions } from './filters/customFilterFunctions.js';
+import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useScrollToRow, useStickyColumns } from './hooks/index.js';
+import { onExpandHandler, onFilterHandler, onToggleHandler, onShiftSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart } from './actionHandlers/index.js';
+import { SELECTION_CELL_ID } from './columns/index.js';
+let singleRowSelectedAction = 'singleRowSelected';
+let shiftRowSelectedAction = 'shiftRowSelected';
+export const tableResizeStartAction = 'tableResizeStart';
+let tableResizeEndAction = 'tableResizeEnd';
+let COLUMN_MIN_WIDTHS = {
+    default: 72,
+    withExpander: 108
+};
+let logWarning = createWarningLogger();
+let flattenColumns = (columns)=>{
+    let flatColumns = [];
+    columns.forEach((column)=>{
+        flatColumns.push(column);
+        if ('columns' in column) flatColumns.push(...flattenColumns(column.columns));
+    });
+    return flatColumns;
+};
+export const Table = (props)=>{
+    let { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, headerWrapperProps, headerProps, bodyProps, emptyTableContentProps, ...rest } = props;
+    useGlobals();
+    let ownerDocument = React.useRef();
+    let defaultColumn = React.useMemo(()=>({
+            maxWidth: 0,
+            minWidth: 0,
+            width: 0
+        }), []);
+    let rowHeight = React.useMemo(()=>{
+        if ('condensed' === density) return 50;
+        if ('extra-condensed' === density) return 38;
+        return 62;
+    }, [
+        density
+    ]);
+    let onBottomReachedRef = useLatestRef(onBottomReached);
+    let onRowInViewportRef = useLatestRef(onRowInViewport);
+    let hasManualSelectionColumn = React.useMemo(()=>{
+        let flatColumns = flattenColumns(columns);
+        return flatColumns.some((column)=>column.id === SELECTION_CELL_ID);
+    }, [
+        columns
+    ]);
+    let disableUserSelect = React.useCallback((e)=>{
+        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = 'none');
+    }, []);
+    let enableUserSelect = React.useCallback((e)=>{
+        if ('Shift' === e.key) ownerDocument.current && (ownerDocument.current.documentElement.style.userSelect = '');
+    }, []);
+    React.useEffect(()=>{
+        if (!isSelectable || 'multi' !== selectionMode) return;
+        let ownerDoc = ownerDocument.current;
+        ownerDoc?.addEventListener('keydown', disableUserSelect);
+        ownerDoc?.addEventListener('keyup', enableUserSelect);
+        return ()=>{
+            ownerDoc?.removeEventListener('keydown', disableUserSelect);
+            ownerDoc?.removeEventListener('keyup', enableUserSelect);
+        };
+    }, [
+        isSelectable,
+        selectionMode,
+        ownerDocument,
+        disableUserSelect,
+        enableUserSelect
+    ]);
+    let previousFilter = React.useRef([]);
+    let currentFilter = React.useRef(previousFilter.current);
+    let tableStateReducer = React.useCallback((newState, action, previousState, instance)=>{
+        switch(action.type){
+            case TableActions.toggleSortBy:
+                onSort?.(newState);
+                break;
+            case TableActions.setFilter:
+                currentFilter.current = onFilterHandler(newState, action, previousState, currentFilter.current, instance);
+                break;
+            case TableActions.toggleRowExpanded:
+            case TableActions.toggleAllRowsExpanded:
+                onExpandHandler(newState, instance, onExpand);
+                break;
+            case singleRowSelectedAction:
+                newState = onSingleSelectHandler(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case shiftRowSelectedAction:
+                newState = onShiftSelectHandler(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case TableActions.toggleRowSelected:
+            case TableActions.toggleAllRowsSelected:
+            case TableActions.toggleAllPageRowsSelected:
+                onToggleHandler(newState, action, instance, onSelect, hasManualSelectionColumn ? void 0 : isRowDisabled);
+                break;
+            case tableResizeStartAction:
+                newState = onTableResizeStart(newState);
+                break;
+            case tableResizeEndAction:
+                newState = onTableResizeEnd(newState, action);
+                break;
+            default:
+                break;
+        }
+        return stateReducer ? stateReducer(newState, action, previousState, instance) : newState;
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onSelect,
+        onSort,
+        stateReducer
+    ]);
+    let filterTypes = React.useMemo(()=>({
+            ...customFilterFunctions,
+            ...filterFunctions
+        }), [
+        filterFunctions
+    ]);
+    let hasAnySubRows = React.useMemo(()=>data.some((item, index)=>getSubRows ? getSubRows(item, index) : item.subRows), [
+        data,
+        getSubRows
+    ]);
+    let instance = useTable({
+        manualPagination: !paginatorRenderer,
+        paginateExpandedRows: false,
+        ...props,
+        columns,
+        defaultColumn,
+        disableSortBy: !isSortable,
+        stateReducer: tableStateReducer,
+        filterTypes,
+        selectSubRows,
+        data,
+        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, density), useColumnOrder, useColumnDragAndDrop(enableColumnReordering), useStickyColumns);
+    let { getTableProps, rows, headerGroups: _headerGroups, getTableBodyProps, prepareRow, state, allColumns, dispatch, page, gotoPage, setPageSize, flatHeaders, visibleColumns, setGlobalFilter } = instance;
+    let headerGroups = _headerGroups;
+    if (1 === columns.length && 'columns' in columns[0]) {
+        headerGroups = _headerGroups.slice(1);
+        logWarning("Table's `columns` prop should not have a top-level `Header` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes");
+    }
+    let ariaDataAttributes = Object.entries(rest).reduce((result, [key, value])=>{
+        if (key.startsWith('data-') || key.startsWith('aria-')) result[key] = value;
+        return result;
+    }, {});
+    let areFiltersSet = allColumns.some((column)=>null != column.filterValue && '' !== column.filterValue) || !!globalFilterValue;
+    let showFilterButton = (column)=>(0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
+    let showSortButton = (column)=>0 !== data.length && column.canSort;
+    let onRowClickHandler = React.useCallback((event, row)=>{
+        let isDisabled = isRowDisabled?.(row.original);
+        let ctrlPressed = event.ctrlKey || event.metaKey;
+        if (!isDisabled) onRowClick?.(event, row);
+        if (isSelectable && !isDisabled && selectRowOnClick && !event.isDefaultPrevented()) {
+            if ('multi' === selectionMode && event.shiftKey) dispatch({
+                type: shiftRowSelectedAction,
+                id: row.id,
+                ctrlPressed: ctrlPressed
+            });
+            else if (row.isSelected || 'single' !== selectionMode && ctrlPressed) row.toggleRowSelected(!row.isSelected);
+            else dispatch({
+                type: singleRowSelectedAction,
+                id: row.id
+            });
+        }
+    }, [
+        isRowDisabled,
+        isSelectable,
+        selectRowOnClick,
+        selectionMode,
+        dispatch,
+        onRowClick
+    ]);
+    React.useEffect(()=>{
+        setGlobalFilter(globalFilterValue);
+    }, [
+        globalFilterValue,
+        setGlobalFilter
+    ]);
+    React.useEffect(()=>{
+        setPageSize(pageSize);
+    }, [
+        pageSize,
+        setPageSize
+    ]);
+    React.useEffect(()=>{
+        if (previousFilter.current !== currentFilter.current) {
+            previousFilter.current = currentFilter.current;
+            onFilter?.(currentFilter.current, state, instance.filteredRows);
+        }
+    }, [
+        state,
+        instance.filteredRows,
+        onFilter
+    ]);
+    let lastPassedColumns = React.useRef([]);
+    React.useEffect(()=>{
+        if (lastPassedColumns.current.length > 0 && JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) instance.setColumnOrder([]);
+        lastPassedColumns.current = columns;
+    }, [
+        columns,
+        instance
+    ]);
+    let paginatorRendererProps = React.useMemo(()=>({
+            currentPage: state.pageIndex,
+            pageSize: state.pageSize,
+            totalRowsCount: rows.length,
+            size: 'default' !== density ? 'small' : 'default',
+            isLoading,
+            onPageChange: gotoPage,
+            onPageSizeChange: setPageSize,
+            totalSelectedRowsCount: 'single' === selectionMode ? 0 : instance.selectedFlatRows.length
+        }), [
+        density,
+        gotoPage,
+        isLoading,
+        rows.length,
+        setPageSize,
+        state.pageIndex,
+        state.pageSize,
+        instance.selectedFlatRows,
+        selectionMode
+    ]);
+    let tableRef = React.useRef(null);
+    let { scrollToIndex, tableRowRef } = useScrollToRow({
+        ...props,
+        page
+    });
+    let columnRefs = React.useRef({});
+    let previousTableWidth = React.useRef(0);
+    let onTableResize = React.useCallback(({ width })=>{
+        if (!isResizable) return;
+        instance.tableWidth = width;
+        if (width === previousTableWidth.current) return;
+        previousTableWidth.current = width;
+        flatHeaders.forEach((header)=>{
+            if (columnRefs.current[header.id]) header.resizeWidth = columnRefs.current[header.id].getBoundingClientRect().width;
+        });
+        if (0 === Object.keys(state.columnResizing.columnWidths).length) return;
+        dispatch({
+            type: tableResizeStartAction
+        });
+    }, [
+        dispatch,
+        state.columnResizing.columnWidths,
+        flatHeaders,
+        instance,
+        isResizable
+    ]);
+    let [resizeRef] = useResizeObserver(onTableResize);
+    useLayoutEffect(()=>{
+        if (state.isTableResizing) {
+            let newColumnWidths = {};
+            flatHeaders.forEach((column)=>{
+                if (columnRefs.current[column.id]) newColumnWidths[column.id] = columnRefs.current[column.id].getBoundingClientRect().width;
+            });
+            dispatch({
+                type: tableResizeEndAction,
+                columnWidths: newColumnWidths
+            });
+        }
+    });
+    let virtualizer = useVirtualScroll({
+        count: page.length,
+        getScrollElement: ()=>tableRef.current,
+        estimateSize: ()=>rowHeight,
+        getItemKey: (index)=>page[index].id,
+        overscan: 1
+    });
+    useLayoutEffect(()=>{
+        if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex, {
+            align: 'center'
+        });
+    }, [
+        virtualizer,
+        scrollToIndex
+    ]);
+    let getPreparedRow = React.useCallback((index, virtualItem, virtualizer)=>{
+        let 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?.(row.original),
+            tableHasSubRows: hasAnySubRows,
+            tableInstance: instance,
+            expanderCell: expanderCell,
+            scrollContainerRef: tableRef.current,
+            tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+            density: density,
+            virtualItem: virtualItem,
+            virtualizer: virtualizer
+        });
+    }, [
+        page,
+        prepareRow,
+        rowProps,
+        intersectionMargin,
+        state,
+        onRowClickHandler,
+        subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        enableVirtualization,
+        tableRowRef,
+        density,
+        onBottomReachedRef,
+        onRowInViewportRef
+    ]);
+    let updateStickyState = ()=>{
+        if (!tableRef.current || flatHeaders.every((header)=>!header.sticky)) return;
+        0 !== tableRef.current.scrollLeft ? dispatch({
+            type: TableActions.setScrolledRight,
+            value: true
+        }) : dispatch({
+            type: TableActions.setScrolledRight,
+            value: false
+        });
+        tableRef.current.scrollLeft !== tableRef.current.scrollWidth - tableRef.current.clientWidth ? dispatch({
+            type: TableActions.setScrolledLeft,
+            value: true
+        }) : dispatch({
+            type: TableActions.setScrolledLeft,
+            value: false
+        });
+    };
+    React.useEffect(()=>{
+        updateStickyState();
+    }, []);
+    let isHeaderDirectClick = React.useRef(false);
+    let columnResizeRef = React.useCallback((el, column)=>{
+        if (el) {
+            columnRefs.current[column.id] = el;
+            column.resizeWidth = el.getBoundingClientRect().width;
+        }
+    }, []);
+    return React.createElement(TableColumnsContext.Provider, {
+        value: columns
+    }, React.createElement(Box, {
+        ref: useMergedRefs(tableRef, resizeRef, React.useCallback((element)=>{
+            ownerDocument.current = element?.ownerDocument;
+        }, [])),
+        id: id,
+        ...getTableProps({
+            className: cx('iui-table', className),
+            style: {
+                minWidth: 0,
+                ...style
+            }
+        }),
+        onScroll: ()=>updateStickyState(),
+        "data-iui-size": 'default' === density ? void 0 : density,
+        ...ariaDataAttributes
+    }, headerGroups.map((headerGroup)=>{
+        headerGroup.headers = headerGroup.headers.filter((header)=>!header.id.includes('iui-table-checkbox-selector_placeholder') && !header.id.includes('iui-table-expander_placeholder'));
+        let headerGroupProps = headerGroup.getHeaderGroupProps({
+            className: 'iui-table-row'
+        });
+        return React.createElement(Box, {
+            as: "div",
+            key: headerGroupProps.key,
+            ...headerWrapperProps,
+            className: cx('iui-table-header-wrapper', headerWrapperProps?.className)
+        }, React.createElement(Box, {
+            as: "div",
+            ...headerProps,
+            className: cx('iui-table-header', headerProps?.className)
+        }, React.createElement(Box, headerGroupProps, headerGroup.headers.map((column, index)=>{
+            let { onClick, ...restSortProps } = column.getSortByToggleProps();
+            let columnHasExpanders = hasAnySubRows && index === headerGroup.headers.findIndex((c)=>c.id !== SELECTION_CELL_ID);
+            if ([
+                void 0,
+                0
+            ].includes(column.minWidth)) column.minWidth = columnHasExpanders ? COLUMN_MIN_WIDTHS.withExpander : COLUMN_MIN_WIDTHS.default;
+            let columnProps = column.getHeaderProps({
+                ...restSortProps,
+                className: cx('iui-table-cell', {
+                    'iui-actionable': column.canSort,
+                    'iui-sorted': column.isSorted,
+                    'iui-table-cell-sticky': !!column.sticky
+                }, column.columnClassName),
+                style: {
+                    ...getCellStyle(column, !!state.isTableResizing),
+                    ...columnHasExpanders && getSubRowStyle({
+                        density
+                    }),
+                    ...getStickyStyle(column, visibleColumns),
+                    flexWrap: 'wrap',
+                    columnGap: 'var(--iui-size-xs)'
+                }
+            });
+            return React.createElement(Box, {
+                ...columnProps,
+                ...column.getDragAndDropProps(),
+                key: columnProps.key,
+                title: void 0,
+                ref: (el)=>{
+                    columnResizeRef(el, column);
+                },
+                onMouseDown: ()=>{
+                    isHeaderDirectClick.current = true;
+                },
+                onClick: (e)=>{
+                    if (isHeaderDirectClick.current) {
+                        onClick?.(e);
+                        isHeaderDirectClick.current = false;
+                    }
+                },
+                tabIndex: showSortButton(column) ? 0 : void 0,
+                onKeyDown: (e)=>{
+                    if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
+                }
+            }, React.createElement(React.Fragment, null, React.createElement(ShadowRoot, null, 'string' == typeof column.Header ? React.createElement(LineClamp, null, React.createElement("slot", null)) : React.createElement("slot", null), React.createElement("slot", {
+                name: "actions"
+            }), React.createElement("slot", {
+                name: "resizers"
+            }), React.createElement("slot", {
+                name: "shadows"
+            })), column.render('Header'), (showFilterButton(column) || showSortButton(column)) && React.createElement(Box, {
+                className: "iui-table-header-actions-container",
+                onKeyDown: (e)=>e.stopPropagation(),
+                slot: "actions"
+            }, showFilterButton(column) && React.createElement(FilterToggle, {
+                column: column
+            }), showSortButton(column) && React.createElement(Box, {
+                className: "iui-table-cell-end-icon"
+            }, column.isSortedDesc || !column.isSorted && column.sortDescFirst ? React.createElement(SvgSortDown, {
+                className: "iui-table-sort",
+                "aria-hidden": true
+            }) : React.createElement(SvgSortUp, {
+                className: "iui-table-sort",
+                "aria-hidden": true
+            }))), isResizable && column.isResizerVisible && (index !== headerGroup.headers.length - 1 || 'expand' === columnResizeMode) && React.createElement(Box, {
+                ...column.getResizerProps(),
+                className: "iui-table-resizer",
+                slot: "resizers"
+            }, React.createElement(Box, {
+                className: "iui-table-resizer-bar"
+            })), enableColumnReordering && !column.disableReordering && React.createElement(Box, {
+                className: "iui-table-reorder-bar",
+                slot: "resizers"
+            }), 'left' === column.sticky && state.sticky.isScrolledToRight && React.createElement(Box, {
+                className: "iui-table-cell-shadow-right",
+                slot: "shadows"
+            }), 'right' === column.sticky && state.sticky.isScrolledToLeft && React.createElement(Box, {
+                className: "iui-table-cell-shadow-left",
+                slot: "shadows"
+            })));
+        }))));
+    }), React.createElement(Box, {
+        as: "div",
+        ...bodyProps,
+        ...getTableBodyProps({
+            className: cx('iui-table-body', {
+                'iui-zebra-striping': 'zebra-rows' === styleType
+            }, bodyProps?.className),
+            style: {
+                outline: 0
+            }
+        }),
+        tabIndex: -1,
+        "aria-multiselectable": isSelectable && 'multi' === selectionMode || void 0
+    }, React.createElement(ShadowRoot, {
+        css: `
+              div,
+              slot {
+                border-radius: inherit;
+              }
+            `
+    }, enableVirtualization ? React.createElement("div", {
+        style: {
+            minBlockSize: virtualizer.getTotalSize(),
+            minInlineSize: '100%',
+            contain: 'strict'
+        }
+    }, React.createElement("slot", null)) : React.createElement("slot", null)), 0 !== data.length && React.createElement(React.Fragment, null, enableVirtualization ? virtualizer.getVirtualItems().map((virtualItem)=>getPreparedRow(virtualItem.index, virtualItem, virtualizer)) : page.map((_, index)=>getPreparedRow(index))), isLoading && 0 === data.length && React.createElement(Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: cx('iui-table-empty', emptyTableContentProps?.className)
+    }, React.createElement(ProgressRadial, {
+        indeterminate: true
+    })), !isLoading && 0 === data.length && !areFiltersSet && React.createElement(Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: cx('iui-table-empty', emptyTableContentProps?.className)
+    }, React.createElement("div", null, emptyTableContent)), !isLoading && (0 === data.length || 0 === rows.length) && areFiltersSet && React.createElement(Box, {
+        as: "div",
+        ...emptyTableContentProps,
+        className: cx('iui-table-empty', emptyTableContentProps?.className)
+    }, React.createElement("div", null, emptyFilteredTableContent))), isLoading && 0 !== data.length && React.createElement(Box, {
+        className: "iui-table-body-extra",
+        "data-iui-loading": "true"
+    }, React.createElement(ProgressRadial, {
+        indeterminate: true,
+        size: "small"
+    })), paginatorRenderer?.(paginatorRendererProps)));
+};
+Table.displayName = 'Table';

package/DEV-esm/core/Table/TableCell.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
+import { SubRowExpander } from './SubRowExpander.js';
+import { SELECTION_CELL_ID } from './columns/index.js';
+import { DefaultCell } from './cells/index.js';
+import { Box } from '../../utils/index.js';
+export const TableCell = (props)=>{
+    let { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density } = props;
+    let hasSubRowExpander = cellIndex === cell.row.cells.findIndex((c)=>c.column.id !== SELECTION_CELL_ID);
+    let cellElementProps = cell.getCellProps({
+        className: cx('iui-table-cell', cell.column.cellClassName, {
+            'iui-table-cell-sticky': !!cell.column.sticky
+        }),
+        style: {
+            ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
+            ...tableHasSubRows && hasSubRowExpander && getSubRowStyle({
+                density,
+                depth: cell.row.depth + (cell.row.canExpand ? 0 : 1)
+            }),
+            ...getStickyStyle(cell.column, tableInstance.visibleColumns)
+        }
+    });
+    let cellProps = {
+        ...tableInstance,
+        cell,
+        row: cell.row,
+        value: cell.value,
+        column: cell.column
+    };
+    let cellContent = React.createElement(React.Fragment, null, tableHasSubRows && hasSubRowExpander && cell.row.canExpand && React.createElement(SubRowExpander, {
+        cell: cell,
+        isDisabled: isDisabled,
+        cellProps: cellProps,
+        expanderCell: expanderCell,
+        density: density,
+        slot: "start"
+    }), cell.render('Cell'));
+    let cellRendererProps = {
+        cellElementProps,
+        cellProps,
+        children: React.createElement(React.Fragment, null, cellContent, 'left' === cell.column.sticky && tableInstance.state.sticky.isScrolledToRight && React.createElement(Box, {
+            className: "iui-table-cell-shadow-right",
+            slot: "shadows"
+        }), 'right' === cell.column.sticky && tableInstance.state.sticky.isScrolledToLeft && React.createElement(Box, {
+            className: "iui-table-cell-shadow-left",
+            slot: "shadows"
+        }))
+    };
+    return React.createElement(React.Fragment, null, cell.column.cellRenderer ? cell.column.cellRenderer({
+        ...cellRendererProps,
+        isDisabled: ()=>isDisabled
+    }) : React.createElement(DefaultCell, {
+        ...cellRendererProps,
+        isDisabled: ()=>isDisabled
+    }));
+};