lightning-base-components 1.21.3-alpha → 1.21.4-alpha

package/src/lightning/datatable/datatable.js

@@ -1,164 +1,143 @@
 import { LightningElement, api, track, unwrap } from 'lwc';
-import tableTemplate from './templates/table/table.html';
 import divTemplate from './templates/div/div.html';
-import { classSet } from 'lightning/utils';
+import tableTemplate from './templates/table/table.html';
+import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
+import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
+import { EVENTS as FORMATTED_LOOKUP_EVENTS } from 'lightning/formattedLookup';
+import { generateUniqueId } from 'lightning/inputUtils';
 import {
+    classSetToString,
+    isSafari,
     normalizeBoolean,
     normalizeString,
-    isSafari,
     synchronizeAttrs,
-    classSetToString,
 } from 'lightning/utilsPrivate';
 import { LightningDatatableResizeObserver } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
-import { getColumns, normalizeColumns, generateHeaderIndexes } from './columns';
+import { normalizeColumns, generateHeaderIndexes } from './columns';
+import {
+    getCustomerColumnWidths,
+    getResizerDefaultState,
+    resizeColumnWithDelta,
+    setMaxColumnWidth,
+    setMinColumnWidth,
+    setResizeColumnDisabled,
+    setResizeStep,
+    updateColumnWidthsMetadata,
+} from './columnResizer';
+import { setErrors } from './errors';
 import {
-    setData,
-    getData,
-    updateRowsAndCellIndexes,
     setKeyField,
-    getKeyField,
-    hasValidKeyField,
+    updateRowsAndCellIndexes,
     updateCellClassForRoleBasedMode,
     recomputeCellStyles,
 } from './rows';
 import {
-    isResizeColumnDisabled,
-    setResizeColumnDisabled,
-    getResizeStep,
-    setResizeStep,
-    getMinColumnWidth,
-    setMinColumnWidth,
-    getMaxColumnWidth,
-    setMaxColumnWidth,
-    getColumnsWidths,
-    resizeColumnWithDelta,
-    getCustomerColumnWidths,
-    getCSSWidthStyleOfTable,
-    updateColumnWidthsMetadata,
-    getResizerDefaultState,
-} from './columnResizer';
+    handleCellButtonClick,
+    handleLoadDynamicActions,
+    handleRowActionTriggered,
+} from './rowLevelActions';
+import { setRowNumberOffset } from './rowNumber';
 import {
-    syncSelectedRowsKeys,
+    handleDeselectAllRows,
+    handleDeselectRow,
     handleRowSelectionChange,
-    updateBulkSelectionState,
-    getMaxRowSelection,
-    setMaxRowSelection,
-    getSelectedRowsKeys,
-    setSelectedRowsKeys,
     handleSelectAllRows,
-    handleDeselectAllRows,
     handleSelectRow,
-    handleDeselectRow,
-    getHideSelectAllCheckbox,
-    getCurrentSelectionLength,
+    setMaxRowSelection,
+    setSelectedRowsKeys,
+    syncSelectedRowsKeys,
+    updateBulkSelectionState,
 } from './rowSelection';
 import {
-    syncActiveCell,
-    handleKeydownOnCell,
-    updateActiveCell,
-    setBlurActiveCell,
-    setFocusActiveCell,
-    isActiveCell,
-    updateCellTabIndex,
-    getIndexesByKeys,
-    updateTabIndexActiveCell,
-    updateTabIndexActiveRow,
-    unsetRowNavigationMode,
-    updateRowNavigationMode,
-    handleDatatableFocusOut,
-    handleDatatableFocusIn,
-    updateRowTabIndex,
-    getIndexesActiveCell,
-    reactToKeyboardOnRow,
-    setCellToFocusFromPrev,
-    updateCellToFocusFromPrev,
-    resetCellToFocusFromPrev,
-    datatableHasFocus,
-    setCellClickedForFocus,
-    handleKeydownOnTable,
-    addFocusStylesToActiveCell,
-    refocusCellElement,
-    isCellElement,
-    getActiveCellElement,
-    getRowDataSelector,
-    FOCUS_CLASS,
-    updateActiveCellTabIndexAfterSync,
-} from './keyboard';
+    getCurrentSelectionLength,
+    getSelectedRowsKeys,
+} from './rowSelectionShared';
 import {
-    getRowNumberOffset,
-    setRowNumberOffset,
-    hasRowNumberColumn,
-    setShowRowNumberColumn,
-} from './rowNumber';
+    handleHeaderActionMenuClosed,
+    handleHeaderActionTriggered,
+    handleHeaderActionMenuOpening,
+    updateHeaderInternalActions,
+} from './headerActions';
 import {
     handleLoadMoreCheck,
-    isInfiniteLoadingEnabled,
+    handlePrefetch,
     setEnableInfiniteLoading,
+    setLoading,
     getLoadMoreOffset,
     setLoadMoreOffset,
-    isLoading,
-    setLoading,
-    handlePrefetch,
 } from './infiniteLoading';
-
-import {
-    handleRowActionTriggered,
-    handleLoadDynamicActions,
-    handleCellButtonClick,
-} from './rowLevelActions';
 import {
-    getSortedBy,
-    setSortedBy,
-    getSortedDirection,
-    setSortedDirection,
-    getDefaultSortDirection,
-    setDefaultSortDirection,
-    updateSorting,
-} from './sort';
-import {
-    updateHeaderActions,
-    handleHeaderActionTriggered,
-    handleHeaderActionMenuOpening,
-    handleHeaderActionMenuClosed,
-} from './headerActions';
-import { setWrapTextMaxLines } from './wrapText';
-import {
-    isInlineEditTriggered,
     cancelInlineEdit,
+    closeInlineEdit,
+    getDirtyValues,
     handleEditCell,
     handleInlineEditFinish,
-    handleMassCheckboxChange,
     handleInlineEditPanelScroll,
-    getDirtyValues,
-    setDirtyValues,
-    closeInlineEdit,
+    handleMassCheckboxChange,
+    isInlineEditTriggered,
     openInlineEditOnActiveCell,
+    setDirtyValues,
 } from './inlineEdit';
+import {
+    addFocusStylesToActiveCell,
+    datatableHasFocus,
+    FOCUS_CLASS,
+    getActiveCellElement,
+    getIndexesActiveCell,
+    getIndexesByKeys,
+    handleDatatableFocusIn,
+    handleDatatableFocusOut,
+    handleKeydownOnCell,
+    handleKeydownOnTable,
+    isActiveCell,
+    isCellElement,
+    KEYBOARD_ACTION_MODE,
+    KEYBOARD_NAVIGATION_MODE,
+    reactToKeyboardOnRow,
+    refocusCellElement,
+    setBlurActiveCell,
+    setCellClickedForFocus,
+    setCellToFocusFromPrev,
+    setFocusActiveCell,
+    syncActiveCell,
+    unsetRowNavigationMode,
+    updateActiveCellTabIndexAfterSync,
+    updateCellTabIndex,
+    updateCellToFocusFromPrev,
+    updateTabIndexActiveCell,
+    updateTabIndexActiveRow,
+    updateRowNavigationMode,
+    updateRowTabIndex,
+} from './keyboard';
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
-    getDTWrapperHeight,
     setVirtualize,
     RenderManager,
 } from './renderManager';
+import {
+    setDefaultSortDirection,
+    setSortedBy,
+    setSortedDirection,
+    updateSorting,
+} from './sort';
+import {
+    getGridContainerFromScrollerY,
+    getRowDataSelector,
+    getScrollerXFromScrollerY,
+    getScrollerY,
+} from './utils';
+import { setWrapTextMaxLines } from './wrapText';
 import {
     handleVariableRowHeights,
     resetRowHeights,
     resetTableHeight,
     findFirstVisibleIndex,
 } from './virtualization';
-import { EVENTS as FORMATTED_LOOKUP_EVENTS } from 'lightning/formattedLookup';
-
 import { hasTreeDataType } from './tree';
-import { setErrors, getTableError, getErrors } from './errors';
-
-import { generateUniqueId } from 'lightning/inputUtils';
 import DatatableTypes from './types';
-import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
-import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
-import { styleToString } from './utils';
 
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
@@ -202,31 +181,33 @@ export default class LightningDatatable extends LightningElement {
 
     // Private Variables
     _actionsMinHeightStyle = ''; // Min height required while actions menu is opened
-    _columns = [];
-    _columnWidthsMode = 'fixed';
+    _checkboxColumnHeaderId = null;
+    _columnWidthManager;
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
     _isResizing = false; // Whether resizing is in progress
     _lastRenderedRow = null; // last rendered row, used for UTAM
     _privateTypes = {};
-    _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
-    _renderMode = 'table';
+    _rawColumns = [];
+    _renderConfig;
+    _renderManager;
+    _renderMode = 'default';
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
-    _checkboxColumnHeaderId;
+    _widthObserver = null; // Instance of LightningDatatableResizeObserver
 
     /************************* PUBLIC PROPERTIES *************************/
 
     /**
      * Public property for passing `aria-label` down to the child table element.
      */
-    ariaLabel = null;
+    @api ariaLabel = null;
 
     /**
      * Public property for passing `aria-labelledby` down to the child table element.
      */
-    ariaLabelledBy = null;
+    @api ariaLabelledBy = null;
 
     /**
      * Public property for passing `aria-describedby` down to the child table element.
@@ -254,9 +235,7 @@ export default class LightningDatatable extends LightningElement {
         this._columnWidthManager.columnWidthMode = normalizedValue;
         if (widthsData.columnWidthsMode !== normalizedValue) {
             // Tracked state changes.
-            this._columnWidthManager.handleWidthModeChange(
-                getColumns(this.state)
-            );
+            this._columnWidthManager.handleWidthModeChange(this.state.columns);
         }
         // Untracked state change.
         widthsData.columnWidthsMode = normalizedValue;
@@ -270,13 +249,14 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get columns() {
-        return this._columns;
+        return this._rawColumns;
     }
 
     set columns(value) {
-        this._columns = Array.isArray(value) ? value : [];
-        this.updateColumns(this._columns);
-        this._columnWidthManager.handleColumnsChange(getColumns(this.state));
+        const _rawColumns = Array.isArray(value) ? value : [];
+        this._rawColumns = _rawColumns;
+        this.updateColumns(this._rawColumns);
+        this._columnWidthManager.handleColumnsChange(this.state.columns);
     }
 
     /**
@@ -286,22 +266,24 @@ export default class LightningDatatable extends LightningElement {
     @api
     // eslint-disable-next-line @lwc/lwc/valid-api
     get data() {
-        return getData(this.state);
+        return this.state.data;
     }
 
     set data(value) {
         const { state } = this;
-        const previousData = getData(state);
+        const { data: previousData } = state;
         const data = Array.isArray(value) ? value : [];
 
-        const columns = getColumns(state);
-        this._columnWidthManager.handleDataChange(previousData, data, columns);
-
-        // set data in state
-        setData(state, value);
+        // Untracked state change.
+        state.data = data;
+        this._columnWidthManager.handleDataChange(
+            previousData,
+            data,
+            state.columns
+        );
 
         // do necessary updates since rows have changed
-        if (hasValidKeyField(state)) {
+        if (this.hasValidKeyField) {
             this.updateRowsState();
             resetTableHeight(state);
         }
@@ -319,7 +301,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get defaultSortDirection() {
-        return getDefaultSortDirection(this.state);
+        return this.state.defaultSortDirection;
     }
 
     set defaultSortDirection(value) {
@@ -342,8 +324,8 @@ export default class LightningDatatable extends LightningElement {
         this._draftValues = value;
         setDirtyValues(state, value);
 
-        if (hasValidKeyField(state)) {
-            this.updateRowsAndCellIndexes(state);
+        if (this.hasValidKeyField) {
+            this.updateRowsAndCells();
         }
 
         updateActiveCellTabIndexAfterSync(state);
@@ -358,14 +340,14 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get enableInfiniteLoading() {
-        return isInfiniteLoadingEnabled(this.state);
+        return this.state.enableInfiniteLoading;
     }
 
     set enableInfiniteLoading(value) {
         const { state } = this;
         // Untracked state change.
         setEnableInfiniteLoading(state, value);
-        handlePrefetch.call(this, this.template, state);
+        handlePrefetch.call(this);
     }
 
     /**
@@ -375,7 +357,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get errors() {
-        return getErrors(this.state);
+        return this.state.errors;
     }
 
     set errors(value) {
@@ -400,12 +382,12 @@ export default class LightningDatatable extends LightningElement {
         this._columnWidthManager.handleCheckboxColumnChange(
             state.hideCheckboxColumn,
             normalizedValue,
-            getColumns(state)
+            state.columns
         );
         // Untracked state changes.
         state.hideCheckboxColumn = normalizedValue;
         // update the columns metadata again to update the status.
-        this.updateColumns(this._columns);
+        this.updateColumns(this._rawColumns);
     }
 
     /**
@@ -445,7 +427,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get isLoading() {
-        return isLoading(this.state);
+        return this.state.isLoading;
     }
 
     set isLoading(value) {
@@ -461,7 +443,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get keyField() {
-        return getKeyField(this.state);
+        return this.state.keyField;
     }
 
     set keyField(value) {
@@ -497,15 +479,15 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get maxColumnWidth() {
-        return getMaxColumnWidth(this.widthsData);
+        return this.widthsData.maxColumnWidth;
     }
 
     set maxColumnWidth(value) {
-        const { state, widthsData } = this;
-        // Tracked state change.
-        setMaxColumnWidth(getColumns(state), widthsData, value);
+        const { widthsData } = this;
+        // Tracked state changes.
+        setMaxColumnWidth(this.state.columns, widthsData, value);
         // Untracked state change.
-        this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
+        this._columnWidthManager.maxColumnWidth = widthsData.maxColumnWidth;
     }
 
     /**
@@ -516,7 +498,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get maxRowSelection() {
-        return getMaxRowSelection(this.state);
+        return this.state.maxRowSelection;
     }
 
     set maxRowSelection(value) {
@@ -537,15 +519,15 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get minColumnWidth() {
-        return getMinColumnWidth(this.widthsData);
+        return this.widthsData.minColumnWidth;
     }
 
     set minColumnWidth(value) {
-        const { state, widthsData } = this;
+        const { widthsData } = this;
         // Tracked state change.
-        setMinColumnWidth(getColumns(state), widthsData, value);
+        setMinColumnWidth(this.state.columns, widthsData, value);
         // Untracked state change.
-        this._columnWidthManager.minColumnWidth = this.minColumnWidth;
+        this._columnWidthManager.minColumnWidth = widthsData.minColumnWidth;
     }
 
     /**
@@ -609,7 +591,6 @@ export default class LightningDatatable extends LightningElement {
             validValues: ['default', 'role-based'],
         });
         state.renderModeRoleBased = this._renderMode === 'role-based';
-        this._columnWidthManager.setRenderMode(this.renderMode);
         if (_renderConfig) {
             setVirtualize(state, _renderConfig.virtualize);
         }
@@ -623,7 +604,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get resizeColumnDisabled() {
-        return isResizeColumnDisabled(this.widthsData);
+        return this.widthsData.resizeColumnDisabled;
     }
 
     set resizeColumnDisabled(value) {
@@ -639,7 +620,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get resizeStep() {
-        return getResizeStep(this.widthsData);
+        return this.widthsData.resizeStep;
     }
 
     set resizeStep(value) {
@@ -655,15 +636,18 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get rowNumberOffset() {
-        return getRowNumberOffset(this.state);
+        return this.state.rowNumberOffset;
     }
 
     set rowNumberOffset(value) {
-        const { state, widthsData } = this;
+        const { state } = this;
         // Untracked state change.
         setRowNumberOffset(state, value);
         // Tracked state changes.
-        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
+        this._columnWidthManager.handleRowNumberOffsetChange(
+            state,
+            this.widthsData
+        );
     }
 
     /**
@@ -687,20 +671,20 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get showRowNumberColumn() {
-        return hasRowNumberColumn(this.state);
+        return this.state.showRowNumberColumn;
     }
 
     set showRowNumberColumn(value) {
-        const { state, _columns } = this;
+        const { state, _rawColumns } = this;
         // A mix of tracked and untracked state changes.
         this._columnWidthManager.handleRowNumberColumnChange(
-            getRowNumberOffset(state),
+            state.rowNumberOffset,
             value,
-            getColumns(state)
+            state.columns
         );
         // Untracked state change.
-        setShowRowNumberColumn(state, value);
-        this.updateColumns(_columns);
+        state.showRowNumberColumn = normalizeBoolean(value);
+        this.updateColumns(_rawColumns);
     }
 
     /**
@@ -710,7 +694,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get sortedBy() {
-        return getSortedBy(this.state);
+        return this.state.sortedBy;
     }
 
     set sortedBy(value) {
@@ -727,7 +711,7 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     get sortedDirection() {
-        return getSortedDirection(this.state);
+        return this.state.sortedDirection;
     }
 
     set sortedDirection(value) {
@@ -766,19 +750,19 @@ export default class LightningDatatable extends LightningElement {
         // Untracked state changes.
         setWrapTextMaxLines(state, value);
         this._columnWidthManager.wrapTextMaxLines = state.wrapTextMaxLines;
-        this.updateRowsAndCellIndexes(state);
+        this.updateRowsAndCells();
     }
 
     /************************** PUBLIC METHODS ***************************/
 
     /**
      * Returns data in each selected row.
-     * @returns {array} An array of data in each selected row.
+     * @returns {Array} An array of data in each selected row.
      */
     @api
     getSelectedRows() {
         const { state } = this;
-        const data = unwrap(getData(state));
+        const data = unwrap(state.data);
         const { rows } = state;
         const selectedRows = [];
         for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
@@ -824,20 +808,21 @@ export default class LightningDatatable extends LightningElement {
 
     get computedTableContainerClass() {
         return classSetToString({
-            'slds-table_header-fixed_container': !this.hideTableHeader,
+            'slds-table_header-fixed_container': !this.state.hideTableHeader,
             'slds-scrollable_x': !this._isResizing,
         });
     }
 
     get computedTableClass() {
-        const headerType = this.hideTableHeader ? 'hidden' : 'fixed';
+        const { state } = this;
+        const headerType = state.hideTableHeader ? 'hidden' : 'fixed';
         return classSetToString({
             'slds-table': true,
             [`slds-table_header-${headerType}`]: true,
             'slds-table_bordered': true,
             'slds-table_edit': true,
-            'slds-table_resizable-cols': this.hasResizebleColumns,
-            'slds-tree slds-table_tree': hasTreeDataType(this.state),
+            'slds-table_resizable-cols': !this.widthsData.resizeColumnDisabled,
+            'slds-tree slds-table_tree': hasTreeDataType(state),
         });
     }
 
@@ -849,8 +834,11 @@ export default class LightningDatatable extends LightningElement {
         const tableLayout = this._columnWidthManager.isAutoResizingUpdateQueued
             ? 'auto'
             : 'fixed';
-        let style = `table-layout:${tableLayout}`;
-        style += getCSSWidthStyleOfTable(this.widthsData);
+        let style = `table-layout: ${tableLayout};`;
+        const { tableWidth } = this.widthsData;
+        if (tableWidth) {
+            style += `width: ${tableWidth}px;`;
+        }
         return style;
     }
 
@@ -862,9 +850,9 @@ export default class LightningDatatable extends LightningElement {
      */
     get computedTbodyStyle() {
         const { state } = this;
-        const rowNumberOffset = getRowNumberOffset(state);
+        const { rowNumberOffset } = state;
         let style = '';
-        if (hasRowNumberColumn(state) && rowNumberOffset >= 0) {
+        if (state.showRowNumberColumn && rowNumberOffset >= 0) {
             const { firstVisibleIndex, bufferSize } = state;
             const firstRenderedRow = Math.max(
                 firstVisibleIndex - bufferSize,
@@ -890,35 +878,30 @@ export default class LightningDatatable extends LightningElement {
      *    is overflowing horizontally, we need to set the width in order
      *    to be able to view the remaining columns on scroll.
      */
-    get computedScrollerStyle() {
+    get computedScrollerYStyle() {
         const minHeight = this._actionsMinHeightStyle
             ? `${this._actionsMinHeightStyle};`
             : '';
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             return `${minHeight}overflow-x:auto`;
         }
-        return `${minHeight}${getCSSWidthStyleOfTable(this.widthsData)}`;
+        const { tableWidth } = this.widthsData;
+        return tableWidth ? `width: ${tableWidth}px;` : '';
     }
 
-    get scrollerXStyles() {
-        const styles = {
-            height: '100%',
-        };
-
+    get computedScrollerXStyle() {
+        let style = 'height: 100%;';
         if (this.showStatusBar) {
-            styles['padding-bottom'] = '3rem';
+            style += 'padding-bottom: 3rem;';
         }
-
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
-            styles['overflow-x'] = 'auto';
+            style += 'overflow-x: auto;';
         }
-
-        if (this.wrapTableHeader) {
+        if (this.state.wrapTableHeader) {
             // increase padding from 2rem to 3rem on the top when header wraps
-            styles['padding-top'] = '3rem';
+            style += 'padding-top: 3rem;';
         }
-
-        return styleToString(styles);
+        return style;
     }
 
     /**
@@ -931,17 +914,15 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedAriaLiveClassForNavMode() {
-        const keyboardMode = this.state.keyboardMode;
-        return classSet()
-            .add({
-                'slds-hide': keyboardMode !== 'NAVIGATION',
-                'slds-assistive-text': keyboardMode === 'NAVIGATION',
-            })
-            .toString();
+        const isNavMode = this.state.keyboardMode === KEYBOARD_NAVIGATION_MODE;
+        return classSetToString({
+            'slds-hide': !isNavMode,
+            'slds-assistive-text': isNavMode,
+        });
     }
 
     get computedAriaLiveClassForActionMode() {
-        const isActionMode = this.state.keyboardMode === 'ACTION';
+        const isActionMode = this.state.keyboardMode === KEYBOARD_ACTION_MODE;
         return classSetToString({
             'slds-hide': !isActionMode,
             'slds-assistive-text': isActionMode,
@@ -958,7 +939,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get hasValidKeyField() {
-        if (hasValidKeyField(this.state)) {
+        if (typeof this.state.keyField === 'string') {
             return true;
         }
         // eslint-disable-next-line no-console
@@ -968,12 +949,8 @@ export default class LightningDatatable extends LightningElement {
         return false;
     }
 
-    get numberOfColumns() {
-        return getColumns(this.state).length;
-    }
-
     get hasResizebleColumns() {
-        return !isResizeColumnDisabled(this.widthsData);
+        return !this.widthsData.resizeColumnDisabled;
     }
 
     get privateTypes() {
@@ -1004,15 +981,15 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get showSelectAllCheckbox() {
-        return !getHideSelectAllCheckbox(this.state);
+        return this.state.maxRowSelection !== 1;
     }
 
     get showStatusBar() {
-        return isInlineEditTriggered(this.state) && !this.suppressBottomBar;
+        return !this._suppressBottomBar && isInlineEditTriggered(this.state);
     }
 
     get tableError() {
-        return getTableError(this.state);
+        return this.state.errors.table;
     }
 
     get i18n() {
@@ -1030,12 +1007,12 @@ export default class LightningDatatable extends LightningElement {
     constructor() {
         super();
 
-        this._privateTypes = new DatatableTypes(this.constructor.customTypes);
         this._columnWidthManager = new ColumnWidthManager(this.widthsData);
-        this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
+        this._privateTypes = new DatatableTypes(this.constructor.customTypes);
 
         this._renderManager = new RenderManager();
-        this.getWrapperHeight = getDTWrapperHeight.bind(this);
+        this.getWrapperHeight = () =>
+            getScrollerXFromScrollerY(getScrollerY(this.template)).offsetHeight;
     }
 
     /**
@@ -1043,84 +1020,75 @@ export default class LightningDatatable extends LightningElement {
      */
     connectedCallback() {
         const { template } = this;
-        const {
-            handleResizeColumn,
-            handleUpdateColumnSort,
-            handleCellFocusByClick,
-            handleFalseCellBlur,
-            handleSelectionCellClick,
-        } = this;
 
         // Row selection and de-selection
-        this.addEventListener(
-            'rowselection',
-            handleRowSelectionChange.bind(this)
-        );
-        template.addEventListener(
-            'selectallrows',
-            handleSelectionCellClick.bind(this)
-        );
-        template.addEventListener(
-            'deselectallrows',
-            handleSelectionCellClick.bind(this)
-        );
-        template.addEventListener(
-            'selectrow',
-            handleSelectionCellClick.bind(this)
-        );
-        template.addEventListener(
-            'deselectrow',
-            handleSelectionCellClick.bind(this)
-        );
+        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', handleResizeColumn.bind(this));
+        template.addEventListener('resizecol', (event) => {
+            this.handleResizeColumn(event);
+        });
         // Column sorting
-        template.addEventListener(
-            'privateupdatecolsort',
-            handleUpdateColumnSort.bind(this)
-        );
+        template.addEventListener('privateupdatecolsort', (event) => {
+            this.handleUpdateColumnSort(event);
+        });
         // Cell interaction
-        template.addEventListener(
-            'privatecellkeydown',
-            handleKeydownOnCell.bind(this)
-        );
-        template.addEventListener(
-            'privatecellfocusedbyclick',
-            handleCellFocusByClick.bind(this)
-        );
-        template.addEventListener(
-            'privatecellfalseblurred',
-            handleFalseCellBlur.bind(this)
-        );
+        template.addEventListener('privatecellkeydown', (event) => {
+            this.handleKeydownOnCell(event);
+        });
+        template.addEventListener('privatecellfocusedbyclick', (event) => {
+            this.handleCellFocusByClick(event);
+        });
+        template.addEventListener('privatecellfalseblurred', (event) => {
+            this.handleFalseCellBlur(event);
+        });
         // Row level actions
-        template.addEventListener(
-            'privatecellactiontriggered',
-            handleRowActionTriggered.bind(this)
-        );
-        template.addEventListener(
-            'privatecellactionmenuopening',
-            handleLoadDynamicActions.bind(this)
-        );
-        template.addEventListener(
-            'privatecellbuttonclicked',
-            handleCellButtonClick.bind(this)
-        );
+        template.addEventListener('privatecellactiontriggered', (event) => {
+            this.handleRowActionTriggered(event);
+        });
+        template.addEventListener('privatecellactionmenuopening', (event) => {
+            this.handleLoadDynamicActions(event);
+        });
+        template.addEventListener('privatecellbuttonclicked', (event) => {
+            this.handleCellButtonClick(event);
+        });
 
-        // Header Actions
+        // Header actions
         template.addEventListener(
             'privatecellheaderactionmenuopening',
-            handleHeaderActionMenuOpening.bind(this)
+            (event) => {
+                this.handleHeaderActionMenuOpening(event);
+            }
         );
         template.addEventListener(
             'privatecellheaderactionmenuclosed',
-            handleHeaderActionMenuClosed.bind(this)
+            (event) => {
+                this.handleHeaderActionMenuClosed(event);
+            }
         );
         template.addEventListener(
             'privatecellheaderactiontriggered',
-            handleHeaderActionTriggered.bind(this)
+            (event) => {
+                this.handleHeaderActionTriggered(event);
+            }
         );
         // Inline edit
-        template.addEventListener('privateeditcell', handleEditCell.bind(this));
+        template.addEventListener('privateeditcell', (event) => {
+            this.handleEditCell(event);
+        });
     }
 
     /**
@@ -1143,21 +1111,8 @@ export default class LightningDatatable extends LightningElement {
             'aria-describedby': this.ariaDescribedBy,
         });
 
-        let { _privateWidthObserver } = this;
-        if (!_privateWidthObserver) {
-            _privateWidthObserver = new LightningDatatableResizeObserver(
-                template,
-                state,
-                widthsData,
-                _columnWidthManager
-            );
-            this._privateWidthObserver = _privateWidthObserver;
-        } else if (!_privateWidthObserver.isConnected()) {
-            _privateWidthObserver.observe(template);
-        }
-
         if (_columnWidthManager.isResizingUpdateQueued) {
-            const columns = getColumns(state);
+            const { columns } = state;
             const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(
                 widthsData,
                 columns
@@ -1168,26 +1123,44 @@ export default class LightningDatatable extends LightningElement {
                 columns,
                 widthsData
             );
-
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
             this.updateTableAndScrollerStyleOnRender();
         }
 
+        let { _widthObserver } = this;
+        if (!_widthObserver) {
+            // Tracked state changes.
+            _widthObserver = new LightningDatatableResizeObserver(
+                template,
+                () => {
+                    // Tracked state change.
+                    _columnWidthManager.adjustColumnsSizeAfterResize(
+                        template,
+                        state.columns,
+                        widthsData
+                    );
+                }
+            );
+            this._widthObserver = _widthObserver;
+        } else if (!_widthObserver.isConnected()) {
+            _widthObserver.observe(template);
+        }
+
         // Managing the cell widths is only required for the role-based table
         if (state.renderModeRoleBased) {
             // TODO: Look to further optimize - Do this only when required
             recomputeCellStyles(this.privateTypes, state);
         }
 
-        handlePrefetch.call(this, template, state);
+        handlePrefetch.call(this);
 
         // customerSelectedRows is only valid till render, after it, the one
         // used should be the one from the state.
         this._customerSelectedRows = null;
         // Set the previous focused cell to null after render is done.
-        resetCellToFocusFromPrev(state);
+        state.cellToFocusNext = undefined;
 
         // Reset focus styles on re-render.
         if (this._shouldResetFocus) {
@@ -1207,7 +1180,7 @@ export default class LightningDatatable extends LightningElement {
                     !cellElement.parentElement.classList.contains(FOCUS_CLASS)
                 ) {
                     // Tracked state change.
-                    setFocusActiveCell(template, state, null, null, false);
+                    setFocusActiveCell(state, template, null, null, false);
                 }
             }
         }
@@ -1237,21 +1210,20 @@ export default class LightningDatatable extends LightningElement {
     }
 
     updateTableAndScrollerStyleOnRender() {
-        const role = '[role="' + this.computedTableRole + '"]';
-        const tableElement = this.template.querySelector(role);
-        const scrollYEle = this.template.querySelector('.slds-scrollable_y');
+        const scrollYEle = getScrollerY(this.template);
+        const tableElement = getGridContainerFromScrollerY(scrollYEle);
         if (tableElement) {
             tableElement.style = this.computedTableStyle;
         }
         if (scrollYEle) {
-            scrollYEle.style = this.computedScrollerStyle;
+            scrollYEle.style = this.computedScrollerYStyle;
         }
     }
 
     disconnectedCallback() {
-        const { _privateWidthObserver } = this;
-        if (_privateWidthObserver) {
-            _privateWidthObserver.disconnect();
+        const { _widthObserver } = this;
+        if (_widthObserver) {
+            _widthObserver.disconnect();
         }
 
         this._renderManager.disconnectResizeObserver();
@@ -1259,6 +1231,24 @@ export default class LightningDatatable extends LightningElement {
 
     /************************** EVENT HANDLERS ***************************/
 
+    handleCellButtonClick = handleCellButtonClick;
+
+    handleEditCell = handleEditCell;
+
+    handleHeaderActionMenuClosed = handleHeaderActionMenuClosed;
+
+    handleHeaderActionMenuOpening = handleHeaderActionMenuOpening;
+
+    handleHeaderActionTriggered = handleHeaderActionTriggered;
+
+    handleKeydownOnCell = handleKeydownOnCell;
+
+    handleLoadDynamicActions = handleLoadDynamicActions;
+
+    handleRowSelectionChange = handleRowSelectionChange;
+
+    handleRowActionTriggered = handleRowActionTriggered;
+
     handleCustomTypesChange() {
         const assignedNodes = this.template
             .querySelector('slot[name="customdatatypes"]')
@@ -1269,33 +1259,31 @@ export default class LightningDatatable extends LightningElement {
                 this._privateTypes = new DatatableTypes(
                     provider.getDataTypes()
                 );
-                this.updateColumns(this._columns);
+                this.updateColumns(this._rawColumns);
             }
         }
     }
 
     /**
-     * Handles the `keydown` event on <table> and the
+     * Handles the 'keydown' event on <table> and the
      * corresponding <div> on the role-based table
      *
-     * @param {KeyboardEvent} event - `keydown`
+     * @param {KeyboardEvent} event - 'keydown'
      */
-    handleTableKeydown(event) {
-        handleKeydownOnTable.call(this, event);
-    }
+    handleTableKeydown = handleKeydownOnTable;
 
     /**
-     * Handles the `keydown` event on data row <tr> (table-based) and div[role="row"] (role-based)
+     * Handles the 'keydown' event on data row <tr> (table-based) and div[role="row"] (role-based)
      *
-     * @param {KeyboardEvent} event - `keydown`
+     * @param {KeyboardEvent} event - 'keydown'
      */
     handleKeydownOnDataRow(event) {
         const { state } = this;
         // we probably should not be doing this unless we actually are interested in it
-        if (state.keyboardMode === 'NAVIGATION' && state.rowMode === true) {
+        if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.rowMode) {
             event.stopPropagation();
             const { currentTarget: tr } = event;
-            reactToKeyboardOnRow(this, state, {
+            reactToKeyboardOnRow(this, {
                 target: tr,
                 detail: {
                     keyCode: event.keyCode,
@@ -1310,23 +1298,23 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `scroll` event on the table container
+     * Handles the 'scroll' event on the table container
      *
-     * @param {Event} event - `scroll`
+     * @param {Event} event - 'scroll'
      */
     handleHorizontalScroll(event) {
         handleInlineEditPanelScroll.call(this, event);
     }
 
     /**
-     * Handles the `scroll` event on the child of the
-     * table container at div.slds-scrollable_y
+     * Handles the 'scroll' event on the child of the
+     * table container at div.slds-scrollable_y.
      *
-     * @param {Event} event - `scroll`
+     * @param {Event} event - 'scroll'
      */
     handleVerticalScroll(event) {
         const { state } = this;
-        if (this.enableInfiniteLoading) {
+        if (state.enableInfiniteLoading) {
             handleLoadMoreCheck.call(this, event);
         }
 
@@ -1348,15 +1336,13 @@ export default class LightningDatatable extends LightningElement {
      *
      * @param {MouseEvent} event - `click`
      */
-    handleCellClick(event) {
+    handleTableCellClick(event) {
         // handles the case when clicking on the margin/pading of the td/th
-        const targetTagName = event.target.tagName.toLowerCase();
-        const targetRole = event.target.getAttribute('role');
-
-        if (isCellElement(targetTagName, targetRole)) {
+        const { target } = event;
+        if (isCellElement(target)) {
             // get the row/col key value from the primitive cell.
             const { rowKeyValue, colKeyValue } =
-                event.target.querySelector(':first-child');
+                target.querySelector(':first-child');
 
             const { state, template } = this;
             if (
@@ -1378,9 +1364,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `privateupdatecolsort` event on lightning-datatable
+     * Handles the 'privateupdatecolsort' event on lightning-datatable
      *
-     * @param {CustomEvent} event - `privateupdatecolsort`
+     * @param {CustomEvent} event - 'privateupdatecolsort'
      */
     handleUpdateColumnSort(event) {
         event.stopPropagation();
@@ -1393,9 +1379,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `resizecol` event on lightning-datatable
+     * Handles the 'resizecol' event on lightning-datatable
      *
-     * @param {CustomEvent} event - `resizecol`
+     * @param {CustomEvent} event - 'resizecol'
      */
     handleResizeColumn(event) {
         event.stopPropagation();
@@ -1403,21 +1389,21 @@ export default class LightningDatatable extends LightningElement {
         const { colIndex, widthDelta: delta } = event.detail;
         if (delta !== 0) {
             resizeColumnWithDelta(
-                getColumns(state),
+                state.columns,
                 this.widthsData,
                 colIndex,
                 delta
             );
             this.fireOnResize(true);
-            this.safariHeaderFix();
+            this.fixHeaderForSafari();
         }
     }
 
     /**
-     * Handles the `privateresizestart` event on the <tr> and the corresponding
+     * Handles the 'privateresizestart' event on the <tr> and the corresponding
      * <div> in the role-based table on the column header row
      *
-     * @param {CustomEvent} event - `privateresizestart`
+     * @param {CustomEvent} event - 'privateresizestart'
      */
     handleResizeStart(event) {
         event.stopPropagation();
@@ -1425,10 +1411,10 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `privateresizeend` event on the <tr> and the corresponding
+     * Handles the 'privateresizeend' event on the <tr> and the corresponding
      * <div> in the role-based table on the column header row
      *
-     * @param {CustomEvent} event - `privateresizeend`
+     * @param {CustomEvent} event - 'privateresizeend'
      */
     handleResizeEnd(event) {
         event.stopPropagation();
@@ -1457,9 +1443,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `privatecellfocusedbyclick` event on lightning-datatable
+     * Handles the 'privatecellfocusedbyclick' event on lightning-datatable
      *
-     * @param {CustomEvent} event - `privatecellfocusedbyclick`
+     * @param {CustomEvent} event - 'privatecellfocusedbyclick'
      */
     handleCellFocusByClick(event) {
         event.stopPropagation();
@@ -1473,14 +1459,14 @@ export default class LightningDatatable extends LightningElement {
                 updateRowTabIndex(state, rowIndex, -1);
             }
             this.setActiveCell(rowKeyValue, colKeyValue);
-            refocusCellElement(this.template, state, needsRefocusOnCellElement);
+            refocusCellElement(state, this.template, needsRefocusOnCellElement);
         }
     }
 
     /**
-     * Handles the `privatecellfalseblurred` event on lightning-datatable
+     * Handles the 'privatecellfalseblurred' event on lightning-datatable
      *
-     * @param {CustomEvent} event - `privatecellfalseblurred`
+     * @param {CustomEvent} event - 'privatecellfalseblurred'
      */
     handleFalseCellBlur(event) {
         event.stopPropagation();
@@ -1490,21 +1476,19 @@ export default class LightningDatatable extends LightningElement {
             this.setActiveCell(rowKeyValue, colKeyValue);
         }
         // Tracked state change.
-        setFocusActiveCell(this.template, state);
+        setFocusActiveCell(state, this.template);
     }
 
     /**
-     * Handles the `focusin` event on <table> and the corresponding
+     * Handles the 'focusin' event on <table> and the corresponding
      * <div> on the role-based table
      *
-     * @param {FocusEvent} event - `focusin`
+     * @param {FocusEvent} event - 'focusin'
      */
-    handleTableFocusIn(event) {
-        handleDatatableFocusIn.call(this, event);
-    }
+    handleTableFocusIn = handleDatatableFocusIn;
 
     /**
-     * Handles the `focusout` event on <table> and the corresponding
+     * Handles the 'focusout' event on <table> and the corresponding
      * <div> on the role-based table
      *
      * This gets called both when we expect the table to lose focus
@@ -1515,7 +1499,7 @@ export default class LightningDatatable extends LightningElement {
      * _shouldResetFocus, which will be true if and only if focus was
      * lost due to a renderedRows change for a virtualized table.
      *
-     * @param {FocusEvent} event - `focusout`
+     * @param {FocusEvent} event - 'focusout'
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
@@ -1526,31 +1510,27 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `ieditfinished` event on the inline edit panel -
+     * Handles the 'ieditfinished' event on the inline edit panel -
      * `lightning-primitive-datatable-iedit-panel`
      *
-     * @param {CustomEvent} event - `ieditfinished`
+     * @param {CustomEvent} event - 'ieditfinished'
      */
-    handleInlineEditFinish(event) {
-        handleInlineEditFinish.call(this, event);
-    }
+    handleInlineEditFinish = handleInlineEditFinish;
 
     /**
-     * Handles the `masscheckboxchange` event on the inline edit panel -
+     * Handles the 'masscheckboxchange' event on the inline edit panel -
      * `lightning-primitive-datatable-iedit-panel`
      *
-     * @param {CustomEvent} event - `masscheckboxchange`
+     * @param {CustomEvent} event - 'masscheckboxchange'
      */
-    handleMassCheckboxChange(event) {
-        handleMassCheckboxChange.call(this, event);
-    }
+    handleMassCheckboxChange = handleMassCheckboxChange;
 
     /**
-     * Handles the `privatesave` event on the status bar -
+     * Handles the 'privatesave' event on the status bar -
      * `lightning-primitive-datatable-status-bar` and
      * fires the `save` custom event
      *
-     * @param {CustomEvent} event - `privatesave`
+     * @param {CustomEvent} event - 'privatesave'
      */
     handleInlineEditSave(event) {
         event.stopPropagation();
@@ -1567,11 +1547,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Handles the `privatecancel` event on the status bar -
+     * Handles the 'privatecancel' event on the status bar -
      * `lightning-primitive-datatable-status-bar` and
      * fires the `cancel` custom event
      *
-     * @param {CustomEvent} event - `privatecancel`
+     * @param {CustomEvent} event - 'privatecancel'
      */
     handleInlineEditCancel(event) {
         event.stopPropagation();
@@ -1593,17 +1573,16 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * @event LightningDatatable#onprivatelookupitempicked We need to augment the original event LightningFormattedLookup#onprivatelookupitempicked
-     * @type {object}
-     * @property {string} recordId
-     * @property {number} rowIndex
-     * @property {string} rowKeyValue
+     * @type {Object}
+     * @property {String} recordId
+     * @property {Number} rowIndex
+     * @property {String} rowKeyValue
      */
-
     /**
-     * Handles the `privatelookupitempicked` event from the lightning-formatted-lookup or force-lookup
-     * `lightning-primitive-datatable-status-bar` and fires the augmented `privatelookupitempicked` custom event
+     * Handles the 'privatelookupitempicked' event from the lightning-formatted-lookup or force-lookup
+     * `lightning-primitive-datatable-status-bar` and fires the augmented 'privatelookupitempicked' custom event
      *
-     * @param {CustomEvent} event - `privatelookupitempicked`
+     * @param {CustomEvent} event - 'privatelookupitempicked'
      * @fires LightningDatatable#onprivatelookupitempicked
      */
     handlePrivateLookupItemPicked(event) {
@@ -1635,55 +1614,65 @@ export default class LightningDatatable extends LightningElement {
 
     /************************ EVENT DISPATCHERS **************************/
 
-    fireSelectedRowsChange(selectedRows, config) {
-        const event = new CustomEvent('rowselection', {
-            detail: { selectedRows, config: config || {} },
-        });
-
-        this.dispatchEvent(event);
+    fireSelectedRowsChange(selectedRows, config = {}) {
+        this.dispatchEvent(
+            new CustomEvent('rowselection', {
+                detail: { selectedRows, config },
+            })
+        );
     }
 
     fireSortedColumnChange(fieldName, columnKey, sortDirection) {
-        const event = new CustomEvent('sort', {
-            detail: { fieldName, columnKey, sortDirection },
-        });
-        this.dispatchEvent(event);
+        this.dispatchEvent(
+            new CustomEvent('sort', {
+                detail: { fieldName, columnKey, sortDirection },
+            })
+        );
     }
 
     fireOnResize(isUserTriggered) {
-        const { state, widthsData } = this;
-        const event = new CustomEvent('resize', {
-            detail: {
-                columnWidths: getCustomerColumnWidths(
-                    getColumns(state),
-                    widthsData
-                ),
-                isUserTriggered: !!isUserTriggered,
-            },
-        });
-        this.dispatchEvent(event);
+        this.dispatchEvent(
+            new CustomEvent('resize', {
+                detail: {
+                    columnWidths: getCustomerColumnWidths(
+                        this.state.columns,
+                        this.widthsData
+                    ),
+                    isUserTriggered: !!isUserTriggered,
+                },
+            })
+        );
     }
 
     /************************* HELPER FUNCTIONS **************************/
 
     updateRowsState() {
-        const { state, widthsData, template } = this;
-        // calculate cell to focus next before indexes are updated
-        setCellToFocusFromPrev(state, template);
+        this.updateRowsBeforeIndexes();
+        this.updateRowsAndCells();
+        this.updateRowsAfterIndexes();
+    }
 
-        this.updateRowsAndCellIndexes(state);
+    updateRowsBeforeIndexes() {
+        // Untracked state change.
+        setCellToFocusFromPrev(this.state, this.template);
+    }
 
+    updateRowsAfterIndexes() {
+        const { state, widthsData } = this;
         if (this.viewportRendering || state.virtualize) {
             this._renderManager.updateViewportRendering(
-                this.state,
+                state,
                 this.gridContainer,
                 !!state.virtualize
             );
         }
 
+        // Tracked state changes.
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        // update celltofocus next to null if the row still exists after indexes calculation
+        // Untracked state change.
+        // Unset the cellToFocusNext if the row still exists after indexes calculation.
         updateCellToFocusFromPrev(state);
+        // A mix of tracked and untracked state changes.
         syncSelectedRowsKeys(state, this.getSelectedRows()).ifChanged(() => {
             // Only trigger row selection event once after all the setters have executed
             // Otherwise, event can be fired with stale data if not all setters have been triggered
@@ -1697,52 +1686,77 @@ export default class LightningDatatable extends LightningElement {
                 });
             }
         });
+        // Untracked state change.
         syncActiveCell(state);
 
-        if (state.keyboardMode === 'NAVIGATION') {
+        if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
+            // Tracked state changes.
             updateTabIndexActiveCell(state);
             updateTabIndexActiveRow(state);
         }
-        // if there is previously focused cell which was deleted set focus from celltofocus next
-        if (state.cellToFocusNext && state.activeCell) {
-            setFocusActiveCell(this.template, this.state);
+        // if there is previously focused cell which was deleted set focus from cellToFocusNext
+        if (state.activeCell && state.cellToFocusNext) {
+            // Tracked state change.
+            setFocusActiveCell(state, this.template);
         }
     }
 
     updateColumns(columns) {
-        const { state, widthsData, template } = this;
+        const { state } = this;
+        this.updateColumnsBeforeIndexes(columns);
+        state.headerIndexes = generateHeaderIndexes(state.columns);
+        this.updateRowsAndCells();
+        this.updateColumnsAfterIndexes();
+    }
+
+    updateColumnsBeforeIndexes(columns) {
+        const { state } = this;
         const hadTreeDataTypePreviously = hasTreeDataType(state);
-        // calculate cell to focus next before indexes are updated
-        setCellToFocusFromPrev(state, template);
+        // Untracked state changes.
+        // Calculate cell to focus next before indexes are updated.
+        setCellToFocusFromPrev(state, this.template);
         normalizeColumns(state, columns, this.privateTypes);
-        setDirtyValues(state, this._draftValues);
         updateRowNavigationMode(hadTreeDataTypePreviously, state);
-        state.headerIndexes = generateHeaderIndexes(getColumns(state));
+        // Tracked state changes.
+        setDirtyValues(state, this._draftValues);
         // Updates state.wrapText and when isWrappableType, sets internal header actions
-        updateHeaderActions(state);
-        this.updateRowsAndCellIndexes(state);
+        updateHeaderInternalActions(state);
+    }
+
+    updateColumnsAfterIndexes() {
+        const { state, widthsData } = this;
+
+        // Tracked state changes.
         updateBulkSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        updateColumnWidthsMetadata(getColumns(state), widthsData);
-        // set the celltofocus next to null if the column still exists after indexes calculation
+        updateColumnWidthsMetadata(state.columns, widthsData);
+        // Unset the cellToFocusNext if the column still exists after indexes calculation.
         updateCellToFocusFromPrev(state);
 
-        if (getColumns(state).length !== getColumnsWidths(widthsData).length) {
-            if (getData(state).length > 0) {
-                // when there are column changes, update the active cell
-                syncActiveCell(state);
-            }
+        if (
+            state.data.length > 0 &&
+            state.columns.length !== widthsData.columnWidths.length
+        ) {
+            // Untracked state change.
+            // When there are column changes, update the active cell.
+            syncActiveCell(state);
         }
-        if (state.keyboardMode === 'NAVIGATION') {
+        if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE) {
+            // Tracked state changes.
             updateTabIndexActiveCell(state);
             updateTabIndexActiveRow(state);
         }
-        // if there is previously focused cell which was deleted set focus from celltofocus next
-        if (state.cellToFocusNext && state.activeCell) {
-            setFocusActiveCell(this.template, this.state);
+        // If there is previously focused cell which was deleted set focus from cellToFocusNext.
+        if (state.activeCell && state.cellToFocusNext) {
+            // Tracked state change.
+            setFocusActiveCell(state, this.template);
         }
     }
 
+    updateRowsAndCells() {
+        updateRowsAndCellIndexes(this.state, this._privateTypes);
+    }
+
     updateVirtualizedRowHeights() {
         const state = this.state;
         const virtualizedRows = state.virtualize && this.renderedRows.length;
@@ -1768,10 +1782,9 @@ export default class LightningDatatable extends LightningElement {
                     state.rowHeight = height;
                     resetTableHeight(state);
                     state.rows.forEach((row) => {
-                        row.style = styleToString({
-                            position: 'absolute',
-                            top: `${row.rowIndex * height}px`,
-                        });
+                        row.style = `position:absolute;top:${
+                            row.rowIndex * height
+                        }px;`;
                     });
                 }
             }
@@ -1780,19 +1793,22 @@ export default class LightningDatatable extends LightningElement {
 
     setSelectedRows(value) {
         setSelectedRowsKeys(this.state, value);
-        handleRowSelectionChange.call(this);
+        this.handleRowSelectionChange();
     }
 
     setActiveCell(rowKeyValue, colKeyValue) {
-        const { template, state } = this;
+        const { state, template } = this;
         const { rowIndex, colIndex } = getIndexesByKeys(
             state,
             rowKeyValue,
             colKeyValue
         );
-        setBlurActiveCell(template, state);
-        updateActiveCell(state, rowKeyValue, colKeyValue);
-        addFocusStylesToActiveCell(template, state);
+        // Tracked state change.
+        setBlurActiveCell(state, template);
+        // Untracked state change.
+        state.activeCell = { rowKeyValue, colKeyValue };
+        // Tracked state changes.
+        addFocusStylesToActiveCell(state, template);
         updateCellTabIndex(state, rowIndex, colIndex, 0);
     }
 
@@ -1800,30 +1816,27 @@ export default class LightningDatatable extends LightningElement {
      * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
      */
     getViewableRect() {
-        const scrollerX = this.template
-            .querySelector('.slds-scrollable_x')
-            .getBoundingClientRect();
-        const scrollerY = this.template
-            .querySelector('.slds-scrollable_y')
-            .getBoundingClientRect();
+        const { template } = this;
+        const scrollerY = getScrollerY(template);
+        const scrollerYRect = scrollerY.getBoundingClientRect();
+        const scrollerX = getScrollerXFromScrollerY(scrollerY);
+        const scrollerXRect = scrollerX.getBoundingClientRect();
 
         return {
-            left: scrollerX.left,
-            right: scrollerX.right,
-            top: scrollerY.top,
-            bottom: scrollerY.bottom,
+            left: scrollerXRect.left,
+            right: scrollerXRect.right,
+            top: scrollerYRect.top,
+            bottom: scrollerYRect.bottom,
         };
     }
 
     // W-6363867, W-7143375 Safari Refresh Bug
-    safariHeaderFix() {
+    fixHeaderForSafari() {
         if (isSafari) {
             const thead = this.template.querySelector('thead');
-
             if (thead) {
                 /* Safari hack: hide and show the table head to force a browser repaint */
                 thead.style.display = 'none';
-
                 // eslint-disable-next-line @lwc/lwc/no-async-operation
                 requestAnimationFrame(() => {
                     thead.style.display = '';
@@ -1836,10 +1849,11 @@ export default class LightningDatatable extends LightningElement {
      * @returns { rowIndex: number, rowKeyValue: string } Compute the information to use to generate the lookupItemPicked event based on the row where the event comes from
      */
     computeRowLookupItemPickedInformation(currentTarget) {
-        const rowIndex =
-            Number.parseInt(currentTarget.dataset.rowNumber, 10) - 1; // Row number always start to 1, so we convert it to be able to use it for an array
-        const rowKeyValue = currentTarget.dataset.rowKeyValue;
-
+        const { dataset } = currentTarget;
+        // Row number always start to 1, so we convert it to be able to use
+        // it for an array
+        const rowIndex = Number.parseInt(dataset.rowNumber, 10) - 1;
+        const { rowKeyValue } = dataset;
         return { rowIndex, rowKeyValue };
     }
 }