@gooddata/sdk-ui-pivot 11.52.0-alpha.5 → 11.52.0-alpha.7

package/esm/CorePivotTable.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2007-2026 GoodData Corporation
-import { Component } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions, } from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
 import cx from "classnames";
 import { cloneDeep, isEqual } from "lodash-es";
-import { injectIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { invariant } from "ts-invariant";
 import { v4 as uuidv4 } from "uuid";
 import { IntlWrapper, newErrorMapping, } from "@gooddata/sdk-ui";
@@ -36,7 +36,38 @@ ModuleRegistry.registerModules([AllCommunityModule]);
 // Mark all grids as using legacy themes
 provideGlobalGridOptions({ theme: "legacy" });
 /**
- * This class implements pivot table using the community version of ag-grid.
+ * Applies the table default props. This is the functional component equivalent of the `defaultProps` static
+ * that this component used to have while it was implemented as a class component.
+ */
+function resolveDefaultProps(props) {
+    return {
+        ...props,
+        locale: props.locale ?? PIVOT_TABLE_DEFAULT_PROPS.locale,
+        drillableItems: props.drillableItems ?? PIVOT_TABLE_DEFAULT_PROPS.drillableItems,
+        afterRender: props.afterRender ?? PIVOT_TABLE_DEFAULT_PROPS.afterRender,
+        pushData: props.pushData ?? PIVOT_TABLE_DEFAULT_PROPS.pushData,
+        onExportReady: props.onExportReady ?? PIVOT_TABLE_DEFAULT_PROPS.onExportReady,
+        onLoadingChanged: props.onLoadingChanged ?? PIVOT_TABLE_DEFAULT_PROPS.onLoadingChanged,
+        onError: props.onError ?? PIVOT_TABLE_DEFAULT_PROPS.onError,
+        onDataView: props.onDataView ?? PIVOT_TABLE_DEFAULT_PROPS.onDataView,
+        onDrill: props.onDrill ?? PIVOT_TABLE_DEFAULT_PROPS.onDrill,
+        ErrorComponent: props.ErrorComponent ?? PIVOT_TABLE_DEFAULT_PROPS.ErrorComponent,
+        LoadingComponent: props.LoadingComponent ?? PIVOT_TABLE_DEFAULT_PROPS.LoadingComponent,
+        pageSize: props.pageSize ?? PIVOT_TABLE_DEFAULT_PROPS.pageSize,
+        config: props.config ?? PIVOT_TABLE_DEFAULT_PROPS.config,
+        onColumnResized: props.onColumnResized ?? PIVOT_TABLE_DEFAULT_PROPS.onColumnResized,
+    };
+}
+function stopEventWhenResizeHeader(e) {
+    // Do not propagate event when it originates from the table resizer.
+    // This means for example that we can resize columns without triggering drag in the application.
+    if (e.target?.className?.includes?.("ag-header-cell-resize")) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+/**
+ * This component implements pivot table using the community version of ag-grid.
  *
  * Bear in mind that this is not a typical, standard React component implementation; the main reason
  * behind that is that while ag-grid comes with a React component the ag-grid itself is not a React component
@@ -46,10 +77,14 @@ provideGlobalGridOptions({ theme: "legacy" });
  * Instead of looking at this implementation as a typical React component, look at it like a adapter between
  * React and ag-grid which is used to render data obtained using GD executions.
  *
- * The code in this class is built to reflect the adapter nature of the integration. The responsibility of this
+ * The code in this component is built to reflect the adapter nature of the integration. The responsibility of this
  * component is to correctly handle the component lifecycle and orchestrate integration of React and ag-grid, React
  * and GoodData, React and GoodData and ag-grid.
  *
+ * Note on the implementation: because the table is driven imperatively, all the non-react state lives in refs and
+ * all the functions that the table hands over to its sub-components are stable for the entire lifetime of the
+ * component; they read the current props, state and internal state through refs.
+ *
  * Lifecycle
  * ---------
  *
@@ -76,7 +111,7 @@ provideGlobalGridOptions({ theme: "legacy" });
  * prepared execution, add the extra settings and re-drive the execution. Once done, it will update the internal
  * state and ping ag-grid API to re-render the table.
  *
- * In case the client changes props (say modifying the prepared execution) the componentDidUpdate will determine
+ * In case the client changes props (say modifying the prepared execution) the update effect will determine
  * whether the full reinitialization is in order. If so the entire existing ag-grid and all our internal state
  * is thrown out and table is initialized from scratch.
  *
@@ -142,36 +177,19 @@ provideGlobalGridOptions({ theme: "legacy" });
  *
  * @internal
  */
-export class CorePivotTableAgImpl extends Component {
-    static defaultProps = PIVOT_TABLE_DEFAULT_PROPS;
-    errorMap;
-    containerRef;
-    pivotTableId;
-    internal;
-    boundAgGridCallbacks;
-    // Event handler instances
-    gridEventHandlers;
-    dataRenderHandlers;
-    scrollEventHandlers;
-    resizeEventHandlers;
-    sortingEventHandlers;
-    aggregationEventHandlers;
-    dataLoadingEventHandlers;
-    // Config accessor instance
-    configAccessors;
-    configDelegates;
-    // Sticky row manager instance
-    stickyRowManager;
-    // Height calculation manager instance
-    heightCalculationManager;
-    // Execution abort manager instance
-    executionAbortManager;
-    // Component update analyzer instance
-    componentUpdateAnalyzer;
-    constructor(props) {
-        super(props);
-        const { execution, config } = props;
-        this.state = {
+export function CorePivotTableAgImpl(props) {
+    const intl = useIntl();
+    const resolvedProps = { ...resolveDefaultProps(props), intl };
+    /*
+     * Vast majority of the code below runs outside of the React rendering (ag-grid callbacks, timeouts, promise
+     * continuations). Props and state are therefore mirrored into refs so that this code always sees the current
+     * values - exactly like `this.props` and `this.state` used to do.
+     */
+    const propsRef = useRef(resolvedProps);
+    propsRef.current = resolvedProps;
+    const [state, setStateInternal] = useState(() => {
+        const { execution, config } = resolvedProps;
+        return {
             readyToRender: false,
             columnTotals: cloneDeep(sanitizeDefTotals(execution.definition)),
             rowTotals: getTotalsForColumnsBucket(execution.definition),
@@ -180,18 +198,480 @@ export class CorePivotTableAgImpl extends Component {
             tempExecution: execution,
             isLoading: false,
         };
-        this.errorMap = newErrorMapping(props.intl);
-        this.internal = new InternalTableState();
-        this.boundAgGridCallbacks = this.createBoundAgGridCallbacks();
-        this.pivotTableId = uuidv4().replace(/-/g, "");
-        this.onLoadingChanged = this.onLoadingChanged.bind(this);
-        // Initialize execution abort manager
-        this.executionAbortManager = new ExecutionAbortManager({
-            enableExecutionCancelling: props.config?.enableExecutionCancelling,
+    });
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    /*
+     * Callbacks passed to the `setState(update, callback)` calls; they must run after the commit of the state
+     * update that registered them - the same way React does it for class components.
+     *
+     * Callbacks of the state updates that are already reflected in the state being rendered are moved to the
+     * 'committed' queue below, which is then drained by an effect after the commit.
+     */
+    const enqueuedStateUpdateCallbacks = useRef([]);
+    const committedStateUpdateCallbacks = useRef([]);
+    if (enqueuedStateUpdateCallbacks.current.length > 0) {
+        committedStateUpdateCallbacks.current.push(...enqueuedStateUpdateCallbacks.current);
+        enqueuedStateUpdateCallbacks.current = [];
+    }
+    /**
+     * Drop-in replacement of `React.Component.setState`: merges the partial state (or the result of the state
+     * updater function) into the current state and optionally calls a callback once the new state is committed.
+     */
+    const setState = useCallback((update, callback) => {
+        if (callback) {
+            enqueuedStateUpdateCallbacks.current.push(callback);
+        }
+        setStateInternal((prevState) => ({
+            ...prevState,
+            ...(typeof update === "function" ? update(prevState) : update),
+        }));
+    }, []);
+    const errorMap = useMemo(() => newErrorMapping(resolvedProps.intl), [resolvedProps.intl]);
+    const pivotTableId = useMemo(() => uuidv4().replace(/-/g, ""), []);
+    /*
+     * The internal table state is intentionally kept out of the React state; it is replaced whenever the table
+     * gets re-initialized. Always access it through the ref so that the current instance is used.
+     */
+    const internalRef = useRef(new InternalTableState());
+    const containerRef = useRef(undefined);
+    // Execution abort manager instance; created once for the whole lifetime of the component
+    const [executionAbortManager] = useState(() => new ExecutionAbortManager({
+        enableExecutionCancelling: resolvedProps.config?.enableExecutionCancelling,
+    }));
+    /*
+     * The imperative helpers below are created during the first render (this is what the constructor used to do)
+     * and are replaced whenever the table gets re-initialized.
+     */
+    const eventHandlersRef = useRef(null);
+    const configAccessorsRef = useRef(null);
+    const componentUpdateAnalyzerRef = useRef(null);
+    const boundAgGridCallbacksRef = useRef(null);
+    /*
+     * The table methods handed over to the sub-components need to be able to trigger the table
+     * re-initialization; the re-initialization in turn needs the table methods. This ref breaks that cycle.
+     */
+    const reinitializeRef = useRef(() => { });
+    /**
+     * Getter of the current internal table state. It is essential to always obtain the internal state through
+     * this getter because the internal state gets replaced on table re-initialization.
+     */
+    const getInternal = useCallback(() => internalRef.current, []);
+    const getContainerRef = useCallback(() => containerRef.current, []);
+    const getEventHandlers = useCallback(() => {
+        const eventHandlers = eventHandlersRef.current;
+        invariant(eventHandlers);
+        return eventHandlers;
+    }, []);
+    const getConfigAccessors = useCallback(() => {
+        const configAccessors = configAccessorsRef.current;
+        invariant(configAccessors);
+        return configAccessors;
+    }, []);
+    //
+    // Table configuration accessors
+    //
+    const getLastSortedColId = useCallback(() => internalRef.current.lastSortedColId, []);
+    const setLastSortedColId = useCallback((colId) => {
+        internalRef.current.lastSortedColId = colId;
+    }, []);
+    // Delegate to config accessors
+    const getColumnTotals = useCallback(() => getConfigAccessors().configDelegates.getColumnTotals(), [getConfigAccessors]);
+    const getRowTotals = useCallback(() => getConfigAccessors().configDelegates.getRowTotals(), [getConfigAccessors]);
+    const getExecutionDefinition = useCallback(() => getConfigAccessors().configDelegates.getExecutionDefinition(), [getConfigAccessors]);
+    const getGroupRows = useCallback(() => getConfigAccessors().configDelegates.getGroupRows(), [getConfigAccessors]);
+    const getMeasureGroupDimension = useCallback(() => getConfigAccessors().configDelegates.getMeasureGroupDimension(), [getConfigAccessors]);
+    const getColumnHeadersPosition = useCallback(() => getConfigAccessors().configDelegates.getColumnHeadersPosition(), [getConfigAccessors]);
+    const getMenuConfig = useCallback(() => getConfigAccessors().configDelegates.getMenuConfig(), [getConfigAccessors]);
+    const getDefaultWidth = useCallback(() => getConfigAccessors().configDelegates.getDefaultWidth(), [getConfigAccessors]);
+    const isColumnAutoresizeEnabled = useCallback(() => getConfigAccessors().configDelegates.isColumnAutoresizeEnabled(), [getConfigAccessors]);
+    const isGrowToFitEnabled = useCallback((props = propsRef.current) => getConfigAccessors().configDelegates.isGrowToFitEnabled(props), [getConfigAccessors]);
+    const getColumnWidths = useCallback((props) => getConfigAccessors().configDelegates.getColumnWidths(props), [getConfigAccessors]);
+    const hasColumnWidths = useCallback(() => getConfigAccessors().configDelegates.hasColumnWidths(), [getConfigAccessors]);
+    const getDefaultWidthFromProps = useCallback((props) => getConfigAccessors().configDelegates.getDefaultWidthFromProps(props), [getConfigAccessors]);
+    const shouldAutoResizeColumns = useCallback(() => getConfigAccessors().configDelegates.shouldAutoResizeColumns(), [getConfigAccessors]);
+    const getResizingConfig = useCallback(() => {
+        const currentProps = propsRef.current;
+        const internal = internalRef.current;
+        return {
+            defaultWidth: getDefaultWidth(),
+            growToFit: isGrowToFitEnabled(),
+            columnAutoresizeOption: getDefaultWidthFromProps(currentProps),
+            widths: getColumnWidths(currentProps),
+            isAltKeyPressed: internal.isAltKeyPressed,
+            isMetaOrCtrlKeyPressed: internal.isMetaOrCtrlKeyPressed,
+            // use clientWidth of the viewport container to accommodate for vertical scrollbars if needed
+            clientWidth: containerRef.current?.getElementsByClassName("ag-body-viewport")[0]?.clientWidth ?? 0,
+            containerRef: containerRef.current,
+            separators: currentProps?.config?.separators,
+            onColumnResized: currentProps.onColumnResized,
+        };
+    }, [getColumnWidths, getDefaultWidth, getDefaultWidthFromProps, isGrowToFitEnabled]);
+    /**
+     * All pushData calls done by the table must go through this guard.
+     *
+     * TODO: The guard should ensure a 'disconnect' between push data handling and the calling function processing.
+     *  When the pushData is handled by the application, it MAY (and in our case it DOES) trigger processing that
+     *  lands back in the table. This opens additional set of invariants to check / be prepared for in order to
+     *  optimize the renders and re-renders.
+     */
+    const pushDataGuard = useCallback((data) => {
+        propsRef.current.pushData?.(data);
+        /*
+         * TODO: Switch to this on in FET-715.
+        setTimeout(() => {
+            propsRef.current.pushData?.(data);
+        }, 0);
+         */
+    }, []);
+    //
+    // Sticky row handling - delegated to StickyRowManager
+    //
+    const updateStickyRow = useCallback(() => {
+        getConfigAccessors().stickyRowManager.updateStickyRow();
+    }, [getConfigAccessors]);
+    const updateStickyRowContent = useCallback((scrollPosition) => {
+        getConfigAccessors().stickyRowManager.updateStickyRowContent(scrollPosition);
+    }, [getConfigAccessors]);
+    //
+    // Desired height updating - delegated to HeightCalculationManager
+    //
+    const updateDesiredHeight = useCallback(() => {
+        getConfigAccessors().heightCalculationManager.updateDesiredHeight();
+    }, [getConfigAccessors]);
+    //
+    // Table resizing
+    //
+    const growToFit = useCallback(() => {
+        const internal = internalRef.current;
+        invariant(internal.table);
+        if (!isGrowToFitEnabled()) {
+            return;
+        }
+        internal.table.growToFit(getResizingConfig());
+        if (!stateRef.current.resized && !internal.table.isResizing()) {
+            setState({
+                resized: true,
+            });
+        }
+    }, [getResizingConfig, isGrowToFitEnabled, setState]);
+    const autoresizeColumns = useCallback(async (force = false) => {
+        if (stateRef.current.resized && !force) {
+            return;
+        }
+        const didResize = await internalRef.current.table?.autoresizeColumns(getResizingConfig(), force);
+        if (didResize) {
+            // after column resizing, horizontal scroolbar may change and table height may need resizing
+            updateDesiredHeight();
+        }
+        if (didResize && !stateRef.current.resized) {
+            setState({
+                resized: true,
+            });
+        }
+    }, [getResizingConfig, setState, updateDesiredHeight]);
+    const stopWatchingTableRendered = useCallback(() => {
+        internalRef.current.stopWatching();
+        propsRef.current.afterRender();
+    }, []);
+    const startWatchingTableRendered = useCallback(() => {
+        const internal = internalRef.current;
+        if (!internal.table) {
+            return;
+        }
+        const missingContainerRef = !containerRef.current; // table having no data will be unmounted, it causes ref null
+        const isTableRendered = shouldAutoResizeColumns()
+            ? stateRef.current.resized
+            : internal.table.isPivotTableReady();
+        const shouldCallAutoresizeColumns = internal.table.isPivotTableReady() && !stateRef.current.resized && !internal.table.isResizing();
+        if (shouldAutoResizeColumns() && shouldCallAutoresizeColumns) {
+            void autoresizeColumns();
+        }
+        if (missingContainerRef || isTableRendered) {
+            stopWatchingTableRendered();
+        }
+    }, [autoresizeColumns, shouldAutoResizeColumns, stopWatchingTableRendered]);
+    //
+    // event handlers
+    //
+    const onGridReady = useCallback((event) => {
+        getEventHandlers().gridEventHandlers.onGridReady(event);
+    }, [getEventHandlers]);
+    const onFirstDataRendered = useCallback(async (_event) => {
+        await getEventHandlers().dataRenderHandlers.onFirstDataRendered(_event);
+    }, [getEventHandlers]);
+    const onModelUpdated = useCallback((event) => {
+        getEventHandlers().gridEventHandlers.onModelUpdated(event);
+    }, [getEventHandlers]);
+    const onGridColumnsChanged = useCallback(() => {
+        getEventHandlers().gridEventHandlers.onGridColumnsChanged();
+    }, [getEventHandlers]);
+    const onGridSizeChanged = useCallback((gridSizeChangedEvent) => {
+        getEventHandlers().resizeEventHandlers.onGridSizeChanged(gridSizeChangedEvent);
+    }, [getEventHandlers]);
+    const onGridColumnResized = useCallback((columnEvent) => {
+        getEventHandlers().resizeEventHandlers.onGridColumnResized(columnEvent);
+    }, [getEventHandlers]);
+    const onSortChanged = useCallback((event) => {
+        getEventHandlers().sortingEventHandlers.onSortChanged(event);
+    }, [getEventHandlers]);
+    const onPinnedRowDataChanged = useCallback(async (event) => {
+        await getEventHandlers().resizeEventHandlers.onPinnedRowDataChanged(event);
+    }, [getEventHandlers]);
+    const onBodyScroll = useCallback((event) => {
+        getEventHandlers().scrollEventHandlers.onBodyScroll(event);
+    }, [getEventHandlers]);
+    const onContainerMouseDown = useCallback((event) => {
+        getEventHandlers().scrollEventHandlers.onContainerMouseDown(event);
+    }, [getEventHandlers]);
+    const onPageLoaded = useCallback((dv, newResult) => {
+        getEventHandlers().dataLoadingEventHandlers.onPageLoaded(dv, newResult);
+    }, [getEventHandlers]);
+    const onMenuAggregationClick = useCallback((menuAggregationClickConfig) => {
+        getEventHandlers().aggregationEventHandlers.onMenuAggregationClick(menuAggregationClickConfig);
+    }, [getEventHandlers]);
+    const onLoadingChanged = useCallback((loadingState) => {
+        getEventHandlers().dataLoadingEventHandlers.onLoadingChanged(loadingState);
+    }, [getEventHandlers]);
+    const onError = useCallback((error, execution = propsRef.current.execution) => {
+        getEventHandlers().dataLoadingEventHandlers.onError(error, execution);
+    }, [getEventHandlers]);
+    /**
+     * This will be called when user changes sorts or adds totals. This means complete re-execution with
+     * new sorts or totals. Loading indicators will be shown instead of all rendered rows thanks to the
+     * LoadingRenderer used in all cells of the left-most column.
+     *
+     * The table must take care to remove the sticky (top-pinned) row - it is treated differently by
+     * ag-grid and will be literally sticking there on its own with the loading indicators.
+     *
+     * Once transformation finishes - indicated by call to onPageLoaded, table can re-instance the sticky row.
+     *
+     * @param newExecution - the new execution which is being run and will be used to populate the table
+     */
+    const onExecutionTransformed = useCallback((newExecution) => {
+        // Handle the reinitialize call directly here since we can't pass it to the handler
+        const internal = internalRef.current;
+        if (!internal.table) {
+            return;
+        }
+        internal.table.clearStickyRow();
+        // Force double execution only when totals/subtotals for columns change, so table is render properly.
+        if (!isEqual(stateRef.current.tempExecution.definition.buckets[2], newExecution.definition.buckets[2])) {
+            setState({
+                tempExecution: newExecution,
+            });
+            reinitializeRef.current(newExecution);
+        }
+    }, [setState]);
+    /**
+     * All callback functions that the table passes to ag-grid must be bound to the current internal state of the table. The
+     * callback functions MUST be noop if the internal state at the time of call is different from the internal state
+     * at the time of creation.
+     *
+     * This is essential to prevent errors stemming for racy behavior triggered by ag-grid. ag-grid often triggers
+     * event callbacks using setTimeout(). It can happen, that once the event is actually processed the ag-grid table
+     * which caused it is unmounted. Doing anything with the unmounted table's gridApi leads to errors.
+     *
+     * Without this, table may trigger ag-grid errors such as this:
+     *
+     * https://github.com/ag-grid/ag-grid/issues/3457
+     *
+     * or this:
+     *
+     * https://github.com/ag-grid/ag-grid/issues/3334
+     */
+    const createBoundAgGridCallbacks = useCallback(() => {
+        const internal = internalRef.current;
+        const debouncedGridSizeChanged = createDebouncedCallback(createStateBoundCallback(onGridSizeChanged, internal, getInternal), AGGRID_ON_RESIZE_TIMEOUT);
+        return {
+            onGridReady: createStateBoundCallback(onGridReady, internal, getInternal),
+            onFirstDataRendered: createStateBoundCallback(onFirstDataRendered, internal, getInternal),
+            onBodyScroll: createStateBoundCallback(onBodyScroll, internal, getInternal),
+            onModelUpdated: createStateBoundCallback(onModelUpdated, internal, getInternal),
+            onGridColumnsChanged: createStateBoundCallback(onGridColumnsChanged, internal, getInternal),
+            onGridColumnResized: createStateBoundCallback(onGridColumnResized, internal, getInternal),
+            onSortChanged: createStateBoundCallback(onSortChanged, internal, getInternal),
+            onGridSizeChanged: debouncedGridSizeChanged,
+            onPinnedRowDataChanged: createStateBoundCallback(onPinnedRowDataChanged, internal, getInternal),
+        };
+    }, [
+        getInternal,
+        onBodyScroll,
+        onFirstDataRendered,
+        onGridColumnResized,
+        onGridColumnsChanged,
+        onGridReady,
+        onGridSizeChanged,
+        onModelUpdated,
+        onPinnedRowDataChanged,
+        onSortChanged,
+    ]);
+    const getTableMethods = useCallback(() => {
+        const boundAgGridCallbacks = boundAgGridCallbacksRef.current;
+        invariant(boundAgGridCallbacks);
+        return {
+            hasColumnWidths: hasColumnWidths(),
+            getExecutionDefinition,
+            getMenuConfig,
+            getGroupRows,
+            getColumnTotals,
+            getRowTotals,
+            getColumnHeadersPosition,
+            getMeasureGroupDimension,
+            getResizingConfig,
+            onLoadingChanged,
+            onError,
+            onExportReady: propsRef.current.onExportReady ?? (() => { }),
+            pushData: pushDataGuard,
+            onPageLoaded,
+            onExecutionTransformed,
+            onMenuAggregationClick,
+            setLastSortedColId,
+            ...boundAgGridCallbacks,
+        };
+    }, [
+        getColumnHeadersPosition,
+        getColumnTotals,
+        getExecutionDefinition,
+        getGroupRows,
+        getMeasureGroupDimension,
+        getMenuConfig,
+        getResizingConfig,
+        getRowTotals,
+        hasColumnWidths,
+        onError,
+        onExecutionTransformed,
+        onLoadingChanged,
+        onMenuAggregationClick,
+        onPageLoaded,
+        pushDataGuard,
+        setLastSortedColId,
+    ]);
+    //
+    // Initialization of the imperative parts of the table
+    //
+    const initializeEventHandlers = useCallback(() => {
+        const internal = internalRef.current;
+        const currentProps = propsRef.current;
+        // Create event handler instances with proper context
+        eventHandlersRef.current = {
+            gridEventHandlers: new GridEventHandlers({
+                internal,
+                props: currentProps,
+                updateDesiredHeight,
+                onFirstDataRendered,
+                updateStickyRow,
+                getGroupRows,
+                getLastSortedColId,
+                setLastSortedColId,
+            }),
+            dataRenderHandlers: new DataRenderHandlers({
+                internal,
+                isColumnAutoresizeEnabled,
+                isGrowToFitEnabled,
+                autoresizeColumns,
+                growToFit,
+                updateStickyRow,
+                startWatchingTableRendered,
+            }),
+            scrollEventHandlers: new ScrollEventHandlers({
+                internal,
+                updateStickyRowContent,
+            }),
+            resizeEventHandlers: new ResizeEventHandlers({
+                internal,
+                updateDesiredHeight,
+                autoresizeColumns,
+                getResizingConfig,
+            }),
+            sortingEventHandlers: new SortingEventHandlers({
+                internal,
+                getExecutionDefinition,
+                pushDataGuard,
+                setState,
+            }),
+            aggregationEventHandlers: new AggregationEventHandlers({
+                internal,
+                getExecutionDefinition,
+                getColumnTotals,
+                getRowTotals,
+                pushDataGuard,
+                setState,
+            }),
+            dataLoadingEventHandlers: new DataLoadingEventHandlers({
+                internal,
+                props: currentProps,
+                updateStickyRow,
+                updateDesiredHeight,
+                setState,
+            }),
+        };
+    }, [
+        autoresizeColumns,
+        getColumnTotals,
+        getExecutionDefinition,
+        getGroupRows,
+        getLastSortedColId,
+        getResizingConfig,
+        getRowTotals,
+        growToFit,
+        isColumnAutoresizeEnabled,
+        isGrowToFitEnabled,
+        onFirstDataRendered,
+        pushDataGuard,
+        setLastSortedColId,
+        setState,
+        startWatchingTableRendered,
+        updateDesiredHeight,
+        updateStickyRow,
+        updateStickyRowContent,
+    ]);
+    const createComponentUpdateAnalyzer = useCallback(() => new ComponentUpdateAnalyzer({
+        props: propsRef.current,
+        state: stateRef.current,
+        internal: internalRef.current,
+        executionAbortManager,
+    }), [executionAbortManager]);
+    const initializeConfigAccessors = useCallback(() => {
+        const internal = internalRef.current;
+        const currentProps = propsRef.current;
+        const currentState = stateRef.current;
+        const configAccessors = new TableConfigAccessors({
+            props: currentProps,
+            state: currentState,
         });
-        // Initialize event handlers and config accessors
-        this.initializeEventHandlers();
-        this.initializeConfigAccessors();
+        configAccessorsRef.current = {
+            configAccessors,
+            configDelegates: createConfigDelegates(configAccessors),
+            // Initialize sticky row manager
+            stickyRowManager: new StickyRowManager({
+                internal,
+                props: currentProps,
+                state: currentState,
+                getGroupRows,
+            }),
+            // Initialize height calculation manager
+            heightCalculationManager: new HeightCalculationManager({
+                internal,
+                props: currentProps,
+                state: currentState,
+                setState,
+                getContainerRef,
+            }),
+        };
+        // Initialize component update analyzer
+        componentUpdateAnalyzerRef.current = createComponentUpdateAnalyzer();
+    }, [createComponentUpdateAnalyzer, getContainerRef, getGroupRows, setState]);
+    /*
+     * Mirrors what the class constructor used to do: create the event handlers, config accessors and the
+     * ag-grid callbacks before anything gets rendered.
+     */
+    const isInitializedRef = useRef(false);
+    if (!isInitializedRef.current) {
+        isInitializedRef.current = true;
+        initializeEventHandlers();
+        initializeConfigAccessors();
+        boundAgGridCallbacksRef.current = createBoundAgGridCallbacks();
     }
     //
     // Lifecycle
@@ -210,26 +690,26 @@ export class CorePivotTableAgImpl extends Component {
      *
      * @param execution - prepared execution to drive
      */
-    initialize = (execution) => {
-        this.internal.abandonInitialization();
-        this.executionAbortManager.refresh({
-            isLoading: this.state.isLoading,
-            readyToRender: this.state.readyToRender,
+    const initialize = useCallback((execution) => {
+        internalRef.current.abandonInitialization();
+        executionAbortManager.refresh({
+            isLoading: stateRef.current.isLoading,
+            readyToRender: stateRef.current.readyToRender,
         });
-        const initializer = new TableFacadeInitializer(execution, this.getTableMethods(), this.props, () => this.executionAbortManager.getCurrentController());
+        const initializer = new TableFacadeInitializer(execution, getTableMethods(), propsRef.current, () => executionAbortManager.getCurrentController());
         void initializer.initialize().then((result) => {
-            if (!result || this.internal.initializer !== result.initializer) {
+            if (!result || internalRef.current.initializer !== result.initializer) {
                 /*
                  * This particular initialization was abandoned.
                  */
                 return;
             }
-            this.internal.initializer = undefined;
-            this.internal.table = result.table;
-            this.setState({ readyToRender: true });
+            internalRef.current.initializer = undefined;
+            internalRef.current.table = result.table;
+            setState({ readyToRender: true });
         });
         return initializer;
-    };
+    }, [executionAbortManager, getTableMethods, setState]);
     /**
      * Completely re-initializes the table in order to show data for the provided prepared execution. At this point
      * code has determined that the table layout for the other prepared execution differs from what is currently
@@ -237,53 +717,52 @@ export class CorePivotTableAgImpl extends Component {
      *
      * This will reset all React state and non-react state and start table initialization process.
      */
-    reinitialize = (execution) => {
-        this.setState({
+    const reinitialize = useCallback((execution) => {
+        setState({
             readyToRender: false,
             columnTotals: cloneDeep(sanitizeDefTotals(execution.definition)),
             rowTotals: getTotalsForColumnsBucket(execution.definition),
             error: undefined,
-            desiredHeight: this.props.config.maxHeight,
+            desiredHeight: propsRef.current.config.maxHeight,
             resized: false,
         }, () => {
-            this.internal.destroy();
-            this.internal = new InternalTableState();
-            this.initializeEventHandlers();
-            this.initializeConfigAccessors();
-            this.boundAgGridCallbacks = this.createBoundAgGridCallbacks();
-            this.internal.initializer = this.initialize(execution);
+            internalRef.current.destroy();
+            internalRef.current = new InternalTableState();
+            initializeEventHandlers();
+            initializeConfigAccessors();
+            boundAgGridCallbacksRef.current = createBoundAgGridCallbacks();
+            internalRef.current.initializer = initialize(execution);
         });
-    };
-    componentDidMount() {
-        this.internal.initializer = this.initialize(this.props.execution);
-    }
-    componentWillUnmount() {
-        this.executionAbortManager.destroy();
-        if (this.containerRef) {
-            this.containerRef.removeEventListener("mousedown", this.onContainerMouseDown);
-        }
-        // this ensures any events emitted during the async initialization will be sunk. they are no longer needed.
-        this.internal.destroy();
-    }
-    componentDidUpdate(prevProps) {
+    }, [
+        createBoundAgGridCallbacks,
+        initialize,
+        initializeConfigAccessors,
+        initializeEventHandlers,
+        setState,
+    ]);
+    reinitializeRef.current = reinitialize;
+    /**
+     * Handles the component update; this is the functional equivalent of what used to live in
+     * `componentDidUpdate`.
+     */
+    const handleUpdate = useCallback((prevProps) => {
+        const currentProps = propsRef.current;
+        const previousAnalyzer = componentUpdateAnalyzerRef.current;
+        invariant(previousAnalyzer);
         // Update execution abort manager config if it changed
-        if (this.componentUpdateAnalyzer.hasExecutionCancellingChanged(prevProps)) {
-            this.executionAbortManager.updateConfig({
-                enableExecutionCancelling: this.props.config?.enableExecutionCancelling,
+        if (previousAnalyzer.hasExecutionCancellingChanged(prevProps)) {
+            executionAbortManager.updateConfig({
+                enableExecutionCancelling: currentProps.config?.enableExecutionCancelling,
             });
         }
         // Update component update analyzer context
-        this.componentUpdateAnalyzer = new ComponentUpdateAnalyzer({
-            props: this.props,
-            state: this.state,
-            internal: this.internal,
-            executionAbortManager: this.executionAbortManager,
-        });
+        const componentUpdateAnalyzer = createComponentUpdateAnalyzer();
+        componentUpdateAnalyzerRef.current = componentUpdateAnalyzer;
         // reinit in progress
-        if (this.componentUpdateAnalyzer.shouldSkipUpdate()) {
+        if (componentUpdateAnalyzer.shouldSkipUpdate()) {
             return;
         }
-        if (this.componentUpdateAnalyzer.isReinitNeeded(prevProps)) {
+        if (componentUpdateAnalyzer.isReinitNeeded(prevProps)) {
             /*
              * This triggers when execution changes (new measures / attributes). In that case,
              * a complete re-init of the table is in order.
@@ -294,8 +773,8 @@ export class CorePivotTableAgImpl extends Component {
              * Note: compared to v7 version of the table, this only happens if someone actually changes the
              * execution-related props of the table. This branch will not hit any other time.
              */
-            this.componentUpdateAnalyzer.logReinitDebug(prevProps.execution);
-            this.reinitialize(this.props.execution);
+            componentUpdateAnalyzer.logReinitDebug(prevProps.execution);
+            reinitialize(currentProps.execution);
         }
         else {
             /*
@@ -305,426 +784,112 @@ export class CorePivotTableAgImpl extends Component {
              * The currentResult and visibleData _will_ be available at this point because the component is definitely
              * after a successful execution and initialization.
              */
-            if (this.componentUpdateAnalyzer.shouldRefreshHeader(prevProps)) {
-                this.internal.table?.refreshHeader();
+            if (componentUpdateAnalyzer.shouldRefreshHeader(prevProps)) {
+                internalRef.current.table?.refreshHeader();
             }
-            if (this.componentUpdateAnalyzer.hasGrowToFitEnabledChanged(prevProps, this.isGrowToFitEnabled)) {
-                this.growToFit();
+            if (componentUpdateAnalyzer.hasGrowToFitEnabledChanged(prevProps, isGrowToFitEnabled)) {
+                growToFit();
             }
-            if (this.componentUpdateAnalyzer.hasColumnWidthsChanged(prevProps, this.getColumnWidths)) {
-                this.internal.table?.applyColumnSizes(this.getResizingConfig());
+            if (componentUpdateAnalyzer.hasColumnWidthsChanged(prevProps, getColumnWidths)) {
+                internalRef.current.table?.applyColumnSizes(getResizingConfig());
             }
-            if (this.componentUpdateAnalyzer.hasMaxHeightChanged(prevProps)) {
-                this.updateDesiredHeight();
+            if (componentUpdateAnalyzer.hasMaxHeightChanged(prevProps)) {
+                updateDesiredHeight();
             }
         }
-    }
-    stopEventWhenResizeHeader(e) {
-        // Do not propagate event when it originates from the table resizer.
-        // This means for example that we can resize columns without triggering drag in the application.
-        if (e.target?.className?.includes?.("ag-header-cell-resize")) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    //
-    // Render
-    //
-    setContainerRef = (container) => {
-        this.containerRef = container;
-        if (this.containerRef) {
-            this.containerRef.addEventListener("mousedown", this.onContainerMouseDown);
-        }
-    };
-    renderLoading() {
-        const { LoadingComponent, theme } = this.props;
-        return _jsx(PivotTableLoading, { LoadingComponent: LoadingComponent, theme: theme });
-    }
-    render() {
-        const { ErrorComponent } = this.props;
-        const { desiredHeight, error } = this.state;
-        if (error) {
-            return _jsx(PivotTableError, { error: error, errorMap: this.errorMap, ErrorComponent: ErrorComponent });
-        }
-        const style = {
-            height: desiredHeight || "100%",
-            position: "relative",
-            overflow: "hidden",
+    }, [
+        createComponentUpdateAnalyzer,
+        executionAbortManager,
+        getColumnWidths,
+        getResizingConfig,
+        growToFit,
+        isGrowToFitEnabled,
+        reinitialize,
+        updateDesiredHeight,
+    ]);
+    // componentDidMount & componentWillUnmount
+    useLayoutEffect(() => {
+        internalRef.current.initializer = initialize(propsRef.current.execution);
+        return () => {
+            executionAbortManager.destroy();
+            if (containerRef.current) {
+                containerRef.current.removeEventListener("mousedown", onContainerMouseDown);
+            }
+            // this ensures any events emitted during the async initialization will be sunk. they are no longer needed.
+            internalRef.current.destroy();
         };
-        if (!this.state.readyToRender) {
-            return (_jsx("div", { className: "gd-table-component", style: style, id: this.pivotTableId, children: this.renderLoading() }));
-        }
-        // when table is ready, then the table facade must be set. if this bombs then there is a bug
-        // in the initialization logic
-        invariant(this.internal.table);
-        if (!this.internal.gridOptions) {
-            this.internal.gridOptions = createGridOptions(this.internal.table, this.getTableMethods(), this.props);
-        }
-        /*
-         * Show loading overlay until all the resizing is done. This is because the various resizing operations
-         * have to happen asynchronously - they must wait until ag-grid fires onFirstDataRendered, before our code
-         * can start reliably interfacing with the autosizing features.
-         */
-        const shouldRenderLoadingOverlay = (this.isColumnAutoresizeEnabled() || this.isGrowToFitEnabled()) && !this.state.resized;
-        const classNames = cx("gd-table-component", {
-            "gd-table-header-hide": this.props.config?.columnHeadersPosition === "left" &&
-                this.internal.table.tableDescriptor.isTransposed(),
-        });
-        return (_jsx("div", { className: classNames, style: style, id: this.pivotTableId, onMouseDown: this.stopEventWhenResizeHeader, onDragStart: this.stopEventWhenResizeHeader, children: _jsxs("div", { className: "gd-table ag-theme-balham s-pivot-table", style: style, ref: this.setContainerRef, children: [
-                    _jsx(AgGridReact, { ...this.internal.gridOptions, modules: [AllCommunityModule] }), shouldRenderLoadingOverlay ? this.renderLoading() : null] }) }));
-    }
-    //
-    // Initialize event handlers
-    //
-    initializeEventHandlers = () => {
-        // Create event handler instances with proper context
-        this.gridEventHandlers = new GridEventHandlers({
-            internal: this.internal,
-            props: this.props,
-            updateDesiredHeight: this.updateDesiredHeight,
-            onFirstDataRendered: this.onFirstDataRendered,
-            updateStickyRow: this.updateStickyRow,
-            getGroupRows: this.getGroupRows,
-            getLastSortedColId: this.getLastSortedColId,
-            setLastSortedColId: this.setLastSortedColId,
-        });
-        this.dataRenderHandlers = new DataRenderHandlers({
-            internal: this.internal,
-            isColumnAutoresizeEnabled: this.isColumnAutoresizeEnabled,
-            isGrowToFitEnabled: this.isGrowToFitEnabled,
-            autoresizeColumns: this.autoresizeColumns,
-            growToFit: this.growToFit,
-            updateStickyRow: this.updateStickyRow,
-            startWatchingTableRendered: this.startWatchingTableRendered,
-        });
-        this.scrollEventHandlers = new ScrollEventHandlers({
-            internal: this.internal,
-            updateStickyRowContent: this.updateStickyRowContent,
-        });
-        this.resizeEventHandlers = new ResizeEventHandlers({
-            internal: this.internal,
-            updateDesiredHeight: this.updateDesiredHeight,
-            autoresizeColumns: this.autoresizeColumns,
-            getResizingConfig: this.getResizingConfig,
-        });
-        this.sortingEventHandlers = new SortingEventHandlers({
-            internal: this.internal,
-            getExecutionDefinition: this.getExecutionDefinition,
-            pushDataGuard: this.pushDataGuard,
-            setState: this.setState.bind(this),
-        });
-        this.aggregationEventHandlers = new AggregationEventHandlers({
-            internal: this.internal,
-            getExecutionDefinition: this.getExecutionDefinition,
-            getColumnTotals: this.getColumnTotals,
-            getRowTotals: this.getRowTotals,
-            pushDataGuard: this.pushDataGuard,
-            setState: this.setState.bind(this),
-        });
-        this.dataLoadingEventHandlers = new DataLoadingEventHandlers({
-            internal: this.internal,
-            props: this.props,
-            updateStickyRow: this.updateStickyRow,
-            updateDesiredHeight: this.updateDesiredHeight,
-            setState: this.setState.bind(this),
-        });
-    };
-    //
-    // event handlers
-    //
-    onGridReady = (event) => {
-        this.gridEventHandlers.onGridReady(event);
-    };
-    onFirstDataRendered = async (_event) => {
-        await this.dataRenderHandlers.onFirstDataRendered(_event);
-    };
-    onModelUpdated = (event) => {
-        this.gridEventHandlers.onModelUpdated(event);
-    };
-    onGridColumnsChanged = () => {
-        this.gridEventHandlers.onGridColumnsChanged();
-    };
-    onGridSizeChanged = (gridSizeChangedEvent) => {
-        this.resizeEventHandlers.onGridSizeChanged(gridSizeChangedEvent);
-    };
-    onGridColumnResized = (columnEvent) => {
-        this.resizeEventHandlers.onGridColumnResized(columnEvent);
-    };
-    onSortChanged = (event) => {
-        this.sortingEventHandlers.onSortChanged(event);
-    };
-    onPinnedRowDataChanged = async (event) => {
-        await this.resizeEventHandlers.onPinnedRowDataChanged(event);
-    };
-    onBodyScroll = (event) => {
-        this.scrollEventHandlers.onBodyScroll(event);
-    };
-    onContainerMouseDown = (event) => {
-        this.scrollEventHandlers.onContainerMouseDown(event);
-    };
-    onPageLoaded = (dv, newResult) => {
-        this.dataLoadingEventHandlers.onPageLoaded(dv, newResult);
-    };
-    /**
-     * This will be called when user changes sorts or adds totals. This means complete re-execution with
-     * new sorts or totals. Loading indicators will be shown instead of all rendered rows thanks to the
-     * LoadingRenderer used in all cells of the left-most column.
-     *
-     * The table must take care to remove the sticky (top-pinned) row - it is treated differently by
-     * ag-grid and will be literally sticking there on its own with the loading indicators.
-     *
-     * Once transformation finishes - indicated by call to onPageLoaded, table can re-instance the sticky row.
-     *
-     * @param newExecution - the new execution which is being run and will be used to populate the table
-     */
-    onExecutionTransformed = (newExecution) => {
-        // Handle the reinitialize call directly here since we can't pass it to the handler
-        if (!this.internal.table) {
+        // the table must be initialized on mount only; all the functions used here are stable
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // componentDidUpdate
+    const prevPropsRef = useRef(resolvedProps);
+    const isMountedRef = useRef(false);
+    useLayoutEffect(() => {
+        const prevProps = prevPropsRef.current;
+        prevPropsRef.current = resolvedProps;
+        if (!isMountedRef.current) {
+            // the update handling must not run for the initial render
+            isMountedRef.current = true;
             return;
         }
-        this.internal.table.clearStickyRow();
-        // Force double execution only when totals/subtotals for columns change, so table is render properly.
-        if (!isEqual(this.state.tempExecution.definition.buckets[2], newExecution.definition.buckets[2])) {
-            this.setState({
-                tempExecution: newExecution,
-            });
-            this.reinitialize(newExecution);
-        }
-    };
-    onMenuAggregationClick = (menuAggregationClickConfig) => {
-        this.aggregationEventHandlers.onMenuAggregationClick(menuAggregationClickConfig);
-    };
-    onLoadingChanged = (loadingState) => {
-        this.dataLoadingEventHandlers.onLoadingChanged(loadingState);
-    };
-    onError = (error, execution = this.props.execution) => {
-        this.dataLoadingEventHandlers.onError(error, execution);
-    };
-    //
-    // Table resizing
-    //
-    growToFit = () => {
-        invariant(this.internal.table);
-        if (!this.isGrowToFitEnabled()) {
+        handleUpdate(prevProps);
+    });
+    // drain the setState callbacks; they run right after the commit of the state update that registered them
+    useLayoutEffect(() => {
+        if (committedStateUpdateCallbacks.current.length === 0) {
             return;
         }
-        this.internal.table.growToFit(this.getResizingConfig());
-        if (!this.state.resized && !this.internal.table.isResizing()) {
-            this.setState({
-                resized: true,
-            });
-        }
-    };
-    autoresizeColumns = async (force = false) => {
-        if (this.state.resized && !force) {
-            return;
-        }
-        const didResize = await this.internal.table?.autoresizeColumns(this.getResizingConfig(), force);
-        if (didResize) {
-            // after column resizing, horizontal scroolbar may change and table height may need resizing
-            this.updateDesiredHeight();
-        }
-        if (didResize && !this.state.resized) {
-            this.setState({
-                resized: true,
-            });
-        }
-    };
-    shouldAutoResizeColumns = () => {
-        return this.configDelegates.shouldAutoResizeColumns();
-    };
-    startWatchingTableRendered = () => {
-        if (!this.internal.table) {
-            return;
-        }
-        const missingContainerRef = !this.containerRef; // table having no data will be unmounted, it causes ref null
-        const isTableRendered = this.shouldAutoResizeColumns()
-            ? this.state.resized
-            : this.internal.table.isPivotTableReady();
-        const shouldCallAutoresizeColumns = this.internal.table.isPivotTableReady() &&
-            !this.state.resized &&
-            !this.internal.table.isResizing();
-        if (this.shouldAutoResizeColumns() && shouldCallAutoresizeColumns) {
-            void this.autoresizeColumns();
-        }
-        if (missingContainerRef || isTableRendered) {
-            this.stopWatchingTableRendered();
-        }
-    };
-    stopWatchingTableRendered = () => {
-        this.internal.stopWatching();
-        this.props.afterRender();
-    };
-    //
-    // Sticky row handling - delegated to StickyRowManager
-    //
-    updateStickyRow = () => {
-        this.stickyRowManager.updateStickyRow();
-    };
-    updateStickyRowContent = (scrollPosition) => {
-        this.stickyRowManager.updateStickyRowContent(scrollPosition);
-    };
-    //
-    // Desired height updating - delegated to HeightCalculationManager
-    //
-    updateDesiredHeight = () => {
-        this.heightCalculationManager.updateDesiredHeight();
-    };
-    //
-    // Initialize config accessors
-    //
-    initializeConfigAccessors = () => {
-        this.configAccessors = new TableConfigAccessors({
-            props: this.props,
-            state: this.state,
-        });
-        this.configDelegates = createConfigDelegates(this.configAccessors);
-        // Initialize sticky row manager
-        this.stickyRowManager = new StickyRowManager({
-            internal: this.internal,
-            props: this.props,
-            state: this.state,
-            getGroupRows: this.getGroupRows,
-        });
-        // Initialize height calculation manager
-        this.heightCalculationManager = new HeightCalculationManager({
-            internal: this.internal,
-            props: this.props,
-            state: this.state,
-            setState: (state, callback) => {
-                this.setState(state, callback);
-            },
-            getContainerRef: () => this.containerRef,
-        });
-        // Initialize component update analyzer
-        this.componentUpdateAnalyzer = new ComponentUpdateAnalyzer({
-            props: this.props,
-            state: this.state,
-            internal: this.internal,
-            executionAbortManager: this.executionAbortManager,
-        });
-    };
+        const callbacks = committedStateUpdateCallbacks.current;
+        committedStateUpdateCallbacks.current = [];
+        callbacks.forEach((callback) => callback());
+    });
     //
-    // Table configuration accessors
+    // Render
     //
-    getLastSortedColId = () => {
-        return this.internal.lastSortedColId;
-    };
-    setLastSortedColId = (colId) => {
-        this.internal.lastSortedColId = colId;
-    };
-    // Delegate to config accessors
-    getColumnTotals = () => this.configDelegates.getColumnTotals();
-    getRowTotals = () => this.configDelegates.getRowTotals();
-    getExecutionDefinition = () => this.configDelegates.getExecutionDefinition();
-    getGroupRows = () => this.configDelegates.getGroupRows();
-    getMeasureGroupDimension = () => this.configDelegates.getMeasureGroupDimension();
-    getColumnHeadersPosition = () => this.configDelegates.getColumnHeadersPosition();
-    getMenuConfig = () => this.configDelegates.getMenuConfig();
-    getDefaultWidth = () => this.configDelegates.getDefaultWidth();
-    isColumnAutoresizeEnabled = () => this.configDelegates.isColumnAutoresizeEnabled();
-    isGrowToFitEnabled = (props = this.props) => this.configDelegates.isGrowToFitEnabled(props);
-    getColumnWidths = (props) => this.configDelegates.getColumnWidths(props);
-    hasColumnWidths = () => this.configDelegates.hasColumnWidths();
-    getDefaultWidthFromProps = (props) => this.configDelegates.getDefaultWidthFromProps(props);
-    /**
-     * All pushData calls done by the table must go through this guard.
-     *
-     * TODO: The guard should ensure a 'disconnect' between push data handling and the calling function processing.
-     *  When the pushData is handled by the application, it MAY (and in our case it DOES) trigger processing that
-     *  lands back in the table. This opens additional set of invariants to check / be prepared for in order to
-     *  optimize the renders and re-renders.
-     */
-    pushDataGuard = (data) => {
-        this.props.pushData?.(data);
-        /*
-         * TODO: Switch to this on in FET-715.
-        setTimeout(() => {
-            this.props.pushData?.(data);
-        }, 0);
-         */
+    const setContainerRef = useCallback((container) => {
+        containerRef.current = container ?? undefined;
+        if (containerRef.current) {
+            containerRef.current.addEventListener("mousedown", onContainerMouseDown);
+        }
+    }, [onContainerMouseDown]);
+    const renderLoading = () => {
+        const { LoadingComponent, theme } = resolvedProps;
+        return _jsx(PivotTableLoading, { LoadingComponent: LoadingComponent, theme: theme });
     };
-    /**
-     * Wraps the provided callback function with a guard that checks whether the current table state is the same
-     * as the state snapshot at the time of callback creation. If the state differs, the wrapped function WILL NOT
-     * be called.
-     *
-     * @param callback - function to wrap with state guard
-     */
-    // oxlint-disable-next-line @typescript-eslint/no-unsafe-function-type
-    stateBoundCallback = (callback) => {
-        return createStateBoundCallback(callback, this.internal, () => this.internal);
+    const { ErrorComponent } = resolvedProps;
+    const { desiredHeight, error } = state;
+    if (error) {
+        return _jsx(PivotTableError, { error: error, errorMap: errorMap, ErrorComponent: ErrorComponent });
+    }
+    const style = {
+        height: desiredHeight || "100%",
+        position: "relative",
+        overflow: "hidden",
     };
-    /**
-     * All callback functions that the table passes to ag-grid must be bound to the current internal state of the table. The
-     * callback functions MUST be noop if the internal state at the time of call is different from the internal state
-     * at the time of creation.
-     *
-     * This is essential to prevent errors stemming for racy behavior triggered by ag-grid. ag-grid often triggers
-     * event callbacks using setTimeout(). It can happen, that once the event is actually processed the ag-grid table
-     * which caused it is unmounted. Doing anything with the unmounted table's gridApi leads to errors.
-     *
-     * Without this, table may trigger ag-grid errors such as this:
-     *
-     * https://github.com/ag-grid/ag-grid/issues/3457
-     *
-     * or this:
-     *
-     * https://github.com/ag-grid/ag-grid/issues/3334
+    if (!state.readyToRender) {
+        return (_jsx("div", { className: "gd-table-component", style: style, id: pivotTableId, children: renderLoading() }));
+    }
+    const internal = internalRef.current;
+    // when table is ready, then the table facade must be set. if this bombs then there is a bug
+    // in the initialization logic
+    invariant(internal.table);
+    if (!internal.gridOptions) {
+        internal.gridOptions = createGridOptions(internal.table, getTableMethods(), resolvedProps);
+    }
+    /*
+     * Show loading overlay until all the resizing is done. This is because the various resizing operations
+     * have to happen asynchronously - they must wait until ag-grid fires onFirstDataRendered, before our code
+     * can start reliably interfacing with the autosizing features.
      */
-    createBoundAgGridCallbacks = () => {
-        const debouncedGridSizeChanged = createDebouncedCallback(this.stateBoundCallback(this.onGridSizeChanged), AGGRID_ON_RESIZE_TIMEOUT);
-        return {
-            onGridReady: this.stateBoundCallback(this.onGridReady),
-            onFirstDataRendered: this.stateBoundCallback(this.onFirstDataRendered),
-            onBodyScroll: this.stateBoundCallback(this.onBodyScroll),
-            onModelUpdated: this.stateBoundCallback(this.onModelUpdated),
-            onGridColumnsChanged: this.stateBoundCallback(this.onGridColumnsChanged),
-            onGridColumnResized: this.stateBoundCallback(this.onGridColumnResized),
-            onSortChanged: this.stateBoundCallback(this.onSortChanged),
-            onGridSizeChanged: debouncedGridSizeChanged,
-            onPinnedRowDataChanged: this.stateBoundCallback(this.onPinnedRowDataChanged),
-        };
-    };
-    getTableMethods = () => {
-        return {
-            hasColumnWidths: this.hasColumnWidths(),
-            getExecutionDefinition: this.getExecutionDefinition,
-            getMenuConfig: this.getMenuConfig,
-            getGroupRows: this.getGroupRows,
-            getColumnTotals: this.getColumnTotals,
-            getRowTotals: this.getRowTotals,
-            getColumnHeadersPosition: this.getColumnHeadersPosition,
-            getMeasureGroupDimension: this.getMeasureGroupDimension,
-            getResizingConfig: this.getResizingConfig,
-            onLoadingChanged: this.onLoadingChanged,
-            onError: this.onError,
-            onExportReady: this.props.onExportReady ?? (() => { }),
-            pushData: this.pushDataGuard,
-            onPageLoaded: this.onPageLoaded,
-            onExecutionTransformed: this.onExecutionTransformed,
-            onMenuAggregationClick: this.onMenuAggregationClick,
-            setLastSortedColId: this.setLastSortedColId,
-            ...this.boundAgGridCallbacks,
-        };
-    };
-    getResizingConfig = () => {
-        return {
-            defaultWidth: this.getDefaultWidth(),
-            growToFit: this.isGrowToFitEnabled(),
-            columnAutoresizeOption: this.getDefaultWidthFromProps(this.props),
-            widths: this.getColumnWidths(this.props),
-            isAltKeyPressed: this.internal.isAltKeyPressed,
-            isMetaOrCtrlKeyPressed: this.internal.isMetaOrCtrlKeyPressed,
-            // use clientWidth of the viewport container to accommodate for vertical scrollbars if needed
-            clientWidth: this.containerRef?.getElementsByClassName("ag-body-viewport")[0]?.clientWidth ?? 0,
-            containerRef: this.containerRef,
-            separators: this.props?.config?.separators,
-            onColumnResized: this.props.onColumnResized,
-        };
-    };
+    const shouldRenderLoadingOverlay = (isColumnAutoresizeEnabled() || isGrowToFitEnabled()) && !state.resized;
+    const classNames = cx("gd-table-component", {
+        "gd-table-header-hide": resolvedProps.config?.columnHeadersPosition === "left" &&
+            internal.table.tableDescriptor.isTransposed(),
+    });
+    return (_jsx("div", { className: classNames, style: style, id: pivotTableId, onMouseDown: stopEventWhenResizeHeader, onDragStart: stopEventWhenResizeHeader, children: _jsxs("div", { className: "gd-table ag-theme-balham s-pivot-table", style: style, ref: setContainerRef, children: [
+                _jsx(AgGridReact, { ...internal.gridOptions, modules: [AllCommunityModule] }), shouldRenderLoadingOverlay ? renderLoading() : null] }) }));
 }
-const CorePivotTableWithIntl = injectIntl(withTheme(CorePivotTableAgImpl));
+const CorePivotTableWithIntl = withTheme(CorePivotTableAgImpl);
 /**
  * @internal
  */