@itwin/components-react 3.6.0-dev.34 → 3.6.0-dev.36

package/lib/esm/components-react/table/component/Table.js

@@ -1,1308 +1,1308 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/* eslint-disable deprecation/deprecation */
-/** @packageDocumentation
- * @module Table
- */
-import "./Table.scss";
-import "../columnfiltering/ColumnFiltering.scss";
-import classnames from "classnames";
-import classnamesDedupe from "classnames/dedupe";
-import { memoize } from "lodash";
-import * as React from "react";
-import ReactDataGrid from "react-data-grid";
-import { DisposableList, Guid } from "@itwin/core-bentley";
-import { PropertyValueFormat } from "@itwin/appui-abstract";
-import { Dialog, ElementResizeObserver, isNavigationKey, ItemKeyboardNavigator, LocalStateStorage, Orientation, SortDirection, Timer, UiStateStorageStatus, } from "@itwin/core-react";
-import { SelectionHandler, } from "../../common/selection/SelectionHandler";
-import { SelectionMode } from "../../common/selection/SelectionModes";
-import { ShowHideMenu } from "../../common/showhide/ShowHideMenu";
-import { TypeConverterManager } from "../../converters/TypeConverterManager";
-import { TableRowStyleProvider } from "../../properties/ItemStyle";
-import { PropertyValueRendererManager } from "../../properties/ValueRendererManager";
-import { FilterCompositionLogicalOperator } from "../columnfiltering/ColumnFiltering";
-import { MultiSelectFilter } from "../columnfiltering/data-grid-addons/MultiSelectFilter";
-import { NumericFilter } from "../columnfiltering/data-grid-addons/NumericFilter";
-import { SingleSelectFilter } from "../columnfiltering/data-grid-addons/SingleSelectFilter";
-import { DataGridFilterParser } from "../columnfiltering/DataGridFilterParser";
-import { MultiValueFilter } from "../columnfiltering/multi-value-filter/MultiValueFilter";
-import { TableFilterDescriptorCollection } from "../columnfiltering/TableFilterDescriptorCollection";
-import { FilterRenderer } from "../TableDataProvider";
-import { DragDropHeaderCell } from "./DragDropHeaderCell";
-import { TableCell, TableCellContent, TableIconCellContent } from "./TableCell";
-import { TableColumn } from "./TableColumn";
-// cspell:ignore Overscan columnfiltering Dedupe popout
-const TABLE_ROW_HEIGHT = 27;
-const TABLE_FILTER_ROW_HEIGHT = 32;
-/**
- * Specifies table selection target.
- * @deprecated Use the Table component in @itwin/itwinui-react instead, which does not use this enum.
- * @public
- */
-export var TableSelectionTarget;
-(function (TableSelectionTarget) {
-    TableSelectionTarget[TableSelectionTarget["Row"] = 0] = "Row";
-    TableSelectionTarget[TableSelectionTarget["Cell"] = 1] = "Cell";
-})(TableSelectionTarget || (TableSelectionTarget = {}));
-/** Scroll Direction */
-var SCROLL_DIRECTION;
-(function (SCROLL_DIRECTION) {
-    SCROLL_DIRECTION["UP"] = "upwards";
-    SCROLL_DIRECTION["DOWN"] = "downwards";
-    SCROLL_DIRECTION["LEFT"] = "left";
-    SCROLL_DIRECTION["RIGHT"] = "right";
-    SCROLL_DIRECTION["NONE"] = "none";
-})(SCROLL_DIRECTION || (SCROLL_DIRECTION = {}));
-const initialState = {
-    columns: [],
-    hiddenColumns: [],
-    rows: [],
-    rowsCount: 0,
-    cellEditorState: { active: false },
-    menuVisible: false,
-    menuX: 0,
-    menuY: 0,
-    gridContainer: null,
-};
-/** ReactDataGrid requires a class component for the RowRenderer because it sets a ref to it. */
-class TableRowRenderer extends React.Component {
-    render() {
-        const creatorFn = this.props.rowRendererCreator();
-        return creatorFn(this.props);
-    }
-}
-/**
- * Table React component that displays rows and columns in a grid along with a header
- * @deprecated Use the Table component in @itwin/itwinui-react instead, which does not use this class.
- * @public
- */
-export class Table extends React.Component {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._pageAmount = 100;
-        this._disposableListeners = new DisposableList();
-        this._isMounted = false;
-        this._currentUpdate = 0 /* None */;
-        this._pendingUpdate = 0 /* None */;
-        this._rowLoadGuid = Guid.createValue();
-        this._selectedRowIndices = new Set();
-        this._selectedCellKeys = new Map(); // column keys -> rowIndices
-        this._pressedItemSelected = false;
-        this._tableRef = React.createRef();
-        this._gridRef = React.createRef();
-        this._gridContainerRef = React.createRef();
-        this._filterRowShown = false;
-        this._topRowIndex = 0;
-        this._pokeScrollTimer = new Timer(100);
-        /** @internal */
-        this.state = initialState;
-        this._onRowsSelected = (rowIndices, replace) => {
-            if (this.props.onRowsSelected)
-                this.props.onRowsSelected(this.createRowIterator(rowIndices), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
-        };
-        this._onRowsDeselected = (rowIndices) => {
-            if (this.props.onRowsDeselected)
-                this.props.onRowsDeselected(this.createRowIterator(rowIndices)); // eslint-disable-line @typescript-eslint/no-floating-promises
-        };
-        this._onCellsSelected = (cellKeys, replace) => {
-            if (this.props.onCellsSelected)
-                this.props.onCellsSelected(this.createCellIterator(cellKeys), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
-        };
-        this._onCellsDeselected = (cellKeys) => {
-            if (this.props.onCellsDeselected)
-                this.props.onCellsDeselected(this.createCellIterator(cellKeys)); // eslint-disable-line @typescript-eslint/no-floating-promises
-        };
-        this._onColumnsChanged = async () => {
-            await this.updateColumns();
-            this._cellItemSelectionHandlers = undefined;
-        };
-        // Workaround for react-data-grid bug that shows blank grid when updating after grid has been scrolled.
-        // Force a re-render by scrolling up 1 then down 1
-        this._pokeScrollAfterUpdate = () => {
-            // istanbul ignore else
-            if (this._gridRef.current && this._topRowIndex !== 0) {
-                const grid = this._gridRef.current;
-                // istanbul ignore else
-                if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
-                    const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
-                    // Scroll up 1
-                    let top = TABLE_ROW_HEIGHT * this._topRowIndex - 1;
-                    gridCanvas.scrollTop = top;
-                    // Scroll back down
-                    top = TABLE_ROW_HEIGHT * this._topRowIndex;
-                    gridCanvas.scrollTop = top;
-                }
-            }
-        };
-        this._queuePokeScroll = () => {
-            this._unsetPokeScrollTimeout();
-            this._pokeScrollTimer.setOnExecute(() => { this._pokeScrollAfterUpdate(); });
-            this._pokeScrollTimer.start();
-        };
-        this._unsetPokeScrollTimeout = () => {
-            this._pokeScrollTimer.stop();
-        };
-        this._onRowsChanged = async () => {
-            await this.updateRows();
-            this._queuePokeScroll();
-        };
-        this._columnDescriptionToReactDataGridColumn = (columnDescription) => {
-            const isEditable = !!columnDescription.editable;
-            const column = {
-                key: columnDescription.key,
-                name: columnDescription.label,
-                icon: columnDescription.icon,
-                width: columnDescription.width,
-                resizable: !!columnDescription.resizable,
-                sortable: !!columnDescription.sortable,
-                draggable: !!this.props.reorderableColumns,
-                filterable: !!columnDescription.filterable,
-            };
-            column.events = {};
-            if (this.props.onCellContextMenu) {
-                column.events.onContextMenu = this.cellContextMenu.bind(this, column);
-            }
-            if (isEditable) {
-                column.events.onClick = this.cellEditOnClick.bind(this, column);
-            }
-            if (columnDescription.filterRenderer !== undefined) {
-                switch (columnDescription.filterRenderer) {
-                    case FilterRenderer.Numeric:
-                        column.filterRenderer = NumericFilter;
-                        break;
-                    case FilterRenderer.MultiSelect:
-                        column.filterRenderer = MultiSelectFilter;
-                        break;
-                    case FilterRenderer.MultiValue:
-                        column.filterRenderer = MultiValueFilter;
-                        break;
-                    case FilterRenderer.SingleSelect:
-                        column.filterRenderer = SingleSelectFilter;
-                        break;
-                    case FilterRenderer.Text:
-                        // column.filterRenderer is not set for the Text input filter
-                        break;
-                }
-            }
-            return column;
-        };
-        this._getCellItem = (row, columnKey) => {
-            return row.cells.find((cell) => cell.key === columnKey) || /* istanbul ignore next */ { key: columnKey };
-        };
-        this._rowComponentSelectionHandler = {
-            deselectAll: () => {
-                this._selectedRowIndices = new Set();
-                if (!this._pressedItemSelected) {
-                    this._deactivateCellEditor();
-                    this.forceUpdate();
-                }
-            },
-            selectBetween: (rowIndex1, rowIndex2) => {
-                const selections = [];
-                const lowerNumber = rowIndex1 < rowIndex2 ? rowIndex1 : rowIndex2;
-                const higherNumber = rowIndex1 > rowIndex2 ? rowIndex1 : rowIndex2;
-                for (let i = lowerNumber; i <= higherNumber; i++) {
-                    // istanbul ignore else
-                    if (!this._selectedRowIndices.has(i)) {
-                        selections.push(i);
-                        this._selectedRowIndices.add(i);
-                    }
-                }
-                this.forceUpdate();
-                return selections;
-            },
-            updateSelection: (selections, deselections) => {
-                for (const rowIndex of selections) {
-                    // istanbul ignore else
-                    if (!this._selectedRowIndices.has(rowIndex))
-                        this._selectedRowIndices.add(rowIndex);
-                }
-                for (const rowIndex of deselections) {
-                    // istanbul ignore else
-                    if (this._selectedRowIndices.has(rowIndex))
-                        this._selectedRowIndices.delete(rowIndex);
-                }
-                this.forceUpdate();
-            },
-            areEqual: (item1, item2) => item1 === item2,
-        };
-        this._cellComponentSelectionHandler = {
-            deselectAll: () => {
-                this._selectedCellKeys = new Map();
-                this.forceUpdate();
-            },
-            selectBetween: (item1, item2) => {
-                const selections = [];
-                const lowerIndex = item1.rowIndex < item2.rowIndex ? item1.rowIndex : item2.rowIndex;
-                const higherIndex = item1.rowIndex > item2.rowIndex ? item1.rowIndex : item2.rowIndex;
-                let secondItem;
-                let firstItemFound = false;
-                let secondItemFound = false;
-                for (let rowIndex = lowerIndex; rowIndex <= higherIndex; rowIndex++) {
-                    for (const column of this.state.columns) {
-                        if (!firstItemFound) {
-                            if (rowIndex === item1.rowIndex && column.key === item1.columnKey) {
-                                firstItemFound = true;
-                                secondItem = item2;
-                            }
-                            else {
-                                // istanbul ignore else
-                                if (rowIndex === item2.rowIndex && column.key === item2.columnKey) {
-                                    firstItemFound = true;
-                                    secondItem = item1;
-                                }
-                                else
-                                    continue;
-                            }
-                        }
-                        const cellKey = { rowIndex, columnKey: column.key };
-                        if (!this.isCellSelected(cellKey))
-                            selections.push(cellKey);
-                        if (rowIndex === secondItem.rowIndex && column.key === secondItem.columnKey) {
-                            secondItemFound = true;
-                            break;
-                        }
-                    }
-                    if (secondItemFound)
-                        break;
-                }
-                this.selectCells(selections);
-                this.forceUpdate();
-                return selections;
-            },
-            updateSelection: (selections, deselections) => {
-                this.selectCells(selections);
-                this.deselectCells(deselections);
-                this.forceUpdate();
-            },
-            areEqual: (item1, item2) => item1.rowIndex === item2.rowIndex && item1.columnKey === item2.columnKey,
-        };
-        this._rowGetter = (i) => {
-            if (this.state.rows[i])
-                return this.state.rows[i];
-            // get another page of rows
-            // note: always start loading at the beginning of a page to avoid
-            // requesting duplicate data (e.g. a page that starts at 0, at 1, at 2, ...)
-            this._rowGetterAsync(i - (i % this._pageAmount)); // eslint-disable-line @typescript-eslint/no-floating-promises
-            // Return placeholder object
-            return { item: { key: "", cells: [] }, index: i, cells: {} };
-        };
-        this._rowGetterAsync = memoize(async (index) => {
-            // istanbul ignore next
-            if (index < 0)
-                return;
-            // load up to `this._pageAmount` more rows
-            const maxIndex = Math.min(this.state.rowsCount, index + this._pageAmount);
-            const loadResult = await this.loadRows(index, maxIndex);
-            // istanbul ignore next
-            if (!this._isMounted)
-                return;
-            // istanbul ignore next
-            if (this._pendingUpdate !== 0 /* None */)
-                return;
-            const selectedRowIndices = this._selectedRowIndices;
-            for (const rowIndex of loadResult.selectedRowIndices) {
-                // istanbul ignore else
-                if (!selectedRowIndices.has(rowIndex))
-                    selectedRowIndices.add(rowIndex);
-            }
-            this._selectedRowIndices = selectedRowIndices;
-            this.selectCells(loadResult.selectedCellKeys);
-            this.setState((prev) => {
-                const rows = [...prev.rows];
-                loadResult.rows.forEach((r, i) => { rows[index + i] = r; });
-                return { rows };
-            }, async () => {
-                if (this.props.onRowsLoaded)
-                    this.props.onRowsLoaded(index, index + loadResult.rows.length - 1);
-                const showFilter = this._isShowFilterRow();
-                if (showFilter !== this._filterRowShown)
-                    this.toggleFilterRow(showFilter);
-            });
-        });
-        this._handleGridSort = (columnKey, sortDirection) => {
-            let directionEnum;
-            switch (sortDirection) {
-                case "ASC":
-                    directionEnum = SortDirection.Ascending;
-                    break;
-                case "DESC":
-                    directionEnum = SortDirection.Descending;
-                    break;
-                case "NONE":
-                default:
-                    directionEnum = SortDirection.NoSort;
-                    break;
-            }
-            // Sort the column
-            this.gridSortAsync(columnKey, directionEnum); // eslint-disable-line @typescript-eslint/no-floating-promises
-            this._queuePokeScroll();
-        };
-        this._createRowRenderer = () => {
-            return (props) => {
-                // istanbul ignore next
-                const renderRow = this.props.renderRow ? this.props.renderRow : this.renderRow;
-                const { row: rowProps, ...reactDataGridRowProps } = props;
-                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
-                    const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(props.row.index));
-                    const onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
-                    const onMouseDown = () => {
-                        this._rowSelectionHandler.createDragAction(this._rowComponentSelectionHandler, [this.rowItemSelectionHandlers], props.row.index);
-                    };
-                    const onMouseMove = (e) => {
-                        // istanbul ignore else
-                        if (e.buttons === 1)
-                            this._rowSelectionHandler.updateDragAction(props.row.index);
-                    };
-                    const isSelected = this._selectedRowIndices.has(props.row.index);
-                    const cells = this.createRowCells(rowProps, isSelected);
-                    const row = renderRow(rowProps.item, { ...reactDataGridRowProps, cells, isSelected });
-                    return React.createElement("div", { className: classnames("components-table-row"), onClickCapture: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, style: props.row.style, role: "presentation" }, row);
-                }
-                else {
-                    const cells = this.createRowCells(rowProps, false);
-                    return renderRow(rowProps.item, { ...reactDataGridRowProps, cells });
-                }
-            };
-        };
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        this.renderRow = (item, props) => {
-            return React.createElement(TableRow, { key: item.key, ...props });
-        };
-        this._onMouseUp = () => {
-            if (this._tableSelectionTarget === TableSelectionTarget.Row)
-                this._rowSelectionHandler.completeDragAction();
-            else
-                this._cellSelectionHandler.completeDragAction();
-        };
-        this._onMouseDown = () => {
-            document.addEventListener("mouseup", this._onMouseUp, { capture: true, once: true });
-        };
-        this._onHeaderDrop = (source, target) => {
-            const cols = [...this.state.columns];
-            const columnSourceIndex = this.state.columns.findIndex((i) => i.key === source);
-            const columnTargetIndex = this.state.columns.findIndex((i) => i.key === target);
-            cols.splice(columnTargetIndex, 0, cols.splice(columnSourceIndex, 1)[0]);
-            // istanbul ignore else
-            if (this.props.settingsIdentifier) {
-                const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ new LocalStateStorage();
-                const keys = cols.map((col) => col.key);
-                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys); // eslint-disable-line @typescript-eslint/no-floating-promises
-            }
-            this.setState({ columns: [] }, () => {
-                this.setState({ columns: cols });
-            });
-        };
-        this._deactivateCellEditor = () => {
-            if (this.state.cellEditorState.active)
-                this.setState({ cellEditorState: { active: false } }, () => setTimeout(() => this.setFocusToSelected()));
-        };
-        this._onCellCommit = async (args) => {
-            // istanbul ignore else
-            if (this.props.onPropertyUpdated) {
-                const cellUpdatedArgs = {
-                    rowIndex: this.state.cellEditorState.rowIndex,
-                    colIndex: this.state.cellEditorState.colIndex,
-                    cellKey: this.state.cellEditorState.cellKey,
-                };
-                const allowed = await this.props.onPropertyUpdated(args, cellUpdatedArgs);
-                // istanbul ignore else
-                if (allowed && this.state.cellEditorState.rowIndex !== undefined && this.state.cellEditorState.rowIndex >= 0) {
-                    this._deactivateCellEditor();
-                    await this.updateRows();
-                }
-                else {
-                    this._deactivateCellEditor();
-                }
-            }
-        };
-        this._getVisibleColumns = () => {
-            return this.state.columns
-                .filter((tableColumn) => this.state.hiddenColumns.indexOf(tableColumn.key) === -1)
-                .map((tableColumn) => tableColumn.reactDataGridColumn);
-        };
-        this._handleShowHideContextMenu = (e) => {
-            const header = e.currentTarget.querySelector(".react-grid-Header");
-            // istanbul ignore else
-            if (header) {
-                const headerRect = header.getBoundingClientRect();
-                const offsetY = headerRect.top;
-                const height = headerRect.height;
-                const x = e.clientX, y = e.clientY;
-                // istanbul ignore else
-                if (y < offsetY + height) {
-                    e.preventDefault();
-                    this.setState({
-                        menuX: x, menuY: y,
-                        menuVisible: true,
-                    });
-                }
-            }
-        };
-        this._hideContextMenu = () => {
-            // istanbul ignore else
-            if (this.props.showHideColumns)
-                this.setState({ menuVisible: false });
-        };
-        // istanbul ignore next
-        this._handleShowHideChange = (cols) => {
-            this.setState({ hiddenColumns: cols });
-            if (this.props.settingsIdentifier) {
-                const stateStorage = this.props.settingsStorage || new LocalStateStorage();
-                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns", cols); // eslint-disable-line @typescript-eslint/no-floating-promises
-            }
-            return true;
-        };
-        // istanbul ignore next
-        this._onDialogOpen = (dialogState) => this.setState({ dialog: dialogState });
-        // istanbul ignore next
-        this._onDialogClose = () => this.setState({ dialog: undefined });
-        this._handleFilterChange = (filter) => {
-            const columnKey = filter.column.key;
-            const tableColumn = this.state.columns.find((column) => column.key === columnKey);
-            // istanbul ignore else
-            if (tableColumn) {
-                setTimeout(async () => {
-                    await DataGridFilterParser.handleFilterChange(filter, tableColumn.columnFilterDescriptor, tableColumn.columnDescription, this._applyFilter);
-                });
-            }
-        };
-        // istanbul ignore next
-        this._handleOnClearFilters = () => {
-            this.filterDescriptors.clear();
-            this._applyFilter(); // eslint-disable-line @typescript-eslint/no-floating-promises
-        };
-        this._applyFilter = async () => {
-            // istanbul ignore else
-            if (this.props.dataProvider.applyFilterDescriptors) {
-                await this.props.dataProvider.applyFilterDescriptors(this.filterDescriptors);
-                await this.updateRows();
-                // istanbul ignore else
-                if (this.props.onApplyFilter)
-                    this.props.onApplyFilter();
-            }
-        };
-        // istanbul ignore next
-        this._getValidFilterValues = (columnKey) => {
-            const tableColumn = this.state.columns.find((column) => column.reactDataGridColumn.key === columnKey);
-            if (tableColumn && tableColumn.distinctValueCollection) {
-                return tableColumn.distinctValueCollection.values;
-            }
-            return [];
-        };
-        // TODO: Enable, when table gets refactored. Explanation in ./../table/NonPrimitiveValueRenderer
-        // private _onPopupShow = (popupState: PropertyPopupState) => this.setState({ popup: popupState });
-        // private _onPopupHide = () =>  this.setState({ popup: undefined });
-        // istanbul ignore next
-        this._onScroll = (scrollData) => {
-            this._topRowIndex = scrollData.rowVisibleStartIdx;
-            if (this.props.onScrollToRow)
-                this.props.onScrollToRow(scrollData.rowVisibleStartIdx);
-        };
-        this._onKeyboardEvent = (e, keyDown) => {
-            if (isNavigationKey(e.key) && !this.state.cellEditorState.active && !this.isFocusOnInputElement()) {
-                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
-                    const handleKeyboardSelectItem = (index) => {
-                        const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(index));
-                        selectionFunction(e.shiftKey, e.ctrlKey);
-                    };
-                    const handleKeyboardActivateItem = (index) => {
-                        // istanbul ignore else
-                        if (this.state.keyboardEditorCellKey) {
-                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
-                            // istanbul ignore else
-                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
-                                const columnDescription = this.state.columns[columnIndex].columnDescription;
-                                // istanbul ignore else
-                                if (columnDescription && columnDescription.editable)
-                                    this.activateCellEditor(index, columnIndex, this.state.keyboardEditorCellKey);
-                            }
-                        }
-                    };
-                    const handleCrossAxisArrowKey = (forward) => {
-                        // istanbul ignore else
-                        if (this.state.keyboardEditorCellKey) {
-                            let newEditorCellKey;
-                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
-                            // istanbul ignore else
-                            if (columnIndex >= 0) {
-                                let newColIndex = columnIndex;
-                                while (!newEditorCellKey) {
-                                    if (forward)
-                                        newColIndex++;
-                                    else
-                                        newColIndex--;
-                                    if (newColIndex < 0)
-                                        newColIndex = this.state.columns.length - 1;
-                                    else if (newColIndex >= this.state.columns.length)
-                                        newColIndex = 0;
-                                    // istanbul ignore next
-                                    if (newColIndex === columnIndex)
-                                        break;
-                                    const isEditable = this.state.columns[newColIndex].columnDescription.editable;
-                                    if (isEditable)
-                                        newEditorCellKey = this.state.columns[newColIndex].key;
-                                }
-                                // istanbul ignore else
-                                if (newEditorCellKey)
-                                    this.setState({ keyboardEditorCellKey: newEditorCellKey });
-                            }
-                        }
-                    };
-                    const itemKeyboardNavigator = new ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
-                    itemKeyboardNavigator.orientation = Orientation.Vertical;
-                    itemKeyboardNavigator.allowWrap = false;
-                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
-                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
-                    const processedRow = this._rowSelectionHandler.processedItem ? this._rowSelectionHandler.processedItem /* istanbul ignore next */ : 0;
-                    keyDown ?
-                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
-                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
-                }
-                else {
-                    const handleKeyboardSelectItem = (index) => {
-                        const processedCell = this._cellSelectionHandler.processedItem;
-                        // istanbul ignore else
-                        if (processedCell) {
-                            const cellKey = { rowIndex: index, columnKey: processedCell.columnKey };
-                            const selectionHandler = this.createCellItemSelectionHandler(cellKey);
-                            const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
-                            selectionFunction(e.shiftKey, e.ctrlKey);
-                        }
-                    };
-                    const handleKeyboardActivateItem = (index) => {
-                        const processedCell = this._cellSelectionHandler.processedItem;
-                        // istanbul ignore else
-                        if (processedCell) {
-                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
-                            // istanbul ignore else
-                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
-                                const columnDescription = this.state.columns[columnIndex].columnDescription;
-                                // istanbul ignore else
-                                if (columnDescription && columnDescription.editable)
-                                    this.activateCellEditor(index, columnIndex, processedCell.columnKey);
-                            }
-                        }
-                    };
-                    const handleCrossAxisArrowKey = (forward) => {
-                        const processedCell = this._cellSelectionHandler.processedItem;
-                        // istanbul ignore else
-                        if (processedCell) {
-                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
-                            // istanbul ignore else
-                            if (columnIndex >= 0) {
-                                let newColIndex = columnIndex;
-                                if (forward)
-                                    newColIndex++;
-                                else
-                                    newColIndex--;
-                                if (newColIndex < 0)
-                                    newColIndex = this.state.columns.length - 1;
-                                else if (newColIndex >= this.state.columns.length)
-                                    newColIndex = 0;
-                                const columnKey = this.state.columns[newColIndex].key;
-                                const cellKey = { rowIndex: processedCell.rowIndex, columnKey };
-                                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
-                                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
-                                selectionFunction(e.shiftKey, e.ctrlKey);
-                            }
-                        }
-                    };
-                    const itemKeyboardNavigator = new ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
-                    itemKeyboardNavigator.orientation = Orientation.Vertical;
-                    itemKeyboardNavigator.allowWrap = false;
-                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
-                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
-                    const processedRow = this._cellSelectionHandler.processedItem ? this._cellSelectionHandler.processedItem.rowIndex : /* istanbul ignore next */ 0;
-                    keyDown ?
-                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
-                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
-                }
-            }
-        };
-        this._onKeyDown = (e) => this._onKeyboardEvent(e, true);
-        this._onKeyUp = (e) => this._onKeyboardEvent(e, false);
-        if (props.pageAmount)
-            this._pageAmount = props.pageAmount;
-        this._disposableListeners.add(props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
-        this._disposableListeners.add(props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
-        this._rowSelectionHandler = new SelectionHandler(props.selectionMode ? props.selectionMode : SelectionMode.Single);
-        this._cellSelectionHandler = new SelectionHandler(props.selectionMode ? props.selectionMode : SelectionMode.Single);
-        this._rowSelectionHandler.onItemsSelectedCallback = this._onRowsSelected;
-        this._rowSelectionHandler.onItemsDeselectedCallback = this._onRowsDeselected;
-        this._cellSelectionHandler.onItemsSelectedCallback = this._onCellsSelected;
-        this._cellSelectionHandler.onItemsDeselectedCallback = this._onCellsDeselected;
-    }
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    get rowItemSelectionHandlers() {
-        // istanbul ignore else
-        if (!this._rowItemSelectionHandlers) {
-            this._rowItemSelectionHandlers = [];
-            for (let i = 0; i < this.state.rowsCount; i++)
-                this._rowItemSelectionHandlers.push(this.createRowItemSelectionHandler(i));
-        }
-        return this._rowItemSelectionHandlers;
-    }
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    get cellItemSelectionHandlers() {
-        // istanbul ignore else
-        if (!this._cellItemSelectionHandlers) {
-            this._cellItemSelectionHandlers = [];
-            for (let rowIndex = 0; rowIndex < this.state.rowsCount; rowIndex++) {
-                this._cellItemSelectionHandlers[rowIndex] = [];
-                for (const column of this.state.columns) {
-                    this._cellItemSelectionHandlers[rowIndex].push(this.createCellItemSelectionHandler({ rowIndex, columnKey: column.key }));
-                }
-            }
-        }
-        return this._cellItemSelectionHandlers;
-    }
-    async *createRowIterator(rowIndices) {
-        for (const index of rowIndices)
-            yield await this.props.dataProvider.getRow(index);
-    }
-    async *createCellIterator(cellKeys) {
-        for (const key of cellKeys) {
-            const row = await this.props.dataProvider.getRow(key.rowIndex);
-            yield [row, this._getCellItem(row, key.columnKey)];
-        }
-    }
-    get _tableSelectionTarget() {
-        return this.props.tableSelectionTarget ? this.props.tableSelectionTarget : TableSelectionTarget.Row;
-    }
-    /** @internal */
-    componentDidUpdate(previousProps, previousState) {
-        this._rowSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionMode.Single;
-        this._cellSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionMode.Single;
-        if (previousProps.dataProvider !== this.props.dataProvider) {
-            this._disposableListeners.dispose();
-            this._disposableListeners.add(this.props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
-            this._disposableListeners.add(this.props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
-        }
-        if (this.props.dataProvider !== previousProps.dataProvider) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.update();
-            return;
-        }
-        // When hiddenColumns length is changed, we need to re-render component so that cell widths would be calculated appropriately.
-        if (previousState.hiddenColumns.length !== this.state.hiddenColumns.length)
-            this.forceUpdate();
-        if (this.props.isCellSelected !== previousProps.isCellSelected
-            || this.props.isRowSelected !== previousProps.isRowSelected
-            || this.props.tableSelectionTarget !== previousProps.tableSelectionTarget) {
-            this.updateSelectedRows();
-            this.updateSelectedCells();
-        }
-        if (this.props.scrollToRow !== previousProps.scrollToRow) {
-            // istanbul ignore else
-            if (this.props.scrollToRow !== undefined)
-                this.scrollToRow(this.props.scrollToRow);
-        }
-        /* istanbul ignore next */
-        if (this.props.onRender)
-            this.props.onRender();
-    }
-    /** @internal */
-    componentDidMount() {
-        let gridContainer = null;
-        this._isMounted = true;
-        // The previously used ReactResizeDetector, which does not work in popout/child windows, used deprecated React.findDomNode
-        // which is now deprecated so, so new ElementResizeObserver requires you to pass the element to observe. So get the
-        // same HTMLDivElement from grid as was used previously by ReactResizeDetector.
-        if (this._gridRef.current) {
-            const grid = this._gridRef.current;
-            gridContainer = grid.getDataGridDOMNode();
-        }
-        this.setState({ gridContainer }, () => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.update();
-        });
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this._isMounted = false;
-        this._disposableListeners.dispose();
-        this._unsetPokeScrollTimeout();
-    }
-    scrollToRow(rowIndex) {
-        // istanbul ignore else
-        if (this._gridRef.current) {
-            const grid = this._gridRef.current;
-            // istanbul ignore else
-            if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
-                const top = TABLE_ROW_HEIGHT * rowIndex;
-                const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
-                gridCanvas.scrollTop = top;
-                this._topRowIndex = rowIndex;
-                // istanbul ignore else
-                if (this.props.onScrollToRow)
-                    this.props.onScrollToRow(rowIndex);
-            }
-        }
-    }
-    setFocusToSelected() {
-        // istanbul ignore next
-        if (this._gridRef.current) {
-            const grid = this._gridRef.current;
-            // istanbul ignore else
-            if (grid.getDataGridDOMNode) {
-                const gridSelected = grid.getDataGridDOMNode().querySelector(".rdg-selected");
-                // istanbul ignore else
-                if (gridSelected) {
-                    gridSelected.focus();
-                }
-            }
-        }
-    }
-    async handlePendingUpdate() {
-        const update = this._pendingUpdate;
-        this._pendingUpdate = 0 /* None */;
-        let status = 0 /* Continue */;
-        if (update === 2 /* Complete */)
-            status = await this.updateColumns();
-        // istanbul ignore else
-        if (status === 0 /* Continue */ && update > 0 /* None */)
-            status = await this.updateRows();
-        return status;
-    }
-    async updateColumns() {
-        if (this._currentUpdate !== 0 /* None */) {
-            this._pendingUpdate = 2 /* Complete */;
-            return 1 /* Abort */;
-        }
-        this._currentUpdate = 2 /* Complete */;
-        const columnDescriptions = await this.props.dataProvider.getColumns();
-        this._currentUpdate = 0 /* None */;
-        // istanbul ignore next
-        if (!this._isMounted)
-            return 1 /* Abort */;
-        if (this._pendingUpdate === 2 /* Complete */) {
-            await this.handlePendingUpdate();
-            return 1 /* Abort */;
-        }
-        let dataGridColumns = columnDescriptions.map(this._columnDescriptionToReactDataGridColumn);
-        if (this.props.settingsIdentifier) {
-            const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ this.props.uiStateStorage || /* istanbul ignore next */ new LocalStateStorage();
-            const reorderResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnReorder");
-            // istanbul ignore next
-            if (reorderResult.status === UiStateStorageStatus.Success) {
-                const setting = reorderResult.setting;
-                // map columns according to the keys in columns, in the order of the loaded array of keys
-                dataGridColumns = setting.map((key) => dataGridColumns.filter((col) => col.key === key)[0]);
-            }
-            else if (reorderResult.status === UiStateStorageStatus.NotFound) {
-                const keys = columnDescriptions.map((col) => col.key);
-                await stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys);
-            }
-            const showhideResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns");
-            // istanbul ignore next
-            if (showhideResult.status === UiStateStorageStatus.Success) {
-                const hiddenColumns = showhideResult.setting;
-                this.setState({ hiddenColumns });
-            }
-        }
-        let keyboardEditorCellKey;
-        const tableColumns = dataGridColumns.map((dataGridColumn, index) => {
-            const tableColumn = new TableColumn(this, columnDescriptions[index], dataGridColumn);
-            tableColumn.dataProvider = this.props.dataProvider;
-            if (!keyboardEditorCellKey && tableColumn.columnDescription.editable)
-                keyboardEditorCellKey = tableColumn.key;
-            if (tableColumn.filterable)
-                dataGridColumn.filterableColumn = tableColumn;
-            return tableColumn;
-        });
-        for (const tableColumn of tableColumns) {
-            if (tableColumn.filterable)
-                tableColumn.distinctValueCollection = await tableColumn.getDistinctValues(this.props.maximumDistinctValues);
-        }
-        this.setState({ columns: tableColumns, keyboardEditorCellKey });
-        if (this._pendingUpdate !== 0 /* None */) {
-            return this.handlePendingUpdate();
-        }
-        return 0 /* Continue */;
-    }
-    async updateRows() {
-        if (this._currentUpdate !== 0 /* None */) {
-            if (this._pendingUpdate === 0 /* None */)
-                this._pendingUpdate = 1 /* Rows */;
-            return 1 /* Abort */;
-        }
-        this._currentUpdate = 1 /* Rows */;
-        const rowsCount = await this.props.dataProvider.getRowsCount();
-        this._currentUpdate = 0 /* None */;
-        // istanbul ignore next
-        if (!this._isMounted)
-            return 1 /* Abort */;
-        if (this._pendingUpdate !== 0 /* None */) {
-            return this.handlePendingUpdate();
-        }
-        if (rowsCount !== this.state.rowsCount) {
-            this._rowItemSelectionHandlers = undefined;
-            this._cellItemSelectionHandlers = undefined;
-            // when updating the rows with new data from dataProvider clear out existing selections
-            this._selectedRowIndices.clear();
-            this._selectedCellKeys.clear();
-        }
-        this._rowGetterAsync.cache.clear();
-        this.setState({ rowsCount, rows: [] });
-        return 0 /* Continue */;
-    }
-    /** @internal */
-    async update() {
-        let status = await this.updateColumns();
-        if (status !== 1 /* Abort */)
-            status = await this.updateRows();
-        if (this.props.scrollToRow !== undefined)
-            this.scrollToRow(this.props.scrollToRow);
-        /* istanbul ignore next */
-        if (this.props.onRender)
-            this.props.onRender();
-        return status;
-    }
-    /** @internal */
-    updateSelectedRows() {
-        const selectedRowIndices = new Set();
-        if (this.props.isRowSelected) {
-            for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
-                if (this.state.rows[rowIndex] && this.props.isRowSelected(this.state.rows[rowIndex].item))
-                    selectedRowIndices.add(rowIndex);
-            }
-        }
-        this._selectedRowIndices = selectedRowIndices;
-        this.forceUpdate();
-    }
-    /** @internal */
-    updateSelectedCells() {
-        const selectedCellKeys = new Map();
-        if (this.props.isCellSelected) {
-            for (const column of this.state.columns) {
-                const set = new Set();
-                for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
-                    // istanbul ignore next
-                    if (!this.state.rows[rowIndex])
-                        continue;
-                    const cellItem = this._getCellItem(this.state.rows[rowIndex].item, column.key);
-                    if (this.props.isCellSelected(rowIndex, cellItem))
-                        set.add(rowIndex);
-                }
-                // istanbul ignore else
-                if (set.size !== 0)
-                    selectedCellKeys.set(column.key, set);
-            }
-        }
-        this._selectedCellKeys = selectedCellKeys;
-        this.forceUpdate();
-    }
-    isCellSelected(key) {
-        const set = this._selectedCellKeys.get(key.columnKey);
-        if (set)
-            return set.has(key.rowIndex);
-        return false;
-    }
-    selectCells(cellKeys) {
-        for (const key of cellKeys) {
-            let set = this._selectedCellKeys.get(key.columnKey);
-            if (!set) {
-                set = new Set();
-                this._selectedCellKeys.set(key.columnKey, set);
-            }
-            set.add(key.rowIndex);
-        }
-    }
-    deselectCells(cellKeys) {
-        for (const key of cellKeys) {
-            // istanbul ignore else
-            const set = this._selectedCellKeys.get(key.columnKey);
-            // istanbul ignore else
-            if (set)
-                set.delete(key.rowIndex);
-        }
-    }
-    createRowItemSelectionHandler(rowIndex) {
-        return {
-            preselect: () => {
-                this._pressedItemSelected = this._selectedRowIndices.has(rowIndex);
-            },
-            select: () => {
-                // istanbul ignore else
-                if (!this._selectedRowIndices.has(rowIndex)) {
-                    this._selectedRowIndices.add(rowIndex);
-                    if (!this._pressedItemSelected)
-                        this.forceUpdate();
-                }
-            },
-            deselect: () => {
-                // istanbul ignore else
-                if (this._selectedRowIndices.has(rowIndex)) {
-                    this._selectedRowIndices.delete(rowIndex);
-                    this.forceUpdate();
-                }
-            },
-            isSelected: () => this._selectedRowIndices.has(rowIndex),
-            item: () => rowIndex,
-        };
-    }
-    createCellItemSelectionHandler(cellKey) {
-        return {
-            preselect: () => {
-                this._pressedItemSelected = this.isCellSelected(cellKey);
-            },
-            select: () => {
-                this.selectCells([cellKey]);
-                this.forceUpdate();
-            },
-            deselect: () => {
-                this.deselectCells([cellKey]);
-                this.forceUpdate();
-            },
-            isSelected: () => this.isCellSelected(cellKey),
-            item: () => cellKey,
-        };
-    }
-    async renderCellContent(cellItem, column, displayValue) {
-        if (column.icon)
-            return () => React.createElement(TableIconCellContent, { iconName: displayValue });
-        return (props) => {
-            var _a;
-            return (React.createElement(TableCellContent, { height: TABLE_ROW_HEIGHT, isSelected: props.isSelected, cellItem: cellItem, onDialogOpen: this._onDialogOpen, propertyValueRendererManager: this.props.propertyValueRendererManager
-                    ? this.props.propertyValueRendererManager
-                    : PropertyValueRendererManager.defaultManager, style: { zIndex: (((_a = cellItem.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) > 1) ? 1 : undefined } }));
-        };
-    }
-    async getCellDisplayValue(cellItem) {
-        var _a;
-        // istanbul ignore next
-        if (!cellItem.record || cellItem.record.value.valueFormat !== PropertyValueFormat.Primitive)
-            return "";
-        const value = cellItem.record.value.value;
-        if (value === undefined)
-            return "";
-        const displayValue = await TypeConverterManager
-            .getConverter(cellItem.record.property.typename, (_a = cellItem.record.property.converter) === null || _a === void 0 ? void 0 : _a.name)
-            .convertPropertyToString(cellItem.record.property, value);
-        return displayValue ? displayValue : /* istanbul ignore next */ "";
-    }
-    async createPropsForRowItem(item, index) {
-        const cellProps = {};
-        for (const column of this.state.columns) {
-            const cellItem = this._getCellItem(item, column.key);
-            const displayValue = await this.getCellDisplayValue(cellItem);
-            cellProps[column.key] = {
-                item: cellItem,
-                displayValue,
-                render: await this.renderCellContent(cellItem, column.reactDataGridColumn, displayValue),
-            };
-        }
-        const rowStyle = TableRowStyleProvider.createStyle(item.colorOverrides ? item.colorOverrides : {});
-        return {
-            item,
-            index,
-            cells: cellProps,
-            render: undefined,
-            style: rowStyle,
-        };
-    }
-    async loadRows(beginIndex, endIndex) {
-        const result = {
-            rows: [],
-            selectedRowIndices: [],
-            selectedCellKeys: [],
-        };
-        this._rowLoadGuid = Guid.createValue();
-        const currentSelectedRowGuid = this._rowLoadGuid;
-        const promises = new Array();
-        for (let i = beginIndex; i < endIndex; ++i) {
-            promises.push(this.props.dataProvider.getRow(i).then(async (rowData) => this.createPropsForRowItem(rowData, i).then((rowProps) => (rowProps))));
-        }
-        try {
-            result.rows = await Promise.all(promises);
-        }
-        catch { }
-        // istanbul ignore else
-        // Check if another loadRows got called while this one was still going
-        if (currentSelectedRowGuid === this._rowLoadGuid) {
-            for (const rowProps of result.rows) {
-                if (this.props.isRowSelected && this.props.isRowSelected(rowProps.item))
-                    result.selectedRowIndices.push(rowProps.index);
-                if (this.props.isCellSelected) {
-                    for (const column of this.state.columns) {
-                        const cellItem = this._getCellItem(rowProps.item, column.key);
-                        if (this.props.isCellSelected(rowProps.index, cellItem))
-                            result.selectedCellKeys.push({ rowIndex: rowProps.index, columnKey: column.key });
-                    }
-                }
-            }
-        }
-        return result;
-    }
-    getColumnIndexFromKey(columnKey) {
-        return this.state.columns.findIndex((column) => column.key === columnKey);
-    }
-    async gridSortAsync(columnKey, directionEnum) {
-        const columnIndex = this.getColumnIndexFromKey(columnKey);
-        // istanbul ignore next
-        if (columnIndex < 0)
-            return;
-        await this.props.dataProvider.sort(columnIndex, directionEnum);
-        // istanbul ignore next
-        if (!this._isMounted)
-            return;
-        this.updateRows(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }
-    createRowCells(rowProps, isSelected) {
-        var _a;
-        const cells = {};
-        let gridColumns = [];
-        let foundHiddenColumns = 0;
-        // istanbul ignore else
-        if (this._gridRef.current && this._gridRef.current.getDataGridDOMNode)
-            gridColumns = this._gridRef.current.getDataGridDOMNode().querySelectorAll(".react-grid-HeaderCell");
-        for (let index = 0; index < this.state.columns.length; index++) {
-            const column = this.state.columns[index];
-            const cellProps = rowProps.cells[column.key];
-            if (!cellProps) {
-                continue;
-            }
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            const CellContent = cellProps.render;
-            const isEditorCell = this.state.cellEditorState.active
-                && this.state.cellEditorState.rowIndex === rowProps.index
-                && this.state.cellEditorState.colIndex === index
-                && cellProps.item.record;
-            let onClick;
-            let onMouseMove;
-            let onMouseDown;
-            let className;
-            const cellKey = { rowIndex: rowProps.index, columnKey: column.key };
-            if (this._tableSelectionTarget === TableSelectionTarget.Cell) {
-                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
-                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
-                onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
-                onMouseMove = (e) => {
-                    // istanbul ignore else
-                    if (e.buttons === 1)
-                        this._cellSelectionHandler.updateDragAction(cellKey);
-                };
-                onMouseDown = () => {
-                    this._cellSelectionHandler.createDragAction(this._cellComponentSelectionHandler, this.cellItemSelectionHandlers, cellKey);
-                };
-                className = classnames({ "is-selected": this.isCellSelected(cellKey) });
-            }
-            else {
-                if (this._selectedRowIndices.has(rowProps.index))
-                    className = classnames({ "is-keyboard-editable": this.state.keyboardEditorCellKey === column.key });
-            }
-            className = classnames(className, this.getCellBorderStyle(cellKey));
-            const mergedAdjacentCellsCount = ((_a = cellProps.item.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) - 1;
-            let cellWidth = 0;
-            for (let i = 0; i <= mergedAdjacentCellsCount; i++) {
-                const col = this.state.columns[index + i];
-                if (this.state.hiddenColumns.indexOf(col.key) === -1) {
-                    const gridColumn = gridColumns[index + i - foundHiddenColumns];
-                    const gridColumnWidth = gridColumn ? gridColumn.getBoundingClientRect().width : 0;
-                    cellWidth += gridColumnWidth;
-                }
-                else {
-                    foundHiddenColumns++;
-                }
-                if (i > 0) {
-                    cells[col.key] = (React.createElement(TableCell, { className: className.replace("border-bottom", ""), title: "empty-cell", onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown }));
-                }
-                const mergedColumn = this.state.columns[index + i];
-                const emptyCellKey = { rowIndex: rowProps.index, columnKey: mergedColumn.key };
-                className = classnamesDedupe(className, this.getCellBorderStyle(emptyCellKey));
-            }
-            index += mergedAdjacentCellsCount;
-            cells[column.key] = (React.createElement(TableCell, { className: className, title: cellProps.displayValue, onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, cellEditingProps: isEditorCell ? {
-                    onCancel: this._deactivateCellEditor,
-                    onCommit: this._onCellCommit,
-                    propertyRecord: cellProps.item.record,
-                    setFocus: true,
-                } : undefined, style: { width: (mergedAdjacentCellsCount > 0) ? cellWidth : undefined } },
-                React.createElement(CellContent, { isSelected: isSelected })));
-        }
-        return cells;
-    }
-    getCellBorderStyle(key) {
-        const isCellSelected = (cellKey) => {
-            if (this._tableSelectionTarget === TableSelectionTarget.Row) {
-                return this._selectedRowIndices.has(cellKey.rowIndex);
-            }
-            return this.isCellSelected(cellKey);
-        };
-        const cellIsSelected = isCellSelected(key);
-        const columnIndex = this.state.columns.findIndex((column) => key.columnKey === column.key);
-        const isTopBorderVisible = () => {
-            if (key.rowIndex === 0) {
-                return cellIsSelected;
-            }
-            if (cellIsSelected) {
-                return !isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
-            }
-            // Bottom border is rendered by drawing the top border on the node below
-            // Check if the node above needs its bottom border drawn
-            return isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
-        };
-        const isRightBorderVisible = () => {
-            if (!cellIsSelected) {
-                return false;
-            }
-            if (columnIndex === this.state.columns.length - 1) {
-                return true;
-            }
-            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex + 1].key });
-        };
-        const isBottomBorderVisible = () => {
-            return cellIsSelected && key.rowIndex === this.state.rowsCount - 1;
-        };
-        const isLeftBorderVisible = () => {
-            if (!cellIsSelected) {
-                return false;
-            }
-            if (columnIndex === 0) {
-                return true;
-            }
-            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex - 1].key });
-        };
-        return classnames({
-            "border-top": isTopBorderVisible(),
-            "border-right": isRightBorderVisible(),
-            "border-bottom": isBottomBorderVisible(),
-            "border-left": isLeftBorderVisible(),
-        });
-    }
-    cellEditOnClick(column, _ev, args) {
-        // Prevent editing when property record is not primitive
-        // istanbul ignore else
-        if (this.state.rows[args.rowIdx]) {
-            const record = this._getCellItem(this.state.rows[0].item, column.key).record;
-            // istanbul ignore next
-            if (record && record.value.valueFormat !== PropertyValueFormat.Primitive)
-                return;
-        }
-        if (this.state.keyboardEditorCellKey !== column.key)
-            this.setState({ keyboardEditorCellKey: column.key });
-        let activate = false;
-        if (this._pressedItemSelected)
-            activate = true;
-        if (activate)
-            this.activateCellEditor(args.rowIdx, args.idx, column.key);
-        else
-            this._deactivateCellEditor();
-    }
-    cellContextMenu(column, e, args) {
-        // istanbul ignore else
-        if (this.props.onCellContextMenu) {
-            const contextMenuArgs = {
-                rowIndex: args.rowIdx,
-                colIndex: args.idx,
-                cellKey: column.key,
-                event: e,
-            };
-            // istanbul ignore else
-            if (this.state.rows[args.rowIdx])
-                contextMenuArgs.cellItem = this._getCellItem(this.state.rows[args.rowIdx].item, column.key);
-            e.preventDefault();
-            this.props.onCellContextMenu(contextMenuArgs);
-        }
-    }
-    activateCellEditor(rowIndex, colIndex, cellKey) {
-        const cellEditorState = { active: true, rowIndex, colIndex, cellKey };
-        // istanbul ignore else
-        if (cellEditorState !== this.state.cellEditorState) {
-            this.setState({ cellEditorState }, () => {
-                // istanbul ignore else
-                if (this.props.onPropertyEditing)
-                    this.props.onPropertyEditing(cellEditorState);
-            });
-        }
-    }
-    /** @internal */
-    shouldComponentUpdate(_props) {
-        return true;
-    }
-    _isShowFilterRow() {
-        return this.state.columns.some((tableColumn) => tableColumn.filterable);
-    }
-    /** Turn on/off filter row */
-    toggleFilterRow(showFilter) {
-        // istanbul ignore else
-        if (this._gridRef.current) {
-            const grid = this._gridRef.current;
-            // istanbul ignore else
-            if (grid.onToggleFilter && showFilter !== this._filterRowShown) {
-                grid.onToggleFilter();
-                this._filterRowShown = showFilter;
-            }
-        }
-    }
-    /** Gets the filter descriptors for the table.
-     * @internal
-     */
-    get filterDescriptors() {
-        if (undefined === this._filterDescriptors) {
-            this._filterDescriptors = new TableFilterDescriptorCollection();
-            this._filterDescriptors.logicalOperator = FilterCompositionLogicalOperator.And;
-        }
-        return this._filterDescriptors;
-    }
-    /** Gets ECExpression to get property display value.
-     * @internal
-     */
-    // istanbul ignore next
-    getPropertyDisplayValueExpression(property) {
-        if (this.props.dataProvider.getPropertyDisplayValueExpression !== undefined)
-            return this.props.dataProvider.getPropertyDisplayValueExpression(property);
-        return property;
-    }
-    /** Determines if focus is in an input element - for filter checking */
-    isFocusOnInputElement() {
-        const element = document.activeElement;
-        return element &&
-            (element instanceof HTMLInputElement ||
-                element instanceof HTMLSelectElement ||
-                element instanceof HTMLTextAreaElement);
-    }
-    /** @internal */
-    render() {
-        const rowRenderer = React.createElement(TableRowRenderer, { rowRendererCreator: () => this._createRowRenderer() });
-        const visibleColumns = this._getVisibleColumns();
-        const tableClassName = classnames("components-table", "components-smallEditor-host", this.props.className, {
-            "hide-header": this.props.hideHeader,
-            "striped-rows": this.props.stripedRows,
-            "row-selection": this._tableSelectionTarget === TableSelectionTarget.Row,
-            "cell-selection": this._tableSelectionTarget === TableSelectionTarget.Cell,
-        });
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: tableClassName, style: this.props.style, onMouseDown: this._onMouseDown, onContextMenu: this.props.showHideColumns ? this._handleShowHideContextMenu : undefined, onKeyDown: this._onKeyDown, onKeyUp: this._onKeyUp, role: "presentation" },
-                this.props.showHideColumns &&
-                    React.createElement(ShowHideMenu, { opened: this.state.menuVisible, items: this.state.columns.map((column) => ({ id: column.key, label: column.reactDataGridColumn.name })), x: this.state.menuX, y: this.state.menuY, initialHidden: this.state.hiddenColumns, onClose: this._hideContextMenu, onShowHideChange: this._handleShowHideChange }),
-                React.createElement(ElementResizeObserver, { watchedElement: this.state.gridContainer, render: ({ width, height }) => {
-                        setTimeout(() => this._queuePokeScroll());
-                        return (React.createElement(ReactDataGrid, { ref: this._gridRef, columns: visibleColumns, rowGetter: this._rowGetter, rowRenderer: rowRenderer, rowsCount: this.state.rowsCount, ...(this.props.reorderableColumns ? {
-                                draggableHeaderCell: DragDropHeaderCell,
-                                onHeaderDrop: this._onHeaderDrop,
-                            } : {}), minHeight: height, minWidth: width, headerRowHeight: TABLE_ROW_HEIGHT, rowHeight: TABLE_ROW_HEIGHT, onGridSort: this._handleGridSort, enableRowSelect: null, onAddFilter: this._handleFilterChange, onClearFilters: this._handleOnClearFilters, headerFiltersHeight: TABLE_FILTER_ROW_HEIGHT, getValidFilterValues: this._getValidFilterValues, onScroll: this._onScroll }));
-                    } })),
-            React.createElement("div", { ref: this._tableRef }, this.state.dialog
-                ?
-                    // istanbul ignore next
-                    React.createElement(Dialog, { opened: true, onClose: this._onDialogClose, title: this.state.dialog.title, height: "50vh" }, this.state.dialog.content)
-                : undefined)));
-    }
-}
-/**
- * Default component for rendering a row for the Table
- * @internal
- */
-export class TableRow extends React.Component {
-    /** @internal */
-    render() {
-        const { cells, isSelected, ...props } = this.props;
-        return (React.createElement(ReactDataGrid.Row, { ...props, row: cells, isSelected: isSelected }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Table
+ */
+import "./Table.scss";
+import "../columnfiltering/ColumnFiltering.scss";
+import classnames from "classnames";
+import classnamesDedupe from "classnames/dedupe";
+import { memoize } from "lodash";
+import * as React from "react";
+import ReactDataGrid from "react-data-grid";
+import { DisposableList, Guid } from "@itwin/core-bentley";
+import { PropertyValueFormat } from "@itwin/appui-abstract";
+import { Dialog, ElementResizeObserver, isNavigationKey, ItemKeyboardNavigator, LocalStateStorage, Orientation, SortDirection, Timer, UiStateStorageStatus, } from "@itwin/core-react";
+import { SelectionHandler, } from "../../common/selection/SelectionHandler";
+import { SelectionMode } from "../../common/selection/SelectionModes";
+import { ShowHideMenu } from "../../common/showhide/ShowHideMenu";
+import { TypeConverterManager } from "../../converters/TypeConverterManager";
+import { TableRowStyleProvider } from "../../properties/ItemStyle";
+import { PropertyValueRendererManager } from "../../properties/ValueRendererManager";
+import { FilterCompositionLogicalOperator } from "../columnfiltering/ColumnFiltering";
+import { MultiSelectFilter } from "../columnfiltering/data-grid-addons/MultiSelectFilter";
+import { NumericFilter } from "../columnfiltering/data-grid-addons/NumericFilter";
+import { SingleSelectFilter } from "../columnfiltering/data-grid-addons/SingleSelectFilter";
+import { DataGridFilterParser } from "../columnfiltering/DataGridFilterParser";
+import { MultiValueFilter } from "../columnfiltering/multi-value-filter/MultiValueFilter";
+import { TableFilterDescriptorCollection } from "../columnfiltering/TableFilterDescriptorCollection";
+import { FilterRenderer } from "../TableDataProvider";
+import { DragDropHeaderCell } from "./DragDropHeaderCell";
+import { TableCell, TableCellContent, TableIconCellContent } from "./TableCell";
+import { TableColumn } from "./TableColumn";
+// cspell:ignore Overscan columnfiltering Dedupe popout
+const TABLE_ROW_HEIGHT = 27;
+const TABLE_FILTER_ROW_HEIGHT = 32;
+/**
+ * Specifies table selection target.
+ * @deprecated Use the Table component in @itwin/itwinui-react instead, which does not use this enum.
+ * @public
+ */
+export var TableSelectionTarget;
+(function (TableSelectionTarget) {
+    TableSelectionTarget[TableSelectionTarget["Row"] = 0] = "Row";
+    TableSelectionTarget[TableSelectionTarget["Cell"] = 1] = "Cell";
+})(TableSelectionTarget || (TableSelectionTarget = {}));
+/** Scroll Direction */
+var SCROLL_DIRECTION;
+(function (SCROLL_DIRECTION) {
+    SCROLL_DIRECTION["UP"] = "upwards";
+    SCROLL_DIRECTION["DOWN"] = "downwards";
+    SCROLL_DIRECTION["LEFT"] = "left";
+    SCROLL_DIRECTION["RIGHT"] = "right";
+    SCROLL_DIRECTION["NONE"] = "none";
+})(SCROLL_DIRECTION || (SCROLL_DIRECTION = {}));
+const initialState = {
+    columns: [],
+    hiddenColumns: [],
+    rows: [],
+    rowsCount: 0,
+    cellEditorState: { active: false },
+    menuVisible: false,
+    menuX: 0,
+    menuY: 0,
+    gridContainer: null,
+};
+/** ReactDataGrid requires a class component for the RowRenderer because it sets a ref to it. */
+class TableRowRenderer extends React.Component {
+    render() {
+        const creatorFn = this.props.rowRendererCreator();
+        return creatorFn(this.props);
+    }
+}
+/**
+ * Table React component that displays rows and columns in a grid along with a header
+ * @deprecated Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+export class Table extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._pageAmount = 100;
+        this._disposableListeners = new DisposableList();
+        this._isMounted = false;
+        this._currentUpdate = 0 /* None */;
+        this._pendingUpdate = 0 /* None */;
+        this._rowLoadGuid = Guid.createValue();
+        this._selectedRowIndices = new Set();
+        this._selectedCellKeys = new Map(); // column keys -> rowIndices
+        this._pressedItemSelected = false;
+        this._tableRef = React.createRef();
+        this._gridRef = React.createRef();
+        this._gridContainerRef = React.createRef();
+        this._filterRowShown = false;
+        this._topRowIndex = 0;
+        this._pokeScrollTimer = new Timer(100);
+        /** @internal */
+        this.state = initialState;
+        this._onRowsSelected = (rowIndices, replace) => {
+            if (this.props.onRowsSelected)
+                this.props.onRowsSelected(this.createRowIterator(rowIndices), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onRowsDeselected = (rowIndices) => {
+            if (this.props.onRowsDeselected)
+                this.props.onRowsDeselected(this.createRowIterator(rowIndices)); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onCellsSelected = (cellKeys, replace) => {
+            if (this.props.onCellsSelected)
+                this.props.onCellsSelected(this.createCellIterator(cellKeys), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onCellsDeselected = (cellKeys) => {
+            if (this.props.onCellsDeselected)
+                this.props.onCellsDeselected(this.createCellIterator(cellKeys)); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onColumnsChanged = async () => {
+            await this.updateColumns();
+            this._cellItemSelectionHandlers = undefined;
+        };
+        // Workaround for react-data-grid bug that shows blank grid when updating after grid has been scrolled.
+        // Force a re-render by scrolling up 1 then down 1
+        this._pokeScrollAfterUpdate = () => {
+            // istanbul ignore else
+            if (this._gridRef.current && this._topRowIndex !== 0) {
+                const grid = this._gridRef.current;
+                // istanbul ignore else
+                if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
+                    const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
+                    // Scroll up 1
+                    let top = TABLE_ROW_HEIGHT * this._topRowIndex - 1;
+                    gridCanvas.scrollTop = top;
+                    // Scroll back down
+                    top = TABLE_ROW_HEIGHT * this._topRowIndex;
+                    gridCanvas.scrollTop = top;
+                }
+            }
+        };
+        this._queuePokeScroll = () => {
+            this._unsetPokeScrollTimeout();
+            this._pokeScrollTimer.setOnExecute(() => { this._pokeScrollAfterUpdate(); });
+            this._pokeScrollTimer.start();
+        };
+        this._unsetPokeScrollTimeout = () => {
+            this._pokeScrollTimer.stop();
+        };
+        this._onRowsChanged = async () => {
+            await this.updateRows();
+            this._queuePokeScroll();
+        };
+        this._columnDescriptionToReactDataGridColumn = (columnDescription) => {
+            const isEditable = !!columnDescription.editable;
+            const column = {
+                key: columnDescription.key,
+                name: columnDescription.label,
+                icon: columnDescription.icon,
+                width: columnDescription.width,
+                resizable: !!columnDescription.resizable,
+                sortable: !!columnDescription.sortable,
+                draggable: !!this.props.reorderableColumns,
+                filterable: !!columnDescription.filterable,
+            };
+            column.events = {};
+            if (this.props.onCellContextMenu) {
+                column.events.onContextMenu = this.cellContextMenu.bind(this, column);
+            }
+            if (isEditable) {
+                column.events.onClick = this.cellEditOnClick.bind(this, column);
+            }
+            if (columnDescription.filterRenderer !== undefined) {
+                switch (columnDescription.filterRenderer) {
+                    case FilterRenderer.Numeric:
+                        column.filterRenderer = NumericFilter;
+                        break;
+                    case FilterRenderer.MultiSelect:
+                        column.filterRenderer = MultiSelectFilter;
+                        break;
+                    case FilterRenderer.MultiValue:
+                        column.filterRenderer = MultiValueFilter;
+                        break;
+                    case FilterRenderer.SingleSelect:
+                        column.filterRenderer = SingleSelectFilter;
+                        break;
+                    case FilterRenderer.Text:
+                        // column.filterRenderer is not set for the Text input filter
+                        break;
+                }
+            }
+            return column;
+        };
+        this._getCellItem = (row, columnKey) => {
+            return row.cells.find((cell) => cell.key === columnKey) || /* istanbul ignore next */ { key: columnKey };
+        };
+        this._rowComponentSelectionHandler = {
+            deselectAll: () => {
+                this._selectedRowIndices = new Set();
+                if (!this._pressedItemSelected) {
+                    this._deactivateCellEditor();
+                    this.forceUpdate();
+                }
+            },
+            selectBetween: (rowIndex1, rowIndex2) => {
+                const selections = [];
+                const lowerNumber = rowIndex1 < rowIndex2 ? rowIndex1 : rowIndex2;
+                const higherNumber = rowIndex1 > rowIndex2 ? rowIndex1 : rowIndex2;
+                for (let i = lowerNumber; i <= higherNumber; i++) {
+                    // istanbul ignore else
+                    if (!this._selectedRowIndices.has(i)) {
+                        selections.push(i);
+                        this._selectedRowIndices.add(i);
+                    }
+                }
+                this.forceUpdate();
+                return selections;
+            },
+            updateSelection: (selections, deselections) => {
+                for (const rowIndex of selections) {
+                    // istanbul ignore else
+                    if (!this._selectedRowIndices.has(rowIndex))
+                        this._selectedRowIndices.add(rowIndex);
+                }
+                for (const rowIndex of deselections) {
+                    // istanbul ignore else
+                    if (this._selectedRowIndices.has(rowIndex))
+                        this._selectedRowIndices.delete(rowIndex);
+                }
+                this.forceUpdate();
+            },
+            areEqual: (item1, item2) => item1 === item2,
+        };
+        this._cellComponentSelectionHandler = {
+            deselectAll: () => {
+                this._selectedCellKeys = new Map();
+                this.forceUpdate();
+            },
+            selectBetween: (item1, item2) => {
+                const selections = [];
+                const lowerIndex = item1.rowIndex < item2.rowIndex ? item1.rowIndex : item2.rowIndex;
+                const higherIndex = item1.rowIndex > item2.rowIndex ? item1.rowIndex : item2.rowIndex;
+                let secondItem;
+                let firstItemFound = false;
+                let secondItemFound = false;
+                for (let rowIndex = lowerIndex; rowIndex <= higherIndex; rowIndex++) {
+                    for (const column of this.state.columns) {
+                        if (!firstItemFound) {
+                            if (rowIndex === item1.rowIndex && column.key === item1.columnKey) {
+                                firstItemFound = true;
+                                secondItem = item2;
+                            }
+                            else {
+                                // istanbul ignore else
+                                if (rowIndex === item2.rowIndex && column.key === item2.columnKey) {
+                                    firstItemFound = true;
+                                    secondItem = item1;
+                                }
+                                else
+                                    continue;
+                            }
+                        }
+                        const cellKey = { rowIndex, columnKey: column.key };
+                        if (!this.isCellSelected(cellKey))
+                            selections.push(cellKey);
+                        if (rowIndex === secondItem.rowIndex && column.key === secondItem.columnKey) {
+                            secondItemFound = true;
+                            break;
+                        }
+                    }
+                    if (secondItemFound)
+                        break;
+                }
+                this.selectCells(selections);
+                this.forceUpdate();
+                return selections;
+            },
+            updateSelection: (selections, deselections) => {
+                this.selectCells(selections);
+                this.deselectCells(deselections);
+                this.forceUpdate();
+            },
+            areEqual: (item1, item2) => item1.rowIndex === item2.rowIndex && item1.columnKey === item2.columnKey,
+        };
+        this._rowGetter = (i) => {
+            if (this.state.rows[i])
+                return this.state.rows[i];
+            // get another page of rows
+            // note: always start loading at the beginning of a page to avoid
+            // requesting duplicate data (e.g. a page that starts at 0, at 1, at 2, ...)
+            this._rowGetterAsync(i - (i % this._pageAmount)); // eslint-disable-line @typescript-eslint/no-floating-promises
+            // Return placeholder object
+            return { item: { key: "", cells: [] }, index: i, cells: {} };
+        };
+        this._rowGetterAsync = memoize(async (index) => {
+            // istanbul ignore next
+            if (index < 0)
+                return;
+            // load up to `this._pageAmount` more rows
+            const maxIndex = Math.min(this.state.rowsCount, index + this._pageAmount);
+            const loadResult = await this.loadRows(index, maxIndex);
+            // istanbul ignore next
+            if (!this._isMounted)
+                return;
+            // istanbul ignore next
+            if (this._pendingUpdate !== 0 /* None */)
+                return;
+            const selectedRowIndices = this._selectedRowIndices;
+            for (const rowIndex of loadResult.selectedRowIndices) {
+                // istanbul ignore else
+                if (!selectedRowIndices.has(rowIndex))
+                    selectedRowIndices.add(rowIndex);
+            }
+            this._selectedRowIndices = selectedRowIndices;
+            this.selectCells(loadResult.selectedCellKeys);
+            this.setState((prev) => {
+                const rows = [...prev.rows];
+                loadResult.rows.forEach((r, i) => { rows[index + i] = r; });
+                return { rows };
+            }, async () => {
+                if (this.props.onRowsLoaded)
+                    this.props.onRowsLoaded(index, index + loadResult.rows.length - 1);
+                const showFilter = this._isShowFilterRow();
+                if (showFilter !== this._filterRowShown)
+                    this.toggleFilterRow(showFilter);
+            });
+        });
+        this._handleGridSort = (columnKey, sortDirection) => {
+            let directionEnum;
+            switch (sortDirection) {
+                case "ASC":
+                    directionEnum = SortDirection.Ascending;
+                    break;
+                case "DESC":
+                    directionEnum = SortDirection.Descending;
+                    break;
+                case "NONE":
+                default:
+                    directionEnum = SortDirection.NoSort;
+                    break;
+            }
+            // Sort the column
+            this.gridSortAsync(columnKey, directionEnum); // eslint-disable-line @typescript-eslint/no-floating-promises
+            this._queuePokeScroll();
+        };
+        this._createRowRenderer = () => {
+            return (props) => {
+                // istanbul ignore next
+                const renderRow = this.props.renderRow ? this.props.renderRow : this.renderRow;
+                const { row: rowProps, ...reactDataGridRowProps } = props;
+                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                    const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(props.row.index));
+                    const onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
+                    const onMouseDown = () => {
+                        this._rowSelectionHandler.createDragAction(this._rowComponentSelectionHandler, [this.rowItemSelectionHandlers], props.row.index);
+                    };
+                    const onMouseMove = (e) => {
+                        // istanbul ignore else
+                        if (e.buttons === 1)
+                            this._rowSelectionHandler.updateDragAction(props.row.index);
+                    };
+                    const isSelected = this._selectedRowIndices.has(props.row.index);
+                    const cells = this.createRowCells(rowProps, isSelected);
+                    const row = renderRow(rowProps.item, { ...reactDataGridRowProps, cells, isSelected });
+                    return React.createElement("div", { className: classnames("components-table-row"), onClickCapture: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, style: props.row.style, role: "presentation" }, row);
+                }
+                else {
+                    const cells = this.createRowCells(rowProps, false);
+                    return renderRow(rowProps.item, { ...reactDataGridRowProps, cells });
+                }
+            };
+        };
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.renderRow = (item, props) => {
+            return React.createElement(TableRow, { key: item.key, ...props });
+        };
+        this._onMouseUp = () => {
+            if (this._tableSelectionTarget === TableSelectionTarget.Row)
+                this._rowSelectionHandler.completeDragAction();
+            else
+                this._cellSelectionHandler.completeDragAction();
+        };
+        this._onMouseDown = () => {
+            document.addEventListener("mouseup", this._onMouseUp, { capture: true, once: true });
+        };
+        this._onHeaderDrop = (source, target) => {
+            const cols = [...this.state.columns];
+            const columnSourceIndex = this.state.columns.findIndex((i) => i.key === source);
+            const columnTargetIndex = this.state.columns.findIndex((i) => i.key === target);
+            cols.splice(columnTargetIndex, 0, cols.splice(columnSourceIndex, 1)[0]);
+            // istanbul ignore else
+            if (this.props.settingsIdentifier) {
+                const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ new LocalStateStorage();
+                const keys = cols.map((col) => col.key);
+                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys); // eslint-disable-line @typescript-eslint/no-floating-promises
+            }
+            this.setState({ columns: [] }, () => {
+                this.setState({ columns: cols });
+            });
+        };
+        this._deactivateCellEditor = () => {
+            if (this.state.cellEditorState.active)
+                this.setState({ cellEditorState: { active: false } }, () => setTimeout(() => this.setFocusToSelected()));
+        };
+        this._onCellCommit = async (args) => {
+            // istanbul ignore else
+            if (this.props.onPropertyUpdated) {
+                const cellUpdatedArgs = {
+                    rowIndex: this.state.cellEditorState.rowIndex,
+                    colIndex: this.state.cellEditorState.colIndex,
+                    cellKey: this.state.cellEditorState.cellKey,
+                };
+                const allowed = await this.props.onPropertyUpdated(args, cellUpdatedArgs);
+                // istanbul ignore else
+                if (allowed && this.state.cellEditorState.rowIndex !== undefined && this.state.cellEditorState.rowIndex >= 0) {
+                    this._deactivateCellEditor();
+                    await this.updateRows();
+                }
+                else {
+                    this._deactivateCellEditor();
+                }
+            }
+        };
+        this._getVisibleColumns = () => {
+            return this.state.columns
+                .filter((tableColumn) => this.state.hiddenColumns.indexOf(tableColumn.key) === -1)
+                .map((tableColumn) => tableColumn.reactDataGridColumn);
+        };
+        this._handleShowHideContextMenu = (e) => {
+            const header = e.currentTarget.querySelector(".react-grid-Header");
+            // istanbul ignore else
+            if (header) {
+                const headerRect = header.getBoundingClientRect();
+                const offsetY = headerRect.top;
+                const height = headerRect.height;
+                const x = e.clientX, y = e.clientY;
+                // istanbul ignore else
+                if (y < offsetY + height) {
+                    e.preventDefault();
+                    this.setState({
+                        menuX: x, menuY: y,
+                        menuVisible: true,
+                    });
+                }
+            }
+        };
+        this._hideContextMenu = () => {
+            // istanbul ignore else
+            if (this.props.showHideColumns)
+                this.setState({ menuVisible: false });
+        };
+        // istanbul ignore next
+        this._handleShowHideChange = (cols) => {
+            this.setState({ hiddenColumns: cols });
+            if (this.props.settingsIdentifier) {
+                const stateStorage = this.props.settingsStorage || new LocalStateStorage();
+                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns", cols); // eslint-disable-line @typescript-eslint/no-floating-promises
+            }
+            return true;
+        };
+        // istanbul ignore next
+        this._onDialogOpen = (dialogState) => this.setState({ dialog: dialogState });
+        // istanbul ignore next
+        this._onDialogClose = () => this.setState({ dialog: undefined });
+        this._handleFilterChange = (filter) => {
+            const columnKey = filter.column.key;
+            const tableColumn = this.state.columns.find((column) => column.key === columnKey);
+            // istanbul ignore else
+            if (tableColumn) {
+                setTimeout(async () => {
+                    await DataGridFilterParser.handleFilterChange(filter, tableColumn.columnFilterDescriptor, tableColumn.columnDescription, this._applyFilter);
+                });
+            }
+        };
+        // istanbul ignore next
+        this._handleOnClearFilters = () => {
+            this.filterDescriptors.clear();
+            this._applyFilter(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._applyFilter = async () => {
+            // istanbul ignore else
+            if (this.props.dataProvider.applyFilterDescriptors) {
+                await this.props.dataProvider.applyFilterDescriptors(this.filterDescriptors);
+                await this.updateRows();
+                // istanbul ignore else
+                if (this.props.onApplyFilter)
+                    this.props.onApplyFilter();
+            }
+        };
+        // istanbul ignore next
+        this._getValidFilterValues = (columnKey) => {
+            const tableColumn = this.state.columns.find((column) => column.reactDataGridColumn.key === columnKey);
+            if (tableColumn && tableColumn.distinctValueCollection) {
+                return tableColumn.distinctValueCollection.values;
+            }
+            return [];
+        };
+        // TODO: Enable, when table gets refactored. Explanation in ./../table/NonPrimitiveValueRenderer
+        // private _onPopupShow = (popupState: PropertyPopupState) => this.setState({ popup: popupState });
+        // private _onPopupHide = () =>  this.setState({ popup: undefined });
+        // istanbul ignore next
+        this._onScroll = (scrollData) => {
+            this._topRowIndex = scrollData.rowVisibleStartIdx;
+            if (this.props.onScrollToRow)
+                this.props.onScrollToRow(scrollData.rowVisibleStartIdx);
+        };
+        this._onKeyboardEvent = (e, keyDown) => {
+            if (isNavigationKey(e.key) && !this.state.cellEditorState.active && !this.isFocusOnInputElement()) {
+                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                    const handleKeyboardSelectItem = (index) => {
+                        const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(index));
+                        selectionFunction(e.shiftKey, e.ctrlKey);
+                    };
+                    const handleKeyboardActivateItem = (index) => {
+                        // istanbul ignore else
+                        if (this.state.keyboardEditorCellKey) {
+                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
+                            // istanbul ignore else
+                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
+                                const columnDescription = this.state.columns[columnIndex].columnDescription;
+                                // istanbul ignore else
+                                if (columnDescription && columnDescription.editable)
+                                    this.activateCellEditor(index, columnIndex, this.state.keyboardEditorCellKey);
+                            }
+                        }
+                    };
+                    const handleCrossAxisArrowKey = (forward) => {
+                        // istanbul ignore else
+                        if (this.state.keyboardEditorCellKey) {
+                            let newEditorCellKey;
+                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
+                            // istanbul ignore else
+                            if (columnIndex >= 0) {
+                                let newColIndex = columnIndex;
+                                while (!newEditorCellKey) {
+                                    if (forward)
+                                        newColIndex++;
+                                    else
+                                        newColIndex--;
+                                    if (newColIndex < 0)
+                                        newColIndex = this.state.columns.length - 1;
+                                    else if (newColIndex >= this.state.columns.length)
+                                        newColIndex = 0;
+                                    // istanbul ignore next
+                                    if (newColIndex === columnIndex)
+                                        break;
+                                    const isEditable = this.state.columns[newColIndex].columnDescription.editable;
+                                    if (isEditable)
+                                        newEditorCellKey = this.state.columns[newColIndex].key;
+                                }
+                                // istanbul ignore else
+                                if (newEditorCellKey)
+                                    this.setState({ keyboardEditorCellKey: newEditorCellKey });
+                            }
+                        }
+                    };
+                    const itemKeyboardNavigator = new ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
+                    itemKeyboardNavigator.orientation = Orientation.Vertical;
+                    itemKeyboardNavigator.allowWrap = false;
+                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
+                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
+                    const processedRow = this._rowSelectionHandler.processedItem ? this._rowSelectionHandler.processedItem /* istanbul ignore next */ : 0;
+                    keyDown ?
+                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
+                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
+                }
+                else {
+                    const handleKeyboardSelectItem = (index) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const cellKey = { rowIndex: index, columnKey: processedCell.columnKey };
+                            const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                            const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                            selectionFunction(e.shiftKey, e.ctrlKey);
+                        }
+                    };
+                    const handleKeyboardActivateItem = (index) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
+                            // istanbul ignore else
+                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
+                                const columnDescription = this.state.columns[columnIndex].columnDescription;
+                                // istanbul ignore else
+                                if (columnDescription && columnDescription.editable)
+                                    this.activateCellEditor(index, columnIndex, processedCell.columnKey);
+                            }
+                        }
+                    };
+                    const handleCrossAxisArrowKey = (forward) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
+                            // istanbul ignore else
+                            if (columnIndex >= 0) {
+                                let newColIndex = columnIndex;
+                                if (forward)
+                                    newColIndex++;
+                                else
+                                    newColIndex--;
+                                if (newColIndex < 0)
+                                    newColIndex = this.state.columns.length - 1;
+                                else if (newColIndex >= this.state.columns.length)
+                                    newColIndex = 0;
+                                const columnKey = this.state.columns[newColIndex].key;
+                                const cellKey = { rowIndex: processedCell.rowIndex, columnKey };
+                                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                                selectionFunction(e.shiftKey, e.ctrlKey);
+                            }
+                        }
+                    };
+                    const itemKeyboardNavigator = new ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
+                    itemKeyboardNavigator.orientation = Orientation.Vertical;
+                    itemKeyboardNavigator.allowWrap = false;
+                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
+                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
+                    const processedRow = this._cellSelectionHandler.processedItem ? this._cellSelectionHandler.processedItem.rowIndex : /* istanbul ignore next */ 0;
+                    keyDown ?
+                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
+                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
+                }
+            }
+        };
+        this._onKeyDown = (e) => this._onKeyboardEvent(e, true);
+        this._onKeyUp = (e) => this._onKeyboardEvent(e, false);
+        if (props.pageAmount)
+            this._pageAmount = props.pageAmount;
+        this._disposableListeners.add(props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
+        this._disposableListeners.add(props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
+        this._rowSelectionHandler = new SelectionHandler(props.selectionMode ? props.selectionMode : SelectionMode.Single);
+        this._cellSelectionHandler = new SelectionHandler(props.selectionMode ? props.selectionMode : SelectionMode.Single);
+        this._rowSelectionHandler.onItemsSelectedCallback = this._onRowsSelected;
+        this._rowSelectionHandler.onItemsDeselectedCallback = this._onRowsDeselected;
+        this._cellSelectionHandler.onItemsSelectedCallback = this._onCellsSelected;
+        this._cellSelectionHandler.onItemsDeselectedCallback = this._onCellsDeselected;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    get rowItemSelectionHandlers() {
+        // istanbul ignore else
+        if (!this._rowItemSelectionHandlers) {
+            this._rowItemSelectionHandlers = [];
+            for (let i = 0; i < this.state.rowsCount; i++)
+                this._rowItemSelectionHandlers.push(this.createRowItemSelectionHandler(i));
+        }
+        return this._rowItemSelectionHandlers;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    get cellItemSelectionHandlers() {
+        // istanbul ignore else
+        if (!this._cellItemSelectionHandlers) {
+            this._cellItemSelectionHandlers = [];
+            for (let rowIndex = 0; rowIndex < this.state.rowsCount; rowIndex++) {
+                this._cellItemSelectionHandlers[rowIndex] = [];
+                for (const column of this.state.columns) {
+                    this._cellItemSelectionHandlers[rowIndex].push(this.createCellItemSelectionHandler({ rowIndex, columnKey: column.key }));
+                }
+            }
+        }
+        return this._cellItemSelectionHandlers;
+    }
+    async *createRowIterator(rowIndices) {
+        for (const index of rowIndices)
+            yield await this.props.dataProvider.getRow(index);
+    }
+    async *createCellIterator(cellKeys) {
+        for (const key of cellKeys) {
+            const row = await this.props.dataProvider.getRow(key.rowIndex);
+            yield [row, this._getCellItem(row, key.columnKey)];
+        }
+    }
+    get _tableSelectionTarget() {
+        return this.props.tableSelectionTarget ? this.props.tableSelectionTarget : TableSelectionTarget.Row;
+    }
+    /** @internal */
+    componentDidUpdate(previousProps, previousState) {
+        this._rowSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionMode.Single;
+        this._cellSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionMode.Single;
+        if (previousProps.dataProvider !== this.props.dataProvider) {
+            this._disposableListeners.dispose();
+            this._disposableListeners.add(this.props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
+            this._disposableListeners.add(this.props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
+        }
+        if (this.props.dataProvider !== previousProps.dataProvider) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.update();
+            return;
+        }
+        // When hiddenColumns length is changed, we need to re-render component so that cell widths would be calculated appropriately.
+        if (previousState.hiddenColumns.length !== this.state.hiddenColumns.length)
+            this.forceUpdate();
+        if (this.props.isCellSelected !== previousProps.isCellSelected
+            || this.props.isRowSelected !== previousProps.isRowSelected
+            || this.props.tableSelectionTarget !== previousProps.tableSelectionTarget) {
+            this.updateSelectedRows();
+            this.updateSelectedCells();
+        }
+        if (this.props.scrollToRow !== previousProps.scrollToRow) {
+            // istanbul ignore else
+            if (this.props.scrollToRow !== undefined)
+                this.scrollToRow(this.props.scrollToRow);
+        }
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+    /** @internal */
+    componentDidMount() {
+        let gridContainer = null;
+        this._isMounted = true;
+        // The previously used ReactResizeDetector, which does not work in popout/child windows, used deprecated React.findDomNode
+        // which is now deprecated so, so new ElementResizeObserver requires you to pass the element to observe. So get the
+        // same HTMLDivElement from grid as was used previously by ReactResizeDetector.
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            gridContainer = grid.getDataGridDOMNode();
+        }
+        this.setState({ gridContainer }, () => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.update();
+        });
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+        this._disposableListeners.dispose();
+        this._unsetPokeScrollTimeout();
+    }
+    scrollToRow(rowIndex) {
+        // istanbul ignore else
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
+                const top = TABLE_ROW_HEIGHT * rowIndex;
+                const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
+                gridCanvas.scrollTop = top;
+                this._topRowIndex = rowIndex;
+                // istanbul ignore else
+                if (this.props.onScrollToRow)
+                    this.props.onScrollToRow(rowIndex);
+            }
+        }
+    }
+    setFocusToSelected() {
+        // istanbul ignore next
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.getDataGridDOMNode) {
+                const gridSelected = grid.getDataGridDOMNode().querySelector(".rdg-selected");
+                // istanbul ignore else
+                if (gridSelected) {
+                    gridSelected.focus();
+                }
+            }
+        }
+    }
+    async handlePendingUpdate() {
+        const update = this._pendingUpdate;
+        this._pendingUpdate = 0 /* None */;
+        let status = 0 /* Continue */;
+        if (update === 2 /* Complete */)
+            status = await this.updateColumns();
+        // istanbul ignore else
+        if (status === 0 /* Continue */ && update > 0 /* None */)
+            status = await this.updateRows();
+        return status;
+    }
+    async updateColumns() {
+        if (this._currentUpdate !== 0 /* None */) {
+            this._pendingUpdate = 2 /* Complete */;
+            return 1 /* Abort */;
+        }
+        this._currentUpdate = 2 /* Complete */;
+        const columnDescriptions = await this.props.dataProvider.getColumns();
+        this._currentUpdate = 0 /* None */;
+        // istanbul ignore next
+        if (!this._isMounted)
+            return 1 /* Abort */;
+        if (this._pendingUpdate === 2 /* Complete */) {
+            await this.handlePendingUpdate();
+            return 1 /* Abort */;
+        }
+        let dataGridColumns = columnDescriptions.map(this._columnDescriptionToReactDataGridColumn);
+        if (this.props.settingsIdentifier) {
+            const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ this.props.uiStateStorage || /* istanbul ignore next */ new LocalStateStorage();
+            const reorderResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnReorder");
+            // istanbul ignore next
+            if (reorderResult.status === UiStateStorageStatus.Success) {
+                const setting = reorderResult.setting;
+                // map columns according to the keys in columns, in the order of the loaded array of keys
+                dataGridColumns = setting.map((key) => dataGridColumns.filter((col) => col.key === key)[0]);
+            }
+            else if (reorderResult.status === UiStateStorageStatus.NotFound) {
+                const keys = columnDescriptions.map((col) => col.key);
+                await stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys);
+            }
+            const showhideResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns");
+            // istanbul ignore next
+            if (showhideResult.status === UiStateStorageStatus.Success) {
+                const hiddenColumns = showhideResult.setting;
+                this.setState({ hiddenColumns });
+            }
+        }
+        let keyboardEditorCellKey;
+        const tableColumns = dataGridColumns.map((dataGridColumn, index) => {
+            const tableColumn = new TableColumn(this, columnDescriptions[index], dataGridColumn);
+            tableColumn.dataProvider = this.props.dataProvider;
+            if (!keyboardEditorCellKey && tableColumn.columnDescription.editable)
+                keyboardEditorCellKey = tableColumn.key;
+            if (tableColumn.filterable)
+                dataGridColumn.filterableColumn = tableColumn;
+            return tableColumn;
+        });
+        for (const tableColumn of tableColumns) {
+            if (tableColumn.filterable)
+                tableColumn.distinctValueCollection = await tableColumn.getDistinctValues(this.props.maximumDistinctValues);
+        }
+        this.setState({ columns: tableColumns, keyboardEditorCellKey });
+        if (this._pendingUpdate !== 0 /* None */) {
+            return this.handlePendingUpdate();
+        }
+        return 0 /* Continue */;
+    }
+    async updateRows() {
+        if (this._currentUpdate !== 0 /* None */) {
+            if (this._pendingUpdate === 0 /* None */)
+                this._pendingUpdate = 1 /* Rows */;
+            return 1 /* Abort */;
+        }
+        this._currentUpdate = 1 /* Rows */;
+        const rowsCount = await this.props.dataProvider.getRowsCount();
+        this._currentUpdate = 0 /* None */;
+        // istanbul ignore next
+        if (!this._isMounted)
+            return 1 /* Abort */;
+        if (this._pendingUpdate !== 0 /* None */) {
+            return this.handlePendingUpdate();
+        }
+        if (rowsCount !== this.state.rowsCount) {
+            this._rowItemSelectionHandlers = undefined;
+            this._cellItemSelectionHandlers = undefined;
+            // when updating the rows with new data from dataProvider clear out existing selections
+            this._selectedRowIndices.clear();
+            this._selectedCellKeys.clear();
+        }
+        this._rowGetterAsync.cache.clear();
+        this.setState({ rowsCount, rows: [] });
+        return 0 /* Continue */;
+    }
+    /** @internal */
+    async update() {
+        let status = await this.updateColumns();
+        if (status !== 1 /* Abort */)
+            status = await this.updateRows();
+        if (this.props.scrollToRow !== undefined)
+            this.scrollToRow(this.props.scrollToRow);
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+        return status;
+    }
+    /** @internal */
+    updateSelectedRows() {
+        const selectedRowIndices = new Set();
+        if (this.props.isRowSelected) {
+            for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
+                if (this.state.rows[rowIndex] && this.props.isRowSelected(this.state.rows[rowIndex].item))
+                    selectedRowIndices.add(rowIndex);
+            }
+        }
+        this._selectedRowIndices = selectedRowIndices;
+        this.forceUpdate();
+    }
+    /** @internal */
+    updateSelectedCells() {
+        const selectedCellKeys = new Map();
+        if (this.props.isCellSelected) {
+            for (const column of this.state.columns) {
+                const set = new Set();
+                for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
+                    // istanbul ignore next
+                    if (!this.state.rows[rowIndex])
+                        continue;
+                    const cellItem = this._getCellItem(this.state.rows[rowIndex].item, column.key);
+                    if (this.props.isCellSelected(rowIndex, cellItem))
+                        set.add(rowIndex);
+                }
+                // istanbul ignore else
+                if (set.size !== 0)
+                    selectedCellKeys.set(column.key, set);
+            }
+        }
+        this._selectedCellKeys = selectedCellKeys;
+        this.forceUpdate();
+    }
+    isCellSelected(key) {
+        const set = this._selectedCellKeys.get(key.columnKey);
+        if (set)
+            return set.has(key.rowIndex);
+        return false;
+    }
+    selectCells(cellKeys) {
+        for (const key of cellKeys) {
+            let set = this._selectedCellKeys.get(key.columnKey);
+            if (!set) {
+                set = new Set();
+                this._selectedCellKeys.set(key.columnKey, set);
+            }
+            set.add(key.rowIndex);
+        }
+    }
+    deselectCells(cellKeys) {
+        for (const key of cellKeys) {
+            // istanbul ignore else
+            const set = this._selectedCellKeys.get(key.columnKey);
+            // istanbul ignore else
+            if (set)
+                set.delete(key.rowIndex);
+        }
+    }
+    createRowItemSelectionHandler(rowIndex) {
+        return {
+            preselect: () => {
+                this._pressedItemSelected = this._selectedRowIndices.has(rowIndex);
+            },
+            select: () => {
+                // istanbul ignore else
+                if (!this._selectedRowIndices.has(rowIndex)) {
+                    this._selectedRowIndices.add(rowIndex);
+                    if (!this._pressedItemSelected)
+                        this.forceUpdate();
+                }
+            },
+            deselect: () => {
+                // istanbul ignore else
+                if (this._selectedRowIndices.has(rowIndex)) {
+                    this._selectedRowIndices.delete(rowIndex);
+                    this.forceUpdate();
+                }
+            },
+            isSelected: () => this._selectedRowIndices.has(rowIndex),
+            item: () => rowIndex,
+        };
+    }
+    createCellItemSelectionHandler(cellKey) {
+        return {
+            preselect: () => {
+                this._pressedItemSelected = this.isCellSelected(cellKey);
+            },
+            select: () => {
+                this.selectCells([cellKey]);
+                this.forceUpdate();
+            },
+            deselect: () => {
+                this.deselectCells([cellKey]);
+                this.forceUpdate();
+            },
+            isSelected: () => this.isCellSelected(cellKey),
+            item: () => cellKey,
+        };
+    }
+    async renderCellContent(cellItem, column, displayValue) {
+        if (column.icon)
+            return () => React.createElement(TableIconCellContent, { iconName: displayValue });
+        return (props) => {
+            var _a;
+            return (React.createElement(TableCellContent, { height: TABLE_ROW_HEIGHT, isSelected: props.isSelected, cellItem: cellItem, onDialogOpen: this._onDialogOpen, propertyValueRendererManager: this.props.propertyValueRendererManager
+                    ? this.props.propertyValueRendererManager
+                    : PropertyValueRendererManager.defaultManager, style: { zIndex: (((_a = cellItem.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) > 1) ? 1 : undefined } }));
+        };
+    }
+    async getCellDisplayValue(cellItem) {
+        var _a;
+        // istanbul ignore next
+        if (!cellItem.record || cellItem.record.value.valueFormat !== PropertyValueFormat.Primitive)
+            return "";
+        const value = cellItem.record.value.value;
+        if (value === undefined)
+            return "";
+        const displayValue = await TypeConverterManager
+            .getConverter(cellItem.record.property.typename, (_a = cellItem.record.property.converter) === null || _a === void 0 ? void 0 : _a.name)
+            .convertPropertyToString(cellItem.record.property, value);
+        return displayValue ? displayValue : /* istanbul ignore next */ "";
+    }
+    async createPropsForRowItem(item, index) {
+        const cellProps = {};
+        for (const column of this.state.columns) {
+            const cellItem = this._getCellItem(item, column.key);
+            const displayValue = await this.getCellDisplayValue(cellItem);
+            cellProps[column.key] = {
+                item: cellItem,
+                displayValue,
+                render: await this.renderCellContent(cellItem, column.reactDataGridColumn, displayValue),
+            };
+        }
+        const rowStyle = TableRowStyleProvider.createStyle(item.colorOverrides ? item.colorOverrides : {});
+        return {
+            item,
+            index,
+            cells: cellProps,
+            render: undefined,
+            style: rowStyle,
+        };
+    }
+    async loadRows(beginIndex, endIndex) {
+        const result = {
+            rows: [],
+            selectedRowIndices: [],
+            selectedCellKeys: [],
+        };
+        this._rowLoadGuid = Guid.createValue();
+        const currentSelectedRowGuid = this._rowLoadGuid;
+        const promises = new Array();
+        for (let i = beginIndex; i < endIndex; ++i) {
+            promises.push(this.props.dataProvider.getRow(i).then(async (rowData) => this.createPropsForRowItem(rowData, i).then((rowProps) => (rowProps))));
+        }
+        try {
+            result.rows = await Promise.all(promises);
+        }
+        catch { }
+        // istanbul ignore else
+        // Check if another loadRows got called while this one was still going
+        if (currentSelectedRowGuid === this._rowLoadGuid) {
+            for (const rowProps of result.rows) {
+                if (this.props.isRowSelected && this.props.isRowSelected(rowProps.item))
+                    result.selectedRowIndices.push(rowProps.index);
+                if (this.props.isCellSelected) {
+                    for (const column of this.state.columns) {
+                        const cellItem = this._getCellItem(rowProps.item, column.key);
+                        if (this.props.isCellSelected(rowProps.index, cellItem))
+                            result.selectedCellKeys.push({ rowIndex: rowProps.index, columnKey: column.key });
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    getColumnIndexFromKey(columnKey) {
+        return this.state.columns.findIndex((column) => column.key === columnKey);
+    }
+    async gridSortAsync(columnKey, directionEnum) {
+        const columnIndex = this.getColumnIndexFromKey(columnKey);
+        // istanbul ignore next
+        if (columnIndex < 0)
+            return;
+        await this.props.dataProvider.sort(columnIndex, directionEnum);
+        // istanbul ignore next
+        if (!this._isMounted)
+            return;
+        this.updateRows(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    createRowCells(rowProps, isSelected) {
+        var _a;
+        const cells = {};
+        let gridColumns = [];
+        let foundHiddenColumns = 0;
+        // istanbul ignore else
+        if (this._gridRef.current && this._gridRef.current.getDataGridDOMNode)
+            gridColumns = this._gridRef.current.getDataGridDOMNode().querySelectorAll(".react-grid-HeaderCell");
+        for (let index = 0; index < this.state.columns.length; index++) {
+            const column = this.state.columns[index];
+            const cellProps = rowProps.cells[column.key];
+            if (!cellProps) {
+                continue;
+            }
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const CellContent = cellProps.render;
+            const isEditorCell = this.state.cellEditorState.active
+                && this.state.cellEditorState.rowIndex === rowProps.index
+                && this.state.cellEditorState.colIndex === index
+                && cellProps.item.record;
+            let onClick;
+            let onMouseMove;
+            let onMouseDown;
+            let className;
+            const cellKey = { rowIndex: rowProps.index, columnKey: column.key };
+            if (this._tableSelectionTarget === TableSelectionTarget.Cell) {
+                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
+                onMouseMove = (e) => {
+                    // istanbul ignore else
+                    if (e.buttons === 1)
+                        this._cellSelectionHandler.updateDragAction(cellKey);
+                };
+                onMouseDown = () => {
+                    this._cellSelectionHandler.createDragAction(this._cellComponentSelectionHandler, this.cellItemSelectionHandlers, cellKey);
+                };
+                className = classnames({ "is-selected": this.isCellSelected(cellKey) });
+            }
+            else {
+                if (this._selectedRowIndices.has(rowProps.index))
+                    className = classnames({ "is-keyboard-editable": this.state.keyboardEditorCellKey === column.key });
+            }
+            className = classnames(className, this.getCellBorderStyle(cellKey));
+            const mergedAdjacentCellsCount = ((_a = cellProps.item.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) - 1;
+            let cellWidth = 0;
+            for (let i = 0; i <= mergedAdjacentCellsCount; i++) {
+                const col = this.state.columns[index + i];
+                if (this.state.hiddenColumns.indexOf(col.key) === -1) {
+                    const gridColumn = gridColumns[index + i - foundHiddenColumns];
+                    const gridColumnWidth = gridColumn ? gridColumn.getBoundingClientRect().width : 0;
+                    cellWidth += gridColumnWidth;
+                }
+                else {
+                    foundHiddenColumns++;
+                }
+                if (i > 0) {
+                    cells[col.key] = (React.createElement(TableCell, { className: className.replace("border-bottom", ""), title: "empty-cell", onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown }));
+                }
+                const mergedColumn = this.state.columns[index + i];
+                const emptyCellKey = { rowIndex: rowProps.index, columnKey: mergedColumn.key };
+                className = classnamesDedupe(className, this.getCellBorderStyle(emptyCellKey));
+            }
+            index += mergedAdjacentCellsCount;
+            cells[column.key] = (React.createElement(TableCell, { className: className, title: cellProps.displayValue, onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, cellEditingProps: isEditorCell ? {
+                    onCancel: this._deactivateCellEditor,
+                    onCommit: this._onCellCommit,
+                    propertyRecord: cellProps.item.record,
+                    setFocus: true,
+                } : undefined, style: { width: (mergedAdjacentCellsCount > 0) ? cellWidth : undefined } },
+                React.createElement(CellContent, { isSelected: isSelected })));
+        }
+        return cells;
+    }
+    getCellBorderStyle(key) {
+        const isCellSelected = (cellKey) => {
+            if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                return this._selectedRowIndices.has(cellKey.rowIndex);
+            }
+            return this.isCellSelected(cellKey);
+        };
+        const cellIsSelected = isCellSelected(key);
+        const columnIndex = this.state.columns.findIndex((column) => key.columnKey === column.key);
+        const isTopBorderVisible = () => {
+            if (key.rowIndex === 0) {
+                return cellIsSelected;
+            }
+            if (cellIsSelected) {
+                return !isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
+            }
+            // Bottom border is rendered by drawing the top border on the node below
+            // Check if the node above needs its bottom border drawn
+            return isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
+        };
+        const isRightBorderVisible = () => {
+            if (!cellIsSelected) {
+                return false;
+            }
+            if (columnIndex === this.state.columns.length - 1) {
+                return true;
+            }
+            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex + 1].key });
+        };
+        const isBottomBorderVisible = () => {
+            return cellIsSelected && key.rowIndex === this.state.rowsCount - 1;
+        };
+        const isLeftBorderVisible = () => {
+            if (!cellIsSelected) {
+                return false;
+            }
+            if (columnIndex === 0) {
+                return true;
+            }
+            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex - 1].key });
+        };
+        return classnames({
+            "border-top": isTopBorderVisible(),
+            "border-right": isRightBorderVisible(),
+            "border-bottom": isBottomBorderVisible(),
+            "border-left": isLeftBorderVisible(),
+        });
+    }
+    cellEditOnClick(column, _ev, args) {
+        // Prevent editing when property record is not primitive
+        // istanbul ignore else
+        if (this.state.rows[args.rowIdx]) {
+            const record = this._getCellItem(this.state.rows[0].item, column.key).record;
+            // istanbul ignore next
+            if (record && record.value.valueFormat !== PropertyValueFormat.Primitive)
+                return;
+        }
+        if (this.state.keyboardEditorCellKey !== column.key)
+            this.setState({ keyboardEditorCellKey: column.key });
+        let activate = false;
+        if (this._pressedItemSelected)
+            activate = true;
+        if (activate)
+            this.activateCellEditor(args.rowIdx, args.idx, column.key);
+        else
+            this._deactivateCellEditor();
+    }
+    cellContextMenu(column, e, args) {
+        // istanbul ignore else
+        if (this.props.onCellContextMenu) {
+            const contextMenuArgs = {
+                rowIndex: args.rowIdx,
+                colIndex: args.idx,
+                cellKey: column.key,
+                event: e,
+            };
+            // istanbul ignore else
+            if (this.state.rows[args.rowIdx])
+                contextMenuArgs.cellItem = this._getCellItem(this.state.rows[args.rowIdx].item, column.key);
+            e.preventDefault();
+            this.props.onCellContextMenu(contextMenuArgs);
+        }
+    }
+    activateCellEditor(rowIndex, colIndex, cellKey) {
+        const cellEditorState = { active: true, rowIndex, colIndex, cellKey };
+        // istanbul ignore else
+        if (cellEditorState !== this.state.cellEditorState) {
+            this.setState({ cellEditorState }, () => {
+                // istanbul ignore else
+                if (this.props.onPropertyEditing)
+                    this.props.onPropertyEditing(cellEditorState);
+            });
+        }
+    }
+    /** @internal */
+    shouldComponentUpdate(_props) {
+        return true;
+    }
+    _isShowFilterRow() {
+        return this.state.columns.some((tableColumn) => tableColumn.filterable);
+    }
+    /** Turn on/off filter row */
+    toggleFilterRow(showFilter) {
+        // istanbul ignore else
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.onToggleFilter && showFilter !== this._filterRowShown) {
+                grid.onToggleFilter();
+                this._filterRowShown = showFilter;
+            }
+        }
+    }
+    /** Gets the filter descriptors for the table.
+     * @internal
+     */
+    get filterDescriptors() {
+        if (undefined === this._filterDescriptors) {
+            this._filterDescriptors = new TableFilterDescriptorCollection();
+            this._filterDescriptors.logicalOperator = FilterCompositionLogicalOperator.And;
+        }
+        return this._filterDescriptors;
+    }
+    /** Gets ECExpression to get property display value.
+     * @internal
+     */
+    // istanbul ignore next
+    getPropertyDisplayValueExpression(property) {
+        if (this.props.dataProvider.getPropertyDisplayValueExpression !== undefined)
+            return this.props.dataProvider.getPropertyDisplayValueExpression(property);
+        return property;
+    }
+    /** Determines if focus is in an input element - for filter checking */
+    isFocusOnInputElement() {
+        const element = document.activeElement;
+        return element &&
+            (element instanceof HTMLInputElement ||
+                element instanceof HTMLSelectElement ||
+                element instanceof HTMLTextAreaElement);
+    }
+    /** @internal */
+    render() {
+        const rowRenderer = React.createElement(TableRowRenderer, { rowRendererCreator: () => this._createRowRenderer() });
+        const visibleColumns = this._getVisibleColumns();
+        const tableClassName = classnames("components-table", "components-smallEditor-host", this.props.className, {
+            "hide-header": this.props.hideHeader,
+            "striped-rows": this.props.stripedRows,
+            "row-selection": this._tableSelectionTarget === TableSelectionTarget.Row,
+            "cell-selection": this._tableSelectionTarget === TableSelectionTarget.Cell,
+        });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: tableClassName, style: this.props.style, onMouseDown: this._onMouseDown, onContextMenu: this.props.showHideColumns ? this._handleShowHideContextMenu : undefined, onKeyDown: this._onKeyDown, onKeyUp: this._onKeyUp, role: "presentation" },
+                this.props.showHideColumns &&
+                    React.createElement(ShowHideMenu, { opened: this.state.menuVisible, items: this.state.columns.map((column) => ({ id: column.key, label: column.reactDataGridColumn.name })), x: this.state.menuX, y: this.state.menuY, initialHidden: this.state.hiddenColumns, onClose: this._hideContextMenu, onShowHideChange: this._handleShowHideChange }),
+                React.createElement(ElementResizeObserver, { watchedElement: this.state.gridContainer, render: ({ width, height }) => {
+                        setTimeout(() => this._queuePokeScroll());
+                        return (React.createElement(ReactDataGrid, { ref: this._gridRef, columns: visibleColumns, rowGetter: this._rowGetter, rowRenderer: rowRenderer, rowsCount: this.state.rowsCount, ...(this.props.reorderableColumns ? {
+                                draggableHeaderCell: DragDropHeaderCell,
+                                onHeaderDrop: this._onHeaderDrop,
+                            } : {}), minHeight: height, minWidth: width, headerRowHeight: TABLE_ROW_HEIGHT, rowHeight: TABLE_ROW_HEIGHT, onGridSort: this._handleGridSort, enableRowSelect: null, onAddFilter: this._handleFilterChange, onClearFilters: this._handleOnClearFilters, headerFiltersHeight: TABLE_FILTER_ROW_HEIGHT, getValidFilterValues: this._getValidFilterValues, onScroll: this._onScroll }));
+                    } })),
+            React.createElement("div", { ref: this._tableRef }, this.state.dialog
+                ?
+                    // istanbul ignore next
+                    React.createElement(Dialog, { opened: true, onClose: this._onDialogClose, title: this.state.dialog.title, height: "50vh" }, this.state.dialog.content)
+                : undefined)));
+    }
+}
+/**
+ * Default component for rendering a row for the Table
+ * @internal
+ */
+export class TableRow extends React.Component {
+    /** @internal */
+    render() {
+        const { cells, isSelected, ...props } = this.props;
+        return (React.createElement(ReactDataGrid.Row, { ...props, row: cells, isSelected: isSelected }));
+    }
+}
 //# sourceMappingURL=Table.js.map