lightning-base-components 1.21.6-alpha → 1.21.8-alpha

package/src/lightning/datatable/datatable.js

@@ -5,6 +5,12 @@ import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLi
 import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
 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,
@@ -15,7 +21,7 @@ import {
 import { LightningDatatableResizeObserver } from './resizeObserver';
 import { ColumnWidthManager } from './columnWidthManager';
 import { getDefaultState } from './state';
-import { setColumns, generateHeaderIndexes } from './columns';
+import { setColumns } from './columns';
 import {
     getCustomerColumnWidths,
     getResizerDefaultState,
@@ -29,9 +35,10 @@ import {
 import { setErrors } from './errors';
 import {
     setKeyField,
-    updateRowsAndCells,
-    updateCellClassForRoleBasedMode,
     recomputeCellStyles,
+    updateCells,
+    updateCellClassForRoleBasedMode,
+    updateRowsAndCells,
 } from './rows';
 import {
     handleCellButtonClick,
@@ -56,10 +63,11 @@ import {
 } from './rowSelectionShared';
 import {
     handleHeaderActionMenuClosed,
-    handleHeaderActionTriggered,
     handleHeaderActionMenuOpening,
+    handleHeaderActionTriggered,
     updateHeaderInternalActions,
 } from './headerActions';
+import { getCellByKeys, getRowByKey } from './indexes';
 import {
     handleLoadMoreCheck,
     handlePrefetch,
@@ -85,12 +93,15 @@ import {
     datatableHasFocus,
     FOCUS_CLASS,
     getActiveCellElement,
-    getIndexesActiveCell,
-    getIndexesByKeys,
+    getCellElementChild,
+    getCellElementFromEventTarget,
     handleDatatableFocusIn,
     handleDatatableFocusOut,
     handleKeydownOnCell,
     handleKeydownOnTable,
+    handlePrimitiveDatatableCellClick,
+    handlePrimitiveDatatableCellFocus,
+    handlePrimitiveDatatableCellKeydown,
     isActiveCell,
     isCellElement,
     KEYBOARD_ACTION_MODE,
@@ -123,18 +134,22 @@ import {
     getRowDataSelector,
     getScrollerX,
     getScrollerY,
+    isLoadMore,
     isObjectLike,
+    isRenderModeInline,
     isRenderModeRoleBased,
 } from './utils';
 import { setWrapTextMaxLines } from './wrapText';
 import {
     handleVariableRowHeights,
     resetRowHeights,
-    resetTableHeight,
     findFirstVisibleIndex,
+    addTableHeight,
 } from './virtualization';
 import DatatableTypes from './types';
 
+const { PrivateLookupItemPickedEvent } = FORMATTED_LOOKUP_EVENTS;
+
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
     ariaLiveActionMode: labelAriaLiveActionMode,
@@ -190,9 +205,12 @@ export default class LightningDatatable extends LightningElement {
     _renderConfig;
     _renderManager;
     _renderMode = 'default';
+    _renderedTemplate = tableTemplate;
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
     _widthObserver; // Instance of LightningDatatableResizeObserver
+    _hasSetInitialCustomTypes = false;
+    _shouldResetCustomTypes = false;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -252,7 +270,7 @@ export default class LightningDatatable extends LightningElement {
     set columns(value) {
         const _rawColumns = Array.isArray(value) ? value : [];
         this._rawColumns = _rawColumns;
-        this.updateColumns(this._rawColumns);
+        this.updateColumns(_rawColumns);
         this._columnWidthManager.handleColumnsChange(this.state.columns);
     }
 
@@ -267,25 +285,35 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set data(value) {
-        const { state } = this;
-        const { data: previousData } = state;
+        const { _customerSelectedRows, state } = this;
+        const { data: previousData, columns } = state;
         const data = Array.isArray(value) ? value : [];
+        const isInfiniteLoading = isLoadMore(previousData, data);
 
         // Untracked state change.
         state.data = data;
-        this._columnWidthManager.handleDataChange(
-            previousData,
-            data,
-            state.columns
-        );
+        if (!isInfiniteLoading && data.length && columns.length) {
+            this._columnWidthManager.handleDataChange(columns);
+        }
 
         // do necessary updates since rows have changed
         if (this.hasValidKeyField) {
-            this.updateRows();
-            resetTableHeight(state);
+            if (this.isConnected) {
+                this.updateRows();
+            }
+            if (isInfiniteLoading) {
+                addTableHeight(state, previousData, data);
+            } else {
+                // if data is new, reset all virtualization data
+                state.heightCache = {};
+                state.offsets = [0];
+                state.offsetRanges = [{ start: 0, end: 0 }];
+                state.firstVisibleIndex = 0;
+                state.tableHeight = state.rowHeight * state.rows.length;
+            }
         }
-        if (this._customerSelectedRows) {
-            this.setSelectedRows(this._customerSelectedRows);
+        if (_customerSelectedRows) {
+            this.setSelectedRows(_customerSelectedRows);
         }
     }
 
@@ -321,7 +349,7 @@ export default class LightningDatatable extends LightningElement {
         this._draftValues = value;
         setDirtyValues(state, value);
 
-        if (this.hasValidKeyField) {
+        if (this.isConnected && this.hasValidKeyField) {
             this.updateRowsAndCells();
         }
 
@@ -358,8 +386,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set errors(value) {
-        setErrors(this.state, value);
-        this.updateRows();
+        const { state } = this;
+        setErrors(state, value);
+        if (this.isConnected) {
+            updateCells(state);
+        }
     }
 
     /**
@@ -373,7 +404,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set hideCheckboxColumn(value) {
-        const { state } = this;
+        const { _rawColumns, state } = this;
         const normalizedValue = normalizeBoolean(value);
 
         this._columnWidthManager.handleCheckboxColumnChange(
@@ -384,6 +415,41 @@ export default class LightningDatatable extends LightningElement {
         // Untracked state changes.
         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
+            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
+        );
+
+        state.showActionsMenu = normalizedValue;
+        // update the columns metadata again to update the status.
         this.updateColumns(this._rawColumns);
     }
 
@@ -449,7 +515,9 @@ export default class LightningDatatable extends LightningElement {
         setKeyField(state, value);
         // Tracked state change.
         setDirtyValues(state, this._draftValues);
-        this.updateRows();
+        if (this.isConnected) {
+            this.updateRows();
+        }
     }
 
     /**
@@ -500,9 +568,13 @@ export default class LightningDatatable extends LightningElement {
 
     set maxRowSelection(value) {
         const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            // Tracked state changes.
+            this.updateRowsAndCells();
+        }
         const previousSelectionLength = getCurrentSelectionLength(state);
         // A mix of tracked and untracked state changes.
-        setMaxRowSelection(state, value);
+        setMaxRowSelection(state, value, this._datatableId);
         if (previousSelectionLength > 0) {
             this.fireSelectedRowsChange(this.getSelectedRows());
         }
@@ -583,20 +655,25 @@ export default class LightningDatatable extends LightningElement {
         const { _renderConfig, state } = this;
         const renderMode = normalizeString(value, {
             fallbackValue: 'default',
-            validValues: ['default', 'role-based'],
+            validValues: [
+                'default',
+                'inline',
+                'role-based',
+                'role-based-inline',
+            ],
         });
+        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) {
-            const { _widthObserver } = this;
-            if (_widthObserver) {
-                _widthObserver.disconnect();
-            }
-            this._renderManager.disconnectResizeObserver();
+            // Tracked state changes.
+            this.updateRowsAndCells();
         }
         if (_renderConfig) {
             setVirtualize(state, _renderConfig.virtualize);
@@ -667,6 +744,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set selectedRows(value) {
+        if (!this.state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         this._customerSelectedRows = value;
         this.setSelectedRows(value);
     }
@@ -691,7 +771,17 @@ export default class LightningDatatable extends LightningElement {
         );
         // Untracked state change.
         state.showRowNumberColumn = normalizeBoolean(value);
-        this.updateColumns(_rawColumns);
+
+        if (this.isConnected) {
+            this.updateColumns(_rawColumns);
+        } else if (_rawColumns) {
+            // Component has not yet rendered so
+            // tree state should be reset to default
+            state.hadTreeDataTypePreviously = false;
+            state.treeColumn = undefined;
+            // Tracked state change.
+            setColumns(state, _rawColumns, this._privateTypes);
+        }
     }
 
     /**
@@ -757,7 +847,9 @@ export default class LightningDatatable extends LightningElement {
         // Untracked state changes.
         setWrapTextMaxLines(state, value);
         this._columnWidthManager.wrapTextMaxLines = state.wrapTextMaxLines;
-        this.updateRowsAndCells();
+        if (this.isConnected) {
+            updateCells(state);
+        }
     }
 
     /************************** PUBLIC METHODS ***************************/
@@ -769,6 +861,9 @@ export default class LightningDatatable extends LightningElement {
     @api
     getSelectedRows() {
         const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         const data = unwrap(state.data);
         const { rows } = state;
         const selectedRows = [];
@@ -795,6 +890,9 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     openInlineEdit() {
+        if (!this.state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         openInlineEditOnActiveCell(this);
     }
 
@@ -933,7 +1031,11 @@ export default class LightningDatatable extends LightningElement {
      * A table with no rows of data still has an aria-rowcount of 1
      */
     get ariaRowCount() {
-        return this.state.rows.length + 1;
+        const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
+        return state.rows.length + 1;
     }
 
     get hasValidKeyField() {
@@ -951,12 +1053,11 @@ export default class LightningDatatable extends LightningElement {
         return !this.widthsData.resizeColumnDisabled;
     }
 
-    get privateTypes() {
-        return this._privateTypes;
-    }
-
     get renderedRows() {
         const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         const { virtualize, rows, renderedRowCount } = state;
         if (virtualize) {
             const { firstIndex, lastIndex } =
@@ -1048,6 +1149,16 @@ export default class LightningDatatable extends LightningElement {
         template.addEventListener('privatecellfalseblurred', (event) => {
             this.handleFalseCellBlur(event);
         });
+        // Inlined cell interaction
+        template.addEventListener('click', (event) => {
+            this.handlePrimitiveDatatableCellClick(event);
+        });
+        template.addEventListener('focus', (event) => {
+            this.handlePrimitiveDatatableCellFocus(event);
+        });
+        template.addEventListener('keydown', (event) => {
+            this.handlePrimitiveDatatableCellKeydown(event);
+        });
         // Row level actions
         template.addEventListener('privatecellactiontriggered', (event) => {
             this.handleRowActionTriggered(event);
@@ -1058,7 +1169,6 @@ export default class LightningDatatable extends LightningElement {
         template.addEventListener('privatecellbuttonclicked', (event) => {
             this.handleCellButtonClick(event);
         });
-
         // Header actions
         template.addEventListener(
             'privatecellheaderactionmenuopening',
@@ -1078,19 +1188,42 @@ export default class LightningDatatable extends LightningElement {
                 this.handleHeaderActionTriggered(event);
             }
         );
+        // Open sorting modal
+        template.addEventListener('privateopensortingmodal', (event) => {
+            this.handleOpenSortingModal(event);
+        });
         // Inline edit
         template.addEventListener('privateeditcell', (event) => {
             this.handleEditCell(event);
         });
+
+        this.updateColumnsAndRows();
     }
 
     /**
      * Renders the appropriate template - div.html or table.html,
-     * based on the `render-mode` value passed in.
+     * 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() {
-        return this.state.renderModeRoleBased ? divTemplate : tableTemplate;
+        const requireTableTemplate =
+            this._columnWidthManager.isAutoResizingUpdateQueued;
+        const templateToRender =
+            this.state.renderModeRoleBased && !requireTableTemplate
+                ? divTemplate
+                : tableTemplate;
+        if (templateToRender !== this._renderedTemplate) {
+            const { _widthObserver } = this;
+            if (_widthObserver) {
+                _widthObserver.disconnect();
+            }
+            this._renderManager.disconnectResizeObserver();
+            this._renderedTemplate = templateToRender;
+        }
+        return templateToRender;
     }
 
     renderedCallback() {
@@ -1102,6 +1235,13 @@ export default class LightningDatatable extends LightningElement {
             widthsData,
         } = this;
 
+        // Initial set of custom types should be set in renderedCallback
+        // To avoid extra calls to renderedCallback after first slotchange
+        if (!this._hasSetInitialCustomTypes) {
+            this.setCustomTypes();
+            this._hasSetInitialCustomTypes = true;
+        }
+
         // 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, {
@@ -1110,6 +1250,7 @@ export default class LightningDatatable extends LightningElement {
             'aria-describedby': this.ariaDescribedBy,
         });
 
+        const { renderModeInline } = state;
         if (_columnWidthManager.isResizingUpdateQueued) {
             const { columns } = state;
             const fireResizeEvent = _columnWidthManager.shouldFireResizeEvent(
@@ -1175,10 +1316,12 @@ export default class LightningDatatable extends LightningElement {
                 !state.inlineEdit.isPanelVisible
             ) {
                 const cellElement = getActiveCellElement(template, state);
+                const cellElementChild = getCellElementChild(cellElement);
                 if (
+                    !renderModeInline &&
                     cellElement &&
-                    cellElement.parentElement &&
-                    !cellElement.parentElement.classList.contains(FOCUS_CLASS)
+                    cellElementChild &&
+                    !cellElementChild.classList.contains(FOCUS_CLASS)
                 ) {
                     // Tracked state change.
                     setFocusActiveCell(state, template, null, null, false);
@@ -1186,13 +1329,14 @@ export default class LightningDatatable extends LightningElement {
             }
         }
 
-        const { hasRenderedFirstTime } = state;
+        const { hasRenderedFirstTime, hasRenderedTable } = state;
         const virtualize = !!state.virtualize;
         const { length: rowCount } = state.rows;
 
         // Untracked state changes.
         // Set rendered flags BEFORE handlePrefetch() is called.
         state.hasRenderedFirstTime = true;
+        state.hasRenderedTable = true;
 
         if (virtualize || state.enableViewportRendering) {
             const { _renderManager } = this;
@@ -1202,7 +1346,7 @@ export default class LightningDatatable extends LightningElement {
                 }
             }
             if (!hasRenderedFirstTime) {
-                this._renderManager.connectResizeObserver(
+                _renderManager.connectResizeObserver(
                     template.querySelector('div.dt-outer-container')
                 );
             }
@@ -1221,6 +1365,14 @@ export default class LightningDatatable extends LightningElement {
                 }
             }
         }
+
+        if (rowCount && renderModeInline && !hasRenderedTable) {
+            this.updateCheckboxCellsAriaAttrs();
+            if (hasLinkProvider(template)) {
+                this.updateLookupCellsLinkInfo();
+                this.updateUrlCellsLinkInfo();
+            }
+        }
     }
 
     updateTableAndScrollerStyleOnRender() {
@@ -1259,22 +1411,23 @@ export default class LightningDatatable extends LightningElement {
 
     handleLoadDynamicActions = handleLoadDynamicActions;
 
+    handlePrimitiveDatatableCellClick = handlePrimitiveDatatableCellClick;
+
+    handlePrimitiveDatatableCellFocus = handlePrimitiveDatatableCellFocus;
+
+    handlePrimitiveDatatableCellKeydown = handlePrimitiveDatatableCellKeydown;
+
     handleRowSelectionChange = handleRowSelectionChange;
 
     handleRowActionTriggered = handleRowActionTriggered;
 
     handleCustomTypesChange() {
-        const assignedNodes = this.template
-            .querySelector('slot[name="customdatatypes"]')
-            .assignedNodes();
-        if (assignedNodes.length) {
-            const provider = assignedNodes[0];
-            if (typeof provider.getDataTypes === 'function') {
-                this._privateTypes = new DatatableTypes(
-                    provider.getDataTypes()
-                );
-                this.updateColumns(this._rawColumns);
-            }
+        if (this._shouldResetCustomTypes) {
+            this.setCustomTypes();
+        } else {
+            // On first call, custom types have already been set
+            // in renderedCallback. Subsequent calls
+            this._shouldResetCustomTypes = true;
         }
     }
 
@@ -1355,25 +1508,27 @@ export default class LightningDatatable extends LightningElement {
         const { target } = event;
         if (isCellElement(target)) {
             // get the row/col key value from the primitive cell.
-            const { rowKeyValue, colKeyValue } =
-                target.querySelector(':first-child');
-
+            // const { rowKeyValue, colKeyValue } =
+            //     target.querySelector(':first-child');
+            const cellElement = target;
             const { state } = this;
+            const { rowKeyValue } = cellElement.parentElement.dataset;
+            const { colKeyValue } = cellElement.dataset;
             if (
                 state.rowMode ||
                 !isActiveCell(state, rowKeyValue, colKeyValue)
             ) {
-                if (state.activeCell && state.rowMode) {
+                const { activeCell } = state;
+                if (activeCell && state.rowMode) {
                     // Untracked state change.
                     unsetRowNavigationMode(state);
-                    const { rowIndex } = getIndexesActiveCell(state);
                     // Tracked state change.
-                    updateRowTabIndex(state, rowIndex, -1);
+                    updateRowTabIndex(state, activeCell.rowIndex, -1);
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
-
             if (!datatableHasFocus(state, this.template)) {
+                // Untracked state change.
                 setCellClickedForFocus(state);
             }
         }
@@ -1381,47 +1536,33 @@ export default class LightningDatatable extends LightningElement {
 
     /**
      * 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 {
-            fieldNames,
-            sortDirections,
-            isMultiColumnSort,
-            fieldName,
-            columnKey,
-            sortDirection,
-        } = event.detail;
-
-        if (isMultiColumnSort) {
-            // multi-column sort
-            this.fireSortedColumnChange(
-                fieldNames,
-                sortDirections,
-                isMultiColumnSort,
-                fieldName,
-                columnKey,
-                sortDirection
-            );
-        } else {
-            // single-column sort
-            this.fireSortedColumnChange(
-                [fieldName],
-                [sortDirection],
-                false,
-                fieldName,
-                columnKey,
-                sortDirection
-            );
-        }
+        const { fieldName, columnKey, sortDirection } = event.detail;
+
+        this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
     handleCheckboxHeaderId(event) {
         this._checkboxColumnHeaderId = event.detail;
     }
 
+    handleOpenSortingModal(event) {
+        event.stopPropagation();
+        MultiColumnSortingModal.open({
+            dtInstance: this,
+        }).then((response) => {
+            if (response && response.event.defaultPrevented) {
+                response.failure();
+            } else if (response) {
+                response.success();
+            }
+        });
+    }
+
     /**
      * Handles the 'resizecol' event on lightning-datatable
      *
@@ -1501,10 +1642,10 @@ export default class LightningDatatable extends LightningElement {
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
             event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
-            if (state.activeCell && state.rowMode) {
+            const { activeCell } = state;
+            if (activeCell && state.rowMode) {
                 unsetRowNavigationMode(state);
-                const { rowIndex } = getIndexesActiveCell(state);
-                updateRowTabIndex(state, rowIndex, -1);
+                updateRowTabIndex(state, activeCell.rowIndex, -1);
             }
             this.setActiveCell(rowKeyValue, colKeyValue);
             refocusCellElement(state, this.template, needsRefocusOnCellElement);
@@ -1660,8 +1801,99 @@ export default class LightningDatatable extends LightningElement {
         );
     }
 
+    /**
+     * 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
+     */
+    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;
+        const { colKeyValue } = cellElement.dataset;
+        const { rowKeyValue } = cellElement.parentElement.dataset;
+        const row = getRowByKey(state, rowKeyValue);
+        this.fireInlinedCheckboxSelection(checkboxElement, row.isSelected, {
+            rowKeyValue,
+            colKeyValue,
+            isMultiple: event.shiftKey,
+        });
+    }
+
+    handleInlinedCheckboxContainerClick(event) {
+        const { state } = this;
+        const { currentTarget: checkboxContainer } = event;
+        const { parentElement: cellElement } = checkboxContainer;
+        const { rowKeyValue } = cellElement.parentElement.dataset;
+        const row = getRowByKey(state, rowKeyValue);
+        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, {
+            rowKeyValue,
+            colKeyValue,
+            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) {
+            const cellElementChild = getCellElementChild(cellElement);
+            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(
+            // eslint-disable-next-line lightning-global/no-custom-event-identifier-arguments
+            new CustomEvent(actionName, {
+                bubbles: true,
+                composed: true,
+                detail,
+            })
+        );
+    }
+
     fireSelectedRowsChange(selectedRows, config = {}) {
         this.dispatchEvent(
             new CustomEvent('rowselection', {
@@ -1670,26 +1902,18 @@ export default class LightningDatatable extends LightningElement {
         );
     }
 
-    fireSortedColumnChange(
-        fieldNames,
-        sortDirections,
-        isMultiColumnSort,
-        fieldName,
-        columnKey,
-        sortDirection
-    ) {
-        this.dispatchEvent(
-            new CustomEvent('sort', {
-                detail: {
-                    fieldNames,
-                    sortDirections,
-                    isMultiColumnSort,
-                    fieldName,
-                    columnKey,
-                    sortDirection,
-                },
-            })
-        );
+    fireSortedColumnChange(fieldName, columnKey, sortDirection) {
+        const sortEvent = new CustomEvent('sort', {
+            detail: {
+                fieldNames: [fieldName],
+                sortDirections: [sortDirection],
+                isMultiColumnSort: false,
+                fieldName,
+                columnKey,
+                sortDirection,
+            },
+        });
+        this.dispatchEvent(sortEvent);
     }
 
     fireOnResize(isUserTriggered) {
@@ -1764,19 +1988,19 @@ export default class LightningDatatable extends LightningElement {
     }
 
     updateColumns(columns) {
-        const { state } = this;
-        this.updateColumnsBeforeIndexes(columns);
-        state.headerIndexes = generateHeaderIndexes(state.columns);
-        this.updateRowsAndCells();
-        this.updateColumnsAfterIndexes();
+        setColumns(this.state, columns, this._privateTypes);
+        if (this.isConnected) {
+            this.updateColumnsBeforeIndexes();
+            this.updateRowsAndCells();
+            this.updateColumnsAfterIndexes();
+        }
     }
 
-    updateColumnsBeforeIndexes(columns) {
+    updateColumnsBeforeIndexes() {
         const { state } = this;
         // Untracked state changes.
         // Calculate cell to focus next before indexes are updated.
         setCellToFocusFromPrev(state, this.template);
-        setColumns(state, columns, this.privateTypes);
         updateRowNavigationMode(state);
         // Tracked state changes.
         setDirtyValues(state, this._draftValues);
@@ -1815,8 +2039,20 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateColumnsAndRows() {
+        this.updateColumnsBeforeIndexes(this._rawColumns);
+        this.updateRowsBeforeIndexes();
+        this.updateRowsAndCells();
+        this.updateRowsAfterIndexes();
+        this.updateColumnsAfterIndexes();
+    }
+
     updateRowsAndCells() {
-        updateRowsAndCells(this.state, this._privateTypes);
+        const { state } = this;
+        // Untracked state change.
+        state.hasRenderedTable = false;
+        // Tracked state changes.
+        updateRowsAndCells(state, this._privateTypes, this._datatableId);
     }
 
     updateVirtualizedRowHeights() {
@@ -1842,7 +2078,7 @@ export default class LightningDatatable extends LightningElement {
                 const height = rowElement.getBoundingClientRect().height + 1;
                 if (state.rowHeight !== height) {
                     state.rowHeight = height;
-                    resetTableHeight(state);
+                    state.tableHeight = state.rowHeight * state.rows.length;
                     state.rows.forEach((row) => {
                         row.style = `position:absolute;top:${
                             row.rowIndex * height
@@ -1854,24 +2090,44 @@ export default class LightningDatatable extends LightningElement {
     }
 
     setSelectedRows(value) {
+        // A mix of tracked and untracked state changes.
         setSelectedRowsKeys(this.state, value);
         this.handleRowSelectionChange();
     }
 
     setActiveCell(rowKeyValue, colKeyValue) {
         const { state, template } = this;
-        const { rowIndex, colIndex } = getIndexesByKeys(
-            state,
-            rowKeyValue,
-            colKeyValue
-        );
+        const newActiveCell = getCellByKeys(state, rowKeyValue, colKeyValue);
         // Tracked state change.
         setBlurActiveCell(state, template);
         // Untracked state change.
-        state.activeCell = { rowKeyValue, colKeyValue };
+        state.activeCell = newActiveCell;
         // Tracked state changes.
         addFocusStylesToActiveCell(state, template);
-        updateCellTabIndex(state, rowIndex, colIndex, 0);
+        updateCellTabIndex(
+            state,
+            newActiveCell.rowIndex,
+            newActiveCell.colIndex,
+            0
+        );
+    }
+
+    setCustomTypes() {
+        const customTypesSlot = this.template.querySelector(
+            'slot[name="customdatatypes"]'
+        );
+        if (customTypesSlot) {
+            const assignedNodes = customTypesSlot.assignedNodes();
+            if (assignedNodes.length) {
+                const provider = assignedNodes[0];
+                if (typeof provider.getDataTypes === 'function') {
+                    this._privateTypes = new DatatableTypes(
+                        provider.getDataTypes()
+                    );
+                    this.updateColumns(this._rawColumns);
+                }
+            }
+        }
     }
 
     /**
@@ -1918,4 +2174,108 @@ export default class LightningDatatable extends LightningElement {
         const { rowKeyValue } = dataset;
         return { rowIndex, rowKeyValue };
     }
+
+    updateCheckboxCellsAriaAttrs() {
+        const { _checkboxColumnHeaderId, state, template } = this;
+        const { checkboxCells } = state;
+        let { 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"]'
+              )
+            : [];
+        let scopedIdPostfix;
+        for (let i = 0, { length } = checkboxElements; i < length; i += 1) {
+            const cell = checkboxCells[i];
+            const checkboxElem = checkboxElements[i];
+            const { firstElementChild: inputElem } = checkboxElem;
+            if (scopedIdPostfix === undefined) {
+                const { lastElementChild: labelElem } = checkboxElem;
+                const { id } = labelElem;
+                scopedIdPostfix = id.slice(id.lastIndexOf('-'));
+            }
+            inputElem.setAttribute(
+                'aria-labelledby',
+                `${cell.checkboxLabelId}${scopedIdPostfix} ${_checkboxColumnHeaderId}`
+            );
+        }
+    }
+
+    updateLookupCellsLinkInfo() {
+        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"]')
+            : [];
+        for (let i = 0, { length } = lookupElements; i < length; i += 1) {
+            const cell = lookupCells[i];
+            const lookupElem = lookupElements[i];
+            const { value: recordId } = cell;
+            // Set _handleLookupAnchorClick to untracked _cell.
+            cell._handleLookupAnchorClick = () => {
+                lookupElem.dispatchEvent(
+                    new PrivateLookupItemPickedEvent({ recordId })
+                );
+            };
+            if (lookupElem.getAttribute('data-navigation') === 'enable') {
+                lookupElem.removeAttribute('data-navigation');
+            }
+            if (recordId) {
+                getLinkInfo(lookupElem, {
+                    stateType: 'standard__recordPage',
+                    attributes: {
+                        recordId,
+                        actionName: 'view',
+                    },
+                }).then((linkInfo) => {
+                    const { dispatcher, url } = linkInfo;
+                    const lookupIsNavigable = !!(dispatcher && url);
+                    cell.lookupIsNavigable = lookupIsNavigable;
+                    cell.lookupLink = url;
+                    cell._handleLookupAnchorClick = (event) => {
+                        lookupElem.dispatchEvent(
+                            new PrivateLookupItemPickedEvent({ recordId })
+                        );
+                        dispatcher.call(lookupElem, event);
+                    };
+                    if (lookupIsNavigable) {
+                        lookupElem.setAttribute('data-navigation', 'enable');
+                    } 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"]')
+            : [];
+        for (let i = 0, { length } = urlElements; i < length; i += 1) {
+            const cell = shownUrlCells[i];
+            const urlElem = urlElements[i];
+            updateRawLinkInfo(urlElem, {
+                url: cell.urlLink,
+                target: cell.urlTarget,
+            }).then((linkInfo) => {
+                const { dispatcher, url } = linkInfo;
+                // Set _handleUrlAnchorClick to untracked _cell.
+                cell._handleUrlAnchorClick = (event) => {
+                    dispatcher.call(urlElem, event);
+                };
+                cell.urlLink = url;
+            });
+        }
+    }
 }