lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/datatable/datatable.js

@@ -5,9 +5,9 @@ import { classSet } from 'lightning/utils';
 import {
     normalizeBoolean,
     normalizeString,
-    isIE11,
     isSafari,
     synchronizeAttrs,
+    classSetToString,
 } from 'lightning/utilsPrivate';
 import { LightningDatatableResizeObserver } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
@@ -61,7 +61,7 @@ import {
     setBlurActiveCell,
     setFocusActiveCell,
     isActiveCell,
-    updateTabIndex,
+    updateCellTabIndex,
     getIndexesByKeys,
     updateTabIndexActiveCell,
     updateTabIndexActiveRow,
@@ -69,7 +69,7 @@ import {
     updateRowNavigationMode,
     handleDatatableFocusOut,
     handleDatatableFocusIn,
-    updateTabIndexRow,
+    updateRowTabIndex,
     getIndexesActiveCell,
     reactToKeyboardOnRow,
     setCellToFocusFromPrev,
@@ -82,7 +82,7 @@ import {
     refocusCellElement,
     isCellElement,
     getActiveCellElement,
-    getDataRow,
+    getRowDataSelector,
     FOCUS_CLASS,
     updateActiveCellTabIndexAfterSync,
 } from './keyboard';
@@ -95,7 +95,7 @@ import {
 import {
     handleLoadMoreCheck,
     isInfiniteLoadingEnabled,
-    setInfiniteLoading,
+    setEnableInfiniteLoading,
     getLoadMoreOffset,
     setLoadMoreOffset,
     isLoading,
@@ -228,10 +228,15 @@ export default class LightningDatatable extends LightningElement {
      */
     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 +245,20 @@ 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(
+                getColumns(this.state)
+            );
         }
-
+        // Untracked state change.
         widthsData.columnWidthsMode = normalizedValue;
     }
 
@@ -258,7 +266,7 @@ 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() {
@@ -273,7 +281,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * The array of data to be displayed.
-     * @type {array}
+     * @type {Array}
      */
     @api
     // eslint-disable-next-line @lwc/lwc/valid-api
@@ -282,19 +290,20 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set data(value) {
+        const { state } = this;
+        const previousData = getData(state);
         const data = Array.isArray(value) ? value : [];
 
-        const previousData = getData(this.state);
-        const columns = getColumns(this.state);
+        const columns = getColumns(state);
         this._columnWidthManager.handleDataChange(previousData, data, columns);
 
         // set data in state
-        setData(this.state, value);
+        setData(state, value);
 
         // do necessary updates since rows have changed
-        if (hasValidKeyField(this.state)) {
+        if (hasValidKeyField(state)) {
             this.updateRowsState();
-            resetTableHeight(this.state);
+            resetTableHeight(state);
         }
         if (this._customerSelectedRows) {
             this.setSelectedRows(this._customerSelectedRows);
@@ -305,7 +314,7 @@ 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
@@ -314,13 +323,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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,21 +338,22 @@ 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 (hasValidKeyField(state)) {
+            this.updateRowsAndCellIndexes(state);
         }
 
-        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
@@ -351,14 +362,16 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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, this.template, state);
     }
 
     /**
      * 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() {
@@ -372,7 +385,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * If present, the checkbox column for row selection is hidden.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -389,15 +402,15 @@ export default class LightningDatatable extends LightningElement {
             normalizedValue,
             getColumns(state)
         );
-
-        this.state.hideCheckboxColumn = normalizedValue;
+        // Untracked state changes.
+        state.hideCheckboxColumn = normalizedValue;
         // update the columns metadata again to update the status.
         this.updateColumns(this._columns);
     }
 
     /**
      * If present, the table header is hidden.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -406,12 +419,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,12 +434,13 @@ 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
@@ -434,13 +449,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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
@@ -449,8 +465,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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 +477,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,7 +492,7 @@ export default class LightningDatatable extends LightningElement {
     /**
      * The maximum width for all columns.
      * The default is 1000px.
-     * @type {number}
+     * @type {Number}
      * @default 1000px
      */
     @api
@@ -483,7 +502,9 @@ export default class LightningDatatable extends LightningElement {
 
     set maxColumnWidth(value) {
         const { state, widthsData } = this;
+        // Tracked state change.
         setMaxColumnWidth(getColumns(state), widthsData, value);
+        // Untracked state change.
         this._columnWidthManager.maxColumnWidth = this.maxColumnWidth;
     }
 
@@ -491,7 +512,7 @@ export default class LightningDatatable extends LightningElement {
      * The maximum number of rows that can be selected. Value should be a positive integer
      * Checkboxes are used for selection by default,
      * and radio buttons are used when maxRowSelection is 1.
-     * @type {number}
+     * @type {Number}
      */
     @api
     get maxRowSelection() {
@@ -499,8 +520,10 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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,7 +532,7 @@ export default class LightningDatatable extends LightningElement {
     /**
      * The minimum width for all columns.
      * The default is 50px.
-     * @type {number}
+     * @type {Number}
      * @default 50px
      */
     @api
@@ -519,16 +542,18 @@ export default class LightningDatatable extends LightningElement {
 
     set minColumnWidth(value) {
         const { state, widthsData } = this;
+        // Tracked state change.
         setMinColumnWidth(getColumns(state), widthsData, value);
+        // Untracked state change.
         this._columnWidthManager.minColumnWidth = this.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 +568,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,21 +603,22 @@ 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';
+        state.renderModeRoleBased = this._renderMode === 'role-based';
         this._columnWidthManager.setRenderMode(this.renderMode);
-        if (this._renderConfig) {
-            setVirtualize(this.state, this._renderConfig.virtualize);
+        if (_renderConfig) {
+            setVirtualize(state, _renderConfig.virtualize);
         }
-        updateCellClassForRoleBasedMode(this.state);
+        updateCellClassForRoleBasedMode(state);
     }
 
     /**
      * If present, column resizing is disabled.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -601,13 +627,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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
@@ -616,13 +643,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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
@@ -632,8 +660,9 @@ export default class LightningDatatable extends LightningElement {
 
     set rowNumberOffset(value) {
         const { state, widthsData } = this;
+        // Untracked state change.
         setRowNumberOffset(state, value);
-
+        // Tracked state changes.
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
     }
 
@@ -653,7 +682,7 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * If present, the row numbers are shown in the first column.
-     * @type {boolean}
+     * @type {Boolean}
      * @default false
      */
     @api
@@ -663,13 +692,13 @@ export default class LightningDatatable extends LightningElement {
 
     set showRowNumberColumn(value) {
         const { state, _columns } = this;
-
+        // A mix of tracked and untracked state changes.
         this._columnWidthManager.handleRowNumberColumnChange(
             getRowNumberOffset(state),
             value,
             getColumns(state)
         );
-
+        // Untracked state change.
         setShowRowNumberColumn(state, value);
         this.updateColumns(_columns);
     }
@@ -677,7 +706,7 @@ export default class LightningDatatable extends LightningElement {
     /**
      * 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() {
@@ -685,15 +714,16 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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() {
@@ -701,13 +731,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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 +754,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,6 +763,7 @@ 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);
@@ -745,13 +777,18 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     getSelectedRows() {
-        const data = unwrap(getData(this.state));
-        return this.state.rows.reduce((prev, row, index) => {
+        const { state } = this;
+        const data = unwrap(getData(state));
+        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 +823,22 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableContainerClass() {
-        return classSet({
+        return classSetToString({
             'slds-table_header-fixed_container': !this.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();
+        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),
+        });
     }
 
     get computedTableRole() {
@@ -809,14 +846,12 @@ 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}`;
+        style += getCSSWidthStyleOfTable(this.widthsData);
+        return style;
     }
 
     /**
@@ -826,25 +861,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 = getRowNumberOffset(state);
+        let style = '';
+        if (hasRowNumberColumn(state) && 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;
     }
 
     /**
@@ -861,7 +894,7 @@ export default class LightningDatatable extends LightningElement {
         const minHeight = this._actionsMinHeightStyle
             ? `${this._actionsMinHeightStyle};`
             : '';
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
+        if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             return `${minHeight}overflow-x:auto`;
         }
         return `${minHeight}${getCSSWidthStyleOfTable(this.widthsData)}`;
@@ -876,7 +909,7 @@ export default class LightningDatatable extends LightningElement {
             styles['padding-bottom'] = '3rem';
         }
 
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
+        if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             styles['overflow-x'] = 'auto';
         }
 
@@ -908,13 +941,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     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 === 'ACTION';
+        return classSetToString({
+            'slds-hide': !isActionMode,
+            'slds-assistive-text': isActionMode,
+        });
     }
 
     /**
@@ -954,16 +985,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);
         }
@@ -1010,6 +1042,7 @@ export default class LightningDatatable extends LightningElement {
      * Attach event handlers for various events on `lightning-datatable`
      */
     connectedCallback() {
+        const { template } = this;
         const {
             handleResizeColumn,
             handleUpdateColumnSort,
@@ -1018,89 +1051,76 @@ export default class LightningDatatable extends LightningElement {
             handleSelectionCellClick,
         } = this;
 
-        // Row Selection and De-selection
-        this.template.addEventListener(
+        // Row selection and de-selection
+        this.addEventListener(
+            'rowselection',
+            handleRowSelectionChange.bind(this)
+        );
+        template.addEventListener(
             'selectallrows',
             handleSelectionCellClick.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'deselectallrows',
             handleSelectionCellClick.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'selectrow',
             handleSelectionCellClick.bind(this)
         );
-        this.template.addEventListener(
+        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(
+        // Column resizing
+        template.addEventListener('resizecol', handleResizeColumn.bind(this));
+        // Column sorting
+        template.addEventListener(
             'privateupdatecolsort',
             handleUpdateColumnSort.bind(this)
         );
-
-        // Cell Interaction
-        this.template.addEventListener(
+        // Cell interaction
+        template.addEventListener(
             'privatecellkeydown',
             handleKeydownOnCell.bind(this)
         );
-
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellfocusedbyclick',
             handleCellFocusByClick.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellfalseblurred',
             handleFalseCellBlur.bind(this)
         );
-
-        // Row Level Actions
-        this.template.addEventListener(
+        // Row level actions
+        template.addEventListener(
             'privatecellactiontriggered',
             handleRowActionTriggered.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellactionmenuopening',
             handleLoadDynamicActions.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellbuttonclicked',
             handleCellButtonClick.bind(this)
         );
 
         // Header Actions
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellheaderactionmenuopening',
             handleHeaderActionMenuOpening.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellheaderactionmenuclosed',
             handleHeaderActionMenuClosed.bind(this)
         );
-        this.template.addEventListener(
+        template.addEventListener(
             'privatecellheaderactiontriggered',
             handleHeaderActionTriggered.bind(this)
         );
-
-        // Inline Edit
-        this.template.addEventListener(
-            'privateeditcell',
-            handleEditCell.bind(this)
-        );
+        // Inline edit
+        template.addEventListener('privateeditcell', handleEditCell.bind(this));
     }
 
     /**
@@ -1113,36 +1133,39 @@ 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(
+        let { _privateWidthObserver } = this;
+        if (!_privateWidthObserver) {
+            _privateWidthObserver = new LightningDatatableResizeObserver(
                 template,
                 state,
                 widthsData,
-                this._columnWidthManager
+                _columnWidthManager
             );
-        } else if (!this._privateWidthObserver.isConnected()) {
-            this._privateWidthObserver.observe(template);
+            this._privateWidthObserver = _privateWidthObserver;
+        } else if (!_privateWidthObserver.isConnected()) {
+            _privateWidthObserver.observe(template);
         }
 
-        if (this._columnWidthManager.isResizingUpdateQueued()) {
-            const fireResizeEvent =
-                this._columnWidthManager.shouldFireResizeEvent(
-                    widthsData,
-                    getColumns(state)
-                );
-
-            this._columnWidthManager.adjustColumnsSize(
+        if (_columnWidthManager.isResizingUpdateQueued) {
+            const columns = getColumns(state);
+            const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(
+                widthsData,
+                columns
+            );
+            // Tracked state changes.
+            _columnWidthManager.adjustColumnsSize(
                 template,
-                getColumns(state),
+                columns,
                 widthsData
             );
 
@@ -1159,18 +1182,22 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handlePrefetch.call(this, template, state);
-        // customerSelectedRows is only valid till render, after it, the one used should be the one from the state.
+
+        // 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
+        // Set the previous focused cell to null after render is done.
         resetCellToFocusFromPrev(state);
-        // reset focus styles on re-render
+
+        // 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,6 +1206,7 @@ export default class LightningDatatable extends LightningElement {
                     cellElement.parentElement &&
                     !cellElement.parentElement.classList.contains(FOCUS_CLASS)
                 ) {
+                    // Tracked state change.
                     setFocusActiveCell(template, state, null, null, false);
                 }
             }
@@ -1221,8 +1249,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     disconnectedCallback() {
-        if (this._privateWidthObserver) {
-            this._privateWidthObserver.disconnect();
+        const { _privateWidthObserver } = this;
+        if (_privateWidthObserver) {
+            _privateWidthObserver.disconnect();
         }
 
         this._renderManager.disconnectResizeObserver();
@@ -1261,33 +1290,22 @@ export default class LightningDatatable extends LightningElement {
      * @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 === 'NAVIGATION' && state.rowMode === true) {
             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, state, {
                 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);
+            });
         }
     }
 
@@ -1307,18 +1325,20 @@ export default class LightningDatatable extends LightningElement {
      * @param {Event} event - `scroll`
      */
     handleVerticalScroll(event) {
+        const { state } = this;
         if (this.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);
         }
     }
 
@@ -1346,7 +1366,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);
             }
@@ -1365,7 +1385,6 @@ export default class LightningDatatable extends LightningElement {
     handleUpdateColumnSort(event) {
         event.stopPropagation();
         const { fieldName, columnKey, sortDirection } = event.detail;
-
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
@@ -1380,14 +1399,14 @@ export default class LightningDatatable extends LightningElement {
      */
     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,
+                this.widthsData,
                 colIndex,
-                widthDelta
+                delta
             );
             this.fireOnResize(true);
             this.safariHeaderFix();
@@ -1425,14 +1444,14 @@ 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);
         }
     }
@@ -1444,14 +1463,14 @@ export default class LightningDatatable extends LightningElement {
      */
     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);
@@ -1465,12 +1484,13 @@ export default class LightningDatatable extends LightningElement {
      */
     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(this.template, state);
     }
 
     /**
@@ -1499,8 +1519,9 @@ export default class LightningDatatable extends LightningElement {
      */
     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;
         }
     }
 
@@ -1534,10 +1555,8 @@ export default class LightningDatatable extends LightningElement {
     handleInlineEditSave(event) {
         event.stopPropagation();
         event.preventDefault();
-
         closeInlineEdit(this);
-        const draftValues = this.draftValues;
-
+        const { draftValues } = this;
         this.dispatchEvent(
             new CustomEvent('save', {
                 detail: {
@@ -1563,6 +1582,7 @@ export default class LightningDatatable extends LightningElement {
         const customerEvent = new CustomEvent('cancel', {
             cancelable: true,
         });
+
         this.dispatchEvent(customerEvent);
 
         if (!customerEvent.defaultPrevented) {
@@ -1590,10 +1610,9 @@ export default class LightningDatatable extends LightningElement {
         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
@@ -1740,7 +1759,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) {
@@ -1774,7 +1793,7 @@ export default class LightningDatatable extends LightningElement {
         setBlurActiveCell(template, state);
         updateActiveCell(state, rowKeyValue, colKeyValue);
         addFocusStylesToActiveCell(template, state);
-        updateTabIndex(state, rowIndex, colIndex, 0);
+        updateCellTabIndex(state, rowIndex, colIndex, 0);
     }
 
     /**