lightning-base-components 1.21.5-alpha → 1.21.7-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 { normalizeColumns, generateHeaderIndexes } from './columns';
+import { setColumns } from './columns';
 import {
     getCustomerColumnWidths,
     getResizerDefaultState,
@@ -29,9 +35,10 @@ import {
 import { setErrors } from './errors';
 import {
     setKeyField,
-    updateRowsAndCellIndexes,
-    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,
@@ -111,12 +122,7 @@ import {
     updateRowNavigationMode,
     updateRowTabIndex,
 } from './keyboard';
-import {
-    isViewportRenderingEnabled,
-    setViewportRendering,
-    setVirtualize,
-    RenderManager,
-} from './renderManager';
+import { setVirtualize, RenderManager } from './renderManager';
 import {
     setDefaultSortDirection,
     setSortedBy,
@@ -128,17 +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 { hasTreeDataType } from './tree';
 import DatatableTypes from './types';
 
+const { PrivateLookupItemPickedEvent } = FORMATTED_LOOKUP_EVENTS;
+
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
     ariaLiveActionMode: labelAriaLiveActionMode,
@@ -188,14 +199,18 @@ export default class LightningDatatable extends LightningElement {
     _draftValues = [];
     _isResizing = false; // Whether resizing is in progress
     _lastRenderedRow = null; // last rendered row, used for UTAM
+    _positionRelationship;
     _privateTypes = {};
     _rawColumns = [];
     _renderConfig;
     _renderManager;
     _renderMode = 'default';
+    _renderedTemplate = tableTemplate;
     _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
     _suppressBottomBar = false;
-    _widthObserver = null; // Instance of LightningDatatableResizeObserver
+    _widthObserver; // Instance of LightningDatatableResizeObserver
+    _hasSetInitialCustomTypes = false;
+    _shouldResetCustomTypes = false;
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -255,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);
     }
 
@@ -270,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.updateRowsState();
-            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);
         }
     }
 
@@ -324,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();
         }
 
@@ -361,8 +386,11 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set errors(value) {
-        setErrors(this.state, value);
-        this.updateRowsState();
+        const { state } = this;
+        setErrors(state, value);
+        if (this.isConnected) {
+            updateCells(state);
+        }
     }
 
     /**
@@ -376,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(
@@ -387,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);
     }
 
@@ -452,7 +515,9 @@ export default class LightningDatatable extends LightningElement {
         setKeyField(state, value);
         // Tracked state change.
         setDirtyValues(state, this._draftValues);
-        this.updateRowsState();
+        if (this.isConnected) {
+            this.updateRows();
+        }
     }
 
     /**
@@ -503,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());
         }
@@ -550,9 +619,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set renderConfig(value) {
-        if (typeof value === 'object') {
-            setViewportRendering(this.state, value.viewportRendering);
-
+        if (isObjectLike(value)) {
             this._renderManager.configure(
                 this.state,
                 this.getWrapperHeight,
@@ -586,11 +653,28 @@ export default class LightningDatatable extends LightningElement {
 
     set renderMode(value) {
         const { _renderConfig, state } = this;
-        this._renderMode = normalizeString(value, {
+        const renderMode = normalizeString(value, {
             fallbackValue: 'default',
-            validValues: ['default', 'role-based'],
+            validValues: [
+                'default',
+                'inline',
+                'role-based',
+                'role-based-inline',
+            ],
         });
-        state.renderModeRoleBased = this._renderMode === 'role-based';
+        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) {
             setVirtualize(state, _renderConfig.virtualize);
         }
@@ -660,6 +744,9 @@ export default class LightningDatatable extends LightningElement {
     }
 
     set selectedRows(value) {
+        if (!this.state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         this._customerSelectedRows = value;
         this.setSelectedRows(value);
     }
@@ -684,13 +771,23 @@ 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);
+        }
     }
 
     /**
-     * The column key or fieldName that controls the sorting order.
+     * The column key or fieldName(s) that controls the sorting order.
      * Sort the data using the onsort event handler.
-     * @type {String}
+     * @type {String|String[]}
      */
     @api
     get sortedBy() {
@@ -706,8 +803,8 @@ export default class LightningDatatable extends LightningElement {
     /**
      * Specifies the sorting direction.
      * Sort the data using the onsort event handler.
-     * Valid options include 'asc' and 'desc'.
-     * @type {String}
+     * Valid options include a single value of 'asc' or 'desc' or an array of such values.
+     * @type {String|String[]}
      */
     @api
     get sortedDirection() {
@@ -750,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 ***************************/
@@ -762,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 = [];
@@ -788,22 +890,16 @@ export default class LightningDatatable extends LightningElement {
      */
     @api
     openInlineEdit() {
+        if (!this.state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         openInlineEditOnActiveCell(this);
     }
 
     /************************** PRIVATE GETTERS **************************/
 
-    /**
-     * Retrieves the grid container:
-     * 1. For a table-based table, it will retrieve the <table role="grid"> element
-     * 2. For a role-based table, it will retrieve the <div role="grid"> element
-     * 3. If it is a tree grid, it will retrieve the <table role="treegrid"> element
-     */
     get gridContainer() {
-        return (
-            this.template.querySelector('[role="grid"]') ||
-            this.template.querySelector('[role="treegrid"]')
-        );
+        return getGridContainerFromScrollerY(getScrollerY(this.template));
     }
 
     get computedTableContainerClass() {
@@ -822,12 +918,12 @@ export default class LightningDatatable extends LightningElement {
             'slds-table_bordered': true,
             'slds-table_edit': true,
             'slds-table_resizable-cols': !this.widthsData.resizeColumnDisabled,
-            'slds-tree slds-table_tree': hasTreeDataType(state),
+            'slds-tree slds-table_tree': !!state.treeColumn,
         });
     }
 
     get computedTableRole() {
-        return hasTreeDataType(this.state) ? 'treegrid' : 'grid';
+        return this.state.treeColumn ? 'treegrid' : 'grid';
     }
 
     get computedTableStyle() {
@@ -935,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() {
@@ -953,16 +1053,11 @@ export default class LightningDatatable extends LightningElement {
         return !this.widthsData.resizeColumnDisabled;
     }
 
-    get privateTypes() {
-        return this._privateTypes;
-    }
-
-    get viewportRendering() {
-        return isViewportRenderingEnabled(this.state);
-    }
-
     get renderedRows() {
         const { state } = this;
+        if (!state.hasCalledUpdateRowsAndCells) {
+            this.updateRowsAndCells();
+        }
         const { virtualize, rows, renderedRowCount } = state;
         if (virtualize) {
             const { firstIndex, lastIndex } =
@@ -972,7 +1067,7 @@ export default class LightningDatatable extends LightningElement {
             this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
-        if (this.viewportRendering) {
+        if (state.enableViewportRendering) {
             this._lastRenderedRow = renderedRowCount;
             return rows.slice(0, renderedRowCount);
         }
@@ -1054,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);
@@ -1064,7 +1169,6 @@ export default class LightningDatatable extends LightningElement {
         template.addEventListener('privatecellbuttonclicked', (event) => {
             this.handleCellButtonClick(event);
         });
-
         // Header actions
         template.addEventListener(
             'privatecellheaderactionmenuopening',
@@ -1084,32 +1188,69 @@ 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() {
-        const { _columnWidthManager, state, template, widthsData } = this;
+        const {
+            _columnWidthManager,
+            gridContainer,
+            state,
+            template,
+            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(this.gridContainer, {
+        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(
@@ -1122,6 +1263,10 @@ export default class LightningDatatable extends LightningElement {
                 columns,
                 widthsData
             );
+            // Managing cell widths is required for role-based render mode.
+            if (state.renderModeRoleBased) {
+                recomputeCellStyles(state);
+            }
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
@@ -1140,6 +1285,10 @@ export default class LightningDatatable extends LightningElement {
                         state.columns,
                         widthsData
                     );
+                    // Managing cell widths is required for role-based render mode.
+                    if (state.renderModeRoleBased) {
+                        recomputeCellStyles(state);
+                    }
                 }
             );
             this._widthObserver = _widthObserver;
@@ -1147,12 +1296,6 @@ export default class LightningDatatable extends LightningElement {
             _widthObserver.observe(template);
         }
 
-        // Managing the cell widths is only required for the role-based table
-        if (state.renderModeRoleBased) {
-            // TODO: Look to further optimize - Do this only when required
-            recomputeCellStyles(this.privateTypes, state);
-        }
-
         handlePrefetch.call(this);
 
         // customerSelectedRows is only valid till render, after it, the one
@@ -1169,14 +1312,16 @@ export default class LightningDatatable extends LightningElement {
             const { activeCell } = state;
             if (
                 activeCell &&
-                activeCell.focused &&
+                activeCell.hasFocus &&
                 !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);
@@ -1184,28 +1329,50 @@ export default class LightningDatatable extends LightningElement {
             }
         }
 
-        this.updateVirtualizedRowHeights();
+        const { hasRenderedFirstTime, hasRenderedTable } = state;
+        const virtualize = !!state.virtualize;
+        const { length: rowCount } = state.rows;
 
-        if (this.viewportRendering || state.virtualize) {
-            const resizeTarget = this.template.querySelector(
-                'div.dt-outer-container'
-            );
-            this._renderManager.connectResizeObserver(resizeTarget);
-            if (!this._renderManager.hasWrapperHeight()) {
-                this._renderManager.updateWrapperHeight(this.getWrapperHeight);
+        // Untracked state changes.
+        // Set rendered flags BEFORE handlePrefetch() is called.
+        state.hasRenderedFirstTime = true;
+        state.hasRenderedTable = true;
+
+        if (virtualize || state.enableViewportRendering) {
+            const { _renderManager } = this;
+            if (rowCount) {
+                if (virtualize) {
+                    this.updateVirtualizedRowHeights();
+                }
+            }
+            if (!hasRenderedFirstTime) {
+                _renderManager.connectResizeObserver(
+                    template.querySelector('div.dt-outer-container')
+                );
+            }
+            if (!_renderManager.hasWrapperHeight()) {
+                _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 (this.state.renderedRowCount) {
-                    this._renderManager.updateViewportRendering(
-                        this.state,
-                        this.gridContainer,
+                if (state.renderedRowCount) {
+                    _renderManager.updateViewportRendering(
+                        state,
+                        gridContainer,
                         true
                     );
                 }
             }
         }
+
+        if (rowCount && renderModeInline && !hasRenderedTable) {
+            this.updateCheckboxCellsAriaAttrs();
+            if (hasLinkProvider(template)) {
+                this.updateLookupCellsLinkInfo();
+                this.updateUrlCellsLinkInfo();
+            }
+        }
     }
 
     updateTableAndScrollerStyleOnRender() {
@@ -1244,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;
         }
     }
 
@@ -1324,39 +1492,43 @@ export default class LightningDatatable extends LightningElement {
                 this.state,
                 event.target.scrollTop
             );
-        } else if (this.viewportRendering) {
+        } else if (state.enableViewportRendering) {
             this._renderManager.handleScroll(state, event);
         }
     }
 
     /**
-     * Handles the `click` event on the <table> element and
+     * Handles the 'click' event on the <table> element and
      * the corresponding <div> in the role-based table
      *
-     * @param {MouseEvent} event - `click`
+     * @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 { state, template } = this;
+            // 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.rowMode && state.activeCell) {
+                const { activeCell } = state;
+                if (activeCell && state.rowMode) {
+                    // Untracked state change.
                     unsetRowNavigationMode(state);
-                    const { rowIndex } = getIndexesActiveCell(state);
-                    updateRowTabIndex(state, rowIndex, -1);
+                    // Tracked state change.
+                    updateRowTabIndex(state, activeCell.rowIndex, -1);
                 }
                 this.setActiveCell(rowKeyValue, colKeyValue);
             }
-
-            if (!datatableHasFocus(state, template)) {
+            if (!datatableHasFocus(state, this.template)) {
+                // Untracked state change.
                 setCellClickedForFocus(state);
             }
         }
@@ -1364,12 +1536,13 @@ 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 { fieldName, columnKey, sortDirection } = event.detail;
+
         this.fireSortedColumnChange(fieldName, columnKey, sortDirection);
     }
 
@@ -1377,6 +1550,19 @@ export default class LightningDatatable extends LightningElement {
         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
      *
@@ -1393,6 +1579,10 @@ export default class LightningDatatable extends LightningElement {
                 colIndex,
                 delta
             );
+            // Managing cell widths is required for role-based render mode.
+            if (state.renderModeRoleBased) {
+                recomputeCellStyles(state);
+            }
             this.fireOnResize(true);
             this.fixHeaderForSafari();
         }
@@ -1452,10 +1642,10 @@ export default class LightningDatatable extends LightningElement {
         const { rowKeyValue, colKeyValue, needsRefocusOnCellElement } =
             event.detail;
         if (!isActiveCell(state, rowKeyValue, colKeyValue)) {
-            if (state.rowMode && state.activeCell) {
+            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);
@@ -1494,7 +1684,7 @@ export default class LightningDatatable extends LightningElement {
      * 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.focused to the value of
+     * 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.
      *
@@ -1504,7 +1694,7 @@ export default class LightningDatatable extends LightningElement {
         handleDatatableFocusOut.call(this, event);
         const { activeCell } = this.state;
         if (activeCell) {
-            activeCell.focused = this._shouldResetFocus;
+            activeCell.hasFocus = this._shouldResetFocus;
         }
     }
 
@@ -1611,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', {
@@ -1622,11 +1903,17 @@ export default class LightningDatatable extends LightningElement {
     }
 
     fireSortedColumnChange(fieldName, columnKey, sortDirection) {
-        this.dispatchEvent(
-            new CustomEvent('sort', {
-                detail: { fieldName, columnKey, sortDirection },
-            })
-        );
+        const sortEvent = new CustomEvent('sort', {
+            detail: {
+                fieldNames: [fieldName],
+                sortDirections: [sortDirection],
+                isMultiColumnSort: false,
+                fieldName,
+                columnKey,
+                sortDirection,
+            },
+        });
+        this.dispatchEvent(sortEvent);
     }
 
     fireOnResize(isUserTriggered) {
@@ -1645,7 +1932,7 @@ export default class LightningDatatable extends LightningElement {
 
     /************************* HELPER FUNCTIONS **************************/
 
-    updateRowsState() {
+    updateRows() {
         this.updateRowsBeforeIndexes();
         this.updateRowsAndCells();
         this.updateRowsAfterIndexes();
@@ -1658,7 +1945,7 @@ export default class LightningDatatable extends LightningElement {
 
     updateRowsAfterIndexes() {
         const { state, widthsData } = this;
-        if (this.viewportRendering || state.virtualize) {
+        if (state.enableViewportRendering || state.virtualize) {
             this._renderManager.updateViewportRendering(
                 state,
                 this.gridContainer,
@@ -1701,24 +1988,24 @@ 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;
-        const hadTreeDataTypePreviously = hasTreeDataType(state);
         // Untracked state changes.
         // Calculate cell to focus next before indexes are updated.
         setCellToFocusFromPrev(state, this.template);
-        normalizeColumns(state, columns, this.privateTypes);
-        updateRowNavigationMode(hadTreeDataTypePreviously, state);
+        updateRowNavigationMode(state);
         // Tracked state changes.
         setDirtyValues(state, this._draftValues);
-        // Updates state.wrapText and when isWrappableType, sets internal header actions
+        // Update state.wrapText and when type is not in NON_WRAPPABLE_TYPES
+        // and sets internal header actions.
         updateHeaderInternalActions(state);
     }
 
@@ -1752,8 +2039,20 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateColumnsAndRows() {
+        this.updateColumnsBeforeIndexes(this._rawColumns);
+        this.updateRowsBeforeIndexes();
+        this.updateRowsAndCells();
+        this.updateRowsAfterIndexes();
+        this.updateColumnsAfterIndexes();
+    }
+
     updateRowsAndCells() {
-        updateRowsAndCellIndexes(this.state, this._privateTypes);
+        const { state } = this;
+        // Untracked state change.
+        state.hasRenderedTable = false;
+        // Tracked state changes.
+        updateRowsAndCells(state, this._privateTypes, this._datatableId);
     }
 
     updateVirtualizedRowHeights() {
@@ -1779,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
@@ -1791,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);
+                }
+            }
+        }
     }
 
     /**
@@ -1855,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;
+            });
+        }
+    }
 }