lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

package/src/lightning/datatable/datatable.js

@@ -1,8 +1,14 @@
-import { LightningElement, api, track, unwrap } from 'lwc';
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api, track, unwrap } from 'lwc';
 import divTemplate from './templates/div/div.html';
 import tableTemplate from './templates/table/table.html';
 import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
 import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
+import { features } from 'lightning/features';
 import { EVENTS as FORMATTED_LOOKUP_EVENTS } from 'lightning/formattedLookup';
 import { generateUniqueId } from 'lightning/inputUtils';
 import MultiColumnSortingModal from 'lightning/multiColumnSortingModal';
@@ -17,8 +23,10 @@ import {
     normalizeBoolean,
     normalizeString,
     synchronizeAttrs,
+    isCSR,
+    privateContext,
 } from 'lightning/utilsPrivate';
-import { LightningDatatableResizeObserver } from './resizeObserver';
+import { updateObservers, disconnectObservers } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
 import { setColumns } from './columns';
@@ -56,10 +64,12 @@ import {
     setSelectedRowsKeys,
     syncSelectedRowsKeys,
     updateBulkSelectionState,
+    setSingleRowSelectionMode,
 } from './rowSelection';
 import {
     getCurrentSelectionLength,
     getSelectedRowsKeys,
+    isInputTypeCheckbox,
 } from './rowSelectionShared';
 import {
     handleHeaderActionMenuClosed,
@@ -108,6 +118,7 @@ import {
     KEYBOARD_NAVIGATION_MODE,
     reactToKeyboardOnRow,
     refocusCellElement,
+    scrollToCell,
     setBlurActiveCell,
     setCellClickedForFocus,
     setCellToFocusFromPrev,
@@ -130,6 +141,7 @@ import {
     updateSorting,
 } from './sort';
 import {
+    cleanData,
     getGridContainerFromScrollerY,
     getScrollerX,
     getScrollerY,
@@ -146,6 +158,7 @@ import {
     addTableHeight,
 } from './virtualization';
 import DatatableTypes from './types';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 
 const { PrivateLookupItemPickedEvent } = FORMATTED_LOOKUP_EVENTS;
 
@@ -154,10 +167,13 @@ const i18n = {
     ariaLiveActionMode: labelAriaLiveActionMode,
 };
 
+const INIT_HEADER_HEIGHT = 32;
+const { setContext, assertContext } = privateContext;
+
 /**
  * A table that displays rows and columns of data.
  */
-export default class LightningDatatable extends LightningElement {
+export default class LightningDatatable extends LightningShadowBaseClass {
     /**
      * Usage of State Object vs Private Variable:
      * This is by no means a definitive set of rules and we should add/modify these
@@ -191,13 +207,12 @@ export default class LightningDatatable extends LightningElement {
 
     // Private Variables
     _actionsMinHeightStyle = ''; // Min height required while actions menu is opened
-    _checkboxColumnHeaderId = null;
     _columnWidthManager;
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
+    _headerHeight = 0;
     _isResizing = false; // Whether resizing is in progress
-    _lastRenderedRow = null; // last rendered row, used for UTAM
     _positionRelationship;
     _privateTypes = {};
     _rawColumns = [];
@@ -210,8 +225,8 @@ export default class LightningDatatable extends LightningElement {
     _widthObserver; // Instance of LightningDatatableResizeObserver
     _hasSetInitialCustomTypes = false;
     _shouldResetCustomTypes = false;
-    _headerHeight = '';
     _recalculateHeaderHeight = false;
+    _maxRowSelectionShouldFireEvent = false;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -288,17 +303,20 @@ export default class LightningDatatable extends LightningElement {
     set data(value) {
         const { _customerSelectedRows, state } = this;
         const { data: previousData, columns } = state;
-        const data = Array.isArray(value) ? value : [];
+        // Check value is array and has data (W-15835670)
+        const data = cleanData(value);
         const isInfiniteLoading = isLoadMore(previousData, data);
 
         // Untracked state change.
         state.data = data;
-        if (!isInfiniteLoading && data.length && columns.length) {
+
+        // data.length ok here, as have cleaned value first
+        if (!isInfiniteLoading && data.length && columns?.length) {
             this._columnWidthManager.handleDataChange(columns);
         }
 
         // do necessary updates since rows have changed
-        if (this.hasValidKeyField && this.isConnected) {
+        if (typeof state.keyField === 'string' && this.isConnected) {
             this.updateRows();
         }
         if (isInfiniteLoading) {
@@ -309,7 +327,7 @@ export default class LightningDatatable extends LightningElement {
             state.offsets = [0];
             state.offsetRanges = [{ start: 0, end: 0 }];
             state.firstVisibleIndex = 0;
-            state.tableHeight = state.rowHeight * state.rows.length;
+            state.tableHeight = state.rowHeight * data.length;
         }
         if (_customerSelectedRows) {
             this.setSelectedRows(_customerSelectedRows);
@@ -348,7 +366,7 @@ export default class LightningDatatable extends LightningElement {
         this._draftValues = value;
         setDirtyValues(state, value);
 
-        if (this.isConnected && this.hasValidKeyField) {
+        if (this.isConnected && typeof state.keyField === 'string') {
             this.updateRowsAndCells();
         }
 
@@ -371,7 +389,9 @@ export default class LightningDatatable extends LightningElement {
         const { state } = this;
         // Untracked state change.
         setEnableInfiniteLoading(state, value);
-        handlePrefetch.call(this);
+        if (this.isConnected) {
+            handlePrefetch.call(this);
+        }
     }
 
     /**
@@ -393,7 +413,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * If present, the checkbox column for row selection is hidden.
+     * If present, the checkbox or radio button column for row selection is hidden.
      * @type {Boolean}
      * @default false
      */
@@ -470,9 +490,9 @@ export default class LightningDatatable extends LightningElement {
     /**
      * Specifies how the table header is wrapped. Set to 'all' to wrap all column headers.
      * Set to 'none' to clip all column headers. Set to 'by-column' to wrap/clip column headers
-     * based on the wrap/clip setting for that individual column. The default is 'by-column'.
+     * based on the wrap/clip setting for that individual column. The default is 'none'.
      * @type {String}
-     * @default by-column
+     * @default none
      */
     @api
     get wrapTableHeader() {
@@ -480,16 +500,16 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set wrapTableHeader(value) {
+        const prevWrapTableHeader = this.state.wrapTableHeader;
         // Untracked state change.
-        this.state.wrapTableHeader = normalizeString(value, {
-            fallbackValue: 'by-column',
+        const wrapTableHeader = normalizeString(value, {
+            fallbackValue: 'none',
             validValues: ['all', 'by-column', 'none'],
         });
+        this.state.wrapTableHeader = wrapTableHeader;
 
-        if (this.state.wrapTableHeader !== 'none') {
+        if (wrapTableHeader !== prevWrapTableHeader) {
             this._recalculateHeaderHeight = true;
-        } else {
-            this._headerHeight = '';
         }
     }
 
@@ -568,7 +588,8 @@ export default class LightningDatatable extends LightningElement {
     /**
      * The maximum number of rows that can be selected. Value should be a positive integer
      * Checkboxes are used for selection by default,
-     * and radio buttons are used when maxRowSelection is 1.
+     * and radio buttons are used when maxRowSelection is 1 unless overridden using
+     * the singleRowSelectionMode property.
      * @type {Number}
      */
     @api
@@ -577,17 +598,41 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set maxRowSelection(value) {
-        const { state } = this;
-        if (!state.hasCalledUpdateRowsAndCells) {
-            // Tracked state changes.
-            this.updateRowsAndCells();
-        }
+        const { state, _customerSelectedRows } = this;
         const previousSelectionLength = getCurrentSelectionLength(state);
         // A mix of tracked and untracked state changes.
         setMaxRowSelection(state, value, this._datatableId);
         if (previousSelectionLength > 0) {
             this.fireSelectedRowsChange(this.getSelectedRows());
+        } else if (
+            !this.isConnected &&
+            state.data.length &&
+            _customerSelectedRows
+        ) {
+            // Only fire rowselection on load when set after data and selected-rows
+            this._maxRowSelectionShouldFireEvent = true;
+        }
+    }
+
+    /**
+     * Specifies whether to render checkboxes instead of radio buttons.
+     * Use with max-row-selection.
+     * When max-row-selection is 1, radio buttons are used for selection by default.
+     * Valid values are 'radio' and 'checkbox'. The default value is 'radio'.
+     * @type {String}
+     */
+    @api
+    get singleRowSelectionMode() {
+        return this.state.singleRowSelectionMode;
+    }
+
+    set singleRowSelectionMode(value) {
+        const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            // Tracked state changes.
+            this.updateRowsAndCells();
         }
+        setSingleRowSelectionMode(state, value, this._datatableId);
     }
 
     /**
@@ -618,11 +663,13 @@ export default class LightningDatatable extends LightningElement {
      */
 
     /**
-     * Enables and configures advanced rendering modes.
-     * It supports properties 'bufferSize' and 'rowHeight'.
-     *
+     * 	Enables and configures advanced rendering modes.
+     *  Valid properties are 'bufferSize' and 'rowHeight'.
      * @type {RenderManagerConfig} value - config object for datatable rendering
      */
+    /**
+     * Reserved for internal use.
+     */
     @api
     get renderConfig() {
         return this._renderConfig;
@@ -645,10 +692,10 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Allows developer to opt-in to a role-based table.
-     * Allowed options - "role-based" or "default"
-     * `role-based` -> Renders <div>
-     * `default`    -> Renders <table>
+     * Opts-in to a role-based table.
+     * Valid options are 'role-based' and 'default'.
+     * 'role-based' renders <div>.
+     * 'default' renders <table>.
      */
     /**
      * Reserved for internal use.
@@ -751,9 +798,6 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set selectedRows(value) {
-        if (!this.state.hasCalledUpdateRowsAndCells) {
-            this.updateRowsAndCells();
-        }
         this._customerSelectedRows = value;
         this.setSelectedRows(value);
     }
@@ -770,6 +814,18 @@ export default class LightningDatatable extends LightningElement {
 
     set showRowNumberColumn(value) {
         const { state, _rawColumns } = this;
+        const { length: colCount } = _rawColumns;
+        // if we're already showing the row number column
+        // and a column is editable, nothing changes so
+        // we don't want to do any recalculations
+        if (state.showRowNumberColumn) {
+            for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
+                if (_rawColumns[colIndex].editable) {
+                    return;
+                }
+            }
+        }
+
         // A mix of tracked and untracked state changes.
         this._columnWidthManager.handleRowNumberColumnChange(
             state.rowNumberOffset,
@@ -861,6 +917,16 @@ export default class LightningDatatable extends LightningElement {
 
     /************************** PUBLIC METHODS ***************************/
 
+    /**
+     * Focuses the current active cell in the datatable.
+     */
+    @api
+    focus() {
+        const { state } = this;
+        syncActiveCell(state);
+        setFocusActiveCell(state, this.template, this.refs);
+    }
+
     /**
      * Returns data in each selected row.
      * @returns {Array} An array of data in each selected row.
@@ -903,12 +969,25 @@ export default class LightningDatatable extends LightningElement {
         openInlineEditOnActiveCell(this);
     }
 
+    /**
+     * Scrolls to the top of the datatable.
+     */
+    @api
+    scrollToTop() {
+        const scrollerY = getScrollerY(this.template, this.validRefs);
+        if (scrollerY) {
+            scrollerY.scrollTop = 0;
+        }
+    }
+
     /************************** PRIVATE GETTERS **************************/
 
     get gridContainer() {
-        return getGridContainerFromScrollerY(
-            getScrollerY(this.template, this.refs)
-        );
+        return isCSR
+            ? getGridContainerFromScrollerY(
+                  getScrollerY(this.template, this.validRefs)
+              )
+            : null;
     }
 
     get computedTableContainerClass() {
@@ -974,24 +1053,33 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Sets the min height and the table width on the container
+     * Sets the min height (always) and the table width on the container
      * that wraps [role="grid"].
      * 1. Min Height is required for the case when the header actions
      *    dropdown is opened and there are no rows present. The dropdown
      *    would be cut off. To prevent that, we set a min height on the table.
      * 2. The table width is required for horizontal scroll. If the table
      *    is overflowing horizontally, we need to set the width in order
-     *    to be able to view the remaining columns on scroll.
+     *    to be able to view the remaining columns on scroll. Always set the
+     *    min-height value, which can be set during handleMenuOpen
      */
     get computedScrollerYStyle() {
+        // always set min-height value, whether it has a value or is an emptry string
+        // min-height is eiter empty string or aquires a value from handleHeaderActionMenuOpening
+        // when header menu actions have been selection.  see item 1 above
         const minHeight = this._actionsMinHeightStyle
             ? `${this._actionsMinHeightStyle};`
             : '';
+        // in this use case, we set min-height always and
+        // and overflow-x: auto when isAutoResizingUpdateQueued = true
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
-            return `${minHeight}overflow-x:auto`;
+            return `${minHeight}overflow-x: auto;`;
         }
         const { tableWidth } = this.widthsData;
-        return tableWidth ? `width: ${tableWidth}px;` : '';
+        // when selecting header menu actions, min-height has a rem value. always set min-height
+        return tableWidth
+            ? `${minHeight}width: ${tableWidth}px;`
+            : `${minHeight}`;
     }
 
     get computedScrollerXStyle() {
@@ -1004,7 +1092,7 @@ export default class LightningDatatable extends LightningElement {
         }
         if (this.state.wrapTableHeader !== 'none') {
             // update padding style for dynamic header height when header can wrap
-            style += `padding-top: max(2rem, ${this._headerHeight})`;
+            style += `padding-top: max(2rem, ${this._headerHeight}px);`;
         }
         return style;
     }
@@ -1015,7 +1103,7 @@ export default class LightningDatatable extends LightningElement {
      * aria-labelledby in checkbox column
      */
     get computedCheckboxColumnHeaderId() {
-        return this._checkboxColumnHeaderId;
+        return `${this._datatableId}-check-column-header`;
     }
 
     get computedAriaLiveClassForNavMode() {
@@ -1062,6 +1150,10 @@ export default class LightningDatatable extends LightningElement {
         return !this.widthsData.resizeColumnDisabled;
     }
 
+    get validRefs() {
+        return this._hasRendered ? this.refs : null;
+    }
+
     get renderedRows() {
         const { state } = this;
         if (!state.hasCalledUpdateRowsAndCells) {
@@ -1071,21 +1163,18 @@ export default class LightningDatatable extends LightningElement {
         if (virtualize) {
             const { firstIndex, lastIndex } =
                 this._renderManager.getRenderedRange(state);
-            this._lastRenderedRow = lastIndex + 1; // UTAM rows are 1-indexed
             // we shouldn't lose focus from re-renders caused by a change in renderedRows
             this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
         if (state.enableViewportRendering) {
-            this._lastRenderedRow = renderedRowCount;
             return rows.slice(0, renderedRowCount);
         }
-        this._lastRenderedRow = rows.length;
         return rows;
     }
 
     get showSelectAllCheckbox() {
-        return this.state.maxRowSelection !== 1;
+        return isInputTypeCheckbox(this.state);
     }
 
     get showStatusBar() {
@@ -1117,103 +1206,132 @@ export default class LightningDatatable extends LightningElement {
             !!this._privateTypes.privateCustomTypes.size;
 
         this._renderManager = new RenderManager();
-        this.getWrapperHeight = () => {
-            const scrollerX = getScrollerX(this.template, this.refs);
-            const paddingTop =
-                parseFloat(getComputedStyle(scrollerX).paddingTop) || 0;
-            return scrollerX.offsetHeight - paddingTop;
-        };
+        if (isCSR) {
+            this.getWrapperHeight = () => {
+                const scrollerX = getScrollerX(this.template, this.refs);
+                const paddingTop = this.state.hideTableHeader
+                    ? 0
+                    : parseFloat(getComputedStyle(scrollerX).paddingTop) ||
+                      INIT_HEADER_HEIGHT;
+                return scrollerX.offsetHeight - paddingTop;
+            };
+        }
+        setContext(this);
     }
 
     /**
      * Attach event handlers for various events on `lightning-datatable`
      */
     connectedCallback() {
-        const { template } = this;
+        super.connectedCallback();
+        const { _customerSelectedRows, state, template } = this;
 
         // Row selection and de-selection
         this.addEventListener('rowselection', (event) => {
             this.handleRowSelectionChange(event);
         });
-        template.addEventListener('selectallrows', (event) => {
-            this.handleSelectionCellClick(event);
-        });
-        template.addEventListener('deselectallrows', (event) => {
-            this.handleSelectionCellClick(event);
-        });
-        template.addEventListener('selectrow', (event) => {
-            this.handleSelectionCellClick(event);
-        });
-        template.addEventListener('deselectrow', (event) => {
-            this.handleSelectionCellClick(event);
-        });
-        // Column resizing
-        template.addEventListener('resizecol', (event) => {
-            this.handleResizeColumn(event);
-        });
-        // Column sorting
-        template.addEventListener('privateupdatecolsort', (event) => {
-            this.handleUpdateColumnSort(event);
-        });
-        // Cell interaction
-        template.addEventListener('privatecellkeydown', (event) => {
-            this.handleKeydownOnCell(event);
-        });
-        template.addEventListener('privatecellfocusedbyclick', (event) => {
-            this.handleCellFocusByClick(event);
-        });
-        template.addEventListener('privatecellfalseblurred', (event) => {
-            this.handleFalseCellBlur(event);
-        });
-        // Inlined cell interaction
-        template.addEventListener('click', (event) => {
-            this.handlePrimitiveDatatableCellClick(event);
-        });
-        template.addEventListener('focus', (event) => {
-            this.handlePrimitiveDatatableCellFocus(event);
-        });
-        template.addEventListener('keydown', (event) => {
-            this.handlePrimitiveDatatableCellKeydown(event);
-        });
-        // Row level actions
-        template.addEventListener('privatecellactiontriggered', (event) => {
-            this.handleRowActionTriggered(event);
-        });
-        template.addEventListener('privatecellactionmenuopening', (event) => {
-            this.handleLoadDynamicActions(event);
-        });
-        template.addEventListener('privatecellbuttonclicked', (event) => {
-            this.handleCellButtonClick(event);
-        });
-        // Header actions
-        template.addEventListener(
-            'privatecellheaderactionmenuopening',
-            (event) => {
-                this.handleHeaderActionMenuOpening(event);
-            }
-        );
-        template.addEventListener(
-            'privatecellheaderactionmenuclosed',
-            (event) => {
-                this.handleHeaderActionMenuClosed(event);
-            }
-        );
-        template.addEventListener(
-            'privatecellheaderactiontriggered',
-            (event) => {
-                this.handleHeaderActionTriggered(event);
-            }
-        );
-        // Open sorting modal
-        template.addEventListener('privateopensortingmodal', (event) => {
-            this.handleOpenSortingModal(event);
-        });
-        // Inline edit
-        template.addEventListener('privateeditcell', (event) => {
-            this.handleEditCell(event);
-        });
+        if (isCSR) {
+            template.addEventListener('selectallrows', (event) => {
+                this.handleSelectionCellClick(event);
+            });
+            template.addEventListener('deselectallrows', (event) => {
+                this.handleSelectionCellClick(event);
+            });
+            template.addEventListener('selectrow', (event) => {
+                this.handleSelectionCellClick(event);
+            });
+            template.addEventListener('deselectrow', (event) => {
+                this.handleSelectionCellClick(event);
+            });
+            // Column resizing
+            template.addEventListener('resizecol', (event) => {
+                this.handleResizeColumn(event);
+            });
+            // Column sorting
+            template.addEventListener('privateupdatecolsort', (event) => {
+                this.handleUpdateColumnSort(event);
+            });
+            // Cell interaction
+            template.addEventListener('privatecellkeydown', (event) => {
+                this.handleKeydownOnCell(event);
+            });
+            template.addEventListener('privatecellfocusedbyclick', (event) => {
+                this.handleCellFocusByClick(event);
+            });
+            template.addEventListener('privatecellfalseblurred', (event) => {
+                this.handleFalseCellBlur(event);
+            });
+            // Inlined cell interaction
+            template.addEventListener('click', (event) => {
+                this.handlePrimitiveDatatableCellClick(event);
+            });
+            template.addEventListener('focus', (event) => {
+                this.handlePrimitiveDatatableCellFocus(event);
+            });
+
+            template.addEventListener('mousedown', () => {
+                this._suppressScroll = true;
+            });
+
+            template.addEventListener('keydown', (event) => {
+                this.handlePrimitiveDatatableCellKeydown(event);
+            });
+            // Row level actions
+            template.addEventListener('privatecellactiontriggered', (event) => {
+                this.handleRowActionTriggered(event);
+            });
+            template.addEventListener(
+                'privatecellactionmenuopening',
+                (event) => {
+                    this.handleLoadDynamicActions(event);
+                }
+            );
+            template.addEventListener('privatecellbuttonclicked', (event) => {
+                this.handleCellButtonClick(event);
+            });
+            // Header actions
+            template.addEventListener(
+                'privatecellheaderactionmenuopening',
+                (event) => {
+                    this.handleHeaderActionMenuOpening(event);
+                }
+            );
+            template.addEventListener(
+                'privatecellheaderactionmenuclosed',
+                (event) => {
+                    this.handleHeaderActionMenuClosed(event);
+                }
+            );
+            template.addEventListener(
+                'privatecellheaderactiontriggered',
+                (event) => {
+                    this.handleHeaderActionTriggered(event);
+                }
+            );
+            // Open sorting modal
+            template.addEventListener('privateopensortingmodal', (event) => {
+                this.handleOpenSortingModal(event);
+            });
+            // Inline edit
+            template.addEventListener('privateeditcell', (event) => {
+                this.handlePrivateDatatableEditCell(event);
+            });
+        }
 
         this.updateColumnsAndRows();
+        if (state.enableViewportRendering || state.virtualize) {
+            // Render just one row at the start to minimize
+            // Impact of style recalculations
+            state.renderedRowCount = 1;
+        }
+        if (_customerSelectedRows) {
+            this.setSelectedRows(_customerSelectedRows);
+            const selectionLength = getCurrentSelectionLength(this.state);
+            if (selectionLength > 0 && this._maxRowSelectionShouldFireEvent) {
+                this.fireSelectedRowsChange(this.getSelectedRows());
+                this._maxRowSelectionShouldFireEvent = false;
+            }
+        }
     }
 
     /**
@@ -1227,6 +1345,11 @@ export default class LightningDatatable extends LightningElement {
     render() {
         const requireTableTemplate =
             this._columnWidthManager.isAutoResizingUpdateQueued;
+        // Putting this in renderedCallback results in extra render
+        // When using auto column widths
+        if (!this._hasRendered) {
+            this._hasRendered = true;
+        }
         const templateToRender =
             this.state.renderModeRoleBased && !requireTableTemplate
                 ? divTemplate
@@ -1236,10 +1359,7 @@ export default class LightningDatatable extends LightningElement {
             // change will trigger slotchange event without types actually changing
             this._shouldResetCustomTypes =
                 !this._privateTypes.privateCustomTypes.size;
-            const { _widthObserver } = this;
-            if (_widthObserver) {
-                _widthObserver.disconnect();
-            }
+            disconnectObservers(this);
             this._renderManager.disconnectResizeObserver();
             this._renderedTemplate = templateToRender;
         }
@@ -1293,6 +1413,7 @@ export default class LightningDatatable extends LightningElement {
                 columns,
                 widthsData
             );
+            state.shouldResetHeights = true;
             // Managing cell widths is required for role-based render mode.
             if (state.renderModeRoleBased) {
                 recomputeCellStyles(state);
@@ -1304,28 +1425,7 @@ export default class LightningDatatable extends LightningElement {
             this.updateTableAndScrollerStyleOnRender();
         }
 
-        let { _widthObserver } = this;
-        if (!_widthObserver) {
-            // Tracked state changes.
-            _widthObserver = new LightningDatatableResizeObserver(this, () => {
-                // Tracked state change.
-                _columnWidthManager.adjustColumnsSizeAfterResize(
-                    this,
-                    state.columns,
-                    widthsData
-                );
-                this._recalculateHeaderHeight = true;
-                // Managing cell widths is required for role-based render mode.
-                if (state.renderModeRoleBased) {
-                    recomputeCellStyles(state);
-                }
-            });
-            this._widthObserver = _widthObserver;
-        } else if (!_widthObserver.isConnected()) {
-            _widthObserver.observe(template, refs);
-        }
-
-        handlePrefetch.call(this);
+        updateObservers(this);
 
         // customerSelectedRows is only valid till render, after it, the one
         // used should be the one from the state.
@@ -1370,10 +1470,10 @@ export default class LightningDatatable extends LightningElement {
         const { length: rowCount } = state.rows;
 
         // Untracked state changes.
-        // Set rendered flags BEFORE handlePrefetch() is called.
         state.hasRenderedFirstTime = true;
         state.hasRenderedTable = true;
 
+        let shouldUpdateWrapperHeight = false;
         if (virtualize || state.enableViewportRendering) {
             const { _renderManager } = this;
             if (rowCount) {
@@ -1388,6 +1488,15 @@ export default class LightningDatatable extends LightningElement {
                 _renderManager.connectResizeObserver(outerContainer);
             }
             if (!_renderManager.hasWrapperHeight()) {
+                shouldUpdateWrapperHeight = true;
+            }
+        }
+
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        requestAnimationFrame(() => {
+            // Only performs reads
+            if (shouldUpdateWrapperHeight) {
+                const { _renderManager } = this;
                 _renderManager.updateWrapperHeight(this.getWrapperHeight);
 
                 // Reset the row count if we already had one before updating the wrapper height.
@@ -1401,17 +1510,17 @@ export default class LightningDatatable extends LightningElement {
                     );
                 }
             }
-        }
 
-        if (rowCount && renderModeInline && !hasRenderedTable) {
-            this.updateCheckboxCellsAriaAttrs();
-            if (hasLinkProvider(template)) {
-                this.updateLookupCellsLinkInfo();
-                this.updateUrlCellsLinkInfo();
+            this.updateHeaderHeight();
+            // Performs only writes
+            if (rowCount && renderModeInline && !hasRenderedTable) {
+                this.updateCheckboxCellsAriaAttrs();
+                if (hasLinkProvider(template)) {
+                    this.updateLookupCellsLinkInfo();
+                    this.updateUrlCellsLinkInfo();
+                }
             }
-        }
-
-        this.updateHeaderHeight();
+        });
     }
 
     updateHeaderHeight() {
@@ -1419,24 +1528,22 @@ export default class LightningDatatable extends LightningElement {
             this.state.wrapTableHeader !== 'none' &&
             this._recalculateHeaderHeight
         ) {
-            // Need to wait a frame for width changes on last render to take effect
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            requestAnimationFrame(() => {
-                const headerElements = this.template.querySelectorAll(
-                    '[role="columnheader"] lightning-primitive-header-factory'
-                );
-                let headerHeight = 0;
-                for (let i = 0; i < headerElements.length; i += 1) {
-                    const headerCellHeight = headerElements[i].getDomHeight();
-                    if (headerCellHeight > headerHeight) {
-                        headerHeight = headerCellHeight;
-                    }
+            const headerCells = this.refs.headerRow?.children || [];
+            let headerTextHeight = 0;
+            for (let i = 0; i < headerCells.length; i += 1) {
+                const headerElement = headerCells[i].firstChild;
+                const headerCellHeight = headerElement.getDomHeight();
+                if (headerCellHeight > headerTextHeight) {
+                    headerTextHeight = headerCellHeight;
                 }
-                // Header height only accounts for the height of the text
-                // Add 16 px for padding around the text
-                this._headerHeight = `max(2rem, ${headerHeight + 16}px)`;
-                this._recalculateHeaderHeight = false;
-            });
+            }
+            // Header height only accounts for the height of the text
+            // Add 16 px for padding around the text
+            this._headerHeight = headerTextHeight + 16;
+            this._recalculateHeaderHeight = false;
+        } else if (this._recalculateHeaderHeight) {
+            this._headerHeight = 0;
+            this._recalculateHeaderHeight = false;
         }
     }
 
@@ -1452,11 +1559,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     disconnectedCallback() {
-        const { _widthObserver } = this;
-        if (_widthObserver) {
-            _widthObserver.disconnect();
-        }
-
+        disconnectObservers(this);
         this._renderManager.disconnectResizeObserver();
     }
 
@@ -1464,7 +1567,7 @@ export default class LightningDatatable extends LightningElement {
 
     handleCellButtonClick = handleCellButtonClick;
 
-    handleEditCell = handleEditCell;
+    handlePrivateDatatableEditCell = handleEditCell;
 
     handleHeaderActionMenuClosed = handleHeaderActionMenuClosed;
 
@@ -1535,6 +1638,7 @@ export default class LightningDatatable extends LightningElement {
      * @param {Event} event - 'scroll'
      */
     handleHorizontalScroll(event) {
+        assertContext(this);
         handleInlineEditPanelScroll.call(this, event);
     }
 
@@ -1545,6 +1649,7 @@ export default class LightningDatatable extends LightningElement {
      * @param {Event} event - 'scroll'
      */
     handleVerticalScroll(event) {
+        assertContext(this);
         const { state } = this;
         if (state.enableInfiniteLoading) {
             handleLoadMoreCheck.call(this, event);
@@ -1576,7 +1681,8 @@ export default class LightningDatatable extends LightningElement {
             // const { rowKeyValue, colKeyValue } =
             //     target.querySelector(':first-child');
             const cellElement = target;
-            const { state } = this;
+            const { template, state } = this;
+            state.hasReceivedFocus = true;
             const { rowKeyValue } = cellElement.parentElement.dataset;
             const { colKeyValue } = cellElement.dataset;
             if (
@@ -1592,10 +1698,11 @@ export default class LightningDatatable extends LightningElement {
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
-            if (!datatableHasFocus(state, this.template)) {
+            if (!datatableHasFocus(state, template)) {
                 // Untracked state change.
                 setCellClickedForFocus(state);
             }
+            scrollToCell(state, template, this.refs, cellElement);
         }
     }
 
@@ -1611,10 +1718,6 @@ export default class LightningDatatable extends LightningElement {
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
-    handleCheckboxHeaderId(event) {
-        this._checkboxColumnHeaderId = event.detail;
-    }
-
     handleOpenSortingModal(event) {
         event.stopPropagation();
         MultiColumnSortingModal.open({
@@ -1705,6 +1808,7 @@ export default class LightningDatatable extends LightningElement {
     handleCellFocusByClick(event) {
         event.stopPropagation();
         const { state } = this;
+        state.hasReceivedFocus = true;
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
             event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
@@ -1716,6 +1820,8 @@ export default class LightningDatatable extends LightningElement {
             this.setActiveCell(rowKeyValue, colKeyValue);
             refocusCellElement(state, this.template, needsRefocusOnCellElement);
         }
+        const cellElement = getCellElementFromEventTarget(event.target);
+        scrollToCell(state, this.template, this.refs, cellElement);
     }
 
     /**
@@ -1770,7 +1876,10 @@ export default class LightningDatatable extends LightningElement {
      *
      * @param {CustomEvent} event - 'ieditfinished'
      */
-    handleInlineEditFinish = handleInlineEditFinish;
+    handleInlineEditFinish(event) {
+        assertContext(this);
+        handleInlineEditFinish.call(this, event);
+    }
 
     /**
      * Handles the 'masscheckboxchange' event on the inline edit panel -
@@ -1931,6 +2040,7 @@ export default class LightningDatatable extends LightningElement {
             : undefined;
 
         if (cellElement) {
+            state.hasReceivedFocus = true;
             const cellElementChild = getCellElementChild(cellElement);
             cellElementChild.dispatchEvent(
                 new CustomEvent('privateeditcell', {
@@ -1961,11 +2071,13 @@ export default class LightningDatatable extends LightningElement {
     }
 
     fireSelectedRowsChange(selectedRows, config = {}) {
-        this.dispatchEvent(
-            new CustomEvent('rowselection', {
-                detail: { selectedRows, config },
-            })
-        );
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('rowselection', {
+                    detail: { selectedRows, config },
+                })
+            );
+        }
     }
 
     fireSortedColumnChange(fieldName, columnKey, sortDirection) {
@@ -2006,7 +2118,9 @@ export default class LightningDatatable extends LightningElement {
 
     updateRowsBeforeIndexes() {
         // Untracked state change.
-        setCellToFocusFromPrev(this.state, this.template);
+        if (isCSR) {
+            setCellToFocusFromPrev(this.state, this.template);
+        }
     }
 
     updateRowsAfterIndexes() {
@@ -2047,7 +2161,7 @@ export default class LightningDatatable extends LightningElement {
             updateTabIndexActiveRow(state);
         }
         // if there is previously focused cell which was deleted set focus from cellToFocusNext
-        if (state.activeCell && state.cellToFocusNext) {
+        if (isCSR && state.activeCell && state.cellToFocusNext) {
             // Tracked state change.
             setFocusActiveCell(state, this.template, this.refs);
         }
@@ -2066,7 +2180,9 @@ export default class LightningDatatable extends LightningElement {
         const { state } = this;
         // Untracked state changes.
         // Calculate cell to focus next before indexes are updated.
-        setCellToFocusFromPrev(state, this.template);
+        if (isCSR) {
+            setCellToFocusFromPrev(state, this.template);
+        }
         updateRowNavigationMode(state);
         // Tracked state changes.
         setDirtyValues(state, this._draftValues);
@@ -2099,7 +2215,7 @@ export default class LightningDatatable extends LightningElement {
             updateTabIndexActiveRow(state);
         }
         // If there is previously focused cell which was deleted set focus from cellToFocusNext.
-        if (state.activeCell && state.cellToFocusNext) {
+        if (isCSR && state.activeCell && state.cellToFocusNext) {
             // Tracked state change.
             setFocusActiveCell(state, this.template, this.refs);
         }
@@ -2170,14 +2286,25 @@ export default class LightningDatatable extends LightningElement {
         if (customTypesSlot) {
             const assignedNodes = customTypesSlot.assignedNodes();
             if (assignedNodes.length) {
-                const provider = assignedNodes[0];
+                let provider = assignedNodes[0];
+                // Use to get custom types from lightning-tree-grid
+                if (
+                    features.ENABLE_TREE_GRID_CUSTOM_TYPES &&
+                    provider?.tagName === 'SLOT'
+                ) {
+                    const innerAssignedNodes = provider.assignedNodes();
+                    provider = innerAssignedNodes.length
+                        ? innerAssignedNodes[0]
+                        : {};
+                }
                 if (typeof provider.getDataTypes === 'function') {
                     this._privateTypes = new DatatableTypes(
                         provider.getDataTypes()
                     );
                     this.updateColumns(this._rawColumns);
                     this._columnWidthManager.handleColumnsChange(
-                        this.state.columns
+                        this.state.columns,
+                        this.validRefs
                     );
                 }
             } else {
@@ -2234,7 +2361,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     updateCheckboxCellsAriaAttrs() {
-        const { _checkboxColumnHeaderId, state, template } = this;
+        const { computedCheckboxColumnHeaderId, state, template } = this;
         const { checkboxCells } = state;
         let { length: cellCount } = checkboxCells;
         // To avoid a critical performance penalty we query the template ONCE
@@ -2256,12 +2383,13 @@ export default class LightningDatatable extends LightningElement {
             }
             inputElem.setAttribute(
                 'aria-labelledby',
-                `${cell.checkboxLabelId}${scopedIdPostfix} ${_checkboxColumnHeaderId}`
+                `${cell.checkboxLabelId}${scopedIdPostfix} ${computedCheckboxColumnHeaderId}`
             );
         }
     }
 
     updateLookupCellsLinkInfo() {
+        assertContext(this);
         const { state, template } = this;
         const { lookupCells } = state;
         const { length: cellCount } = lookupCells;