d2coreui 23.0.29 → 23.0.31

package/components/grid/dataGrid.js

@@ -29,9 +29,9 @@ 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, CellCtrl, ModuleRegistry } from "ag-grid-community";
+import { CellControl } from "d2coreui/components/grid/cell/cellControl";
+import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from "ag-grid-community";
 import { LocaleHolder } from "d2core/i18n/localeHolder";
 import tableDefaultRowStyleRules from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
 import { ModalDialog } from "d2coreui/components/modal/modalDialog";
@@ -75,22 +75,19 @@ const gridFrameworkComponents = {
     loadingOverlay: LoadingOverlay,
     noRecordsOverlay: NoRecordsOverlay
 };
-const DataGridModule = _defineModule({
-    version: "32.2.0",
+const DataGridModule = {
+    version: "34.3.1",
     moduleName: `dataGridModule`,
-    beans: [RangeSelector, BeanAccessor],
+    beans: [RangeSelector, CellControl, BeanAccessor],
     dependantModules: [],
-});
-ModuleRegistry.__register(DataGridModule, false, undefined);
-CellCtrl.prototype.onPopupEditorClosed = function () {
-    if (!this.isEditing()) {
-        return;
-    }
-    this.stopEditingAndFocus(true);
 };
+ModuleRegistry.registerModules([AllCommunityModule, DataGridModule]);
 function getRowId(item) {
     return item.data.id + "";
 }
+provideGlobalGridOptions({
+    theme: "legacy"
+});
 const rowStyleRuleCompiledExpressions = {};
 export const EXPORT_SEPARATOR = "\n";
 var NavigationEventEnum;
@@ -101,6 +98,7 @@ var NavigationEventEnum;
 class DataGrid extends React.Component {
     constructor(props) {
         super(props);
+        this.firstLoadDone = false;
         this.lastPaginationEvent = null;
         this.wrappingDiv = null;
         this.state = {
@@ -115,7 +113,6 @@ class DataGrid extends React.Component {
             rowHeight: calculateRowHeight(GRID_DEFAULT_FONT_SIZE, GRID_DEFAULT_ROW_HEIGHT_DELTA),
             viewport: [0, 0],
             contextMenuVisible: false,
-            firstLoadDone: false,
             loading: false,
             columnTransferHeight: 500,
             pageOrientation: "PORTRAIT",
@@ -243,7 +240,7 @@ class DataGrid extends React.Component {
                             return "---";
                         }
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
                         return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateFormat(!this.props.hideYear)));
                     }
                     else {
@@ -283,8 +280,8 @@ class DataGrid extends React.Component {
                             return "Null Time";
                         }
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
-                        return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds)));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
+                        return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true)));
                     }
                     else {
                         return "---";
@@ -293,7 +290,7 @@ class DataGrid extends React.Component {
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "---";
                 },
@@ -303,14 +300,14 @@ class DataGrid extends React.Component {
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "";
                 }
@@ -320,7 +317,7 @@ class DataGrid extends React.Component {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
                         let tooltipValue;
-                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true));
+                        tooltipValue = unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(true, true, true, true));
                         return React.createElement("span", { title: tooltipValue }, unixTimeToMoment(value).fromNow());
                     }
                     else {
@@ -330,7 +327,7 @@ class DataGrid extends React.Component {
                 valueFormatter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "---";
                 },
@@ -340,14 +337,14 @@ class DataGrid extends React.Component {
                 filterValueGetter: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return null;
                 },
                 getQuickFilterText: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds));
+                        return unixTimeToMoment(value).format(LocaleHolder.getDateTimeFormat(!this.props.hideYear, true, this.props.showMilliseconds, true));
                     }
                     return "";
                 }
@@ -356,7 +353,9 @@ class DataGrid extends React.Component {
                 cellRenderer: (params) => {
                     const value = DataGrid.getCellValue(params);
                     if (value !== undefined) {
-                        return React.createElement("span", { style: { whiteSpace: "pre" }, title: escape(value) }, typeof value === "string" ? escape(value.replace(/[\r\n]+/g, ' ')) : value);
+                        return React.createElement("span", { style: { whiteSpace: "pre" }, title: value },
+                            " ",
+                            typeof value === "string" ? value.replace(/[\r\n]+/g, ' ') : value);
                     }
                     else {
                         return "";
@@ -603,9 +602,9 @@ class DataGrid extends React.Component {
                 if (this.props.paging.onPaginationChanged) {
                     this.props.paging.onPaginationChanged(currentPageSize, this.props.paging.pageSize);
                 }
-                if (!this.state.firstLoadDone) {
+                if (!this.firstLoadDone) {
                     this.loadData();
-                    this.setState({ firstLoadDone: true });
+                    this.firstLoadDone = true;
                 }
             }
             this.setState({ pageSize: currentPageSize, recordsCount: recordsCount, pageIndex: currentPage });
@@ -650,7 +649,7 @@ class DataGrid extends React.Component {
         else if (pageSize === 0) {
             this.gridApi.updateGridOptions({ pagination: true, paginationAutoPageSize: true });
             const rowHeight = (_c = (_b = (_a = gridApiWithPrivateAccess.beans.gos).getRowHeightAsNumber) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : 1;
-            const bodyHeight = gridApiWithPrivateAccess.beans.ctrlsService.params.center.viewportSizeFeature.getBodyHeight();
+            const bodyHeight = gridApiWithPrivateAccess.beans.ctrlsSvc.params.center.viewportSizeFeature.getBodyHeight();
             let availablePageSize = 1000;
             if (bodyHeight > 0) {
                 availablePageSize = Math.floor(bodyHeight / rowHeight);
@@ -710,7 +709,7 @@ class DataGrid extends React.Component {
                 this.gridApi.refreshHeader();
                 this.gridApi.redrawRows();
                 if (this.props.rowModelType === "infinite" && this.props.datasource) {
-                    this.gridApi.getModel().rowHeight = rowHeight;
+                    this.gridApi.setGridOption('rowHeight', rowHeight);
                     this.gridApi.updateGridOptions({ datasource: this.props.datasource });
                 }
             }
@@ -846,7 +845,7 @@ class DataGrid extends React.Component {
         var previousCell = params.previousCellPosition;
         switch ((_a = params.event) === null || _a === void 0 ? void 0 : _a.code) {
             case Key.ArrowDown:
-                if ((previousCell.rowIndex + 1) >= this.gridApi.getModel().getRowCount()) {
+                if ((previousCell.rowIndex + 1) >= this.gridApi.getDisplayedRowCount()) {
                     if (pageIndex < (totalPages - 1)) {
                         this.onGoToPage(pageIndex + 1);
                         return {
@@ -869,7 +868,7 @@ class DataGrid extends React.Component {
                     if (pageIndex > 0) {
                         this.onGoToPage(pageIndex - 1);
                         return {
-                            rowIndex: this.gridApi.getModel().getRowCount() - 1,
+                            rowIndex: this.gridApi.getDisplayedRowCount() - 1,
                             column: previousCell.column,
                             rowPinned: previousCell.rowPinned
                         };
@@ -906,7 +905,7 @@ class DataGrid extends React.Component {
                         if (params.event.code === Key.ArrowDown) {
                             indexToJump = focusedCell.rowIndex + 1;
                             columnToJump = focusedCell.column;
-                            if (indexToJump >= this.gridApi.getModel().getRowCount()) {
+                            if (indexToJump >= this.gridApi.getDisplayedRowCount()) {
                                 if (pageIndex < (totalPages - 1)) {
                                     this.onGoToPage(pageIndex + 1);
                                     indexToJump = 0;
@@ -934,7 +933,7 @@ class DataGrid extends React.Component {
                             if (indexToJump < 0) {
                                 if (pageIndex > 0) {
                                     this.onGoToPage(pageIndex - 1);
-                                    indexToJump = this.gridApi.getModel().getRowCount() - 1;
+                                    indexToJump = this.gridApi.getDisplayedRowCount() - 1;
                                 }
                                 else {
                                     indexToJump = focusedCell.rowIndex;
@@ -1107,7 +1106,7 @@ class DataGrid extends React.Component {
                 (_j = (_h = this.props).onEnter) === null || _j === void 0 ? void 0 : _j.call(_h);
                 break;
         }
-        (_l = (_k = this.props).onKeyPressed) === null || _l === void 0 ? void 0 : _l.call(_k, params.event);
+        (_l = (_k = this.props).onKeyPressed) === null || _l === void 0 ? void 0 : _l.call(_k, params.event, params.editing);
         return false;
     }
     getValue(column, row, doNotReplaceNewline) {
@@ -1140,7 +1139,6 @@ class DataGrid extends React.Component {
         if (!this.gridApi) {
             return [];
         }
-        const model = this.gridApi.getModel();
         const tableContent = [];
         const columns = this.gridApi.getAllDisplayedColumns().map((column) => {
             const columnTypes = column.getColDef().type;
@@ -1157,7 +1155,7 @@ class DataGrid extends React.Component {
         tableContent.push(columns.map((column) => { var _a; return (_a = column.displayName) !== null && _a !== void 0 ? _a : ""; }));
         let rowCount;
         let tableNodes = [];
-        if (model.getType() === "clientSide") {
+        if (this.gridApi.getGridOption('rowModelType') === "clientSide") {
             if (props.onlySelectedNodes) {
                 rowCount = 0;
                 this.gridApi.forEachNodeAfterFilterAndSort((node) => {
@@ -1168,7 +1166,7 @@ class DataGrid extends React.Component {
                 });
             }
             else {
-                rowCount = model.getRowCount();
+                rowCount = this.gridApi.getDisplayedRowCount();
                 this.gridApi.forEachNodeAfterFilterAndSort((node) => {
                     tableNodes.push(node);
                 });
@@ -1184,7 +1182,7 @@ class DataGrid extends React.Component {
                 tableNodes.sort((a, b) => { var _a, _b; return ((_a = a.rowIndex) !== null && _a !== void 0 ? _a : 0) > ((_b = b.rowIndex) !== null && _b !== void 0 ? _b : 0) ? 1 : (a.rowIndex === b.rowIndex) ? 0 : -1; });
             }
             else {
-                const virtualRowCount = model.getRowCount();
+                const virtualRowCount = this.gridApi.getDisplayedRowCount();
                 rowCount = virtualRowCount ? virtualRowCount : 0;
             }
         }
@@ -1193,7 +1191,7 @@ class DataGrid extends React.Component {
         if (percentStep < 100) {
             percentStep = 100;
         }
-        if (model.getType() === "clientSide" || props.onlySelectedNodes) {
+        if (this.gridApi.getGridOption('rowModelType') === "clientSide" || props.onlySelectedNodes) {
             for (let index = 0; index < tableNodes.length; index++) {
                 const record = [];
                 columns.forEach((column) => {
@@ -1214,7 +1212,7 @@ class DataGrid extends React.Component {
                 do {
                     record = [];
                     do {
-                        row = model.getRow(index);
+                        row = this.gridApi.getDisplayedRowAtIndex(index);
                         if (!row || !row.data) {
                             await TimeUtils.sleep(100);
                         }
@@ -1572,8 +1570,8 @@ class DataGrid extends React.Component {
         return adaptedColumnDefs;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        const _g = this.props, { 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 } = _g, passedProperties = __rest(_g, ["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"]);
+        var _a, _b, _c, _d;
+        const _e = this.props, { 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, rowSelection, contextMenu, settingsMenu, exportMenu, panelStyle, tablePanelStyle, onColumnDefsAdapted, tableOverlayRenderer, onKeyPressed } = _e, passedProperties = __rest(_e, ["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", "rowSelection", "contextMenu", "settingsMenu", "exportMenu", "panelStyle", "tablePanelStyle", "onColumnDefsAdapted", "tableOverlayRenderer", "onKeyPressed"]);
         let key;
         let paginationPageSize = undefined;
         if (paging.pageSize > 0) {
@@ -1594,25 +1592,25 @@ class DataGrid extends React.Component {
         const adaptedColumnDefs = this.getAdaptedColumnDefs(columnDefs, floatingFilterEnabled, !!disableColumnDefsPreprocessing);
         const customComponents = this.getCustomComponents(components);
         const debugMode = process.env.NODE_ENV === 'development';
-        const panelStyle = {
+        const bodyStyle = {
             display: "flex",
             flexFlow: "column",
             height: "100%",
             width: "100%",
             paddingBottom: 8,
         };
-        if (this.props.panelStyle) {
-            Object.assign(panelStyle, this.props.panelStyle);
+        if (panelStyle) {
+            Object.assign(bodyStyle, panelStyle);
         }
-        const tablePanelStyle = { flex: "1 1 auto", marginTop: 16, overflow: "auto" };
-        if (this.props.tablePanelStyle) {
-            Object.assign(tablePanelStyle, this.props.tablePanelStyle);
+        const tPanelStyle = { flex: "1 1 auto", marginTop: 16, overflow: "auto" };
+        if (tablePanelStyle) {
+            Object.assign(tPanelStyle, tablePanelStyle);
         }
         const headerFilterRowHeight = calculateRowHeight(this.state.fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA + 2);
         return (React.createElement(React.Fragment, null,
-            React.createElement(Card, { size: "small", bordered: false, style: { height: "100%" }, styles: { body: panelStyle } },
+            React.createElement(Card, { size: "small", bordered: false, style: { height: "100%" }, styles: { body: bodyStyle } },
                 React.createElement("div", { style: { display: "flex" } }, this.renderNavigationPanel()),
-                React.createElement("div", { style: tablePanelStyle },
+                React.createElement("div", { style: tPanelStyle },
                     React.createElement(Dropdown, { trigger: ["contextMenu"], getPopupContainer: () => {
                             var _a, _b;
                             const parentNode = ((_b = (_a = ReactDOM.findDOMNode(this)) === null || _a === void 0 ? void 0 : _a.parentNode) !== null && _b !== void 0 ? _b : document.body);
@@ -1637,13 +1635,13 @@ class DataGrid extends React.Component {
                         React.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "100%" }, ref: (wrapingDiv) => {
                                 this.wrappingDiv = wrapingDiv;
                             } },
-                            React.createElement(AgGridReact, Object.assign({ 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, rowData: !rowDataManualMode ? rowData : undefined }, passedProperties, { onCellFocused: this.onCellFocused, suppressPaginationPanel: true, getRowId: getRowId, maintainColumnOrder: true, 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 })),
+                            React.createElement(AgGridReact, Object.assign({ 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, rowData: !rowDataManualMode ? rowData : undefined }, passedProperties, { onCellFocused: this.onCellFocused, cellSelection: rowSelection === "multiple" || (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.mode) === "multiRow", rowSelection: rowSelection, suppressPaginationPanel: true, getRowId: getRowId, maintainColumnOrder: true, 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 })),
                             this.state.loading && this.props.loadingOverlayRenderer &&
                                 React.createElement("div", { className: "ag-overlay", "aria-hidden": "true", ref: "overlayWrapper" },
                                     React.createElement("div", { className: "ag-overlay-panel" },
                                         React.createElement("div", { className: "ag-overlay-wrapper ag-layout-normal ag-overlay-loading-wrapper" },
-                                            React.createElement("div", { className: "ag-react-container" }, (_d = (_c = this.props).loadingOverlayRenderer) === null || _d === void 0 ? void 0 : _d.call(_c))))))), (_f = (_e = this.props).tableOverlayRenderer) === null || _f === void 0 ? void 0 :
-                    _f.call(_e))),
+                                            React.createElement("div", { className: "ag-react-container" }, (_d = (_c = this.props).loadingOverlayRenderer) === null || _d === void 0 ? void 0 : _d.call(_c))))))), tableOverlayRenderer === null || tableOverlayRenderer === void 0 ? void 0 :
+                    tableOverlayRenderer())),
             !!this.gridApi && !!this.gridApi && this.state.pageSize !== null &&
                 React.createElement(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 && React.createElement(ModalDialog, { mode: "OK_CANCEL", open: this.state.columnsConfigVisible, initialWidth: 700, initialHeight: this.state.columnTransferHeight, title: React.createElement("span", null,