lightning-base-components 1.21.2-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,
-    isIE11,
-    isSafari,
     synchronizeAttrs,
 } 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,
-    updateTabIndex,
-    getIndexesByKeys,
-    updateTabIndexActiveCell,
-    updateTabIndexActiveRow,
-    unsetRowNavigationMode,
-    updateRowNavigationMode,
-    handleDatatableFocusOut,
-    handleDatatableFocusIn,
-    updateTabIndexRow,
-    getIndexesActiveCell,
-    reactToKeyboardOnRow,
-    setCellToFocusFromPrev,
-    updateCellToFocusFromPrev,
-    resetCellToFocusFromPrev,
-    datatableHasFocus,
-    setCellClickedForFocus,
-    handleKeydownOnTable,
-    addFocusStylesToActiveCell,
-    refocusCellElement,
-    isCellElement,
-    getActiveCellElement,
-    getDataRow,
-    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,
-    setInfiniteLoading,
+    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,36 +181,43 @@ 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.
+     */
+    ariaDescribedBy = null;
 
     /**
      * Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths.
      * Set to 'auto' for column widths that are based on the width of the column content and the table width. The default is 'fixed'.
-     * @type {string}
+     * @type {String}
      * @default fixed
      */
     @api
@@ -240,17 +226,18 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set columnWidthsMode(value) {
+        const { widthsData } = this;
         const normalizedValue = normalizeString(value, {
             fallbackValue: 'fixed',
             validValues: ['fixed', 'auto'],
         });
+        // Untracked state change.
         this._columnWidthManager.columnWidthMode = normalizedValue;
-
-        const { state, widthsData } = this;
         if (widthsData.columnWidthsMode !== normalizedValue) {
-            this._columnWidthManager.handleWidthModeChange(getColumns(state));
+            // Tracked state changes.
+            this._columnWidthManager.handleWidthModeChange(this.state.columns);
         }
-
+        // Untracked state change.
         widthsData.columnWidthsMode = normalizedValue;
     }
 
@@ -258,43 +245,47 @@ export default class LightningDatatable extends LightningElement {
      * Array of the columns object that's used to define the data types.
      * Required properties include 'label', 'fieldName', and 'type'. The default type is 'text'.
      * See the Documentation tab for more information.
-     * @type {array}
+     * @type {Array}
      */
     @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);
     }
 
     /**
      * The array of data to be displayed.
-     * @type {array}
+     * @type {Array}
      */
     @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 { data: previousData } = state;
         const data = Array.isArray(value) ? value : [];
 
-        const previousData = getData(this.state);
-        const columns = getColumns(this.state);
-        this._columnWidthManager.handleDataChange(previousData, data, columns);
-
-        // set data in state
-        setData(this.state, value);
+        // Untracked state change.
+        state.data = data;
+        this._columnWidthManager.handleDataChange(
+            previousData,
+            data,
+            state.columns
+        );
 
         // do necessary updates since rows have changed
-        if (hasValidKeyField(this.state)) {
+        if (this.hasValidKeyField) {
             this.updateRowsState();
-            resetTableHeight(this.state);
+            resetTableHeight(state);
         }
         if (this._customerSelectedRows) {
             this.setSelectedRows(this._customerSelectedRows);
@@ -305,22 +296,23 @@ export default class LightningDatatable extends LightningElement {
      * Specifies the default sorting direction on an unsorted column.
      * Valid options include 'asc' and 'desc'.
      * The default is 'asc' for sorting in ascending order.
-     * @type {string}
+     * @type {String}
      * @default asc
      */
     @api
     get defaultSortDirection() {
-        return getDefaultSortDirection(this.state);
+        return this.state.defaultSortDirection;
     }
 
     set defaultSortDirection(value) {
-        setDefaultSortDirection(this.state, value);
-        updateSorting(this.state);
+        const { state } = this;
+        setDefaultSortDirection(state, value);
+        updateSorting(state);
     }
 
     /**
      * The current values per row that are provided during inline edit.
-     * @type {object}
+     * @type {Object}
      */
     @api
     get draftValues() {
@@ -328,41 +320,44 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set draftValues(value) {
+        const { state } = this;
         this._draftValues = value;
-        setDirtyValues(this.state, value);
+        setDirtyValues(state, value);
 
-        if (hasValidKeyField(this.state)) {
-            this.updateRowsAndCellIndexes(this.state);
+        if (this.hasValidKeyField) {
+            this.updateRowsAndCells();
         }
 
-        updateActiveCellTabIndexAfterSync(this.state);
+        updateActiveCellTabIndexAfterSync(state);
     }
 
     /**
      * If present, you can load a subset of data and then display more
      * when users scroll to the end of the table.
      * Use with the onloadmore event handler to retrieve more data.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
     get enableInfiniteLoading() {
-        return isInfiniteLoadingEnabled(this.state);
+        return this.state.enableInfiniteLoading;
     }
 
     set enableInfiniteLoading(value) {
-        setInfiniteLoading(this.state, value);
-        handlePrefetch.call(this, this.template, this.state);
+        const { state } = this;
+        // Untracked state change.
+        setEnableInfiniteLoading(state, value);
+        handlePrefetch.call(this);
     }
 
     /**
      * Specifies an object containing information about cell level, row level, and table level errors.
      * When it's set, error messages are displayed on the table accordingly.
-     * @type {object}
+     * @type {Object}
      */
     @api
     get errors() {
-        return getErrors(this.state);
+        return this.state.errors;
     }
 
     set errors(value) {
@@ -372,7 +367,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * If present, the checkbox column for row selection is hidden.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -387,17 +382,17 @@ export default class LightningDatatable extends LightningElement {
         this._columnWidthManager.handleCheckboxColumnChange(
             state.hideCheckboxColumn,
             normalizedValue,
-            getColumns(state)
+            state.columns
         );
-
-        this.state.hideCheckboxColumn = normalizedValue;
+        // Untracked state changes.
+        state.hideCheckboxColumn = normalizedValue;
         // update the columns metadata again to update the status.
-        this.updateColumns(this._columns);
+        this.updateColumns(this._rawColumns);
     }
 
     /**
      * If present, the table header is hidden.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -406,12 +401,13 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set hideTableHeader(value) {
+        // Untracked state change.
         this.state.hideTableHeader = normalizeBoolean(value);
     }
 
     /**
-     * If present, the table header is wrapped up to 3 lines.
-     * @type {boolean}
+     * If present, the table header is wrapped.
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -420,37 +416,42 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set wrapTableHeader(value) {
+        // Untracked state change.
         this.state.wrapTableHeader = normalizeBoolean(value);
     }
 
     /**
      * If present, a spinner is shown to indicate that more data is loading.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
     get isLoading() {
-        return isLoading(this.state);
+        return this.state.isLoading;
     }
 
     set isLoading(value) {
+        // Tracked state change.
         setLoading(this.state, value);
     }
 
     /**
      * Required for better performance. Associates each row with a unique ID.
      * key-field is case sensitive and must match the value you provide in the data array.
-     * @type {string}
+     * @type {String}
      * @required
      */
     @api
     get keyField() {
-        return getKeyField(this.state);
+        return this.state.keyField;
     }
 
     set keyField(value) {
-        setKeyField(this.state, value);
-        setDirtyValues(this.state, this._draftValues);
+        const { state } = this;
+        // Untracked state change.
+        setKeyField(state, value);
+        // Tracked state change.
+        setDirtyValues(state, this._draftValues);
         this.updateRowsState();
     }
 
@@ -458,7 +459,7 @@ export default class LightningDatatable extends LightningElement {
      * Determines when to trigger infinite loading based on
      * how many pixels the table's scroll position is from the bottom of the table.
      * The default is 20.
-     * @type {number}
+     * @type {Number}
      * @default 20
      */
     @api
@@ -473,34 +474,38 @@ export default class LightningDatatable extends LightningElement {
     /**
      * The maximum width for all columns.
      * The default is 1000px.
-     * @type {number}
+     * @type {Number}
      * @default 1000px
      */
     @api
     get maxColumnWidth() {
-        return getMaxColumnWidth(this.widthsData);
+        return this.widthsData.maxColumnWidth;
     }
 
     set maxColumnWidth(value) {
-        const { state, widthsData } = this;
-        setMaxColumnWidth(getColumns(state), widthsData, value);
-        this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
+        const { widthsData } = this;
+        // Tracked state changes.
+        setMaxColumnWidth(this.state.columns, widthsData, value);
+        // Untracked state change.
+        this._columnWidthManager.maxColumnWidth = widthsData.maxColumnWidth;
     }
 
     /**
      * 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.
-     * @type {number}
+     * @type {Number}
      */
     @api
     get maxRowSelection() {
-        return getMaxRowSelection(this.state);
+        return this.state.maxRowSelection;
     }
 
     set maxRowSelection(value) {
-        const previousSelectionLength = getCurrentSelectionLength(this.state);
-        setMaxRowSelection(this.state, value);
+        const { state } = this;
+        const previousSelectionLength = getCurrentSelectionLength(state);
+        // A mix of tracked and untracked state changes.
+        setMaxRowSelection(state, value);
         if (previousSelectionLength > 0) {
             this.fireSelectedRowsChange(this.getSelectedRows());
         }
@@ -509,26 +514,28 @@ export default class LightningDatatable extends LightningElement {
     /**
      * The minimum width for all columns.
      * The default is 50px.
-     * @type {number}
+     * @type {Number}
      * @default 50px
      */
     @api
     get minColumnWidth() {
-        return getMinColumnWidth(this.widthsData);
+        return this.widthsData.minColumnWidth;
     }
 
     set minColumnWidth(value) {
-        const { state, widthsData } = this;
-        setMinColumnWidth(getColumns(state), widthsData, value);
-        this._columnWidthManager.minColumnWidth = this.minColumnWidth;
+        const { widthsData } = this;
+        // Tracked state change.
+        setMinColumnWidth(this.state.columns, widthsData, value);
+        // Untracked state change.
+        this._columnWidthManager.minColumnWidth = widthsData.minColumnWidth;
     }
 
     /**
      * @typedef RenderManagerConfig
-     * @type {object}
-     * @property {boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
-     * @property {number} rowHeight - Specifies the height of a row, in px
-     * @property {string} virtualize - specifies whether to enable virtualization. This requires the "role-based" render mode and a fixed-height container for lightning-datatable
+     * @type {Object}
+     * @property {Boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
+     * @property {Number} rowHeight - Specifies the height of a row, in px
+     * @property {String} virtualize - specifies whether to enable virtualization. This requires the "role-based" render mode and a fixed-height container for lightning-datatable
      */
 
     /**
@@ -543,7 +550,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set renderConfig(value) {
-        if (typeof value === 'object' && !isIE11) {
+        if (typeof value === 'object') {
             setViewportRendering(this.state, value.viewportRendering);
 
             this._renderManager.configure(
@@ -578,63 +585,69 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set renderMode(value) {
+        const { _renderConfig, state } = this;
         this._renderMode = normalizeString(value, {
             fallbackValue: 'default',
             validValues: ['default', 'role-based'],
         });
-        this.state.renderModeRoleBased = this._renderMode === 'role-based';
-        this._columnWidthManager.setRenderMode(this.renderMode);
-        if (this._renderConfig) {
-            setVirtualize(this.state, this._renderConfig.virtualize);
+        state.renderModeRoleBased = this._renderMode === 'role-based';
+        if (_renderConfig) {
+            setVirtualize(state, _renderConfig.virtualize);
         }
-        updateCellClassForRoleBasedMode(this.state);
+        updateCellClassForRoleBasedMode(state);
     }
 
     /**
      * If present, column resizing is disabled.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
     get resizeColumnDisabled() {
-        return isResizeColumnDisabled(this.widthsData);
+        return this.widthsData.resizeColumnDisabled;
     }
 
     set resizeColumnDisabled(value) {
+        // Untracked state change.
         setResizeColumnDisabled(this.widthsData, value);
     }
 
     /**
      * The width to resize the column when a user presses left or right arrow.
      * The default is 10px.
-     * @type {number}
+     * @type {Number}
      * @default 10px
      */
     @api
     get resizeStep() {
-        return getResizeStep(this.widthsData);
+        return this.widthsData.resizeStep;
     }
 
     set resizeStep(value) {
+        // Tracked state change.
         setResizeStep(this.widthsData, value);
     }
 
     /**
      * Determines where to start counting the row number.
      * The default is 0.
-     * @type {number}
+     * @type {Number}
      * @default 0
      */
     @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);
-
-        this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
+        // Tracked state changes.
+        this._columnWidthManager.handleRowNumberOffsetChange(
+            state,
+            this.widthsData
+        );
     }
 
     /**
@@ -653,61 +666,63 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * If present, the row numbers are shown in the first column.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @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
         );
-
-        setShowRowNumberColumn(state, value);
-        this.updateColumns(_columns);
+        // Untracked state change.
+        state.showRowNumberColumn = normalizeBoolean(value);
+        this.updateColumns(_rawColumns);
     }
 
     /**
      * The column key or fieldName that controls the sorting order.
      * Sort the data using the onsort event handler.
-     * @type {string}
+     * @type {String}
      */
     @api
     get sortedBy() {
-        return getSortedBy(this.state);
+        return this.state.sortedBy;
     }
 
     set sortedBy(value) {
-        setSortedBy(this.state, value);
-        updateSorting(this.state);
+        const { state } = this;
+        setSortedBy(state, value);
+        updateSorting(state);
     }
 
     /**
      * Specifies the sorting direction.
      * Sort the data using the onsort event handler.
      * Valid options include 'asc' and 'desc'.
-     * @type {string}
+     * @type {String}
      */
     @api
     get sortedDirection() {
-        return getSortedDirection(this.state);
+        return this.state.sortedDirection;
     }
 
     set sortedDirection(value) {
-        setSortedDirection(this.state, value);
-        updateSorting(this.state);
+        const { state } = this;
+        setSortedDirection(state, value);
+        updateSorting(state);
     }
 
     /**
      * If present, the footer that displays the Save and Cancel buttons is hidden during inline editing.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -723,7 +738,7 @@ export default class LightningDatatable extends LightningElement {
      * This value specifies the number of lines after which the
      * content will be cut off and hidden. It must be at least 1 or more.
      * The text in the last line is truncated and shown with an ellipsis.
-     * @type {integer}
+     * @type {Integer}
      */
     @api
     get wrapTextMaxLines() {
@@ -732,26 +747,32 @@ export default class LightningDatatable extends LightningElement {
 
     set wrapTextMaxLines(value) {
         const { state } = this;
+        // 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 data = unwrap(getData(this.state));
-        return this.state.rows.reduce((prev, row, index) => {
+        const { state } = this;
+        const data = unwrap(state.data);
+        const { rows } = state;
+        const selectedRows = [];
+        for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
+            const row = rows[i];
             if (row.isSelected) {
-                prev.push(data[index]);
+                // Collect tracked data.
+                selectedRows.push(data[i]);
             }
-            return prev;
-        }, []);
+        }
+        return selectedRows;
     }
 
     /**
@@ -786,22 +807,23 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableContainerClass() {
-        return classSet({
-            'slds-table_header-fixed_container': !this.hideTableHeader,
+        return classSetToString({
+            'slds-table_header-fixed_container': !this.state.hideTableHeader,
             'slds-scrollable_x': !this._isResizing,
-        }).toString();
+        });
     }
 
     get computedTableClass() {
-        const headerType = this.hideTableHeader ? 'hidden' : 'fixed';
-        return classSet(
-            `slds-table slds-table_header-${headerType} slds-table_bordered slds-table_edit`
-        )
-            .add({
-                'slds-table_resizable-cols': this.hasResizebleColumns,
-                'slds-tree slds-table_tree': hasTreeDataType(this.state),
-            })
-            .toString();
+        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.widthsData.resizeColumnDisabled,
+            'slds-tree slds-table_tree': hasTreeDataType(state),
+        });
     }
 
     get computedTableRole() {
@@ -809,14 +831,15 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableStyle() {
-        const tableLayout =
-            this._columnWidthManager.isAutoResizingUpdateQueued()
-                ? 'auto'
-                : 'fixed';
-        return styleToString([
-            `table-layout:${tableLayout}`,
-            getCSSWidthStyleOfTable(this.widthsData),
-        ]);
+        const tableLayout = this._columnWidthManager.isAutoResizingUpdateQueued
+            ? 'auto'
+            : 'fixed';
+        let style = `table-layout: ${tableLayout};`;
+        const { tableWidth } = this.widthsData;
+        if (tableWidth) {
+            style += `width: ${tableWidth}px;`;
+        }
+        return style;
     }
 
     /**
@@ -826,25 +849,23 @@ export default class LightningDatatable extends LightningElement {
      * virtualization is enabled
      */
     get computedTbodyStyle() {
-        const style = {};
-        const { firstVisibleIndex, bufferSize, virtualize, tableHeight } =
-            this.state;
-        if (
-            hasRowNumberColumn(this.state) &&
-            getRowNumberOffset(this.state) >= 0
-        ) {
+        const { state } = this;
+        const { rowNumberOffset } = state;
+        let style = '';
+        if (state.showRowNumberColumn && rowNumberOffset >= 0) {
+            const { firstVisibleIndex, bufferSize } = state;
             const firstRenderedRow = Math.max(
                 firstVisibleIndex - bufferSize,
                 0
             );
-            const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
-            style['counter-reset'] = `row-number ${rowNumber}`;
+            const rowNumber = firstRenderedRow + rowNumberOffset;
+            style += `counter-reset: row-number ${rowNumber};`;
         }
-        if (virtualize) {
-            style.position = 'relative';
-            style.height = `${tableHeight}px`;
+        if (state.virtualize) {
+            const { tableHeight } = state;
+            style += `position:relative;height:${tableHeight}px`;
         }
-        return styleToString(style);
+        return style;
     }
 
     /**
@@ -857,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()) {
+        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';
+        if (this._columnWidthManager.isAutoResizingUpdateQueued) {
+            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;
     }
 
     /**
@@ -898,23 +914,19 @@ 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 keyboardMode = this.state.keyboardMode;
-        return classSet()
-            .add({
-                'slds-hide': keyboardMode !== 'ACTION',
-                'slds-assistive-text': keyboardMode === 'ACTION',
-            })
-            .toString();
+        const isActionMode = this.state.keyboardMode === KEYBOARD_ACTION_MODE;
+        return classSetToString({
+            'slds-hide': !isActionMode,
+            'slds-assistive-text': isActionMode,
+        });
     }
 
     /**
@@ -927,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
@@ -937,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() {
@@ -954,16 +962,17 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
-        const { virtualize, rows, renderedRowCount } = this.state;
+        const { state } = this;
+        const { virtualize, rows, renderedRowCount } = state;
         if (virtualize) {
             const { firstIndex, lastIndex } =
-                this._renderManager.getRenderedRange(this.state);
+                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 (this.viewportRendering && !isIE11) {
+        if (this.viewportRendering) {
             this._lastRenderedRow = renderedRowCount;
             return rows.slice(0, renderedRowCount);
         }
@@ -972,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() {
@@ -998,109 +1007,88 @@ 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;
     }
 
     /**
      * Attach event handlers for various events on `lightning-datatable`
      */
     connectedCallback() {
-        const {
-            handleResizeColumn,
-            handleUpdateColumnSort,
-            handleCellFocusByClick,
-            handleFalseCellBlur,
-            handleSelectionCellClick,
-        } = this;
-
-        // Row Selection and De-selection
-        this.template.addEventListener(
-            'selectallrows',
-            handleSelectionCellClick.bind(this)
-        );
-        this.template.addEventListener(
-            'deselectallrows',
-            handleSelectionCellClick.bind(this)
-        );
-        this.template.addEventListener(
-            'selectrow',
-            handleSelectionCellClick.bind(this)
-        );
-        this.template.addEventListener(
-            'deselectrow',
-            handleSelectionCellClick.bind(this)
-        );
-
-        this.addEventListener(
-            'rowselection',
-            handleRowSelectionChange.bind(this)
-        );
-
-        // Column Resizing
-        this.template.addEventListener(
-            'resizecol',
-            handleResizeColumn.bind(this)
-        );
-
-        // Column Sorting
-        this.template.addEventListener(
-            'privateupdatecolsort',
-            handleUpdateColumnSort.bind(this)
-        );
-
-        // Cell Interaction
-        this.template.addEventListener(
-            'privatecellkeydown',
-            handleKeydownOnCell.bind(this)
-        );
+        const { template } = this;
 
-        this.template.addEventListener(
-            'privatecellfocusedbyclick',
-            handleCellFocusByClick.bind(this)
-        );
-        this.template.addEventListener(
-            'privatecellfalseblurred',
-            handleFalseCellBlur.bind(this)
-        );
-
-        // Row Level Actions
-        this.template.addEventListener(
-            'privatecellactiontriggered',
-            handleRowActionTriggered.bind(this)
-        );
-        this.template.addEventListener(
-            'privatecellactionmenuopening',
-            handleLoadDynamicActions.bind(this)
-        );
-        this.template.addEventListener(
-            'privatecellbuttonclicked',
-            handleCellButtonClick.bind(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);
+        });
+        // 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
-        this.template.addEventListener(
+        // Header actions
+        template.addEventListener(
             'privatecellheaderactionmenuopening',
-            handleHeaderActionMenuOpening.bind(this)
+            (event) => {
+                this.handleHeaderActionMenuOpening(event);
+            }
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellheaderactionmenuclosed',
-            handleHeaderActionMenuClosed.bind(this)
+            (event) => {
+                this.handleHeaderActionMenuClosed(event);
+            }
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellheaderactiontriggered',
-            handleHeaderActionTriggered.bind(this)
-        );
-
-        // Inline Edit
-        this.template.addEventListener(
-            'privateeditcell',
-            handleEditCell.bind(this)
+            (event) => {
+                this.handleHeaderActionTriggered(event);
+            }
         );
+        // Inline edit
+        template.addEventListener('privateeditcell', (event) => {
+            this.handleEditCell(event);
+        });
     }
 
     /**
@@ -1113,64 +1101,76 @@ export default class LightningDatatable extends LightningElement {
     }
 
     renderedCallback() {
-        const { state, template, widthsData } = this;
+        const { _columnWidthManager, state, template, widthsData } = this;
 
         // This keeps underlying table element up to date if the aria-* properties on this element is dynamically changed.
         // It does the work of removing and adding the attribute if the value is empty(ish) or a normal string.
         synchronizeAttrs(this.gridContainer, {
             'aria-label': this.ariaLabel,
             'aria-labelledby': this.ariaLabelledBy,
+            'aria-describedby': this.ariaDescribedBy,
         });
 
-        if (!this._privateWidthObserver) {
-            this._privateWidthObserver = new LightningDatatableResizeObserver(
-                template,
-                state,
+        if (_columnWidthManager.isResizingUpdateQueued) {
+            const { columns } = state;
+            const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(
                 widthsData,
-                this._columnWidthManager
+                columns
             );
-        } else if (!this._privateWidthObserver.isConnected()) {
-            this._privateWidthObserver.observe(template);
-        }
-
-        if (this._columnWidthManager.isResizingUpdateQueued()) {
-            const fireResizeEvent =
-                this._columnWidthManager.shouldFireResizeEvent(
-                    widthsData,
-                    getColumns(state)
-                );
-
-            this._columnWidthManager.adjustColumnsSize(
+            // Tracked state changes.
+            _columnWidthManager.adjustColumnsSize(
                 template,
-                getColumns(state),
+                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);
-        // customerSelectedRows is only valid till render, after it, the one used should be the one from the 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);
-        // reset focus styles on re-render
+        // Set the previous focused cell to null after render is done.
+        state.cellToFocusNext = undefined;
+
+        // Reset focus styles on re-render.
         if (this._shouldResetFocus) {
-            // since focus is now getting reset, can change this back to false
+            // Since focus is now getting reset, can change this back to false.
             this._shouldResetFocus = false;
-            // don't return focus to active cell when inline edit panel is open
+            // Don't return focus to active cell when inline edit panel is open.
+            const { activeCell } = state;
             if (
-                state.activeCell &&
-                state.activeCell.focused &&
+                activeCell &&
+                activeCell.focused &&
                 !state.inlineEdit.isPanelVisible
             ) {
                 const cellElement = getActiveCellElement(template, state);
@@ -1179,7 +1179,8 @@ export default class LightningDatatable extends LightningElement {
                     cellElement.parentElement &&
                     !cellElement.parentElement.classList.contains(FOCUS_CLASS)
                 ) {
-                    setFocusActiveCell(template, state, null, null, false);
+                    // Tracked state change.
+                    setFocusActiveCell(state, template, null, null, false);
                 }
             }
         }
@@ -1209,20 +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() {
-        if (this._privateWidthObserver) {
-            this._privateWidthObserver.disconnect();
+        const { _widthObserver } = this;
+        if (_widthObserver) {
+            _widthObserver.disconnect();
         }
 
         this._renderManager.disconnectResizeObserver();
@@ -1230,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"]')
@@ -1240,85 +1259,74 @@ 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 (
-            this.state.keyboardMode === 'NAVIGATION' &&
-            this.state.rowMode === true
-        ) {
+        if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.rowMode) {
             event.stopPropagation();
-
-            const tr = event.currentTarget;
-            const rowKeyValue = tr.getAttribute('data-row-key-value');
-            const keyCode = event.keyCode;
-            const rowHasChildren = !!tr.getAttribute('aria-expanded');
-            const rowExpanded = tr.getAttribute('aria-expanded') === 'true';
-            const rowLevel = tr.getAttribute('aria-level');
-
-            const evt = {
+            const { currentTarget: tr } = event;
+            reactToKeyboardOnRow(this, {
                 target: tr,
                 detail: {
-                    rowKeyValue,
-                    keyCode,
-                    rowHasChildren,
-                    rowExpanded,
-                    rowLevel,
+                    keyCode: event.keyCode,
                     keyEvent: event,
+                    rowExpanded: tr.getAttribute('aria-expanded') === 'true',
+                    rowHasChildren: !!tr.getAttribute('aria-expanded'),
+                    rowKeyValue: tr.getAttribute('data-row-key-value'),
+                    rowLevel: tr.getAttribute('aria-level'),
                 },
-            };
-
-            reactToKeyboardOnRow(this, this.state, evt);
+            });
         }
     }
 
     /**
-     * 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) {
-        if (this.enableInfiniteLoading) {
+        const { state } = this;
+        if (state.enableInfiniteLoading) {
             handleLoadMoreCheck.call(this, event);
         }
 
+        // Tracked state changes.
         handleInlineEditPanelScroll.call(this, event);
-        if (this.state.virtualize) {
-            this.state.firstVisibleIndex = findFirstVisibleIndex(
+        if (state.virtualize) {
+            state.firstVisibleIndex = findFirstVisibleIndex(
                 this.state,
                 event.target.scrollTop
             );
         } else if (this.viewportRendering) {
-            this._renderManager.handleScroll(this.state, event);
+            this._renderManager.handleScroll(state, event);
         }
     }
 
@@ -1328,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 (
@@ -1346,7 +1352,7 @@ export default class LightningDatatable extends LightningElement {
                 if (state.rowMode && state.activeCell) {
                     unsetRowNavigationMode(state);
                     const { rowIndex } = getIndexesActiveCell(state);
-                    updateTabIndexRow(state, rowIndex, -1);
+                    updateRowTabIndex(state, rowIndex, -1);
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
@@ -1358,14 +1364,13 @@ 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();
         const { fieldName, columnKey, sortDirection } = event.detail;
-
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
@@ -1374,31 +1379,31 @@ 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();
-        const { state, widthsData } = this;
-        const { colIndex, widthDelta } = event.detail;
-        if (widthDelta !== 0) {
+        const { state } = this;
+        const { colIndex, widthDelta: delta } = event.detail;
+        if (delta !== 0) {
             resizeColumnWithDelta(
-                getColumns(state),
-                widthsData,
+                state.columns,
+                this.widthsData,
                 colIndex,
-                widthDelta
+                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();
@@ -1406,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();
@@ -1425,66 +1430,65 @@ export default class LightningDatatable extends LightningElement {
      */
     handleSelectionCellClick(event) {
         this.handleCellFocusByClick(event);
-
-        if (event.type === 'selectrow') {
+        const { type } = event;
+        if (type === 'selectrow') {
             handleSelectRow.call(this, event);
-        } else if (event.type === 'deselectrow') {
+        } else if (type === 'deselectrow') {
             handleDeselectRow.call(this, event);
-        } else if (event.type === 'selectallrows') {
+        } else if (type === 'selectallrows') {
             handleSelectAllRows.call(this, event);
-        } else if (event.type === 'deselectallrows') {
+        } else if (type === 'deselectallrows') {
             handleDeselectAllRows.call(this, event);
         }
     }
 
     /**
-     * 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();
+        const { state } = this;
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
             event.detail;
-        const { state } = this;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
             if (state.rowMode && state.activeCell) {
                 unsetRowNavigationMode(state);
                 const { rowIndex } = getIndexesActiveCell(state);
-                updateTabIndexRow(state, rowIndex, -1);
+                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();
-        const { template, state } = this;
+        const { state } = this;
         const { rowKeyValue, colKeyValue } = event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
             this.setActiveCell(rowKeyValue, colKeyValue);
         }
-        setFocusActiveCell(template, state);
+        // Tracked state change.
+        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
@@ -1495,49 +1499,44 @@ 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);
-        if (this.state.activeCell) {
-            this.state.activeCell.focused = this._shouldResetFocus;
+        const { activeCell } = this.state;
+        if (activeCell) {
+            activeCell.focused = this._shouldResetFocus;
         }
     }
 
     /**
-     * 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();
         event.preventDefault();
-
         closeInlineEdit(this);
-        const draftValues = this.draftValues;
-
+        const { draftValues } = this;
         this.dispatchEvent(
             new CustomEvent('save', {
                 detail: {
@@ -1548,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();
@@ -1563,6 +1562,7 @@ export default class LightningDatatable extends LightningElement {
         const customerEvent = new CustomEvent('cancel', {
             cancelable: true,
         });
+
         this.dispatchEvent(customerEvent);
 
         if (!customerEvent.defaultPrevented) {
@@ -1573,27 +1573,25 @@ 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) {
         event.stopPropagation();
         event.preventDefault();
 
-        const { currentTarget } = event;
         const { recordId } = event.detail;
         const { rowIndex, rowKeyValue } =
-            this.computeRowLookupItemPickedInformation(currentTarget);
+            this.computeRowLookupItemPickedInformation(event.currentTarget);
 
         this.dispatchEvent(
             // We will the below Eslint rule as we use a constant to apply the name of the event
@@ -1616,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
@@ -1678,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;
@@ -1740,7 +1773,7 @@ export default class LightningDatatable extends LightningElement {
         } else if (virtualizedRows && state.fixedHeight) {
             // if heights are fixed, we only need to check height of first row
             const rowElement = this.template.querySelector(
-                getDataRow(this.renderedRows[0].key)
+                getRowDataSelector(this.renderedRows[0].key)
             );
             // increase height by 1 since first rendered row is missing an extra 1px border
             if (rowElement) {
@@ -1749,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;`;
                     });
                 }
             }
@@ -1761,50 +1793,50 @@ 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);
-        updateTabIndex(state, rowIndex, colIndex, 0);
+        // Tracked state change.
+        setBlurActiveCell(state, template);
+        // Untracked state change.
+        state.activeCell = { rowKeyValue, colKeyValue };
+        // Tracked state changes.
+        addFocusStylesToActiveCell(state, template);
+        updateCellTabIndex(state, rowIndex, colIndex, 0);
     }
 
     /**
      * @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 = '';
@@ -1817,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 };
     }
 }