lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/datatable/datatable.js

@@ -12,324 +12,131 @@ import { features } from 'lightning/features';
 import { EVENTS as FORMATTED_LOOKUP_EVENTS } from 'lightning/formattedLookup';
 import { generateUniqueId } from 'lightning/inputUtils';
 import MultiColumnSortingModal from 'lightning/multiColumnSortingModal';
-import {
-    getLinkInfo,
-    hasLinkProvider,
-    updateRawLinkInfo,
-} from 'lightning/routingService';
-import {
-    classSetToString,
-    isSafari,
-    normalizeBoolean,
-    normalizeString,
-    synchronizeAttrs,
-} from 'lightning/utilsPrivate';
+import { getLinkInfo, hasLinkProvider, updateRawLinkInfo, } from 'lightning/routingService';
+import { classSetToString, isSafari, normalizeBoolean, normalizeString, synchronizeAttrs, } from 'lightning/utilsPrivate';
 import { privateContext } from 'lightning/utilsInternal';
 import { updateObservers, disconnectObservers } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
 import { setColumns } from './columns';
-import {
-    getCustomerColumnWidths,
-    getResizerDefaultState,
-    resizeColumnWithDelta,
-    setMaxColumnWidth,
-    setMinColumnWidth,
-    setResizeColumnDisabled,
-    setResizeStep,
-    updateColumnWidthsMetadata,
-} from './columnResizer';
+import { getCustomerColumnWidths, getResizerDefaultState, resizeColumnWithDelta, setMaxColumnWidth, setMinColumnWidth, setResizeColumnDisabled, setResizeStep, updateColumnWidthsMetadata, } from './columnResizer';
 import { setErrors } from './errors';
-import {
-    setKeyField,
-    recomputeCellStyles,
-    updateCells,
-    updateCellClassForRoleBasedMode,
-    updateRowsAndCells,
-} from './rows';
-import {
-    handleCellButtonClick,
-    handleLoadDynamicActions,
-    handleRowActionTriggered,
-} from './rowLevelActions';
+import { setKeyField, recomputeCellStyles, updateCells, updateCellClassForRoleBasedMode, updateRowsAndCells, } from './rows';
+import { handleCellButtonClick, handleLoadDynamicActions, handleRowActionTriggered, } from './rowLevelActions';
 import { setRowNumberOffset } from './rowNumber';
-import {
-    handleDeselectAllRows,
-    handleDeselectRow,
-    handleRowSelectionChange,
-    handleSelectAllRows,
-    handleSelectRow,
-    setMaxRowSelection,
-    setDisabledRowsKeys,
-    setSelectedRowsKeys,
-    syncSelectedRowsKeys,
-    updateBulkSelectionState,
-    setSingleRowSelectionMode,
-    updateRowDisabledStatesForEditLimit,
-} from './rowSelection';
-import {
-    getCurrentSelectionLength,
-    getRowsKeys,
-    getSelectedRowsKeys,
-    isInputTypeCheckbox,
-} from './rowSelectionShared';
-import {
-    handleHeaderActionMenuClosed,
-    handleHeaderActionMenuOpening,
-    handleHeaderActionTriggered,
-    updateHeaderInternalActions,
-} from './headerActions';
+import { handleDeselectAllRows, handleDeselectRow, handleRowSelectionChange, handleSelectAllRows, handleSelectRow, setMaxRowSelection, setDisabledRowsKeys, setSelectedRowsKeys, syncSelectedRowsKeys, updateBulkSelectionState, setSingleRowSelectionMode, updateRowDisabledStatesForEditLimit, } from './rowSelection';
+import { getCurrentSelectionLength, getRowsKeys, getSelectedRowsKeys, isInputTypeCheckbox, } from './rowSelectionShared';
+import { handleHeaderActionMenuClosed, handleHeaderActionMenuOpening, handleHeaderActionTriggered, updateHeaderInternalActions, } from './headerActions';
 import { getCellByKeys, getRowByKey } from './indexes';
-import {
-    handleLoadMoreCheck,
-    handlePrefetch,
-    setEnableInfiniteLoading,
-    setLoading,
-    getLoadMoreOffset,
-    setLoadMoreOffset,
-} from './infiniteLoading';
-import {
-    cancelInlineEdit,
-    closeInlineEdit,
-    getDirtyValues,
-    handleEditCell,
-    handleInlineEditFinish,
-    handleInlineEditPanelScroll,
-    handleMassCheckboxChange,
-    isInlineEditTriggered,
-    openInlineEditOnActiveCell,
-    setDirtyValues,
-    trimDirtyValuesForEditLimit,
-} from './inlineEdit';
-import {
-    addFocusStylesToActiveCell,
-    datatableHasFocus,
-    FOCUS_CLASS,
-    getActiveCellElement,
-    getCellElementChild,
-    getCellElementFromEventTarget,
-    handleDatatableFocusIn,
-    handleDatatableFocusOut,
-    handleKeydownOnCell,
-    handleKeydownOnTable,
-    handlePrimitiveDatatableCellClick,
-    handlePrimitiveDatatableCellFocus,
-    handlePrimitiveDatatableCellKeydown,
-    isActiveCell,
-    isCellElement,
-    KEYBOARD_ACTION_MODE,
-    KEYBOARD_NAVIGATION_MODE,
-    reactToKeyboardOnRow,
-    refocusCellElement,
-    scrollToCell,
-    setBlurActiveCell,
-    setCellClickedForFocus,
-    setCellToFocusFromPrev,
-    setFocusActiveCell,
-    syncActiveCell,
-    unsetRowNavigationMode,
-    updateActiveCellTabIndexAfterSync,
-    updateCellTabIndex,
-    updateCellToFocusFromPrev,
-    updateTabIndexActiveCell,
-    updateTabIndexActiveRow,
-    updateRowNavigationMode,
-    updateRowTabIndex,
-} from './keyboard';
+import { handleLoadMoreCheck, handlePrefetch, setEnableInfiniteLoading, setLoading, getLoadMoreOffset, setLoadMoreOffset, } from './infiniteLoading';
+import { cancelInlineEdit, closeInlineEdit, getDirtyValues, handleEditCell, handleInlineEditFinish, handleInlineEditPanelScroll, handleMassCheckboxChange, isInlineEditTriggered, openInlineEditOnActiveCell, setDirtyValues, trimDirtyValuesForEditLimit, } from './inlineEdit';
+import { addFocusStylesToActiveCell, datatableHasFocus, FOCUS_CLASS, getActiveCellElement, getCellElementChild, getCellElementFromEventTarget, handleDatatableFocusIn, handleDatatableFocusOut, handleKeydownOnCell, handleKeydownOnTable, handlePrimitiveDatatableCellClick, handlePrimitiveDatatableCellFocus, handlePrimitiveDatatableCellKeydown, isActiveCell, isCellElement, KEYBOARD_ACTION_MODE, KEYBOARD_NAVIGATION_MODE, reactToKeyboardOnRow, refocusCellElement, scrollToCell, setBlurActiveCell, setCellClickedForFocus, setCellToFocusFromPrev, setFocusActiveCell, syncActiveCell, unsetRowNavigationMode, updateActiveCellTabIndexAfterSync, updateCellTabIndex, updateCellToFocusFromPrev, updateTabIndexActiveCell, updateTabIndexActiveRow, updateRowNavigationMode, updateRowTabIndex, } from './keyboard';
 import { setVirtualize, RenderManager } from './renderManager';
-import {
-    setDefaultSortDirection,
-    setSortedBy,
-    setSortedDirection,
-    updateSorting,
-} from './sort';
-import {
-    cleanData,
-    getGridContainerFromScrollerY,
-    getScrollerX,
-    getScrollerY,
-    isLoadMore,
-    isObjectLike,
-    isRenderModeInline,
-    isRenderModeRoleBased,
-    resetHighlightedRowClasses,
-    setHighlightedRowClasses,
-    unsetHighlightedRowClasses,
-} from './utils';
+import { setDefaultSortDirection, setSortedBy, setSortedDirection, updateSorting, } from './sort';
+import { cleanData, getGridContainerFromScrollerY, getScrollerX, getScrollerY, isLoadMore, isObjectLike, isRenderModeInline, isRenderModeRoleBased, resetHighlightedRowClasses, setHighlightedRowClasses, unsetHighlightedRowClasses, } from './utils';
 import { setWrapTextMaxLines } from './wrapText';
-import {
-    handleVariableRowHeights,
-    resetRowHeights,
-    findFirstVisibleIndex,
-    addTableHeight,
-} from './virtualization';
+import { handleVariableRowHeights, resetRowHeights, findFirstVisibleIndex, addTableHeight, } from './virtualization';
 import DatatableTypes from './types';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-
 const { PrivateLookupItemPickedEvent } = FORMATTED_LOOKUP_EVENTS;
-
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
     ariaLiveActionMode: labelAriaLiveActionMode,
 };
-
 const INIT_HEADER_HEIGHT = 32;
 const { setContext, assertContext } = privateContext;
-
-/**
- * A table that displays rows and columns of data.
- */
 export default class LightningDatatable extends LightningShadowBaseClass {
-    /**
-     * Usage of State Object vs Private Variable:
-     * This is by no means a definitive set of rules and we should add/modify these
-     * guidelines with time as we work on the datatable and find specific reasons.
-     *
-     * In general, the main reason for using the `state` object is to take advantage
-     * of LWC's reactivity. In the `state` object we store properties that are required
-     * to trigger an update/re-render of the datatable.
-     *
-     * There are no observable perf implications of using the state object vs
-     * private variables. See W-10006095 for details.
-     *
-     * Guidelines:
-     *     1. If possible, avoid adding properties to the state object if it does not
-     *        trigger an update or re-render of the datatable.
-     *     2. You may look to add properties to the state object if that property is
-     *        required in different areas of the datatable and/or if not adding to the
-     *        state will significantly add to the complexity of the component.
-     *     3. Goal: Breakdown the 'state' object - Right now the state object contains a
-     *        lot of metadata and we pass around the monolith everywhere even when most
-     *        of the information is not required. If you have the opportunity, look to
-     *        separate or break down the state object even if that means adding a new
-     *        tracked object. This will help us logically separate various modules over
-     *        time and pass around only necessary information leading to cleaner,
-     *        more readable and organized code.
-     */
-
-    // Tracked Objects
-    @track state = getDefaultState();
-    @track widthsData = getResizerDefaultState();
-
-    // Private Variables
-    _actionsMinHeightStyle = ''; // Min height required while actions menu is opened
+    static customTypes;
+    @track
+    state = getDefaultState();
+    @track
+    widthsData = getResizerDefaultState();
+    _actionsMinHeightStyle = '';
+    @track
     _columnWidthManager;
     _customerDisabledRows = null;
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
     _headerHeight = 0;
-    _isResizing = false; // Whether resizing is in progress
+    _isResizing = false;
+    @track
     _positionRelationship;
     _privateTypes = {};
     _rawColumns = [];
+    @track
     _renderConfig;
+    @track
     _renderManager;
     _renderMode = 'default';
     _renderedTemplate = tableTemplate;
-    _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
+    _shouldResetFocus = false;
     _suppressBottomBar = false;
     _rowToggleIcon = {};
-    _widthObserver; // Instance of LightningDatatableResizeObserver
+    @track
+    _widthObserver;
     _hasSetInitialCustomTypes = false;
     _shouldResetCustomTypes = false;
     _recalculateHeaderHeight = false;
     _maxRowSelectionShouldFireEvent = false;
-
-    /** *********************** PUBLIC PROPERTIES *************************/
-
-    /**
-     * Public property for passing `aria-label` down to the child table element.
-     */
-    @api ariaLabel = null;
-
-    /**
-     * Public property for passing `aria-labelledby` down to the child table element.
-     */
-    @api ariaLabelledBy = null;
-
-    /**
-     * Public property for passing `aria-describedby` down to the child table element.
-     */
+    _rowSelectionEventPending;
+    _lastScrollX;
+    _lastScrollY;
+    _heightObserver;
+    _hasRendered;
+    _suppressScroll;
+    getWrapperHeight;
+    @api
+    ariaLabel = null;
+    @api
+    ariaLabelledBy = null;
     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}
-     * @default fixed
-     */
     @api
     get columnWidthsMode() {
         return this.widthsData.columnWidthsMode;
     }
-
     set columnWidthsMode(value) {
         const { widthsData } = this;
         const normalizedValue = normalizeString(value, {
             fallbackValue: 'fixed',
             validValues: ['fixed', 'auto'],
         });
-        // Untracked state change.
         this._columnWidthManager.columnWidthMode = normalizedValue;
         if (widthsData.columnWidthsMode !== normalizedValue) {
-            // Tracked state changes.
             this._columnWidthManager.handleWidthModeChange(this.state.columns);
         }
-        // Untracked state change.
         widthsData.columnWidthsMode = normalizedValue;
     }
-
-    /**
-     * 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}
-     */
     @api
     get columns() {
         return this._rawColumns;
     }
-
     set columns(value) {
         const _rawColumns = Array.isArray(value) ? value : [];
         this._rawColumns = _rawColumns;
         this.updateColumns(_rawColumns);
         this._columnWidthManager.handleColumnsChange(this.state.columns);
     }
-
-    /**
-     * The array of data to be displayed.
-     * @type {Array}
-     */
     @api
     get data() {
         return this.state.data;
     }
-
     set data(value) {
         const { _customerDisabledRows, _customerSelectedRows, state } = this;
         const { data: previousData, columns } = state;
-        // Check value is array and has data (W-15835670)
         const data = cleanData(value);
         const isInfiniteLoading = isLoadMore(previousData, data);
-
-        // Untracked state change.
         state.data = data;
-
-        // data.length ok here, as have cleaned value first
         if (!isInfiniteLoading && data.length && columns?.length) {
             this._columnWidthManager.handleDataChange(columns);
         }
-
-        // do necessary updates since rows have changed
         if (typeof state.keyField === 'string' && this.isConnected) {
             this.updateRows();
         }
         if (isInfiniteLoading) {
             addTableHeight(state, previousData, data);
-        } else {
-            // if data is new, reset all virtualization data
+        }
+        else {
             state.heightCache = {};
             state.offsets = [0];
             state.offsetRanges = [{ start: 0, end: 0 }];
@@ -343,91 +150,51 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             setDisabledRowsKeys(state, _customerDisabledRows);
         }
     }
-
-    /**
-     * 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}
-     * @default asc
-     */
     @api
     get defaultSortDirection() {
         return this.state.defaultSortDirection;
     }
-
     set defaultSortDirection(value) {
         const { state } = this;
         setDefaultSortDirection(state, value);
         updateSorting(state);
     }
-
-    /**
-     * Enables programmatic row disabling with a list of key-field values.
-     * @type {list}
-     */
     @api
     get disabledRows() {
         return getRowsKeys(this.state.disabledRowsKeys);
     }
-
     set disabledRows(value) {
         this._customerDisabledRows = value;
         setDisabledRowsKeys(this.state, value);
     }
-
-    /**
-     * The current values per row that are provided during inline edit.
-     * @type {Object}
-     */
     @api
     get draftValues() {
         return getDirtyValues(this.state);
     }
-
     set draftValues(value) {
         const { state } = this;
         this._draftValues = value;
         setDirtyValues(state, value);
-
         if (this.isConnected && typeof state.keyField === 'string') {
             this.updateRowsAndCells();
         }
-
         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}
-     * @default false
-     */
     @api
     get enableInfiniteLoading() {
         return this.state.enableInfiniteLoading;
     }
-
     set enableInfiniteLoading(value) {
         const { state } = this;
-        // Untracked state change.
         setEnableInfiniteLoading(state, value);
         if (this.isConnected) {
             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}
-     */
     @api
     get errors() {
         return this.state.errors;
     }
-
     set errors(value) {
         const { state } = this;
         setErrors(state, value);
@@ -435,244 +202,120 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             updateCells(state);
         }
     }
-
-    /**
-     * If present, the table borders are hidden.
-     * Only valid when hide-table-header is true.
-     *
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get hideBorders() {
         return this.state.hideBorders;
     }
-
     set hideBorders(value) {
-        // Untracked state change.
         this.state.hideBorders = normalizeBoolean(value);
     }
-
-    /**
-     * If present, the checkbox or radio button column for row selection is hidden.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get hideCheckboxColumn() {
         return this.state.hideCheckboxColumn;
     }
-
     set hideCheckboxColumn(value) {
         const { _rawColumns, state } = this;
         const normalizedValue = normalizeBoolean(value);
-
-        this._columnWidthManager.handleCheckboxColumnChange(
-            state.hideCheckboxColumn,
-            normalizedValue,
-            state.columns
-        );
-        // Untracked state changes.
+        this._columnWidthManager.handleCheckboxColumnChange(state.hideCheckboxColumn, normalizedValue, state.columns);
         state.hideCheckboxColumn = normalizedValue;
-        // update the columns metadata again to update the status.
-
         if (this.isConnected) {
             this.updateColumns(_rawColumns);
-        } else if (_rawColumns) {
-            // Component has not yet rendered so
-            // tree state should be reset to default
+        }
+        else if (_rawColumns) {
             state.hadTreeDataTypePreviously = false;
             state.treeColumn = undefined;
-            // Tracked state change.
             setColumns(state, _rawColumns, this._privateTypes);
         }
     }
-
-    /**
-     * If present, the actions menu is displayed to enable users to do advanced sorting.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get showActionsMenu() {
         return this.state.showActionsMenu;
     }
-
     set showActionsMenu(value) {
         const { state } = this;
         const normalizedValue = normalizeBoolean(value);
-
-        this._columnWidthManager.handleActionsColumnChange(
-            state.showActionsMenu,
-            normalizedValue,
-            state.columns
-        );
-
+        this._columnWidthManager.handleActionsColumnChange(state.showActionsMenu, normalizedValue, state.columns);
         state.showActionsMenu = normalizedValue;
-        // update the columns metadata again to update the status.
         this.updateColumns(this._rawColumns);
     }
-
-    /**
-     * If present, the table header is hidden.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get hideTableHeader() {
         return this.state.hideTableHeader;
     }
-
     set hideTableHeader(value) {
-        // Untracked state change.
         this.state.hideTableHeader = normalizeBoolean(value);
     }
-
-    /**
-     * Specifies how the table header is wrapped. Set to 'all' to wrap all column headers.
-     * Set to 'none' to clip all column headers. Set to 'by-column' to wrap/clip column headers
-     * based on the wrap/clip setting for that individual column. The default is 'none'.
-     * @type {String}
-     * @default none
-     */
     @api
     get wrapTableHeader() {
         return this.state.wrapTableHeader;
     }
-
     set wrapTableHeader(value) {
         const prevWrapTableHeader = this.state.wrapTableHeader;
-        // Untracked state change.
         const wrapTableHeader = normalizeString(value, {
             fallbackValue: 'none',
             validValues: ['all', 'by-column', 'none'],
         });
         this.state.wrapTableHeader = wrapTableHeader;
-
         if (wrapTableHeader !== prevWrapTableHeader) {
             this._recalculateHeaderHeight = true;
         }
     }
-
-    /**
-     * If present, a spinner is shown to indicate that more data is loading.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get isLoading() {
         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}
-     * @required
-     */
     @api
     get keyField() {
         return this.state.keyField;
     }
-
     set keyField(value) {
         const { state } = this;
-        // Untracked state change.
         setKeyField(state, value);
-        // Tracked state change.
         setDirtyValues(state, this._draftValues);
         if (this.isConnected) {
             this.updateRows();
         }
     }
-
-    /**
-     * 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}
-     * @default 20
-     */
     @api
     get loadMoreOffset() {
         return getLoadMoreOffset(this.state);
     }
-
     set loadMoreOffset(value) {
         setLoadMoreOffset(this.state, value);
     }
-
-    /**
-     * The maximum width for all columns.
-     * The default is 1000px.
-     * @type {Number}
-     * @default 1000px
-     */
     @api
     get maxColumnWidth() {
         return this.widthsData.maxColumnWidth;
     }
-
     set maxColumnWidth(value) {
         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 unless overridden using
-     * the singleRowSelectionMode property.
-     * @type {Number}
-     */
     @api
     get maxRowSelection() {
         return this.state.maxRowSelection;
     }
-
     set maxRowSelection(value) {
         const { state, _customerSelectedRows } = this;
         const previousSelectionLength = getCurrentSelectionLength(state);
-        // A mix of tracked and untracked state changes.
         setMaxRowSelection(state, value, this._datatableId);
         if (previousSelectionLength > 0) {
             this.fireSelectedRowsChange(this.getSelectedRows());
-        } else if (
-            !this.isConnected &&
+        }
+        else if (!this.isConnected &&
             state.data.length &&
-            _customerSelectedRows
-        ) {
-            // Only fire rowselection on load when set after data and selected-rows
+            _customerSelectedRows) {
             this._maxRowSelectionShouldFireEvent = true;
         }
     }
-
-    /**
-     * The maximum number of distinct rows that can have draft values (be edited) at the time of a save.
-     * When this limit would be exceeded:
-     * - Row selection checkboxes are disabled to prevent further selections
-     * - Edit icons are hidden on rows that cannot be edited due to the limit
-     * Rows that are already edited or selected can always be edited (to support mass editing).
-     *
-     * @type {Number}
-     * @internal
-     */
-    /**
-     * Reserved for internal use.
-     */
     @api
     get maxEditLimit() {
         return this.state.maxEditLimit;
     }
-
     set maxEditLimit(value) {
         const { state } = this;
         const normalizedValue = parseInt(value, 10);
@@ -680,112 +323,49 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             isNaN(normalizedValue) || normalizedValue < 0
                 ? null
                 : normalizedValue;
-
-        if (
-            features.enableMaxEditLimit &&
+        if (features.enableMaxEditLimit &&
             this.isConnected &&
-            this.hasValidKeyField
-        ) {
+            this.hasValidKeyField) {
             this.updateRowsAndCells();
         }
-
         trimDirtyValuesForEditLimit(state);
-        // update row disabled states when max edit limit changes
         updateRowDisabledStatesForEditLimit(this.state, this._privateTypes);
     }
-
-    /**
-     * Specifies whether to render checkboxes instead of radio buttons.
-     * Use with max-row-selection.
-     * When max-row-selection is 1, radio buttons are used for selection by default.
-     * Valid values are 'radio' and 'checkbox'. The default value is 'radio'.
-     * @type {String}
-     */
     @api
     get singleRowSelectionMode() {
         return this.state.singleRowSelectionMode;
     }
-
     set singleRowSelectionMode(value) {
         const { state } = this;
         if (!state.hasCalledUpdateRowsAndCells) {
-            // Tracked state changes.
             this.updateRowsAndCells();
         }
         setSingleRowSelectionMode(state, value, this._datatableId);
     }
-
-    /**
-     * The minimum width for all columns.
-     * The default is 50px.
-     * @type {Number}
-     * @default 50px
-     */
     @api
     get minColumnWidth() {
         return this.widthsData.minColumnWidth;
     }
-
     set minColumnWidth(value) {
         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
-     */
-
-    /**
-     * Enables and configures advanced rendering modes.
-     * Valid properties are 'bufferSize' and 'rowHeight'.
-     * @type {RenderManagerConfig} value - config object for datatable rendering
-     */
-    /**
-     * Reserved for internal use.
-     */
     @api
     get renderConfig() {
         return this._renderConfig;
     }
-
     set renderConfig(value) {
         if (isObjectLike(value)) {
-            this._renderManager.configure(
-                this.state,
-                this.getWrapperHeight,
-                value
-            );
-            this._renderManager.updateViewportRendering(
-                this.state,
-                this.gridContainer,
-                true
-            );
+            this._renderManager.configure(this.state, this.getWrapperHeight, value);
+            this._renderManager.updateViewportRendering(this.state, this.gridContainer, true);
             this._renderConfig = value;
         }
     }
-
-    /**
-     * The `role-based` option renders <div> and is reserved for internal use.
-     * /
-    /**
-     * Opts-in to a more performant 'inline' table.
-     * Valid options are 'default' and 'inline'.
-     * 'default' renders the traditional DOM structure.
-     * 'inline' renders a simplified DOM structure that
-     * improves performance but may break some custom styling.
-     */
     @api
     get renderMode() {
         return this._renderMode;
     }
-
     set renderMode(value) {
         const { _renderConfig, state } = this;
         const renderMode = normalizeString(value, {
@@ -799,15 +379,12 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         });
         const renderModeInline = isRenderModeInline(renderMode);
         const renderModeRoleBased = isRenderModeRoleBased(renderMode);
-
         this._renderMode = renderMode;
-        // Untracked state changes.
         state.hasRenderedFirstTime = false;
         state.hasRenderedTable = false;
         state.renderModeInline = renderModeInline;
         state.renderModeRoleBased = renderModeRoleBased;
         if (this.isConnected) {
-            // Tracked state changes.
             this.updateRowsAndCells();
         }
         if (_renderConfig) {
@@ -815,64 +392,29 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         updateCellClassForRoleBasedMode(state);
     }
-
-    /**
-     * If present, column resizing is disabled.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get resizeColumnDisabled() {
         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}
-     * @default 10px
-     */
     @api
     get resizeStep() {
         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}
-     * @default 0
-     */
     @api
     get rowNumberOffset() {
         return this.state.rowNumberOffset;
     }
-
     set rowNumberOffset(value) {
         const { state } = this;
-        // Untracked state change.
         setRowNumberOffset(state, value);
-        // Tracked state changes.
-        this._columnWidthManager.handleRowNumberOffsetChange(
-            state,
-            this.widthsData
-        );
-    }
-
-    /**
-     * Enables programmatic row selection with a list of key-field values.
-     * @type {list}
-     */
+        this._columnWidthManager.handleRowNumberOffsetChange(state, this.widthsData);
+    }
     @api
     get selectedRows() {
         if (features.enableDisabledRowsAttribute) {
@@ -880,28 +422,17 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return getSelectedRowsKeys(this.state);
     }
-
     set selectedRows(value) {
         this._customerSelectedRows = value;
         this.setSelectedRows(value);
     }
-
-    /**
-     * If present, the row numbers are shown in the first column.
-     * @type {Boolean}
-     * @default false
-     */
     @api
     get showRowNumberColumn() {
         return this.state.showRowNumberColumn;
     }
-
     set showRowNumberColumn(value) {
         const { state, _rawColumns } = this;
         const { length: colCount } = _rawColumns;
-        // if we're already showing the row number column
-        // and a column is editable, nothing changes so
-        // we don't want to do any recalculations
         if (state.showRowNumberColumn) {
             for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
                 if (_rawColumns[colIndex].editable) {
@@ -909,79 +440,42 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 }
             }
         }
-
-        // A mix of tracked and untracked state changes.
-        this._columnWidthManager.handleRowNumberColumnChange(
-            state.rowNumberOffset,
-            value,
-            state.columns
-        );
-        // Untracked state change.
+        this._columnWidthManager.handleRowNumberColumnChange(state.rowNumberOffset, value, state.columns);
         state.showRowNumberColumn = normalizeBoolean(value);
-
         if (this.isConnected) {
             this.updateColumns(_rawColumns);
-        } else if (_rawColumns) {
-            // Component has not yet rendered so
-            // tree state should be reset to default
+        }
+        else if (_rawColumns) {
             state.hadTreeDataTypePreviously = false;
             state.treeColumn = undefined;
-            // Tracked state change.
             setColumns(state, _rawColumns, this._privateTypes);
         }
     }
-
-    /**
-     * The column key or fieldName(s) that controls the sorting order.
-     * Sort the data using the onsort event handler.
-     * @type {String|String[]}
-     */
     @api
     get sortedBy() {
         return this.state.sortedBy;
     }
-
     set sortedBy(value) {
         const { state } = this;
         setSortedBy(state, value);
         updateSorting(state);
     }
-
-    /**
-     * Specifies the sorting direction.
-     * Sort the data using the onsort event handler.
-     * Valid options include a single value of 'asc' or 'desc' or an array of such values.
-     * @type {String|String[]}
-     */
     @api
     get sortedDirection() {
         return this.state.sortedDirection;
     }
-
     set sortedDirection(value) {
         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}
-     * @default false
-     */
     @api
     get suppressBottomBar() {
         return this._suppressBottomBar;
     }
-
     set suppressBottomBar(value) {
         this._suppressBottomBar = normalizeBoolean(value);
     }
-
-    /**
-     * Reserved for internal use.
-     * @type {Object}
-     */
     @api
     get rowToggleIcon() {
         return this._rowToggleIcon || {};
@@ -989,48 +483,29 @@ export default class LightningDatatable extends LightningShadowBaseClass {
     set rowToggleIcon(value) {
         if (isObjectLike(value)) {
             this._rowToggleIcon = value;
-        } else {
+        }
+        else {
             this._rowToggleIcon = {};
         }
     }
-
-    /**
-     * 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}
-     */
     @api
     get wrapTextMaxLines() {
         return this.state.wrapTextMaxLines;
     }
-
     set wrapTextMaxLines(value) {
         const { state } = this;
-        // Untracked state changes.
         setWrapTextMaxLines(state, value);
         this._columnWidthManager.wrapTextMaxLines = state.wrapTextMaxLines;
         if (this.isConnected) {
             updateCells(state);
         }
     }
-
-    /** ************************ PUBLIC METHODS ***************************/
-
-    /**
-     * Focuses the current active cell in the datatable.
-     */
     @api
     focus() {
         const { state } = this;
         syncActiveCell(state);
         setFocusActiveCell(state, this.template, this.refs);
     }
-
-    /**
-     * Returns data in each selected row.
-     * @returns {Array} An array of data in each selected row.
-     */
     @api
     getSelectedRows() {
         const { state } = this;
@@ -1040,7 +515,8 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         let data;
         if (!import.meta.env.SSR) {
             data = unwrap(state.data);
-        } else {
+        }
+        else {
             data = state.data;
         }
         const { rows } = state;
@@ -1048,24 +524,11 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         for (let i = 0, { length: rowCount } = rows; i < rowCount; i += 1) {
             const row = rows[i];
             if (row.isSelected) {
-                // Collect tracked data.
                 selectedRows.push(data[i]);
             }
         }
         return selectedRows;
     }
-
-    /**
-     * Opens the inline edit panel for the datatable's currently active cell. If the active cell is not
-     * editable, then the panel is instead opened for the first editable cell in the table. Given two
-     * distinct cells, C_x and C_y, C_x is considered "first" in the cell ordering if the following condition
-     * evaluates to true:
-     *
-     * (C_x.rowIndex < C_y.rowIndex) || (C_x.rowIndex === C_y.rowIndex && C_x.columnIndex < C_y.columnIndex)
-     *
-     * If there is no data in the table or there are no editable cells in the table then calling this function
-     * results in a no-op.
-     */
     @api
     openInlineEdit() {
         if (!this.state.hasCalledUpdateRowsAndCells) {
@@ -1073,10 +536,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         openInlineEditOnActiveCell(this);
     }
-
-    /**
-     * Scrolls to the top of the datatable.
-     */
     @api
     scrollToTop() {
         const scrollerY = getScrollerY(this.template, this.validRefs);
@@ -1084,47 +543,35 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             scrollerY.scrollTop = 0;
         }
     }
-
-    /** ************************ PRIVATE GETTERS **************************/
-
     get consolidateTypeAttributes() {
         return features.enableConsolidateTypeAttributes;
     }
-
     get gridContainer() {
         return !import.meta.env.SSR
-            ? getGridContainerFromScrollerY(
-                  getScrollerY(this.template, this.validRefs)
-              )
+            ? getGridContainerFromScrollerY(getScrollerY(this.template, this.validRefs))
             : null;
     }
-
     get computedTableContainerClass() {
         return classSetToString({
             'slds-table_header-fixed_container': !this.state.hideTableHeader,
             'slds-scrollable_x': !this._isResizing,
         });
     }
-
     get computedTableClass() {
         const { state } = this;
         const headerType = state.hideTableHeader ? 'hidden' : 'fixed';
         return classSetToString({
             'slds-table': true,
             [`slds-table_header-${headerType}`]: true,
-            'slds-table_bordered': !(
-                state.hideBorders && state.hideTableHeader
-            ),
+            'slds-table_bordered': !(state.hideBorders && state.hideTableHeader),
             'slds-table_edit': true,
             'slds-table_resizable-cols': !this.widthsData.resizeColumnDisabled,
             'slds-tree slds-table_tree': !!state.treeColumn,
         });
     }
-
     get computedTableRole() {
         return this.state.treeColumn ? 'treegrid' : 'grid';
     }
-
     get computedTableStyle() {
         const tableLayout = this._columnWidthManager.isAutoResizingUpdateQueued
             ? 'auto'
@@ -1136,23 +583,13 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return style;
     }
-
-    /**
-     * Resets row-number counter to offset to show
-     * correct value when row number column is present
-     * and adds necessary position and height styles when
-     * virtualization is enabled
-     */
     get computedTbodyStyle() {
         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 firstRenderedRow = Math.max(firstVisibleIndex - bufferSize, 0);
             const rowNumber = firstRenderedRow + rowNumberOffset;
             style += `counter-reset: row-number ${rowNumber};`;
         }
@@ -1162,71 +599,42 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return style;
     }
-
-    /**
-     * Sets the min height (always) and the table width on the container
-     * that wraps [role="grid"].
-     * 1. Min Height is required for the case when the header actions
-     *    dropdown is opened and there are no rows present. The dropdown
-     *    would be cut off. To prevent that, we set a min height on the table.
-     * 2. The table width is required for horizontal scroll. If the table
-     *    is overflowing horizontally, we need to set the width in order
-     *    to be able to view the remaining columns on scroll. Always set the
-     *    min-height value, which can be set during handleMenuOpen
-     */
     get computedScrollerYStyle() {
-        // always set min-height value, whether it has a value or is an emptry string
-        // min-height is eiter empty string or aquires a value from handleHeaderActionMenuOpening
-        // when header menu actions have been selection.  see item 1 above
         const minHeight = this._actionsMinHeightStyle
             ? `${this._actionsMinHeightStyle};`
             : '';
-        // in this use case, we set min-height always and
-        // and overflow-x: auto when isAutoResizingUpdateQueued = true
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             return `${minHeight}overflow-x: auto;`;
         }
         const { tableWidth } = this.widthsData;
-        // when selecting header menu actions, min-height has a rem value. always set min-height
         return tableWidth
             ? `${minHeight}width: ${tableWidth}px;`
             : `${minHeight}`;
     }
-
     get computedScrollerXStyle() {
         let style;
         if (features.enableDTHeightCalcForScrollbar) {
-            // Adjust height to leave room for status bar when it's visible
-            // Done so that the scrollbar appears above the status bar
             style = this.showStatusBar
-            ? 'height: calc(100% - 3rem);'
-            : 'height: 100%;';
-        } else {
+                ? 'height: calc(100% - 3rem);'
+                : 'height: 100%;';
+        }
+        else {
             style = 'height: 100%;';
             if (this.showStatusBar) {
                 style += 'padding-bottom: 3rem;';
             }
         }
-
         if (this._columnWidthManager.isAutoResizingUpdateQueued) {
             style += 'overflow-x: auto;';
         }
         if (this.state.wrapTableHeader !== 'none') {
-            // update padding style for dynamic header height when header can wrap
             style += `padding-top: max(2rem, ${this._headerHeight}px);`;
         }
         return style;
     }
-
-    /**
-     * Private method to get computedCheckboxColumnHeaderId
-     * from checkboxColumnHeaderElement for
-     * aria-labelledby in checkbox column
-     */
     get computedCheckboxColumnHeaderId() {
         return `${this._datatableId}-check-column-header`;
     }
-
     get computedAriaLiveClassForNavMode() {
         const isNavMode = this.state.keyboardMode === KEYBOARD_NAVIGATION_MODE;
         return classSetToString({
@@ -1234,7 +642,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             'slds-assistive-text': isNavMode,
         });
     }
-
     get computedAriaLiveClassForActionMode() {
         const isActionMode = this.state.keyboardMode === KEYBOARD_ACTION_MODE;
         return classSetToString({
@@ -1242,12 +649,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             'slds-assistive-text': isActionMode,
         });
     }
-
-    /**
-     * aria-rowcount is the count of TRs in the table
-     * It includes the # of rows of data + column header row (since this is also a TR)
-     * A table with no rows of data still has an aria-rowcount of 1
-     */
     get ariaRowCount() {
         const { state } = this;
         if (!state.hasCalledUpdateRowsAndCells) {
@@ -1255,26 +656,19 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return state.rows.length + 1;
     }
-
     get hasValidKeyField() {
         if (typeof this.state.keyField === 'string') {
             return true;
         }
-        // eslint-disable-next-line no-console
-        console.error(
-            `The "keyField" is a required attribute of lightning:datatable.`
-        );
+        console.error(`The "keyField" is a required attribute of lightning:datatable.`);
         return false;
     }
-
     get hasResizebleColumns() {
         return !this.widthsData.resizeColumnDisabled;
     }
-
     get validRefs() {
         return this._hasRendered ? this.refs : null;
     }
-
     get renderedRows() {
         const { state } = this;
         if (!state.hasCalledUpdateRowsAndCells) {
@@ -1282,9 +676,7 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         const { virtualize, rows, renderedRowCount } = state;
         if (virtualize) {
-            const { firstIndex, lastIndex } =
-                this._renderManager.getRenderedRange(state);
-            // we shouldn't lose focus from re-renders caused by a change in renderedRows
+            const { firstIndex, lastIndex } = this._renderManager.getRenderedRange(state);
             this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
@@ -1293,39 +685,24 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return rows;
     }
-
     get showSelectAllCheckbox() {
         return isInputTypeCheckbox(this.state);
     }
-
     get showStatusBar() {
         return !this._suppressBottomBar && isInlineEditTriggered(this.state);
     }
-
     get tableError() {
         return this.state.errors.table;
     }
-
     get i18n() {
         return i18n;
     }
-
-    /** ************************ LIFECYCLE HOOKS **************************/
-
-    /**
-     * Initialize the following:
-     * 1. DatatableTypes
-     * 2. ColumnWidthManager
-     * 3. RenderManager
-     */
     constructor() {
         super();
-
         this._columnWidthManager = new ColumnWidthManager(this.widthsData);
         this._privateTypes = new DatatableTypes(this.constructor.customTypes);
         this._hasSetInitialCustomTypes =
             !!this._privateTypes.privateCustomTypes.size;
-
         this._renderManager = new RenderManager();
         if (!import.meta.env.SSR) {
             this.getWrapperHeight = () => {
@@ -1333,26 +710,15 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 const paddingTop = this.state.hideTableHeader
                     ? 0
                     : parseFloat(getComputedStyle(scrollerX).paddingTop) ||
-                      INIT_HEADER_HEIGHT;
+                        INIT_HEADER_HEIGHT;
                 return scrollerX.offsetHeight - paddingTop;
             };
         }
         setContext(this);
     }
-
-    /**
-     * Attach event handlers for various events on `lightning-datatable`
-     */
     connectedCallback() {
         super.connectedCallback();
-        const {
-            _customerDisabledRows,
-            _customerSelectedRows,
-            state,
-            template,
-        } = this;
-
-        // Row selection and de-selection
+        const { _customerDisabledRows, _customerSelectedRows, state, template, } = this;
         this.addEventListener('rowselection', (event) => {
             this.handleRowSelectionChange(event);
         });
@@ -1369,15 +735,12 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             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);
             });
@@ -1387,67 +750,45 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             template.addEventListener('privatecellfalseblurred', (event) => {
                 this.handleFalseCellBlur(event);
             });
-            // Inlined cell interaction
             template.addEventListener('click', (event) => {
                 this.handlePrimitiveDatatableCellClick(event);
             });
             template.addEventListener('focus', (event) => {
                 this.handlePrimitiveDatatableCellFocus(event);
             });
-
             template.addEventListener('mousedown', () => {
                 this._suppressScroll = true;
             });
-
             template.addEventListener('keydown', (event) => {
                 this.handlePrimitiveDatatableCellKeydown(event);
             });
-            // Row level actions
             template.addEventListener('privatecellactiontriggered', (event) => {
                 this.handleRowActionTriggered(event);
             });
-            template.addEventListener(
-                'privatecellactionmenuopening',
-                (event) => {
-                    this.handleLoadDynamicActions(event);
-                }
-            );
+            template.addEventListener('privatecellactionmenuopening', (event) => {
+                this.handleLoadDynamicActions(event);
+            });
             template.addEventListener('privatecellbuttonclicked', (event) => {
                 this.handleCellButtonClick(event);
             });
-            // Header actions
-            template.addEventListener(
-                'privatecellheaderactionmenuopening',
-                (event) => {
-                    this.handleHeaderActionMenuOpening(event);
-                }
-            );
-            template.addEventListener(
-                'privatecellheaderactionmenuclosed',
-                (event) => {
-                    this.handleHeaderActionMenuClosed(event);
-                }
-            );
-            template.addEventListener(
-                'privatecellheaderactiontriggered',
-                (event) => {
-                    this.handleHeaderActionTriggered(event);
-                }
-            );
-            // Open sorting modal
+            template.addEventListener('privatecellheaderactionmenuopening', (event) => {
+                this.handleHeaderActionMenuOpening(event);
+            });
+            template.addEventListener('privatecellheaderactionmenuclosed', event => {
+                this.handleHeaderActionMenuClosed(event);
+            });
+            template.addEventListener('privatecellheaderactiontriggered', (event) => {
+                this.handleHeaderActionTriggered(event);
+            });
             template.addEventListener('privateopensortingmodal', (event) => {
                 this.handleOpenSortingModal(event);
             });
-            // Inline edit
             template.addEventListener('privateeditcell', (event) => {
                 this.handlePrivateDatatableEditCell(event);
             });
         }
-
         this.updateColumnsAndRows();
         if (state.enableViewportRendering || state.virtualize) {
-            // Render just one row at the start to minimize
-            // Impact of style recalculations
             state.renderedRowCount = 1;
         }
         if (_customerSelectedRows) {
@@ -1462,30 +803,15 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             setDisabledRowsKeys(state, _customerDisabledRows);
         }
     }
-
-    /**
-     * Renders the appropriate template - div.html or table.html,
-     * based on the `render-mode` value passed in and whether or not
-     * an auto resize is queued since auto mode requires table template.
-     * If template is changed, resize observers are disconnected.
-     *
-     * By default, table.html is rendered
-     */
     render() {
-        const requireTableTemplate =
-            this._columnWidthManager.isAutoResizingUpdateQueued;
-        // Putting this in renderedCallback results in extra render
-        // When using auto column widths
+        const requireTableTemplate = this._columnWidthManager.isAutoResizingUpdateQueued;
         if (!this._hasRendered) {
             this._hasRendered = true;
         }
-        const templateToRender =
-            this.state.renderModeRoleBased && !requireTableTemplate
-                ? divTemplate
-                : tableTemplate;
+        const templateToRender = this.state.renderModeRoleBased && !requireTableTemplate
+            ? divTemplate
+            : tableTemplate;
         if (templateToRender !== this._renderedTemplate) {
-            // if private types present, don't reset custom types since template
-            // change will trigger slotchange event without types actually changing
             this._shouldResetCustomTypes =
                 !this._privateTypes.privateCustomTypes.size;
             disconnectObservers(this);
@@ -1494,56 +820,27 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }
         return templateToRender;
     }
-
     renderedCallback() {
-        const {
-            _columnWidthManager,
-            gridContainer,
-            refs,
-            state,
-            template,
-            widthsData,
-        } = this;
-
-        // Initial set of custom types should be set in renderedCallback
-        // To avoid extra calls to renderedCallback after first slotchange
+        const { _columnWidthManager, gridContainer, refs, state, template, widthsData, } = this;
         if (!this._hasSetInitialCustomTypes) {
             this.setCustomTypes();
             this._hasSetInitialCustomTypes = true;
-            // Return here since a re-render will occur on auto width
-            // tables for column updates if custom types added
-            if (
-                this._privateTypes.privateCustomTypes.size &&
-                widthsData.columnWidthsMode === 'auto'
-            ) {
+            if (this._privateTypes.privateCustomTypes.size &&
+                widthsData.columnWidthsMode === 'auto') {
                 return;
             }
         }
-
-        // 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(gridContainer, {
             'aria-label': this.ariaLabel,
             'aria-labelledby': this.ariaLabelledBy,
             'aria-describedby': this.ariaDescribedBy,
         });
-
         const { renderModeInline } = state;
         if (_columnWidthManager.isResizingUpdateQueued) {
             const { columns } = state;
-            const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(
-                widthsData,
-                columns
-            );
-            // Tracked state changes.
-            _columnWidthManager.adjustColumnsSize(
-                template,
-                refs,
-                columns,
-                widthsData
-            );
+            const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(widthsData, columns);
+            _columnWidthManager.adjustColumnsSize(template, refs, columns, widthsData);
             state.shouldResetHeights = true;
-            // Managing cell widths is required for role-based render mode.
             if (state.renderModeRoleBased) {
                 recomputeCellStyles(state);
             }
@@ -1553,55 +850,30 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             this._recalculateHeaderHeight = true;
             this.updateTableAndScrollerStyleOnRender();
         }
-
         updateObservers(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.
         state.cellToFocusNext = undefined;
-
-        // Reset focus styles on re-render.
         if (this._shouldResetFocus) {
-            // 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.
             const { activeCell } = state;
-            if (
-                activeCell &&
+            if (activeCell &&
                 activeCell.hasFocus &&
-                !state.inlineEdit.isPanelVisible
-            ) {
+                !state.inlineEdit.isPanelVisible) {
                 const cellElement = getActiveCellElement(template, state);
                 const cellElementChild = getCellElementChild(cellElement);
-                if (
-                    !renderModeInline &&
+                if (!renderModeInline &&
                     cellElement &&
                     cellElementChild &&
-                    !cellElementChild.classList.contains(FOCUS_CLASS)
-                ) {
-                    // Tracked state change.
-                    setFocusActiveCell(
-                        state,
-                        template,
-                        refs,
-                        null,
-                        null,
-                        false
-                    );
+                    !cellElementChild.classList.contains(FOCUS_CLASS)) {
+                    setFocusActiveCell(state, template, refs, null, null, false);
                 }
             }
         }
-
         const { hasRenderedFirstTime, hasRenderedTable } = state;
         const virtualize = !!state.virtualize;
         const { length: rowCount } = state.rows;
-
-        // Untracked state changes.
         state.hasRenderedFirstTime = true;
         state.hasRenderedTable = true;
-
         let shouldUpdateWrapperHeight = false;
         if (virtualize || state.enableViewportRendering) {
             const { _renderManager } = this;
@@ -1611,8 +883,7 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 }
             }
             if (!hasRenderedFirstTime) {
-                const outerContainer =
-                    refs?.outerContainer ||
+                const outerContainer = refs?.outerContainer ||
                     template.querySelector('div.dt-outer-container');
                 _renderManager.connectResizeObserver(outerContainer);
             }
@@ -1620,28 +891,15 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 shouldUpdateWrapperHeight = true;
             }
         }
-
-        // eslint-disable-next-line @lwc/lwc/no-async-operation, @lwc/lwc/ssr-no-restricted-browser-globals
         requestAnimationFrame(() => {
-            // Only performs reads
             if (shouldUpdateWrapperHeight) {
                 const { _renderManager } = this;
                 _renderManager.updateWrapperHeight(this.getWrapperHeight);
-
-                // Reset the row count if we already had one before updating the wrapper height.
-                // This can happen if the number of rows was calculated before the datatable
-                // was rendered.
                 if (state.renderedRowCount) {
-                    _renderManager.updateViewportRendering(
-                        state,
-                        gridContainer,
-                        true
-                    );
+                    _renderManager.updateViewportRendering(state, gridContainer, true);
                 }
             }
-
             this.updateHeaderHeight();
-            // Performs only writes
             if (rowCount && renderModeInline && !hasRenderedTable) {
                 this.updateCheckboxCellsAriaAttrs();
                 if (hasLinkProvider(template)) {
@@ -1651,12 +909,9 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             }
         });
     }
-
     updateHeaderHeight() {
-        if (
-            this.state.wrapTableHeader !== 'none' &&
-            this._recalculateHeaderHeight
-        ) {
+        if (this.state.wrapTableHeader !== 'none' &&
+            this._recalculateHeaderHeight) {
             const headerCells = this.refs.headerRow?.children || [];
             let headerTextHeight = 0;
             for (let i = 0; i < headerCells.length; i += 1) {
@@ -1666,16 +921,14 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                     headerTextHeight = headerCellHeight;
                 }
             }
-            // Header height only accounts for the height of the text
-            // Add 16 px for padding around the text
             this._headerHeight = headerTextHeight + 16;
             this._recalculateHeaderHeight = false;
-        } else if (this._recalculateHeaderHeight) {
+        }
+        else if (this._recalculateHeaderHeight) {
             this._headerHeight = 0;
             this._recalculateHeaderHeight = false;
         }
     }
-
     updateTableAndScrollerStyleOnRender() {
         const scrollYEle = getScrollerY(this.template, this.refs);
         const tableElement = getGridContainerFromScrollerY(scrollYEle);
@@ -1686,64 +939,33 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             scrollYEle.style = this.computedScrollerYStyle;
         }
     }
-
     disconnectedCallback() {
         disconnectObservers(this);
         this._renderManager.disconnectResizeObserver();
     }
-
-    /** ************************ EVENT HANDLERS ***************************/
-
     handleCellButtonClick = handleCellButtonClick;
-
     handlePrivateDatatableEditCell = handleEditCell;
-
     handleHeaderActionMenuClosed = handleHeaderActionMenuClosed;
-
     handleHeaderActionMenuOpening = handleHeaderActionMenuOpening;
-
     handleHeaderActionTriggered = handleHeaderActionTriggered;
-
     handleKeydownOnCell = handleKeydownOnCell;
-
     handleLoadDynamicActions = handleLoadDynamicActions;
-
     handlePrimitiveDatatableCellClick = handlePrimitiveDatatableCellClick;
-
     handlePrimitiveDatatableCellFocus = handlePrimitiveDatatableCellFocus;
-
     handlePrimitiveDatatableCellKeydown = handlePrimitiveDatatableCellKeydown;
-
     handleRowSelectionChange = handleRowSelectionChange;
-
     handleRowActionTriggered = handleRowActionTriggered;
-
     handleCustomTypesChange() {
         if (this._shouldResetCustomTypes) {
             this.setCustomTypes();
-        } else {
-            // Event was triggered by the initial render or template change
-            // after already setting custom types, so we ignore this call
+        }
+        else {
             this._shouldResetCustomTypes = true;
         }
     }
-
-    /**
-     * Handles the 'keydown' event on <table> and the
-     * corresponding <div> on the role-based table
-     *
-     * @param {KeyboardEvent} event - 'keydown'
-     */
     handleTableKeydown = handleKeydownOnTable;
-
-    /**
-     * Handles the 'keydown' event on data row <tr> (table-based) and div[role="row"] (role-based)
-     *
-     * @param {KeyboardEvent} event - 'keydown'
-     */
     handleKeydownOnDataRow(event) {
         const { state } = this;
-        // we probably should not be doing this unless we actually are interested in it
         if (state.keyboardMode === KEYBOARD_NAVIGATION_MODE && state.rowMode) {
             event.stopPropagation();
             const { currentTarget: tr } = event;
@@ -1760,93 +982,53 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             });
         }
     }
-
-    /**
-     * Handles the 'scroll' event on the table container
-     *
-     * @param {Event} event - 'scroll'
-     */
     handleHorizontalScroll(event) {
         assertContext(this);
         handleInlineEditPanelScroll.call(this, event);
     }
-
-    /**
-     * Handles the 'scroll' event on the child of the
-     * table container at div.slds-scrollable_y.
-     *
-     * @param {Event} event - 'scroll'
-     */
     handleVerticalScroll(event) {
         assertContext(this);
         const { state } = this;
         if (state.enableInfiniteLoading) {
             handleLoadMoreCheck.call(this, event);
         }
-
-        // Tracked state changes.
         handleInlineEditPanelScroll.call(this, event);
         if (state.virtualize) {
-            state.firstVisibleIndex = findFirstVisibleIndex(
-                this.state,
-                event.target.scrollTop
-            );
-        } else if (state.enableViewportRendering) {
+            state.firstVisibleIndex = findFirstVisibleIndex(this.state, event.target.scrollTop);
+        }
+        else if (state.enableViewportRendering) {
             this._renderManager.handleScroll(state, event);
         }
     }
-
-    /**
-     * Handles the 'click' event on the <table> element and
-     * the corresponding <div> in the role-based table
-     *
-     * @param {MouseEvent} event - 'click'
-     */
     handleTableCellClick(event) {
-        // handles the case when clicking on the margin/pading of the td/th
         const { target } = event;
         if (isCellElement(target)) {
-            // get the row/col key value from the primitive cell.
-            // const { rowKeyValue, colKeyValue } =
-            //     target.querySelector(':first-child');
             const cellElement = target;
             const { template, state } = this;
             state.hasReceivedFocus = true;
-            const { rowKeyValue } = cellElement.parentElement.dataset;
+            const { rowKeyValue } = cellElement.parentElement
+                .dataset;
             const { colKeyValue } = cellElement.dataset;
-            if (
-                state.rowMode ||
-                !isActiveCell(state, rowKeyValue, colKeyValue)
-            ) {
+            if (state.rowMode ||
+                !isActiveCell(state, rowKeyValue, colKeyValue)) {
                 const { activeCell } = state;
                 if (activeCell && state.rowMode) {
-                    // Untracked state change.
                     unsetRowNavigationMode(state);
-                    // Tracked state change.
                     updateRowTabIndex(state, activeCell.rowIndex, -1);
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
             if (!datatableHasFocus(state, template)) {
-                // Untracked state change.
                 setCellClickedForFocus(state);
             }
             scrollToCell(state, template, this.refs, cellElement);
         }
     }
-
-    /**
-     * Handles the 'privateupdatecolsort' event on lightning-datatable
-     * Used only for single column sorting from column header clicking
-     * @param {CustomEvent} event - 'privateupdatecolsort'
-     */
     handleUpdateColumnSort(event) {
         event.stopPropagation();
         const { fieldName, columnKey, sortDirection } = event.detail;
-
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
-
     handleOpenSortingModal(event) {
         event.stopPropagation();
         MultiColumnSortingModal.open({
@@ -1854,29 +1036,18 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         }).then((response) => {
             if (response && response.event.defaultPrevented) {
                 response.failure();
-            } else if (response) {
+            }
+            else if (response) {
                 response.success();
             }
         });
     }
-
-    /**
-     * Handles the 'resizecol' event on lightning-datatable
-     *
-     * @param {CustomEvent} event - 'resizecol'
-     */
     handleResizeColumn(event) {
         event.stopPropagation();
         const { state } = this;
         const { colIndex, widthDelta: delta } = event.detail;
         if (delta !== 0) {
-            resizeColumnWithDelta(
-                state.columns,
-                this.widthsData,
-                colIndex,
-                delta
-            );
-            // Managing cell widths is required for role-based render mode.
+            resizeColumnWithDelta(state.columns, this.widthsData, colIndex, delta);
             if (state.renderModeRoleBased) {
                 recomputeCellStyles(state);
             }
@@ -1885,63 +1056,37 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             this._recalculateHeaderHeight = true;
         }
     }
-
-    /**
-     * 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'
-     */
     handleResizeStart(event) {
         event.stopPropagation();
         this._isResizing = true;
     }
-
-    /**
-     * 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'
-     */
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
         this.state.shouldResetHeights = true;
     }
-
-    /**
-     * Handles the `selectallrows`, `deselectallrows`, `selectrow`, `deselectrow`
-     * events on lightning-datatable
-     *
-     * @param {CustomEvent} event - `selectallrows`, `deselectallrows`, `selectrow`, `deselectrow`
-     */
     handleSelectionCellClick(event) {
         this.handleCellFocusByClick(event);
         const { type } = event;
         if (type === 'selectrow') {
             handleSelectRow.call(this, event);
-        } else if (type === 'deselectrow') {
+        }
+        else if (type === 'deselectrow') {
             handleDeselectRow.call(this, event);
-        } else if (type === 'selectallrows') {
+        }
+        else if (type === 'selectallrows') {
             handleSelectAllRows.call(this, event);
-        } else if (type === 'deselectallrows') {
+        }
+        else if (type === 'deselectallrows') {
             handleDeselectAllRows.call(this, event);
         }
-
         updateRowDisabledStatesForEditLimit(this.state, this._privateTypes);
     }
-
-    /**
-     * Handles the 'privatecellfocusedbyclick' event on lightning-datatable
-     *
-     * @param {CustomEvent} event - 'privatecellfocusedbyclick'
-     */
     handleCellFocusByClick(event) {
         event.stopPropagation();
         const { state } = this;
         state.hasReceivedFocus = true;
-        const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
-            event.detail;
+        const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } = event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
             const { activeCell } = state;
             if (activeCell && state.rowMode) {
@@ -1954,12 +1099,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         const cellElement = getCellElementFromEventTarget(event.target);
         scrollToCell(state, this.template, this.refs, cellElement);
     }
-
-    /**
-     * Handles the 'privatecellfalseblurred' event on lightning-datatable
-     *
-     * @param {CustomEvent} event - 'privatecellfalseblurred'
-     */
     handleFalseCellBlur(event) {
         event.stopPropagation();
         const { state } = this;
@@ -1967,32 +1106,9 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
             this.setActiveCell(rowKeyValue, colKeyValue);
         }
-        // Tracked state change.
         setFocusActiveCell(state, this.template, this.refs);
     }
-
-    /**
-     * Handles the 'focusin' event on <table> and the corresponding
-     * <div> on the role-based table
-     *
-     * @param {FocusEvent} event - 'focusin'
-     */
     handleTableFocusIn = handleDatatableFocusIn;
-
-    /**
-     * 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
-     * and when the active cell loses focus after renderedRows changes
-     * on a virtualized table, in which case we don't want to lose focus.
-     *
-     * We account for this by setting activeCell.hasFocus to the value of
-     * _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'
-     */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
         const { activeCell } = this.state;
@@ -2000,81 +1116,39 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             activeCell.hasFocus = this._shouldResetFocus;
         }
     }
-
-    /**
-     * Handles the 'ieditfinished' event on the inline edit panel -
-     * `lightning-primitive-datatable-iedit-panel`
-     *
-     * @param {CustomEvent} event - 'ieditfinished'
-     */
     handleInlineEditFinish(event) {
         assertContext(this);
         handleInlineEditFinish.call(this, event);
     }
-
-    /**
-     * Handles the 'masscheckboxchange' event on the inline edit panel -
-     * `lightning-primitive-datatable-iedit-panel`
-     *
-     * @param {CustomEvent} event - 'masscheckboxchange'
-     */
     handleMassCheckboxChange = handleMassCheckboxChange;
-
-    /**
-     * Handles the 'privatesave' event on the status bar -
-     * `lightning-primitive-datatable-status-bar` and
-     * fires the `save` custom event
-     *
-     * @param {CustomEvent} event - 'privatesave'
-     */
     handleInlineEditSave(event) {
         event.stopPropagation();
         event.preventDefault();
         closeInlineEdit(this);
         const { draftValues } = this;
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-            new CustomEvent('save', {
-                detail: {
-                    draftValues,
-                },
-            })
-        );
-    }
-
-    /**
-     * Handles the 'privatecancel' event on the status bar -
-     * `lightning-primitive-datatable-status-bar` and
-     * fires the `cancel` custom event
-     *
-     * @param {CustomEvent} event - 'privatecancel'
-     */
+        this.dispatchEvent(new CustomEvent('save', {
+            detail: {
+                draftValues,
+            },
+        }));
+    }
     handleInlineEditCancel(event) {
         event.stopPropagation();
         event.preventDefault();
-
         closeInlineEdit(this);
-
         const customerEvent = new CustomEvent('cancel', {
             cancelable: true,
         });
-
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(customerEvent);
-
         if (!customerEvent.defaultPrevented) {
             cancelInlineEdit(this);
         }
         updateActiveCellTabIndexAfterSync(this.state);
     }
-
     handleMouseOver(event) {
         const { state } = this;
-        if (
-            !features.enableDatatableHoverStyling ||
-            !state.hasHighlightStyling
-        ) {
+        if (!features.enableDatatableHoverStyling ||
+            !state.hasHighlightStyling) {
             return;
         }
         event.stopPropagation();
@@ -2085,13 +1159,10 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             state.hoveredRowKeyValue = rowKeyValue;
         }
     }
-
     handleMouseOut(event) {
         const { state } = this;
-        if (
-            !features.enableDatatableHoverStyling ||
-            !state.hasHighlightStyling
-        ) {
+        if (!features.enableDatatableHoverStyling ||
+            !state.hasHighlightStyling) {
             return;
         }
         event.stopPropagation();
@@ -2102,65 +1173,25 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             state.hoveredRowKeyValue = undefined;
         }
     }
-
-    /**
-     * @event LightningDatatable#onprivatelookupitempicked We need to augment the original event LightningFormattedLookup#onprivatelookupitempicked
-     * @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
-     *
-     * @param {CustomEvent} event - 'privatelookupitempicked'
-     * @fires LightningDatatable#onprivatelookupitempicked
-     */
     handlePrivateLookupItemPicked(event) {
         event.stopPropagation();
         event.preventDefault();
-
         const { recordId } = event.detail;
-        const { rowIndex, rowKeyValue } =
-            this.computeRowLookupItemPickedInformation(event.currentTarget);
-
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-            // We will the below Eslint rule as we use a constant to apply the name of the event
-
-            new CustomEvent(
-                FORMATTED_LOOKUP_EVENTS.PrivateLookupItemPickedEvent.NAME, // Reuse the same event's name for homogenous usage
-                {
-                    composed: true,
-                    cancelable: true,
-                    bubbles: true,
-                    detail: {
-                        recordId,
-                        rowIndex,
-                        rowKeyValue,
-                    },
-                }
-            )
-        );
-    }
-
-    /**
-     * We control the checkbox behavior with the state and we handle it in the container,
-     * but we need to prevent default in order to avoid the checkbox to change state
-     * with the click and the generated click in the input from the label
-     *
-     * @param {Object} event - click event of the checkbox
-     */
+        const { rowIndex, rowKeyValue } = this.computeRowLookupItemPickedInformation(event.currentTarget);
+        this.dispatchEvent(new CustomEvent(FORMATTED_LOOKUP_EVENTS.PrivateLookupItemPickedEvent.NAME, {
+            composed: true,
+            cancelable: true,
+            bubbles: true,
+            detail: {
+                recordId,
+                rowIndex,
+                rowKeyValue,
+            },
+        }));
+    }
     handleInlinedCheckboxClick(event) {
         const { state } = this;
-
-        // Click was catch on the input, stop propagation to avoid to be handled in container.
-        // ideally you can let it bubble and be handled in there, but there is a raptor issue:
-        // https://git.soma.salesforce.com/raptor/raptor/issues/838
         event.stopPropagation();
-
         const { currentTarget: checkboxElement } = event;
         const { parentElement: checkboxContainer } = checkboxElement;
         const { parentElement: cellElement } = checkboxContainer;
@@ -2173,7 +1204,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             isMultiple: event.shiftKey,
         });
     }
-
     handleInlinedCheckboxContainerClick(event) {
         const { state } = this;
         const { currentTarget: checkboxContainer } = event;
@@ -2183,10 +1213,7 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         if (row.isDisabled) {
             return;
         }
-        // Click was catch in the label, the default its to activate the checkbox,
-        // lets prevent it to avoid to send a double event.
         event.preventDefault();
-
         const { colKeyValue } = cellElement.dataset;
         const { firstElementChild: checkboxElement } = checkboxContainer;
         this.fireInlinedCheckboxSelection(checkboxElement, row.isSelected, {
@@ -2195,60 +1222,45 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             isMultiple: event.shiftKey,
         });
     }
-
     handleInlinedCheckboxContainerMouseDown(event) {
-        // Prevent selecting text by Shift+click
         if (this.state.renderModeInline && event.shiftKey) {
             event.preventDefault();
         }
     }
-
     handleInlinedEditButtonClick(event) {
         const { state } = this;
         const cellElement = state.renderModeInline
             ? getCellElementFromEventTarget(event.target)
             : undefined;
-
         if (cellElement) {
             state.hasReceivedFocus = true;
             const cellElementChild = getCellElementChild(cellElement);
-            cellElementChild.dispatchEvent(
-                new CustomEvent('privateeditcell', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        rowKeyValue:
-                            cellElement.parentElement.dataset.rowKeyValue,
-                        colKeyValue: cellElement.dataset.colKeyValue,
-                    },
-                })
-            );
+            cellElementChild.dispatchEvent(new CustomEvent('privateeditcell', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    rowKeyValue: cellElement.parentElement
+                        .dataset.rowKeyValue,
+                    colKeyValue: cellElement.dataset.colKeyValue,
+                },
+            }));
         }
     }
-
-    /** ********************** EVENT DISPATCHERS **************************/
-
     fireInlinedCheckboxSelection(checkboxElement, isSelected, detail) {
         const actionName = isSelected ? 'deselectrow' : 'selectrow';
-        checkboxElement.dispatchEvent(
-            new CustomEvent(actionName, {
-                bubbles: true,
-                composed: true,
-                detail,
-            })
-        );
+        checkboxElement.dispatchEvent(new CustomEvent(actionName, {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
     }
-
     fireSelectedRowsChange(selectedRows, config = {}) {
         if (!import.meta.env.SSR) {
-            this.dispatchEvent(
-                new CustomEvent('rowselection', {
-                    detail: { selectedRows, config },
-                })
-            );
+            this.dispatchEvent(new CustomEvent('rowselection', {
+                detail: { selectedRows, config },
+            }));
         }
     }
-
     fireSortedColumnChange(fieldName, columnKey, sortDirection) {
         const sortEvent = new CustomEvent('sort', {
             detail: {
@@ -2260,60 +1272,34 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 sortDirection,
             },
         });
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(sortEvent);
     }
-
     fireOnResize(isUserTriggered) {
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-            new CustomEvent('resize', {
-                detail: {
-                    columnWidths: getCustomerColumnWidths(
-                        this.state.columns,
-                        this.widthsData
-                    ),
-                    isUserTriggered: !!isUserTriggered,
-                },
-            })
-        );
+        this.dispatchEvent(new CustomEvent('resize', {
+            detail: {
+                columnWidths: getCustomerColumnWidths(this.state.columns, this.widthsData),
+                isUserTriggered: !!isUserTriggered,
+            },
+        }));
     }
-
-    /** *********************** HELPER FUNCTIONS **************************/
-
     updateRows() {
         this.updateRowsBeforeIndexes();
         this.updateRowsAndCells();
         this.updateRowsAfterIndexes();
     }
-
     updateRowsBeforeIndexes() {
-        // Untracked state change.
         if (!import.meta.env.SSR) {
             setCellToFocusFromPrev(this.state, this.template);
         }
     }
-
     updateRowsAfterIndexes() {
         const { state, widthsData } = this;
         if (state.enableViewportRendering || state.virtualize) {
-            this._renderManager.updateViewportRendering(
-                state,
-                this.gridContainer,
-                !!state.virtualize
-            );
-        }
-
-        // Tracked state changes.
+            this._renderManager.updateViewportRendering(state, this.gridContainer, !!state.virtualize);
+        }
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
-        // 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
             if (!this._rowSelectionEventPending) {
                 this._rowSelectionEventPending = true;
                 Promise.resolve().then(() => {
@@ -2324,21 +1310,15 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 });
             }
         });
-        // Untracked state change.
         syncActiveCell(state);
-
         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 cellToFocusNext
         if (!import.meta.env.SSR && state.activeCell && state.cellToFocusNext) {
-            // Tracked state change.
             setFocusActiveCell(state, this.template, this.refs);
         }
     }
-
     updateColumns(columns) {
         setColumns(this.state, columns, this._privateTypes);
         if (this.isConnected) {
@@ -2347,52 +1327,33 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             this.updateColumnsAfterIndexes();
         }
     }
-
     updateColumnsBeforeIndexes() {
         const { state } = this;
-        // Untracked state changes.
-        // Calculate cell to focus next before indexes are updated.
         if (!import.meta.env.SSR) {
             setCellToFocusFromPrev(state, this.template);
         }
         updateRowNavigationMode(state);
-        // Tracked state changes.
         setDirtyValues(state, this._draftValues);
-        // Update state.wrapText and when type is not in NON_WRAPPABLE_TYPES
-        // and sets internal header actions.
         updateHeaderInternalActions(state);
     }
-
     updateColumnsAfterIndexes() {
         const { state, widthsData } = this;
-
-        // Tracked state changes.
         updateBulkSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
         updateColumnWidthsMetadata(state.columns, widthsData);
-        // Unset the cellToFocusNext if the column still exists after indexes calculation.
         updateCellToFocusFromPrev(state);
-
-        if (
-            state.data.length > 0 &&
-            state.columns.length !== widthsData.columnWidths.length
-        ) {
-            // Untracked state change.
-            // When there are column changes, update the active cell.
+        if (state.data.length > 0 &&
+            state.columns.length !== widthsData.columnWidths.length) {
             syncActiveCell(state);
         }
         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 cellToFocusNext.
         if (!import.meta.env.SSR && state.activeCell && state.cellToFocusNext) {
-            // Tracked state change.
             setFocusActiveCell(state, this.template, this.refs);
         }
     }
-
     updateColumnsAndRows() {
         this.updateColumnsBeforeIndexes(this._rawColumns);
         this.updateRowsBeforeIndexes();
@@ -2400,104 +1361,63 @@ export default class LightningDatatable extends LightningShadowBaseClass {
         this.updateRowsAfterIndexes();
         this.updateColumnsAfterIndexes();
     }
-
     updateRowsAndCells() {
         const { state } = this;
-        // Untracked state change.
         state.hasRenderedTable = false;
-        // Tracked state changes.
         updateRowsAndCells(state, this._privateTypes, this._datatableId);
     }
-
     updateVirtualizedRowHeights() {
         const state = this.state;
         const virtualizedRows = state.virtualize && this.renderedRows.length;
-
-        // no need to handle other virtualization/row height logic
-        // if heights need to be reset
         if (state.shouldResetHeights) {
             resetRowHeights(state);
             state.shouldResetHeights = false;
-        } else if (virtualizedRows) {
-            handleVariableRowHeights(
-                this.template,
-                state,
-                this.renderedRows,
-                this.refs
-            );
+        }
+        else if (virtualizedRows) {
+            handleVariableRowHeights(this.template, state, this.renderedRows, this.refs);
         }
     }
-
     setSelectedRows(value) {
-        // A mix of tracked and untracked state changes.
         setSelectedRowsKeys(this.state, value);
         this.handleRowSelectionChange();
-
         updateRowDisabledStatesForEditLimit(this.state, this._privateTypes);
     }
-
     setActiveCell(rowKeyValue, colKeyValue) {
         const { state, template } = this;
         const newActiveCell = getCellByKeys(state, rowKeyValue, colKeyValue);
-        // Tracked state change.
         setBlurActiveCell(state, template);
-        // Untracked state change.
         state.activeCell = newActiveCell;
-        // Tracked state changes.
         addFocusStylesToActiveCell(state, template);
-        updateCellTabIndex(
-            state,
-            newActiveCell.rowIndex,
-            newActiveCell.colIndex,
-            0
-        );
-
+        updateCellTabIndex(state, newActiveCell.rowIndex, newActiveCell.colIndex, 0);
         resetHighlightedRowClasses(state, rowKeyValue, false);
     }
-
     setCustomTypes() {
-        const customTypesSlot = this.template.querySelector(
-            'slot[name="customdatatypes"]'
-        );
+        const customTypesSlot = this.template.querySelector('slot[name="customdatatypes"]');
         if (customTypesSlot) {
             const assignedNodes = customTypesSlot.assignedNodes();
             if (assignedNodes.length) {
                 let provider = assignedNodes[0];
-                // Use to get custom types from lightning-tree-grid
                 if (provider?.tagName === 'SLOT') {
                     const innerAssignedNodes = provider.assignedNodes();
-                    provider = innerAssignedNodes.length
-                        ? innerAssignedNodes[0]
-                        : {};
+                    provider = (innerAssignedNodes.length ? innerAssignedNodes[0] : {});
                 }
                 if (typeof provider.getDataTypes === 'function') {
-                    this._privateTypes = new DatatableTypes(
-                        provider.getDataTypes()
-                    );
+                    this._privateTypes = new DatatableTypes(provider.getDataTypes());
                     this.updateColumns(this._rawColumns);
-                    this._columnWidthManager.handleColumnsChange(
-                        this.state.columns,
-                        this.validRefs
-                    );
+                    this._columnWidthManager.handleColumnsChange(this.state.columns, this.validRefs);
                 }
-            } else {
-                // If no assigned nodes, there will be no extra slotchange event
-                // We need to set this var so we don't ignore the call
+            }
+            else {
                 this._shouldResetCustomTypes = true;
             }
         }
     }
-
-    /**
-     * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
-     */
     getViewableRect() {
         const { refs, template } = this;
         const scrollerY = getScrollerY(template, refs);
         const scrollerYRect = scrollerY.getBoundingClientRect();
         const scrollerX = getScrollerX(template, refs);
         const scrollerXRect = scrollerX.getBoundingClientRect();
-
         return {
             left: scrollerXRect.left,
             right: scrollerXRect.right,
@@ -2505,45 +1425,29 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             bottom: scrollerYRect.bottom,
         };
     }
-
-    // W-6363867, W-7143375 Safari Refresh Bug
     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, @lwc/lwc/ssr-no-restricted-browser-globals
                 requestAnimationFrame(() => {
-                    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
                     thead.style.display = '';
                 });
             }
         }
     }
-
-    /**
-     * @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 { 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 };
     }
-
     updateCheckboxCellsAriaAttrs() {
         const { computedCheckboxColumnHeaderId, state, template } = this;
         const { checkboxCells } = state;
         const { length: cellCount } = checkboxCells;
-        // To avoid a critical performance penalty we query the template ONCE
-        // instead of for EVERY cell.
         const checkboxElements = cellCount
-            ? template.querySelectorAll(
-                  '[data-inline-type="primitive-cell-checkbox"]'
-              )
+            ? template.querySelectorAll('[data-inline-type="primitive-cell-checkbox"]')
             : [];
         let scopedIdPostfix;
         for (let i = 0, { length } = checkboxElements; i < length; i += 1) {
@@ -2555,20 +1459,14 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 const { id } = labelElem;
                 scopedIdPostfix = id.slice(id.lastIndexOf('-'));
             }
-            inputElem.setAttribute(
-                'aria-labelledby',
-                `${cell.checkboxLabelId}${scopedIdPostfix} ${computedCheckboxColumnHeaderId}`
-            );
+            inputElem.setAttribute('aria-labelledby', `${cell.checkboxLabelId}${scopedIdPostfix} ${computedCheckboxColumnHeaderId}`);
         }
     }
-
     updateLookupCellsLinkInfo() {
         assertContext(this);
         const { state, template } = this;
         const { lookupCells } = state;
         const { length: cellCount } = lookupCells;
-        // To avoid a critical performance penalty we query the template ONCE
-        // instead of for EVERY cell.
         const lookupElements = cellCount
             ? template.querySelectorAll('[data-inline-type="formatted-lookup"]')
             : [];
@@ -2576,11 +1474,8 @@ export default class LightningDatatable extends LightningShadowBaseClass {
             const cell = lookupCells[i];
             const lookupElem = lookupElements[i];
             const { value: recordId } = cell;
-            // Set _handleLookupAnchorClick to untracked _cell.
             cell._handleLookupAnchorClick = () => {
-                lookupElem.dispatchEvent(
-                    new PrivateLookupItemPickedEvent({ recordId })
-                );
+                lookupElem.dispatchEvent(new PrivateLookupItemPickedEvent({ recordId }));
             };
             if (lookupElem.getAttribute('data-navigation') === 'enable') {
                 lookupElem.removeAttribute('data-navigation');
@@ -2598,27 +1493,23 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                     cell.lookupIsNavigable = lookupIsNavigable;
                     cell.lookupLink = url;
                     cell._handleLookupAnchorClick = (event) => {
-                        lookupElem.dispatchEvent(
-                            new PrivateLookupItemPickedEvent({ recordId })
-                        );
+                        lookupElem.dispatchEvent(new PrivateLookupItemPickedEvent({ recordId }));
                         dispatcher.call(lookupElem, event);
                     };
                     if (lookupIsNavigable) {
                         lookupElem.setAttribute('data-navigation', 'enable');
-                    } else {
+                    }
+                    else {
                         lookupElem.removeAttribute('data-navigation');
                     }
                 });
             }
         }
     }
-
     updateUrlCellsLinkInfo() {
         const { state, template } = this;
         const { shownUrlCells } = state;
         const { length: cellCount } = shownUrlCells;
-        // To avoid a critical performance penalty we query the template ONCE
-        // instead of for EVERY cell.
         const urlElements = cellCount
             ? template.querySelectorAll('[data-inline-type="formatted-url"]')
             : [];
@@ -2630,7 +1521,6 @@ export default class LightningDatatable extends LightningShadowBaseClass {
                 target: cell.urlTarget,
             }).then((linkInfo) => {
                 const { dispatcher, url } = linkInfo;
-                // Set _handleUrlAnchorClick to untracked _cell.
                 cell._handleUrlAnchorClick = (event) => {
                     dispatcher.call(urlElem, event);
                 };