d2coreui 23.0.13 → 23.0.15

package/components/grid/dataGrid.tsx

@@ -0,0 +1,2183 @@
+import React, {ReactElement} from "react";
+
+import {
+    ColumnWidthOutlined,
+    ControlOutlined,
+    DownloadOutlined,
+    FileSearchOutlined,
+    LoadingOutlined,
+    ReloadOutlined,
+    SearchOutlined,
+    SettingOutlined,
+    TableOutlined
+} from "@ant-design/icons";
+import {Button, Card, Dropdown, Empty, MenuProps, Space} from "antd";
+import {AgGridReact} from "ag-grid-react";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
+import 'd2coreui/style/ag-grid/aggrid-adaptations.css'
+import TextColumnFilter from "d2coreui/components/grid/filter/textColumnFilter"
+import CustomColumnFilter from "d2coreui/components/grid/filter/customColumnFilter"
+import SimpleHeader from "d2coreui/components/grid/header/simpleHeader"
+import DataGridEditor from "d2coreui/components/grid/config/dataGridEditor";
+import i18n from "d2core/i18n/i18n";
+import AutoCompleteInput from "d2coreui/components/input/autoCompleteInput";
+import isEqual from "lodash/isEqual"
+import getContextMenu, {ContextMenuProps, PageOrientation} from "d2coreui/components/grid/export/contextMenu";
+import LoadingOverlay from "d2coreui/components/grid/panel/loadingOverlay";
+import NoRecordsOverlay from "d2coreui/components/grid/panel/noRecordsOverlay";
+import at from "lodash/at"
+import ColumnTransfer from "d2coreui/components/grid/config/columnTransfer";
+import cloneDeep from "lodash/cloneDeep";
+import escape from "lodash/escape";
+import {RangeSelector} from "d2coreui/components/grid/cell/rangeSelector"
+import {
+    _defineModule,
+    CellClassParams,
+    CellContextMenuEvent,
+    CellCtrl,
+    CellFocusedEvent,
+    CellMouseDownEvent,
+    CellPosition,
+    ColDef,
+    Column,
+    ColumnEvent,
+    ColumnState,
+    FilterChangedEvent,
+    FilterModifiedEvent,
+    GetQuickFilterTextParams,
+    GetRowIdParams,
+    GridApi,
+    GridOptions,
+    GridReadyEvent,
+    ICellRendererParams,
+    IRowModel,
+    IRowNode,
+    ModuleRegistry,
+    NavigateToNextCellParams,
+    PaginationChangedEvent,
+    RowClassParams,
+    RowDataUpdatedEvent,
+    RowNode,
+    RowPinnedType,
+    RowStyle,
+    SortChangedEvent,
+    SuppressKeyboardEventParams,
+    ValueFormatterParams,
+    ValueGetterParams,
+    ViewportChangedEvent
+} from "ag-grid-community";
+import {LocaleHolder} from "d2core/i18n/localeHolder";
+import tableDefaultRowStyleRules, {
+    GridRowStyle,
+    RowStyleRule
+} from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
+import {ModalDialog, ModalDialogMode} from "d2coreui/components/modal/modalDialog";
+import debounce from "lodash/debounce";
+import {Key} from "ts-key-enum";
+import {ClipboardUtils} from "d2coreui/components/clipboard/clipboardUtils";
+import ProgressPopup from "d2coreui/components/grid/export/progressPopup";
+import TimeUtils from "d2core/utils/timeUtils";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import NumberCellEditor from "d2coreui/components/grid/cell/numberCellEditor";
+import TextCellEditor from "d2coreui/components/grid/cell/textCellEditor";
+import StatusTextCellEditor from "d2coreui/components/grid/cell/statusTextCellEditor";
+import DateCellEditor from "d2coreui/components/grid/cell/dateCellEditor";
+import memoizeOne from "memoize-one";
+import SimpleStatusTextCellEditor from "d2coreui/components/grid/cell/simpleStatusTextCellEditor";
+import DurationCellEditor from "d2coreui/components/grid/cell/durationCellEditor";
+import CustomEnumCellEditor from "d2coreui/components/grid/cell/customEnumCellEditor";
+import HexaValueCellEditor from "d2coreui/components/grid/cell/hexaValueCellEditor";
+import HexaOctetStringCellEditor from "d2coreui/components/grid/cell/hexaOctetStringCellEditor";
+import ReactDOM from "react-dom";
+import {D2000UnixTimeNullValue, unixTimeToMoment} from "d2core/types/unixTimeUtils";
+import {compileExpression} from "filtrex";
+import DataGridPagination from "./panel/dataGridPagination";
+import {
+    calculateLineHeight,
+    calculateRowHeight,
+    getFontSize,
+    getLineHeight,
+    getRowHeightDelta,
+    GRID_DEFAULT_FONT_SIZE,
+    GRID_DEFAULT_ROW_HEIGHT_DELTA
+} from "./config/rowHeightCalculator";
+import BeanAccessor, {GridApiWithPrivateAccess} from "./cell/beanAccessor";
+import WildcardQuickFilterEngine from "./filter/wildcardQuickFilterEngine";
+
+const gridFrameworkComponents = {
+    customColumnFilter: CustomColumnFilter,
+    textColumnFilter: TextColumnFilter,
+    numberCellEditor: NumberCellEditor,
+    textCellEditor: TextCellEditor,
+    simpleStatusTextCellEditor: SimpleStatusTextCellEditor,
+    statusTextCellEditor: StatusTextCellEditor,
+    dateCellEditor: DateCellEditor,
+    durationCellEditor: DurationCellEditor,
+    customEnumCellEditor: CustomEnumCellEditor,
+    hexaValueCellEditor: HexaValueCellEditor,
+    hexaOctetStringCellEditor: HexaOctetStringCellEditor,
+    simpleHeader: SimpleHeader,
+    loadingOverlay: LoadingOverlay,
+    noRecordsOverlay: NoRecordsOverlay
+};
+
+
+const DataGridModule = _defineModule({
+    version: "32.2.0",
+    moduleName: `dataGridModule`,
+    beans: [RangeSelector, BeanAccessor],
+    dependantModules: [],
+});
+
+ModuleRegistry.__register(DataGridModule, false, undefined)
+
+/*
+ * Ag Grid cell editing enter key navigation bug fix in case of enabled enterMovesDownAfterEdit property
+ * buggy Ag Grid implementation causes that not only pressing enter, but also losing focus of the cell (e.g. clicking outside the grid) moves focus to the next cell
+ * This code fixes CellCtrl prototype implementation of onPopupEditorClosed method to prevent this behavior by adding property true to stopEditingAndFocus method
+ */
+CellCtrl.prototype.onPopupEditorClosed = function () {
+    if (!this.isEditing()) {
+        return;
+    }
+    // note: this happens because of a click outside of the grid or if the popupEditor
+    // is closed with `Escape` key. if another cell was clicked, then the editing will
+    // have already stopped and returned on the conditional above.
+    this.stopEditingAndFocus(true);
+};
+
+function getRowId(item: GetRowIdParams): string {
+    return item.data.id + "";
+}
+
+const rowStyleRuleCompiledExpressions: { [key: string]: (parameters: any) => any } = {};
+
+/**
+ * Special separator for part of the column which should be exported
+ */
+export const EXPORT_SEPARATOR = "\n";
+
+export type MenuElement = Exclude<Exclude<MenuProps["items"], undefined>[number], null>;
+
+const enum NavigationEventEnum {
+    KEYBOARD,
+    MOUSE
+}
+
+/**
+ * Extended viewport change event
+ */
+export interface DataGridViewportChangedEvent extends ViewportChangedEvent {
+    //  delta number of rows table moved during paging/scrolling of the table
+    // negative number when paged/scrolled backwards to first record, positive number when paged/scrolled forwards to last record
+    rowsScrollingDelta: number
+}
+
+export type SortMode = "asc" | "desc"
+
+/**
+ * Represents sorting definition for one column
+ */
+export interface SortItem {
+    colId: string;
+    sort: SortMode;
+}
+
+export type FilterRenderer = (value: string, changeValue: (newValue: string) => void, onSearch: () => void) => React.ReactNode
+
+/*
+ * Extended table column definition
+ */
+export interface DataGridColDef extends Omit<ColDef, "cellStyle"> {
+    // localized name of group of columns to which column belongs to
+    group: string
+    // context of column definition
+    context?: any
+
+    // override of ag-grid api with undefined styles
+    cellStyle?: { [cssProperty: string]: string | number | null } | ((cellClassParams: CellClassParams) => {
+        [cssProperty: string]: string | number | null
+    } | undefined);
+
+
+    // custom filter render method
+    renderFilter?: FilterRenderer
+}
+
+// removal of console warnings of our properties
+// COL_DEF_VALIDATORS.allProperties?.push("group", "context", "cellStyle", "renderFilter");
+
+
+export interface DataGridFilterProps {
+    // flag if floating filters (beneath column headers) are visible
+    columnSearchVisible?: boolean
+    // visibility handler for floating filters
+    onColumnSearchVisible?: (visible: boolean) => void
+
+    // returns floating filters (beneath column headers) current model (essential when filters should be pre-filled when shown from e.g. searchbox)
+    getFilterModel?(): any
+
+    // floating filter changed event (e.g. when pressing enter in floating filter textbox)
+    onFilterChanged?(event: FilterChangedEvent): void;
+
+    // floating filter modify event (e.g. when modifying value in floating filter textbox)
+    onFilterModified?(event: FilterModifiedEvent): void;
+
+    // method called when enter is pressed in the floating filter
+    onFilterConfirmed?(): void
+}
+
+export interface DataGridSearchProps {
+    // placeholder to show in search field when no value is entered
+    placeholder?: string
+    // current search string
+    searchString?: string
+    // current search history available for search field popup
+    searchHistory?: string[]
+    // custom search button class name
+    searchButtonClassName?: string
+    // search button disabled
+    searchButtonDisabled?: boolean
+    // search button hidden
+    searchButtonHidden?: boolean
+    // hide searchbox
+    hidden?: boolean
+
+    // custom search field renderer
+    searchRenderer?(): React.ReactNode
+
+    // formatting showed strings in search and history
+    stringFormatter?(rawString: string): string
+
+    // search field value changed
+    onChange?(searchString: string): void
+
+    // called when new search is invoked by pressing search button or enter in the search field
+    onSearch?(): void
+}
+
+// callback called when data are loaded from backend
+export type OnLoadDataCallback = (totalRecords: number) => void
+
+/**
+ * Data Grid properties, differences to AgGrid:
+ * columnDefinitions (columnDefs) does not support column groups for now
+ * paginationPageSize for defining size of page is not available, use paging.pageSize instead
+ */
+export interface DataGridProps extends Omit<GridOptions, "columnDefs" | "paginationPageSize" | "getRowStyle" | "cellStyle"> {
+    // linking grid options (used for aligned grids feature: https://www.ag-grid.com/javascript-grid-aligned-grids/)
+    gridOptions?: GridOptions
+    // column definitions
+    columnDefs: DataGridColDef[]
+    // for aligned grids functionality
+    disableColumnDefsPreprocessing?: boolean
+
+    // realColumnDefs building handler
+    onColumnDefsAdapted?(columnDefs: ColDef[]): void
+
+    // shows table configuration panel
+    tableConfigVisible?: boolean,
+    // shows column configuration panel
+    columnsConfigVisible?: boolean,
+    // style of panel surrounding datagrid
+    panelStyle?: React.CSSProperties,
+    // style of panel surrounding table part
+    tablePanelStyle?: React.CSSProperties,
+    // floating filter configuration
+    filter?: DataGridFilterProps
+    // search bar configuration
+    search?: DataGridSearchProps
+    // table paging configuration
+    paging: {
+        /* current size of table page:
+            - value -1 means no paging at all (scrollbar only)
+            - value 0  means automatic paging (page size automatically adjusted based on available height for table)
+            - value >0 defines statically defined page size (number of rows) for the table
+         */
+        pageSize: number,
+        // default size used when configuration is reverted
+        defaultPageSize?: number,
+        /**
+         * Page size change handler
+         * @param currentPageSize - current page size represents number rows available
+         * @param definedPageSize -
+         */
+        onPaginationChanged?: (currentPageSize: number | null, definedPageSize: number) => void;
+    }
+
+    // flag if row data could be passed only by transaction or setRowData method (optimization for big data lists, where deep comparison is not performed on rowData react property)
+    rowDataManualMode?: boolean
+
+    // load data handler - called by grid always when it needs data
+    onLoadData(callback: OnLoadDataCallback): void
+
+    // automatic focus to first cell of selected row after loading of data is complete
+    autofocus?: boolean
+
+    // handler for keys pressed in data grid
+    onKeyPressed?(event: KeyboardEvent): void
+
+    // enter handler
+    onEnter?: () => void;
+
+    // ids of currently selected rows
+    selectedIds?: (number | string)[]
+
+    // rules for styling table rows
+    rowStyleRules: RowStyleRule[]
+
+    // default rules for styling table rows, used when configuration is reverted
+    defaultRowStyleRules?: RowStyleRule[]
+
+    // row styles change handler
+    onChangeRowStyleRules?(rowStyleRules: RowStyleRule[]): void
+
+    // extra buttons rendered before the search bar
+    toolbar?: {
+        // custom renderer for the whole toolbar panel
+        renderToolbar?(originalSearchBar: ReactElement): ReactElement
+
+        // extra buttons rendered in toolbar
+        toolbarButtons?: ReactElement
+
+        // hide records count
+        hideRecordCount?: boolean
+    }
+
+    // row height change handler (height is changed from table configuration screen)
+    onRowHeightChanged?(rowHeight: number): void
+
+    // columns state change handler
+    onColumnsChanged?(columnModel: ColumnState[], event: ColumnEvent): void
+
+    // table configuration panel visibility change handler
+    onTableConfigVisible?(visible: boolean): void
+
+    // column configuration panel visibility change handler
+    onColumnsConfigVisible?(visible: boolean): void
+
+    // customized renderer for displaying loading progress
+    loadingOverlayRenderer?(): ReactElement | null
+
+    // customized renderer for displaying no records information
+    noRecordsOverlayRenderer?(): ReactElement | null
+
+    // customized renderer for displaying data over table
+    tableOverlayRenderer?(): ReactElement | null
+
+    showMilliseconds?: boolean
+
+    defaultShowMilliseconds?: boolean
+
+    onShowMilliseconds?(show: boolean, callback: () => void): void
+
+    hideYear?: boolean
+
+    defaultHideYear?: boolean
+
+    onShowYear?(show: boolean, callback: () => void): void
+
+    // export menu configuration
+    exportMenu?: {
+        // overides export menu rendering
+        renderer?(menuElements: MenuElement[]): MenuElement[]
+        // handler for custom export menu items click
+        onClick?(key: string): void
+    }
+
+    // settings menu configuration
+    settingsMenu?: {
+        // overides setting menu rendering
+        renderer?(menuElements: MenuElement[]): MenuElement[]
+        // handler for custom settings menu items click
+        onClick?(key: string): void
+    }
+
+    // context menu configuration (right click on the table rows)
+    contextMenu?: {
+        // overides context menu rendering
+        renderer?(menuElements: MenuElement[]): MenuElement[]
+        // handler for custom context menu items click
+        onClick?(key: string): void
+    }
+
+    // override of ag-grid api with undefined styles
+    getRowStyle?(params: any): GridRowStyle | undefined
+
+    // hook reference to AgGridReact component
+    gridRef?: React.RefObject<AgGridReact>
+}
+
+interface DataGridState {
+    pageIndex: number
+    pageSize: number | null
+    recordsCount?: number
+    columnModel: ColumnState[]
+    sortModel: SortItem[]
+    tableConfigVisible: boolean
+    columnsConfigVisible: boolean
+    fontSize: number
+    rowHeight: number
+    // interval of record's indexes currently shown (first record has index 1)
+    viewport: [number, number]
+    contextMenuVisible: boolean
+    firstLoadDone: boolean
+    loading: boolean
+    columnTransferHeight: number
+    pageOrientation: PageOrientation
+    exporting: boolean
+}
+
+
+export default class DataGrid extends React.Component<DataGridProps, DataGridState> {
+    public static defaultProps = {
+        paging: {
+            pageSize: 0,
+            defaultPageSize: 0
+        },
+        rowStyleRules: tableDefaultRowStyleRules()
+    };
+
+    wildcardQuickFilter: WildcardQuickFilterEngine;
+    columnTypes: { [key: string]: ColDef };
+    gridApi?: GridApi;
+    // deep copy of columns state before opening editation of columns and its order
+    // used in "cancel changes" functionality
+    columnModelBeforeEdit?: ColumnState[];
+    indexToJump: number | null;
+    columnToJump: Column | null;
+    lastCellFocus?: CellFocusedEvent;
+    lastNavigationEvent?: NavigationEventEnum;
+    lastPaginationEvent?: PaginationChangedEvent | null = null;
+    table_context: any;
+
+    // @ts-ignore (was used in RangeSelector, not used now but probably will be fixed in future)
+    private wrappingDiv: HTMLDivElement | null = null;
+
+    constructor(props: Readonly<DataGridProps>) {
+        super(props);
+        this.state = {
+            pageIndex: 0,
+            pageSize: null,
+            recordsCount: undefined,
+            columnModel: [],
+            sortModel: [],
+            tableConfigVisible: !!this.props.tableConfigVisible,
+            columnsConfigVisible: !!this.props.columnsConfigVisible,
+            fontSize: GRID_DEFAULT_FONT_SIZE,
+            rowHeight: calculateRowHeight(GRID_DEFAULT_FONT_SIZE, GRID_DEFAULT_ROW_HEIGHT_DELTA),
+            viewport: [0, 0],
+            contextMenuVisible: false,
+            firstLoadDone: false,
+            loading: false,
+            columnTransferHeight: 500,
+            pageOrientation: "PORTRAIT",
+            exporting: false
+        };
+        this.indexToJump = null;
+        this.columnToJump = null;
+
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onPaginationChanged = this.onPaginationChanged.bind(this);
+        this.onViewportChanged = this.onViewportChanged.bind(this);
+        this.onCellContextMenu = this.onCellContextMenu.bind(this);
+        this.onCellFocused = this.onCellFocused.bind(this);
+        this.onCellMouseDown = this.onCellMouseDown.bind(this);
+        this.setFocusedCellDebounced = debounce(this.setFocusedCellDebounced.bind(this), 200);
+        this.noRecordsOverlayRenderer = this.noRecordsOverlayRenderer.bind(this);
+        this.loadingOverlayRenderer = this.loadingOverlayRenderer.bind(this);
+        this.changePagination = this.changePagination.bind(this);
+        this.onColumnsChanged = this.onColumnsChanged.bind(this);
+        this.onFilterModified = this.onFilterModified.bind(this);
+        this.onFilterChanged = this.onFilterChanged.bind(this);
+        this.onFilterConfirmed = this.onFilterConfirmed.bind(this);
+        this.onSortChanged = this.onSortChanged.bind(this);
+        this.showTableConfiguration = this.showTableConfiguration.bind(this);
+        this.showColumnsConfig = this.showColumnsConfig.bind(this);
+        this.navigateToNextCell = this.navigateToNextCell.bind(this);
+        this.suppressKeyboardEvent = this.suppressKeyboardEvent.bind(this);
+        this.onRowDataUpdated = this.onRowDataUpdated.bind(this);
+        this._getRowStyle = this._getRowStyle.bind(this);
+        this._getRowHeight = this._getRowHeight.bind(this);
+        this._getCellStyle = this._getCellStyle.bind(this);
+        this.textCustomComparator = this.textCustomComparator.bind(this);
+        this.onPageOrientationChange = this.onPageOrientationChange.bind(this);
+        this.onExport = this.onExport.bind(this);
+        this.getExportContent = this.getExportContent.bind(this);
+        this.getDefaultColDefinition = memoizeOne(this.getDefaultColDefinition.bind(this));
+        this.getAdaptedColumnDefs = memoizeOne(this.getAdaptedColumnDefs.bind(this));
+        this.getCustomComponents = memoizeOne(this.getCustomComponents.bind(this));
+
+        this.table_context = {
+            loadingOverlayRenderer: this.loadingOverlayRenderer,
+            noRecordsOverlayRenderer: this.noRecordsOverlayRenderer,
+            onFilterConfirmed: this.onFilterConfirmed,
+            fontSize: this.state.fontSize,
+            lineHeight: getLineHeight(this.state.rowHeight)
+        };
+        this.wildcardQuickFilter = new WildcardQuickFilterEngine();
+
+        this.columnTypes = {
+            "localizedArrayColumn": {
+                cellRenderer: (params: ICellRendererParams): string => {
+                    const value = DataGrid.getCellValue<string[]>(params);
+                    if (value !== undefined) {
+                        return value.map((s) => i18n(s)).join(",");
+                    } else {
+                        return "";
+                    }
+                },
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                filterValueGetter: function (params: ValueGetterParams): string | null {
+                    const value = DataGrid.getCellValue<string[]>(params);
+                    if (value !== undefined) {
+                        return value.map((s) => i18n(s)).join(",");
+                    }
+                    return null;
+                },
+                getQuickFilterText: function (params: GetQuickFilterTextParams): string {
+                    const value = DataGrid.getCellValue<string[]>(params);
+                    if (value !== undefined) {
+                        return value.map((s) => i18n(s)).join(",");
+                    }
+                    return "";
+                }
+            },
+            "numberColumn": {
+                cellRenderer: (params: ICellRendererParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined && value !== null) {
+                        return LocaleHolder.formatNumber(value, params.colDef?.cellRendererParams?.fractionDigits);
+                    } else {
+                        return "";
+                    }
+                },
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                filterValueGetter: function (params: ValueGetterParams): string | null {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value) {
+                        return LocaleHolder.formatNumber(value, params.colDef?.cellRendererParams?.fractionDigits);
+                    } else {
+                        return "";
+                    }
+                },
+                getQuickFilterText: function (params: GetQuickFilterTextParams): string {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return LocaleHolder.formatNumber(value, params.colDef?.cellRendererParams?.fractionDigits);
+                    } else {
+                        return "";
+                    }
+                }
+            },
+            "dateColumn": {
+                cellRenderer: (params: ICellRendererParams) => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        if (value === D2000UnixTimeNullValue) {
+                            return "---";
+                        }
+                        let tooltipValue: string;
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        return <span
+                            title={tooltipValue}>{unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear))}</span>
+                    } else {
+                        return "---";
+                    }
+                },
+                valueFormatter: (params: ValueFormatterParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
+                    }
+                    return "---";
+                },
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                filterValueGetter: (params: ValueGetterParams): string | null => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
+                    }
+                    return null;
+                },
+                getQuickFilterText: (params: GetQuickFilterTextParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear));
+                    }
+                    return "";
+                }
+            },
+            "dateTimeColumn": {
+                cellRenderer: (params: ICellRendererParams) => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value) {
+                        if (value === D2000UnixTimeNullValue) {
+                            return "Null Time";
+                        }
+                        let tooltipValue: string;
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        return <span
+                            title={tooltipValue}>{unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds))}</span>;
+                    } else {
+                        return "---";
+                    }
+                },
+                valueFormatter: (params: ValueFormatterParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return "---";
+                },
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                filterValueGetter: (params: ValueGetterParams): string | null => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return null;
+                },
+                getQuickFilterText: (params: GetQuickFilterTextParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return "";
+                }
+            },
+            "fromNowDateTimeColumn": {
+                cellRenderer: (params: ICellRendererParams) => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        let tooltipValue: string;
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        return <span title={tooltipValue}>{unixTimeToMoment(value).fromNow()}</span>;
+                    } else {
+                        return "---";
+                    }
+                },
+                valueFormatter: (params: ValueFormatterParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return "---";
+                },
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                filterValueGetter: (params: ValueGetterParams): string | null => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return null;
+                },
+                getQuickFilterText: (params: GetQuickFilterTextParams): string => {
+                    const value = DataGrid.getCellValue<number>(params);
+                    if (value !== undefined) {
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                    }
+                    return "";
+                }
+            },
+            "escapedValueColumn": {
+                cellRenderer: (params: ICellRendererParams) => {
+                    const value = DataGrid.getCellValue<any>(params);
+                    if (value !== undefined) {
+                        return <span style={{whiteSpace: "pre"}}
+                                     title={escape(value)}>{typeof value === "string" ? escape(value.replace(/[\r\n]+/g, ' ')) : value}</span>;
+                    } else {
+                        return "";
+                    }
+                },
+                valueFormatter: (params: ValueFormatterParams): string => {
+                    const value = DataGrid.getCellValue<any>(params);
+                    if (value !== undefined) {
+                        return typeof value === "string" ? value.replace(/[\r\n]+/g, ' ') : value;
+                    } else {
+                        return "";
+                    }
+                }
+            },
+            "textColumnFilter": {
+                filter: "agTextColumnFilter",
+                floatingFilter: true,
+                floatingFilterComponent: "textColumnFilter",
+                filterParams: {
+                    textCustomComparator: this.textCustomComparator
+                },
+                suppressFloatingFilterButton: true,
+            },
+            "textColumnServerFilter": {
+                filter: "agTextColumnFilter",
+                floatingFilter: true,
+                floatingFilterComponent: "textColumnFilter",
+                filterParams: {
+                    buttons: ['apply'],
+                    textCustomComparator: this.textCustomComparator
+                },
+                suppressFloatingFilterButton: true,
+            },
+            "customColumnServerFilter": {
+                filter: "agTextColumnFilter",
+                floatingFilter: true,
+                floatingFilterComponent: "customColumnFilter",
+                filterParams: {
+                    buttons: ['apply'],
+                    textCustomComparator: this.textCustomComparator
+                },
+                suppressFloatingFilterButton: true,
+            },
+            "alignRight": {}
+        };
+    }
+
+    private static getCellValue<V>(props: any): V | undefined {
+        if (props) {
+            if (props.colDef.field && typeof props.getValue === "function") {
+                return props.getValue(props.colDef.field);
+            }
+            if (props.data && props.colDef && props.colDef.field) {
+                return at<V>(props.data, props.colDef.field)[0];
+            }
+            if (props.value !== undefined) {
+                return props.value;
+            }
+        }
+
+        return undefined;
+    }
+
+    textCustomComparator(filter: string, value: any, filterText: string) {
+        const filterTextLowerCase = filterText.toLowerCase();
+        const valueLowerCase = value.toString().toLowerCase();
+        switch (filter) {
+            case 'contains':
+                if (filterTextLowerCase.indexOf("*") >= 0 || filterTextLowerCase.indexOf("?") >= 0) {
+                    const wildcardFilterRegExp = this.wildcardQuickFilter.getWildcardFilterRegExp(filterTextLowerCase);
+                    if (typeof wildcardFilterRegExp == "string") {
+                        return valueLowerCase.indexOf(filterTextLowerCase) >= 0;
+                    } else {
+                        return wildcardFilterRegExp.test(valueLowerCase);
+                    }
+                } else {
+                    return valueLowerCase.indexOf(filterTextLowerCase) >= 0;
+                }
+            case 'notContains':
+                return valueLowerCase.indexOf(filterTextLowerCase) === -1;
+            case 'equals':
+                return valueLowerCase === filterTextLowerCase;
+            case 'notEqual':
+                // noinspection EqualityComparisonWithCoercionJS
+                return valueLowerCase != filterTextLowerCase;
+            case 'startsWith':
+                return valueLowerCase.indexOf(filterTextLowerCase) === 0;
+            case 'endsWith':
+                var index = valueLowerCase.lastIndexOf(filterTextLowerCase);
+                return index >= 0 && index === (valueLowerCase.length - filterTextLowerCase.length);
+            default:
+                // should never happen
+                console.warn('invalid filter type ' + filter);
+                return false;
+        }
+    }
+
+    componentDidUpdate(prevProps: DataGridProps) {
+        if (!this.gridApi) {
+            return;
+        }
+        if (this.props.filter && prevProps.filter && this.props.filter.columnSearchVisible !== prevProps.filter.columnSearchVisible) {
+            setTimeout(() => {
+                if (this.gridApi) {
+                    this.gridApi.refreshHeader();
+                    if (this.props.filter && !this.props.filter.columnSearchVisible) {
+                        this.gridApi.setFilterModel(null);
+                        this.gridApi.onFilterChanged();
+                    }
+                }
+            }, 0);
+        }
+        // functionality when all data are loaded to table
+        if (this.props.rowData && this.props.rowData !== prevProps.rowData) {
+            // keep filter model when data are changed
+            if (this.props.filter && this.props.filter.getFilterModel) {
+                this.gridApi.setFilterModel(this.props.filter.getFilterModel());
+                this.gridApi.onFilterChanged();
+            }
+            // keep sorting model when data are changed
+            this.setSortModel(this.state.sortModel);
+            this.gridApi.refreshClientSideRowModel("group");
+            this.gridApi.redrawRows();
+
+            // keep selected rows when data are changed and rows are still present
+            const selectedObjectsVisibleInGrid = this.props.rowData.filter((object) => {
+                return this.props.selectedIds ? this.props.selectedIds.indexOf(object.id) >= 0 : false;
+            });
+            if (selectedObjectsVisibleInGrid.length > 0) {
+                selectedObjectsVisibleInGrid.forEach((object) => {
+                    const rowNode = this.gridApi ? this.gridApi.getRowNode(object.id + "") : null;
+                    if (rowNode && !rowNode.isSelected()) {
+                        rowNode.setSelected(true, true);
+                    }
+                });
+            } else {
+                this.gridApi.deselectAll();
+            }
+        }
+        // functionality when chunks of data are dynamically loaded from server
+        if (this.props.datasource && this.props.datasource !== prevProps.datasource) {
+            // resets grid data
+            this.gridApi.updateGridOptions({datasource: this.props.datasource});
+        }
+        this.updateRowHeight();
+    }
+
+    public setColumnState(columnModel: ColumnState[]) {
+        const columnStates: ColumnState[] = [];
+        if (columnModel) {
+            columnModel.forEach((item: ColumnState) => {
+                const columnState = {...item};
+                item.sortIndex = undefined;
+                item.sort = undefined
+                columnStates.push(columnState);
+            });
+        }
+        this.gridApi?.applyColumnState({state: columnStates, defaultState: {sort: null}, applyOrder: true});
+    }
+
+    public setSortModel(sortModel: SortItem[]) {
+        const columnState: ColumnState[] = [];
+        if (sortModel) {
+            sortModel.forEach((item: any, index: number) => {
+                columnState.push({
+                    colId: item.colId,
+                    sort: item.sort,
+                    sortIndex: index
+                });
+            });
+        }
+        this.gridApi?.applyColumnState({state: columnState, defaultState: {sort: null}, applyOrder: true});
+    }
+
+    public getSortModel(): SortItem[] {
+        const columnState = this.gridApi?.getColumnState() ?? [];
+        const filteredStates = columnState?.filter(item => item.sort != null);
+        const indexes: { [colId: string]: number; } = {};
+        filteredStates.forEach((state) => {
+            if (state.colId) {
+                indexes[state.colId] = state.sortIndex as number;
+            }
+        });
+        const res = filteredStates.map(s => {
+            return {colId: s.colId, sort: s.sort} as SortItem;
+        });
+        res.sort((a: any, b: any) => indexes[a.colId] - indexes[b.colId]);
+        return res;
+
+    }
+
+    updateRowHeight() {
+        let rowAndFontHeight = this.calculateRowAndFontHeight(this.props.rowStyleRules);
+        if (rowAndFontHeight.rowHeight !== this.state.rowHeight) {
+            this.changeRowHeight(rowAndFontHeight.fontSize, rowAndFontHeight.rowHeight);
+        }
+        if (rowAndFontHeight.fontSize !== this.state.fontSize) {
+            this.setState({fontSize: rowAndFontHeight.fontSize});
+        }
+    }
+
+    calculateRowAndFontHeight(rowStyleRules?: RowStyleRule[]): { fontSize: number, rowHeight: number } {
+        let rowHeightDelta = GRID_DEFAULT_ROW_HEIGHT_DELTA;
+        let fontSize = GRID_DEFAULT_FONT_SIZE;
+        let rowHeight = calculateRowHeight(fontSize, rowHeightDelta);
+        if (rowStyleRules) {
+            for (let i = 0; i < rowStyleRules.length; i++) {
+                if (rowStyleRules[i].key === "table-font-size") {
+                    const currentFontSize = rowStyleRules[i].style.fontSize;
+                    fontSize = getFontSize(currentFontSize);
+                    rowHeight = calculateRowHeight(currentFontSize, rowHeightDelta);
+                }
+                if (rowStyleRules[i].key === "table-line-indentation") {
+                    const currentRowHeightDelta = rowStyleRules[i].style.rowHeightDelta;
+                    rowHeightDelta = getRowHeightDelta(currentRowHeightDelta);
+                    rowHeight = calculateRowHeight(fontSize, currentRowHeightDelta);
+                }
+            }
+        }
+        return {rowHeight: rowHeight, fontSize: fontSize};
+    }
+
+    /**
+     * Handling setting table gridEditor
+     */
+    static getDerivedStateFromProps(props: DataGridProps, state: DataGridState) {
+        const newState: Partial<DataGridState> = {};
+        if (props.tableConfigVisible === true || props.tableConfigVisible === false) {
+            if (props.tableConfigVisible !== state.tableConfigVisible) {
+                newState.tableConfigVisible = props.tableConfigVisible;
+            }
+        }
+        return newState;
+    }
+
+    onGridReady(gridReadyEvent: GridReadyEvent): void {
+        const gridApi = gridReadyEvent.api;
+        if (!this.gridApi || this.gridApi !== gridApi) {
+            this.gridApi = gridApi;
+            if (this.props.onGridReady) {
+                this.props.onGridReady(gridReadyEvent);
+            }
+            this.setState({
+                sortModel: this.getSortModel(),
+                columnModel: this.gridApi.getColumnState(),
+            });
+            this.updateRowHeight();
+        }
+        // fixing some cases when after onGridReady callback no onPaginationChanged callback is called
+        // and therefore no initial data loading (loadData()) occurs
+        setTimeout(() => {
+            if (!!this.lastPaginationEvent) {
+                this.onPaginationChanged(this.lastPaginationEvent);
+            }
+        });
+    }
+
+    onPaginationChanged(event: PaginationChangedEvent) {
+        if (this.gridApi) {
+            const currentPage = this.gridApi.paginationGetCurrentPage();
+            const currentPageSize = this.gridApi.paginationGetPageSize();
+            let recordsCount = this.props.paging.pageSize >= 0 ? (this.gridApi.paginationIsLastPageFound() ? this.gridApi.paginationGetRowCount() : 0) : this.gridApi.getDisplayedRowCount();
+            // process only when onGridReady passed
+            if (this.state.pageSize !== currentPageSize) {
+                if (this.props.paging.onPaginationChanged) {
+                    this.props.paging.onPaginationChanged(currentPageSize, this.props.paging.pageSize);
+                }
+                if (!this.state.firstLoadDone) {
+                    this.loadData();
+                    this.setState({firstLoadDone: true});
+                }
+            }
+            this.setState({pageSize: currentPageSize, recordsCount: recordsCount, pageIndex: currentPage});
+            if (this.indexToJump !== null && this.columnToJump !== null) {
+                this.gridApi.setFocusedCell(this.indexToJump, this.columnToJump);
+                this.indexToJump = null;
+            }
+            this.lastPaginationEvent = null;
+        } else {
+            this.lastPaginationEvent = event;
+        }
+        if (this.props.onPaginationChanged) {
+            this.props.onPaginationChanged(event);
+        }
+    }
+
+    onViewportChanged(event: ViewportChangedEvent) {
+        const dataGridEvent = event as DataGridViewportChangedEvent;
+        // calculation of the flag that last record is shown
+        const rowsScrollingDelta = this.state.viewport[1] ? event.lastRow + 1 - this.state.viewport[1] : event.lastRow + 1;
+        dataGridEvent.rowsScrollingDelta = rowsScrollingDelta;
+        this.setState({viewport: [event.firstRow + 1, event.lastRow + 1]});
+        if (this.props.onViewportChanged) {
+            this.props.onViewportChanged(event);
+        }
+    }
+
+    changePagination(pageSize: number): void {
+        if (!this.gridApi) {
+            return;
+        }
+        const gridApiWithPrivateAccess = this.gridApi as GridApiWithPrivateAccess;
+        if (pageSize > 0) {
+            this.gridApi.updateGridOptions({
+                pagination: true,
+                paginationAutoPageSize: false,
+                paginationPageSize: pageSize
+            });
+            if (this.props.paging.onPaginationChanged) {
+                this.props.paging.onPaginationChanged(pageSize, pageSize);
+            }
+        } else if (pageSize === 0) {
+            this.gridApi.updateGridOptions({pagination: true, paginationAutoPageSize: true});
+            // handling AG-Grid bug caused by different previous pageSize state
+            const rowHeight = (gridApiWithPrivateAccess.beans.gos as any).getRowHeightAsNumber?.() ?? 1;
+            // @ts-ignore
+            const bodyHeight = (gridApiWithPrivateAccess.beans.ctrlsService as any).params.center.viewportSizeFeature.getBodyHeight();
+            let availablePageSize = 1000;
+            if (bodyHeight > 0) {
+                availablePageSize = Math.floor(bodyHeight / rowHeight);
+            }
+            if (this.props.paging.pageSize > availablePageSize) {
+                this.gridApi.updateGridOptions({paginationPageSize: 1});
+            } else {
+                // special hack to remove setting page size
+                this.gridApi.updateGridOptions({paginationPageSize: null as unknown as number});
+            }
+            if (this.props.paging && this.props.paging.onPaginationChanged) {
+                this.props.paging.onPaginationChanged(this.state.pageSize, 0);
+            }
+        } else {
+            this.gridApi.updateGridOptions({pagination: false, paginationAutoPageSize: false});
+            if (this.props.paging && this.props.paging.onPaginationChanged) {
+                this.props.paging.onPaginationChanged(this.state.pageSize, -1);
+            }
+        }
+    }
+
+    showMilliseconds(showMilis: boolean) {
+        this.props.onShowMilliseconds?.(showMilis, () => {
+            if (!this.gridApi) {
+                return;
+            }
+            if (!this.props.rowModelType || this.props.rowModelType === "clientSide") {
+                // table is shown
+                this.gridApi.refreshClientSideRowModel("group");
+            }
+            this.gridApi.redrawRows();
+        });
+    }
+
+    showYear(showYear: boolean) {
+        this.props.onShowYear?.(showYear, () => {
+            if (!this.gridApi) {
+                return;
+            }
+            if (!this.props.rowModelType || this.props.rowModelType === "clientSide") {
+                // table is shown
+                this.gridApi.refreshClientSideRowModel("group");
+            }
+            this.gridApi.redrawRows();
+        });
+    }
+
+    changeRowHeight(fontSize: number, rowHeight: number) {
+        this.setState({rowHeight: rowHeight}, () => {
+            if (this.gridApi) {
+                if (this.props.headerHeight === undefined) {
+                    this.gridApi.updateGridOptions({headerHeight: calculateRowHeight(fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA + 2)});
+                }
+                if (this.props.floatingFiltersHeight === undefined) {
+                    this.gridApi.updateGridOptions({floatingFiltersHeight: calculateRowHeight(fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA + 2)});
+                }
+                this.gridApi.updateGridOptions({rowHeight: rowHeight})
+                this.gridApi.resetRowHeights();
+                this.gridApi.refreshHeader();
+                this.gridApi.redrawRows();
+                if (this.props.rowModelType === "infinite" && this.props.datasource) {
+                    (this.gridApi.getModel() as any).rowHeight = rowHeight;
+                    // redraws all server side loaded table data
+                    this.gridApi.updateGridOptions({datasource: this.props.datasource});
+                }
+            }
+            if (this.props.onRowHeightChanged) {
+                this.props.onRowHeightChanged(rowHeight);
+            }
+        });
+    }
+
+    onGoToPage(pageIndex: number) {
+        if (this.gridApi) {
+            this.gridApi.paginationGoToPage(pageIndex);
+        }
+    }
+
+    loadData(callback?: () => void) {
+        if (!this.gridApi) {
+            return;
+        }
+        this.setState({loading: true});
+        if (!this.props.loadingOverlayRenderer) {
+            this.gridApi.setGridOption("loading", true);
+        }
+        this.props.onLoadData((totalRecords) => {
+            if (!this.gridApi) {
+                return;
+            }
+            this.gridApi.setGridOption("loading", false);
+            this.gridApi.hideOverlay();
+            this.setState({loading: false});
+            if (callback) {
+                callback();
+            }
+            if (totalRecords === 0) {
+                setTimeout(() => {
+                    if (!this.isActive()) {
+                        return;
+                    }
+                    this.gridApi?.showNoRowsOverlay();
+                }, 400);
+            }
+            if (this.props.autofocus) {
+                this.focus();
+            }
+        });
+    }
+
+    public focus() {
+        setTimeout(() => {
+            if (!this.isActive()) {
+                return;
+            }
+            const columnModel = this.gridApi?.getColumnState();
+            let columnIdToFocus = columnModel?.[0]?.colId || "name";
+            const selectedNodes = this.gridApi?.getSelectedNodes();
+            const selectedRowIndex: number = (selectedNodes && selectedNodes.length > 0 && selectedNodes[selectedNodes.length - 1].rowIndex) || 0;
+            this.gridApi?.setFocusedCell(selectedRowIndex, columnIdToFocus);
+        }, 200);
+    }
+
+    isActive(): boolean {
+        return !!this.gridApi && !this.gridApi.isDestroyed();
+    }
+
+    onColumnsChanged(event: ColumnEvent) {
+        const columnModel = event.api.getColumnState();
+        if (this.props.onColumnsChanged) {
+            this.props.onColumnsChanged(columnModel, event);
+        }
+        this.setState({columnModel: columnModel});
+    }
+
+    setColumnSearchVisible(visible: boolean) {
+        if (this.gridApi && this.props.filter && this.props.filter.getFilterModel) {
+            this.gridApi.setFilterModel(this.props.filter.getFilterModel());
+        }
+        if (this.props.filter && this.props.filter.onColumnSearchVisible) {
+            this.props.filter.onColumnSearchVisible(visible);
+        }
+    }
+
+    private onFilterModified(event: FilterModifiedEvent) {
+        if (this.props.filter && this.props.filter.onFilterModified) {
+            this.props.filter.onFilterModified(event);
+        }
+    }
+
+    private onFilterChanged(event: FilterChangedEvent) {
+        if (this.props.filter && this.props.filter.onFilterChanged) {
+            this.props.filter.onFilterChanged(event);
+        }
+    }
+
+    private onFilterConfirmed() {
+        if (this.props.filter && this.props.filter.onFilterConfirmed) {
+            this.props.filter.onFilterConfirmed();
+        }
+    }
+
+    private onSortChanged(event: SortChangedEvent) {
+        if (this.props.onSortChanged && this.gridApi) {
+            const currentSortModel = this.getSortModel() as SortItem[];
+            if (!isEqual(this.state.sortModel, currentSortModel)) {
+                // propagate only changes to sorting
+                this.setState({sortModel: currentSortModel}, () => {
+                    if (this.props.onSortChanged) {
+                        this.props.onSortChanged(event);
+                    }
+                });
+            }
+        }
+    }
+
+    showTableConfiguration(show: boolean) {
+        if (this.props.onTableConfigVisible) {
+            this.props.onTableConfigVisible(show);
+        }
+        this.setState({tableConfigVisible: show}, () => {
+            if (this.gridApi && !this.state.tableConfigVisible) {
+                // redrawing rows after closing table configuration panel, probably not required any more,
+                // because config panel and table is shown simultaneously
+                if (!this.props.rowModelType || this.props.rowModelType === "clientSide") {
+                    // table is shown
+                    this.gridApi.refreshClientSideRowModel("group");
+                }
+                this.gridApi.redrawRows();
+            }
+        });
+    }
+
+    showColumnsConfig(show: boolean) {
+        if (this.props.onColumnsConfigVisible) {
+            this.props.onColumnsConfigVisible(show);
+        }
+        this.columnModelBeforeEdit = cloneDeep(this.state.columnModel);
+        this.setState({columnsConfigVisible: show});
+    }
+
+    private navigateToNextCell(params: NavigateToNextCellParams): CellPosition {
+        this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+        var suggestedNextCell = params.nextCellPosition;
+        if (!this.gridApi) {
+            return suggestedNextCell ?? params.previousCellPosition;
+        }
+        const pageIndex = this.gridApi.paginationGetCurrentPage();
+        const totalPages = this.gridApi.paginationGetTotalPages();
+        var previousCell = params.previousCellPosition;
+        switch (params.event?.code) {
+            case Key.ArrowDown:
+                if ((previousCell.rowIndex + 1) >= this.gridApi.getModel().getRowCount()) {
+                    if (pageIndex < (totalPages - 1)) {
+                        this.onGoToPage(pageIndex + 1);
+                        return {
+                            rowIndex: 0,
+                            column: previousCell.column,
+                            rowPinned: previousCell.rowPinned
+                        };
+                    } else {
+                        return {
+                            rowIndex: previousCell.rowIndex,
+                            column: previousCell.column,
+                            rowPinned: previousCell.rowPinned
+                        };
+                    }
+
+                }
+                break;
+            case Key.ArrowUp:
+                if ((previousCell.rowIndex - 1) < 0) {
+                    if (pageIndex > 0) {
+                        this.onGoToPage(pageIndex - 1);
+                        return {
+                            rowIndex: this.gridApi.getModel().getRowCount() - 1,
+                            column: previousCell.column,
+                            rowPinned: previousCell.rowPinned
+                        };
+                    } else {
+                        return {
+                            rowIndex: previousCell.rowIndex,
+                            column: previousCell.column,
+                            rowPinned: previousCell.rowPinned
+                        };
+                    }
+                }
+                break;
+        }
+        return suggestedNextCell ?? params.previousCellPosition;
+    }
+
+    private suppressKeyboardEvent(params: SuppressKeyboardEventParams): boolean {
+        if (!this.gridApi || params.event.type === "keypress") {
+            return false;
+        }
+        const pageIndex = this.gridApi.paginationGetCurrentPage();
+        const totalPages = this.gridApi.paginationGetTotalPages();
+        switch (params.event.code) {
+            case Key.ArrowDown:
+            case Key.ArrowUp:
+            case Key.ArrowLeft:
+            case Key.ArrowRight:
+                if (params.editing && params.event.altKey) {
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        let indexToJump: number;
+                        let columnToJump: Column;
+                        if (params.event.code === Key.ArrowDown) {
+                            indexToJump = focusedCell.rowIndex + 1;
+                            columnToJump = focusedCell.column;
+                            if (indexToJump >= this.gridApi.getModel().getRowCount()) {
+                                if (pageIndex < (totalPages - 1)) {
+                                    this.onGoToPage(pageIndex + 1);
+                                    indexToJump = 0
+                                } else {
+                                    indexToJump = focusedCell.rowIndex;
+                                }
+                            }
+                            this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                            this.indexToJump = indexToJump;
+                            this.columnToJump = columnToJump;
+                            setTimeout(() => {
+                                this.gridApi?.startEditingCell({
+                                    rowIndex: indexToJump,
+                                    colKey: columnToJump,
+                                    key: Key.Enter
+                                });
+                            }, 0);
+                            return true;
+                        } else if (params.event.code === Key.ArrowUp) {
+                            indexToJump = focusedCell.rowIndex - 1;
+                            columnToJump = focusedCell.column;
+                            if (indexToJump < 0) {
+                                if (pageIndex > 0) {
+                                    this.onGoToPage(pageIndex - 1);
+                                    indexToJump = this.gridApi.getModel().getRowCount() - 1;
+                                } else {
+                                    indexToJump = focusedCell.rowIndex;
+                                }
+                            }
+                            this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                            this.indexToJump = indexToJump;
+                            this.columnToJump = columnToJump;
+                            setTimeout(() => {
+                                this.gridApi?.startEditingCell({
+                                    rowIndex: indexToJump,
+                                    colKey: columnToJump,
+                                    key: Key.Enter
+                                });
+                            }, 0);
+                            return true;
+                        } else if (params.event.code === Key.ArrowLeft) {
+                            this.gridApi.tabToPreviousCell();
+                            break;
+                        } else /*Key.ArrowRight*/ {
+                            this.gridApi.tabToNextCell();
+                            break;
+                        }
+                    }
+                }
+                break;
+            case Key.PageDown:
+                this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                if (pageIndex < (totalPages - 1)) {
+                    this.gridApi.paginationGoToNextPage();
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        this.indexToJump = Math.min(focusedCell.rowIndex + this.gridApi.paginationGetPageSize(), this.gridApi.paginationGetRowCount());
+                        this.columnToJump = focusedCell.column;
+                        return true;
+                    }
+                }
+                break;
+            case Key.PageUp:
+                this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                if (pageIndex > 0) {
+                    this.gridApi.paginationGoToPreviousPage();
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        this.indexToJump = Math.max(focusedCell.rowIndex - this.gridApi.paginationGetPageSize(), 0);
+                        this.columnToJump = focusedCell.column;
+                        return true;
+                    }
+                }
+                break;
+            case Key.End:
+                this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                if (pageIndex < (totalPages - 1)) {
+                    this.gridApi.paginationGoToLastPage();
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        this.indexToJump = this.gridApi.paginationGetRowCount() - 1;
+                        this.columnToJump = focusedCell.column;
+                        return true;
+                    }
+                }
+                break;
+            case Key.Home:
+                this.lastNavigationEvent = NavigationEventEnum.KEYBOARD;
+                if (pageIndex > 0) {
+                    this.gridApi.paginationGoToFirstPage();
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        this.indexToJump = 0;
+                        this.columnToJump = focusedCell.column;
+                        return true;
+                    }
+                }
+                break;
+            case "KeyA":
+                if (params.event.ctrlKey && !params.editing) {
+                    var firstRow = this.gridApi.getFirstDisplayedRowIndex();
+                    var lastRow = this.gridApi.getLastDisplayedRowIndex();
+                    this.gridApi.deselectAll();
+                    if (this.props.rowModelType === "infinite") {
+                        for (let i = firstRow; i <= lastRow; i++) {
+                            this.gridApi.getDisplayedRowAtIndex(i)?.setSelected(true);
+                        }
+                    } else {
+                        this.gridApi.forEachNodeAfterFilter(function (node, index) {
+                            if (index >= firstRow && index <= lastRow) {
+                                node.setSelected(true);
+                            }
+                        });
+                    }
+                }
+                break;
+            case "KeyI":
+                if (params.event.ctrlKey) {
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    const column = this.gridApi?.getColumn("objectId") ?? this.gridApi?.getColumn("id");
+                    if (focusedCell && column) {
+                        const displayedRowAtIndex = this.gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+                        if (displayedRowAtIndex) {
+                            ClipboardUtils.copyToClipboard(this.getValue(column, displayedRowAtIndex));
+                        }
+                        this.gridApi.setFocusedCell(focusedCell.rowIndex, focusedCell.column.getId());
+                    }
+                }
+                break;
+            case "KeyB":
+                if (params.event.ctrlKey) {
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    const column = this.gridApi?.getColumn("objectName") ?? this.gridApi?.getColumn("name");
+                    if (focusedCell && column) {
+                        const displayedRowAtIndex1 = this.gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+                        if (displayedRowAtIndex1) {
+                            ClipboardUtils.copyToClipboard(this.getValue(column, displayedRowAtIndex1));
+                        }
+                        this.gridApi.setFocusedCell(focusedCell.rowIndex, focusedCell.column.getId());
+                    }
+                }
+                break;
+            case "KeyC":
+                if (params.event.ctrlKey && !params.editing) {
+                    const focusedCell = this.gridApi.getFocusedCell();
+                    if (focusedCell) {
+                        const displayedRowAtIndex2 = this.gridApi.getDisplayedRowAtIndex(focusedCell.rowIndex);
+                        if (displayedRowAtIndex2) {
+                            ClipboardUtils.copyToClipboard(this.getValue(focusedCell.column, displayedRowAtIndex2, true));
+                        }
+                        this.gridApi.setFocusedCell(focusedCell.rowIndex, focusedCell.column.getId());
+                    }
+                }
+                break;
+            case Key.Enter:
+                this.props.onEnter?.();
+                break;
+        }
+        this.props.onKeyPressed?.(params.event);
+        return false;
+    }
+
+    getValue(column: Column, row: IRowNode, doNotReplaceNewline?: boolean): string {
+        let formattedValue = this.gridApi?.getCellValue({rowNode: row, colKey: column});
+        if (formattedValue && typeof formattedValue === "string" && formattedValue.indexOf(EXPORT_SEPARATOR) > 0 && !doNotReplaceNewline) {
+            formattedValue = formattedValue.replace(/[\n\r]+/, ' ');
+        }
+        const valueFormatter = column.getColDef().valueFormatter;
+        if (valueFormatter) {
+            const params: ValueFormatterParams = {
+                data: row.data,
+                node: row,
+                column: column,
+                colDef: column.getColDef(),
+                api: this.gridApi as GridApi,
+                context: this.gridApi?.getGridOption('context'),
+                value: formattedValue
+            };
+            if (typeof valueFormatter === 'function') {
+                formattedValue = valueFormatter?.(params);
+            } else if (typeof valueFormatter === 'string') {
+                formattedValue = at(row.data, valueFormatter)[0];
+            }
+        }
+        return formattedValue;
+    }
+
+    async getExportContent(progressPopup: ProgressPopup | null, props: ContextMenuProps): Promise<string[][]> {
+        if (!this.gridApi) {
+            return [];
+        }
+        const model: IRowModel = this.gridApi.getModel();
+        const tableContent: string[][] = [];
+        const columns = this.gridApi.getAllDisplayedColumns().map((column: Column) => {
+            const columnTypes = column.getColDef().type;
+            return {
+                column: column,
+                displayName: column.getColDef().headerName,
+                isDateField: columnTypes && columnTypes.indexOf("dateColumn") >= 0,
+                isDateTimeField: columnTypes && columnTypes.indexOf("dateTimeColumn") >= 0
+            };
+        });
+        if (columns.length === 0) {
+            return tableContent;
+        }
+        tableContent.push(columns.map((column) => column.displayName ?? ""));
+
+        let rowCount: number;
+        let tableNodes: IRowNode[] = [];
+        if (model.getType() === "clientSide") {
+            if (props.onlySelectedNodes) {
+                rowCount = 0;
+                this.gridApi.forEachNodeAfterFilterAndSort((node) => {
+                    if (node.isSelected()) {
+                        tableNodes.push(node);
+                        rowCount++;
+                    }
+                });
+            } else {
+                rowCount = model.getRowCount();
+                this.gridApi.forEachNodeAfterFilterAndSort((node) => {
+                    tableNodes.push(node);
+                });
+            }
+        } else {
+            if (props.onlySelectedNodes) {
+                const selectedNodes = this.gridApi.getSelectedNodes();
+                rowCount = selectedNodes.length;
+                selectedNodes.forEach((node) => {
+                    tableNodes.push(node);
+                });
+                tableNodes.sort((a, b) => (a.rowIndex ?? 0) > (b.rowIndex ?? 0) ? 1 : (a.rowIndex === b.rowIndex) ? 0 : -1);
+            } else {
+                const virtualRowCount = model.getRowCount();
+                rowCount = virtualRowCount ? virtualRowCount : 0;
+            }
+        }
+        progressPopup?.setRecordCount(rowCount);
+
+        let percentStep = Math.floor(rowCount / 100);
+        if (percentStep < 100) {
+            percentStep = 100;
+        }
+
+        if (model.getType() === "clientSide" || props.onlySelectedNodes) {
+            for (let index = 0; index < tableNodes.length; index++) {
+                const record: string[] = [];
+                columns.forEach((column) => {
+                    let value = this.getValue(column.column, tableNodes[index]);
+                    record.push(value);
+                });
+                tableContent.push(record);
+                if (index % percentStep === 0) {
+                    progressPopup?.update(Math.floor(index / rowCount * 100) - 1);
+                    await TimeUtils.sleep(100);
+                }
+            }
+        } else {
+            for (let index = 0; index < rowCount; index++) {
+                let row: RowNode | undefined = undefined;
+                let record: any[] = [];
+                do {
+                    record = [];
+                    do {
+                        row = model.getRow(index);
+                        if (!row || !row.data) {
+                            await TimeUtils.sleep(100);
+                        }
+                    } while (!row || !row.data);
+                    columns.forEach((column) => {
+                        record.push(this.getValue(column.column, row as RowNode));
+                    });
+                    if (record.filter((cell) => !!cell).length === 0) {
+                        await TimeUtils.sleep(100);
+                    }
+                } while (record.filter((cell) => !!cell).length === 0);
+                tableContent.push(record);
+                if (index % percentStep === 0) {
+                    // noinspection ES6MissingAwait
+                    progressPopup?.update(Math.floor(index / rowCount * 100) - 1);
+                    await TimeUtils.sleep(100);
+                }
+            }
+        }
+        // noinspection ES6MissingAwait
+        progressPopup?.update(99);
+        await TimeUtils.sleep(300);
+        return tableContent;
+    }
+
+    onCellFocused(event: CellFocusedEvent) {
+        const row: IRowNode | undefined = event.rowIndex !== null ? this.gridApi?.getDisplayedRowAtIndex(event.rowIndex) : undefined;
+        if (row) {
+            if (this.lastNavigationEvent === NavigationEventEnum.KEYBOARD && KeyboardUtils.isKeyPressed(Key.Shift) && this.lastCellFocus && this.lastCellFocus.rowIndex !== event.rowIndex) {
+                // focusing new row with SHIFT key pressed
+                if (!row.isSelected()) {
+                    // add to selection
+                    row.setSelected(true, false);
+                } else if (this.lastCellFocus?.rowIndex !== null) {
+                    const lastFocusedRow: IRowNode | undefined = this.gridApi?.getDisplayedRowAtIndex(this.lastCellFocus.rowIndex);
+                    if (lastFocusedRow?.isSelected()) {
+                        lastFocusedRow.setSelected(false, false);
+                    }
+                }
+            } else if (!row.isSelected() && !KeyboardUtils.isKeyPressed(Key.Control) && !KeyboardUtils.isKeyPressed(Key.Shift)) {
+                row.setSelected(true, true);
+            }
+        }
+        this.props.onCellFocused?.(event);
+        this.lastCellFocus = event;
+    }
+
+    onCellMouseDown(e: CellMouseDownEvent) {
+        this.lastNavigationEvent = NavigationEventEnum.MOUSE;
+        // always focus clicked cell (also when using shift key)
+        if (e.rowIndex !== null) {
+            this.setFocusedCellDebounced(e.rowIndex, e.column, e.rowPinned !== null ? e.rowPinned : undefined);
+        }
+        this.props.onCellMouseDown?.(e);
+    }
+
+    setFocusedCellDebounced(rowIndex: number, column: string | Column, rowPinned: RowPinnedType) {
+        this.gridApi?.setFocusedCell(rowIndex, column, rowPinned);
+    }
+
+    private onCellContextMenu(event: CellContextMenuEvent) {
+        this.setState({contextMenuVisible: !!event});
+        if (event.node) {
+            if (!event.node.isSelected()) {
+                event.node.setSelected(true, true);
+            }
+        }
+    }
+
+    private loadingOverlayRenderer(): ReactElement {
+        if (this.props.loadingOverlayRenderer) {
+            const loadingOverlay = this.props.loadingOverlayRenderer();
+            if (loadingOverlay) {
+                return loadingOverlay;
+            }
+        }
+        return <div><LoadingOutlined style={{fontSize: 40, color: "#1890ff"}}/></div>;
+    }
+
+    private noRecordsOverlayRenderer(): ReactElement {
+        if (this.props.noRecordsOverlayRenderer) {
+            const noRecordsOverlay = this.props.noRecordsOverlayRenderer();
+            if (noRecordsOverlay) {
+                return noRecordsOverlay;
+            }
+        }
+        return (
+            <Empty description={i18n("No records found.")} imageStyle={{height: "8vh"}}>
+                <Button type="primary" onClick={() => {
+                    if (this.props.search && this.props.search.onSearch) {
+                        this.props.search.onSearch();
+                    }
+                }}>
+                    <SearchOutlined/> {i18n("Search")}
+                </Button>
+            </Empty>
+        );
+    }
+
+    /** Set new data to the grid */
+    public setRowData(dataArray: any[]): void {
+        this.gridApi?.updateGridOptions({rowData: dataArray});
+    }
+
+    private onRowDataUpdated(event: RowDataUpdatedEvent) {
+        if (!this.gridApi) {
+            return;
+        }
+        const currentPage = this.gridApi.paginationGetCurrentPage();
+        const recordsCount = this.props.paging.pageSize >= 0 ? (this.gridApi.paginationIsLastPageFound() ? this.gridApi.paginationGetRowCount() : 0) : this.gridApi.getDisplayedRowCount();
+        this.setState({recordsCount: recordsCount, pageIndex: currentPage});
+        if (this.props.onRowDataUpdated) {
+            this.props.onRowDataUpdated(event);
+        }
+    }
+
+    private static EMPTY_STYLE: RowStyle = {}
+
+    _getRowStyle(params: RowClassParams): RowStyle {
+        const rowStyleRules = this.props.rowStyleRules;
+        if (rowStyleRules) {
+            const style: any = {};
+            rowStyleRules.forEach((rowStyleRule) => {
+                if (rowStyleRule.expression) {
+                    if (!rowStyleRuleCompiledExpressions[rowStyleRule.expression]) {
+                        rowStyleRuleCompiledExpressions[rowStyleRule.expression] = compileExpression(rowStyleRule.expression);
+                    }
+                    if (rowStyleRuleCompiledExpressions[rowStyleRule.expression](params.node.data)) {
+                        Object.assign(style, rowStyleRule.style);
+                    }
+                } else {
+                    Object.assign(style, rowStyleRule.style);
+                }
+            });
+            if (!style.color) {
+                style.color = null;
+            } else if (typeof style.color === "object") {
+                style.color = `rgba(${style.color.r},${style.color.g},${style.color.b},${style.color.a})`;
+            }
+            if (!style.backgroundColor) {
+                style.backgroundColor = "inherit";
+            } else if (typeof style.backgroundColor === "object") {
+                style.backgroundColor = `rgba(${style.backgroundColor.r},${style.backgroundColor.g},${style.backgroundColor.b},${style.backgroundColor.a})`;
+            }
+            if (!style.fontWeight) {
+                style.fontWeight = "inherit";
+            }
+            const fontSize = style.fontSize;
+            if (style.fontSize) {
+                style.fontSize = style.fontSize + "px";
+            } else {
+                style.fontSize = "inherit";
+            }
+            if (style.rowHeightDelta) {
+                const lineHeight = calculateLineHeight(fontSize, style.rowHeightDelta);
+                if (style.rowHeightDelta) {
+                    delete style.rowHeightDelta;
+                }
+                style.lineHeight = lineHeight + "px";
+            } else {
+                const lineHeight = calculateLineHeight(fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA);
+                style.lineHeight = lineHeight + "px";
+            }
+            if (this.props.getRowStyle) {
+                const rowStyle = this.props.getRowStyle(params);
+                if (rowStyle) {
+                    return Object.assign(style, rowStyle) as RowStyle;
+                }
+            }
+            return style as RowStyle;
+        }
+        return DataGrid.EMPTY_STYLE;
+    }
+
+    _getRowHeight(): number {
+        return this.state.rowHeight;
+    }
+
+    _getCellStyle(params: { colDef: ColDef }) {
+        const fontSize = this.state.fontSize;
+        const cellStyles: { [key: string]: any } = {"fontSize": fontSize + "px"};
+        if (params.colDef.type && params.colDef.type.indexOf("alignRight") >= 0) {
+            cellStyles["textAlign"] = "right";
+        }
+        if (params.colDef.cellRendererParams?.originalCellStyle) {
+            const originalCellStylesOrHandler = params.colDef.cellRendererParams.originalCellStyle as {} | ((params: any) => {});
+            if (typeof originalCellStylesOrHandler === "object") {
+                Object.assign(cellStyles, originalCellStylesOrHandler);
+            } else if (typeof originalCellStylesOrHandler === "function") {
+                const originalCellStyles = originalCellStylesOrHandler(params);
+                if (originalCellStyles) {
+                    Object.assign(cellStyles, originalCellStyles);
+                }
+            }
+        }
+        return cellStyles;
+    }
+
+    getDefaultColDefinition(colDef: ColDef | undefined): ColDef {
+        if (colDef) {
+            return {...colDef, suppressKeyboardEvent: this.suppressKeyboardEvent} as ColDef;
+        } else {
+            return {suppressKeyboardEvent: this.suppressKeyboardEvent} as ColDef;
+        }
+    }
+
+    private getCustomComponents(components: any) {
+        let customComponents = gridFrameworkComponents;
+        if (components) {
+            customComponents = Object.assign(gridFrameworkComponents, components);
+        }
+        return customComponents;
+    }
+
+    private onPageOrientationChange(pageOrientation: PageOrientation) {
+        this.setState({pageOrientation: pageOrientation});
+    }
+
+    private onExport(start: boolean) {
+        this.setState({exporting: start});
+    }
+
+    renderNavigationPanel(): ReactElement {
+        return (
+            <React.Fragment>
+                {this.props.toolbar && this.props.toolbar.renderToolbar ? this.props.toolbar.renderToolbar(this.renderToolBarWithSearch()) : this.renderToolBarWithSearch()}
+                {this.props.paging.pageSize >= 0 &&
+                    <DataGridPagination
+                        disabled={this.state.loading}
+                        current={this.state.pageIndex ? this.state.pageIndex + 1 : 1}
+                        pageSize={this.state.pageSize ? this.state.pageSize : 20}
+                        total={this.state.recordsCount ?? 1}
+                        onGoToPage={page => {
+                            this.onGoToPage(page - 1);
+                        }}
+                    />}
+                {this.props.paging.pageSize < 0 && this.state.recordsCount && !this.props.toolbar?.hideRecordCount ?
+                    <span style={{
+                        flex: "0 1 auto",
+                        textAlign: "right",
+                        whiteSpace: "nowrap",
+                        margin: "0 12px",
+                        lineHeight: "32px",
+                    }}>{`${this.state.viewport[0]}-${this.state.viewport[1]} ${i18n('of')} ${this.state.recordsCount}`}</span>
+                    : undefined}
+            </React.Fragment>
+        );
+    }
+
+    renderToolBarWithSearch(): ReactElement {
+        return (
+            <Space.Compact key="filter-panel"
+                           className="datagrid-autocomplete-input-group"
+                           style={{whiteSpace: "nowrap", flexGrow: 1, display: "flex"}}>
+                {this.props.toolbar?.toolbarButtons}
+                <Dropdown trigger={["click"]}
+                          menu={getContextMenu({
+                              showMilliseconds: !!this.props.showMilliseconds,
+                              showYear: !this.props.hideYear,
+                              renderer: this.props.exportMenu?.renderer,
+                              onClick: this.props.exportMenu?.onClick,
+                              getExportContent: this.getExportContent,
+                              pageOrientation: this.state.pageOrientation,
+                              exporting: this.state.exporting,
+                              onPageOrientationChange: this.onPageOrientationChange,
+                              onExport: this.onExport
+                          })}
+                          disabled={this.state.loading}>
+                    <Button title={i18n("Export")}>
+                        <DownloadOutlined/>
+                    </Button>
+                </Dropdown>
+
+                <Dropdown trigger={["click"]}
+                          menu={this.getSettingsMenu()}>
+                    <Button
+                        title={i18n("Extended table features")}
+                        disabled={this.state.loading}>
+                        <TableOutlined/>
+                    </Button>
+                </Dropdown>
+                {!this.props.search?.hidden && !this.props.search?.searchRenderer && <AutoCompleteInput
+                    style={{minWidth: 100, flexGrow: 1}}
+                    placeholder={this.props.search ? this.props.search.placeholder : undefined}
+                    stringFormatter={this.props.search ? this.props.search.stringFormatter : undefined}
+                    value={this.props.search ? this.props.search.searchString : undefined}
+                    options={this.props.search ? this.props.search.searchHistory : undefined}
+                    onChange={this.props.search ? this.props.search.onChange : undefined}
+                    onSearch={this.props.search ? this.props.search.onSearch : undefined}
+                    disabled={this.state.loading || (this.props.filter && this.props.filter.columnSearchVisible)}
+                />}
+                {this.props.search?.searchRenderer?.()}
+                {!this.props.search?.searchButtonHidden &&
+                <Button title={this.props.search?.hidden ? i18n("Refresh") : i18n("Search")}
+                        className={"search-btn " + (this.props.search && this.props.search.searchButtonClassName ? this.props.search.searchButtonClassName : "")}
+                        disabled={this.props.search?.searchButtonDisabled}
+                        type="primary"
+                        onClick={() => {
+                            if (this.props.search && this.props.search.onSearch) {
+                                this.props.search.onSearch();
+                            }
+                        }}>
+                    {this.state.loading ? <LoadingOutlined/> : (this.props.search?.hidden ? <ReloadOutlined/> :
+                        <SearchOutlined/>)}
+                </Button>
+                }
+            </Space.Compact>
+        );
+    }
+
+    getSettingsMenu(): MenuProps {
+        let menuItems: MenuElement[] = [
+            {
+                key: "columnFilter",
+                icon: <FileSearchOutlined/>,
+                className: this.props.filter && this.props.filter.columnSearchVisible ? "ant-dropdown-menu-item-selected" : "",
+                title: i18n("Turn on/off column filter"),
+                label: i18n("Column Filter"),
+            },
+            {
+                key: "autosizeAllColumns",
+                icon: <ColumnWidthOutlined/>,
+                label: i18n("Autosize All Columns"),
+            },
+            {
+                key: "columnsConfig",
+                icon: <ControlOutlined/>,
+                label: i18n("Columns Configuration"),
+            },
+            {
+                key: "columnsAndAdvancedConfigDivider",
+                type: "divider"
+            },
+            {
+                key: "advancedConfig",
+                icon: <SettingOutlined/>,
+                label: i18n("Advanced Settings"),
+            }
+        ];
+
+        if (this.props.settingsMenu?.renderer) {
+            menuItems = this.props.settingsMenu.renderer(menuItems);
+        }
+
+        return {
+            items: menuItems,
+            onClick: (menuInfo) => {
+                switch (menuInfo.key) {
+                    case "columnFilter":
+                        const visible = !(this.props.filter && this.props.filter.columnSearchVisible);
+                        this.setColumnSearchVisible(visible);
+                        break;
+                    case "autosizeAllColumns":
+                        this.gridApi?.autoSizeAllColumns();
+                        break;
+                    case "columnsConfig":
+                        this.showColumnsConfig(true);
+                        break;
+                    case "advancedConfig":
+                        this.showTableConfiguration(true);
+                        break;
+                    default:
+                        if (this.props.settingsMenu?.onClick) {
+                            this.props.settingsMenu.onClick(menuInfo.key + "");
+                        }
+                }
+            }
+        }
+    }
+
+    private getAdaptedColumnDefs(columnDefs: DataGridColDef[], floatingFilterEnabled: boolean | undefined, disableColumnDefsPreprocessing: boolean) {
+        if (columnDefs.length === 0) {
+            return undefined;
+        }
+        if (disableColumnDefsPreprocessing) {
+            return columnDefs;
+        }
+        const adaptedColumnDefs = columnDefs ? columnDefs.map((columnDef) => {
+            const {group, floatingFilter, hide, cellEditorPopup, editable, ...rest} = columnDef as DataGridColDef;
+            let floatingFilterEnabledForColumn = !!floatingFilter;
+            if (typeof columnDef.type === "string") {
+                if (!!(this.columnTypes[columnDef.type]?.floatingFilter)) {
+                    floatingFilterEnabledForColumn = true;
+                }
+            } else {
+                columnDef.type?.forEach((type) => {
+                    if (!!(this.columnTypes[type]?.floatingFilter)) {
+                        floatingFilterEnabledForColumn = true;
+                    }
+                });
+
+            }
+            return {
+                ...rest,
+                floatingFilter: floatingFilterEnabledForColumn && floatingFilterEnabled,
+                resizable: true,
+                headerComponent: "simpleHeader",
+                headerComponentParams: {
+                    onColumnsConfigVisible: this.showColumnsConfig
+                },
+                hide: hide === undefined ? rest.initialHide : hide,
+                cellStyle: this._getCellStyle,
+                cellRendererParams: columnDef.cellStyle ? Object.assign(columnDef.cellRendererParams !== undefined ? columnDef.cellRendererParams : {}, {originalCellStyle: columnDef.cellStyle}) : columnDef.cellRendererParams,
+                editable: editable,
+                cellEditorPopup: !editable ? undefined : cellEditorPopup !== false
+            };
+        }) : undefined;
+        if (adaptedColumnDefs) {
+            setTimeout(() => {
+                this.props.onColumnDefsAdapted?.(adaptedColumnDefs);
+            }, 0);
+        }
+        return adaptedColumnDefs;
+    }
+
+    render() {
+        const {
+            onGridReady,
+            columnDefs, disableColumnDefsPreprocessing, onColumnsChanged,
+            paging, onPaginationChanged, onViewportChanged,
+            selectedIds,
+            search, toolbar,
+            filter, onFilterChanged, onFilterModified, onCellFocused,
+            onSortChanged, components,
+            tableConfigVisible, onTableConfigVisible,
+            noRecordsOverlayRenderer, loadingOverlayRenderer, onRowDataUpdated,
+            rowStyleRules, onChangeRowStyleRules,
+            defaultShowMilliseconds, onShowMilliseconds, defaultHideYear, onShowYear,
+            suppressLoadingOverlay, defaultColDef, headerHeight,
+            rowData,
+            rowDataManualMode,
+            gridRef,
+            quickFilterParser, quickFilterMatcher,
+            ...passedProperties
+        } = this.props;
+        let key: string;
+        let paginationPageSize: number | undefined = undefined;
+        if (paging.pageSize > 0) {
+            paginationPageSize = paging.pageSize;
+            passedProperties.pagination = true;
+            key = "paginated-table";
+        } else if (paging.pageSize === 0) {
+            passedProperties.paginationAutoPageSize = true;
+            passedProperties.pagination = true;
+            key = "paginated-table";
+        } else {
+            // pagination is disabled
+            passedProperties.pagination = false;
+            key = "non-paginated-table";
+        }
+
+        // nejde
+        const floatingFilterEnabled = !!filter && !!filter.columnSearchVisible;
+        const adaptedColumnDefs = this.getAdaptedColumnDefs(columnDefs, floatingFilterEnabled, !!disableColumnDefsPreprocessing);
+
+        const customComponents = this.getCustomComponents(components);
+        const debugMode = process.env.NODE_ENV === 'development';
+        const panelStyle = {
+            display: "flex",
+            flexFlow: "column",
+            height: "100%",
+            width: "100%",
+            paddingBottom: 8,
+        };
+        if (this.props.panelStyle) {
+            Object.assign(panelStyle, this.props.panelStyle);
+        }
+        const tablePanelStyle = {flex: "1 1 auto", marginTop: 16, overflow: "auto"};
+        if (this.props.tablePanelStyle) {
+            Object.assign(tablePanelStyle, this.props.tablePanelStyle);
+        }
+        const headerFilterRowHeight = calculateRowHeight(this.state.fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA + 2);
+
+        return (
+            <React.Fragment>
+                <Card size="small" bordered={false}
+                      style={{height: "100%"}}
+                      styles={{body: panelStyle}}>
+                    <div style={{display: "flex"}}>
+                        {this.renderNavigationPanel()}
+                    </div>
+                    <div style={tablePanelStyle}>
+                        <Dropdown trigger={["contextMenu"]}
+                                  getPopupContainer={() => {
+                                      // very nasty trick how remove error of ResizeObservers infinite cycling - because popover (with dynamic size) is placed in in resizable panel
+                                      const parentNode = (ReactDOM.findDOMNode(this)?.parentNode ?? document.body) as HTMLElement;
+                                      return parentNode;
+                                  }}
+                                  menu={getContextMenu({
+                                      onlySelectedNodes: true,
+                                      showMilliseconds: !!this.props.showMilliseconds,
+                                      showYear: !this.props.hideYear,
+                                      renderer: this.props.contextMenu?.renderer,
+                                      onClick: this.props.contextMenu?.onClick,
+                                      getExportContent: this.getExportContent,
+                                      hideNotificationOnClipboardCopy: true,
+                                      pageOrientation: this.state.pageOrientation,
+                                      exporting: this.state.exporting,
+                                      onPageOrientationChange: this.onPageOrientationChange,
+                                      onExport: this.onExport
+                                  })}
+                                  open={this.state.contextMenuVisible}
+                                  onOpenChange={(visible) => {
+                                      if (!visible) {
+                                          this.setState({contextMenuVisible: false});
+                                      }
+                                  }}
+                        >
+                            <div className="ag-theme-balham" style={{width: "100%", height: "100%"}}
+                                 ref={(wrapingDiv) => {
+                                     this.wrappingDiv = wrapingDiv;
+                                 }}>
+                                <AgGridReact
+                                    key={key}
+                                    debug={debugMode}
+                                    ref={gridRef}
+                                    paginationPageSize={paginationPageSize}
+                                    maxConcurrentDatasourceRequests={this.props.rowModelType === "infinite" ? 1 : undefined}
+                                    onGridReady={this.onGridReady}
+                                    onPaginationChanged={this.onPaginationChanged}
+                                    onFilterModified={this.onFilterModified}
+                                    onFilterChanged={this.onFilterChanged}
+                                    onSortChanged={this.onSortChanged}
+                                    defaultColDef={this.getDefaultColDefinition(defaultColDef)}
+                                    columnDefs={adaptedColumnDefs as ColDef[]}
+                                    rowData={!rowDataManualMode ? rowData : undefined}
+                                    {...passedProperties}
+                                    onCellFocused={this.onCellFocused}
+                                    suppressPaginationPanel={true}
+                                    getRowId={getRowId}
+                                    components={customComponents}
+                                    columnTypes={this.columnTypes}
+                                    onColumnVisible={this.onColumnsChanged}
+                                    onColumnPinned={this.onColumnsChanged}
+                                    onColumnResized={this.onColumnsChanged}
+                                    onColumnMoved={this.onColumnsChanged}
+                                    onCellMouseDown={this.onCellMouseDown}
+                                    navigateToNextCell={this.navigateToNextCell}
+                                    onViewportChanged={this.onViewportChanged}
+                                    onCellContextMenu={this.onCellContextMenu}
+                                    loadingOverlayComponent='loadingOverlay'
+                                    noRowsOverlayComponent='noRecordsOverlay'
+                                    onRowDataUpdated={this.onRowDataUpdated}
+                                    context={this.table_context}
+                                    rowHeight={this.state.rowHeight}
+                                    getRowStyle={this._getRowStyle}
+                                    getRowHeight={this._getRowHeight}
+                                    headerHeight={headerHeight !== undefined ? headerHeight : headerFilterRowHeight}
+                                    floatingFiltersHeight={headerFilterRowHeight}
+                                    suppressLoadingOverlay={this.props.loadingOverlayRenderer ? true : this.props.suppressLoadingOverlay}
+                                    quickFilterParser={this.wildcardQuickFilter.quickFilterParser}
+                                    quickFilterMatcher={this.wildcardQuickFilter.quickFilterMatcher}
+                                >
+                                </AgGridReact>
+                                {this.state.loading && this.props.loadingOverlayRenderer &&
+                                    <div className="ag-overlay" aria-hidden="true" ref="overlayWrapper">
+                                        <div className="ag-overlay-panel">
+                                            <div
+                                                className="ag-overlay-wrapper ag-layout-normal ag-overlay-loading-wrapper">
+                                                <div className="ag-react-container">
+                                                    {this.props.loadingOverlayRenderer?.()}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+                        </Dropdown>
+                        {this.props.tableOverlayRenderer?.()}
+                    </div>
+                </Card>
+
+                {!!this.gridApi && !!this.gridApi && this.state.pageSize !== null &&
+                    <DataGridEditor dataGrid={this}
+                                    gridApi={this.gridApi}
+                                    columnDefinitions={columnDefs}
+                                    columnModel={this.state.columnModel}
+                                    visible={!!this.props.tableConfigVisible}
+                                    onTableConfigVisible={this.showTableConfiguration}
+                                    paginationPageSize={paging.pageSize}
+                                    paginationDefaultPageSize={paging.defaultPageSize}
+                                    currentPageSize={this.state.pageSize}
+                                    showMilliseconds={!!this.props.showMilliseconds}
+                                    defaultShowMilliseconds={!!this.props.defaultShowMilliseconds}
+                                    showYear={!this.props.hideYear}
+                                    defaultShowYear={!this.props.defaultHideYear}
+                                    rowStyleRules={this.props.rowStyleRules}
+                                    defaultRowStyleRules={this.props.defaultRowStyleRules}
+                                    onChangeRowStyleRules={onChangeRowStyleRules}
+                    />}
+
+
+                {!!this.gridApi && <ModalDialog
+                    mode={ModalDialogMode.OK_CANCEL}
+                    open={this.state.columnsConfigVisible}
+                    initialWidth={700}
+                    initialHeight={this.state.columnTransferHeight}
+                    title={<span><ControlOutlined style={{
+                        color: "#faad14",
+                        fontSize: 22,
+                        marginRight: 16
+                    }}/>{i18n("Columns Configuration")}</span>}
+                    cancelText={i18n("Cancel")}
+                    onCancel={() => {
+                        if (this.gridApi && this.columnModelBeforeEdit) {
+                            this.gridApi.applyColumnState({state: this.columnModelBeforeEdit, applyOrder: true});
+                            delete this.columnModelBeforeEdit;
+                            this.showColumnsConfig(false);
+                        }
+                    }}
+                    onOk={() => {
+                        delete this.columnModelBeforeEdit;
+                        this.showColumnsConfig(false);
+                    }}
+                    onResize={({height}) => {
+                        this.setState({columnTransferHeight: height});
+                    }}
+                    zIndex={100}
+                >
+                    <ColumnTransfer
+                        columnDefinitions={columnDefs as ColDef[]}
+                        columnModel={this.state.columnModel}
+                        gridApi={this.gridApi}
+                        height={this.state.columnTransferHeight - 154}
+                    />
+                </ModalDialog>}
+
+            </React.Fragment>
+        );
+    }
+}