lightning-base-components 1.21.6-alpha → 1.21.7-alpha

package/src/lightning/datatable/templates/table/table.html

@@ -45,6 +45,7 @@
                         <thead data-rowgroup-header>
                             <!-- Column Header Row -->
                             <tr class="slds-line-height_reset"
+                                role="row"
                                 data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
@@ -132,20 +133,51 @@
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
                                                 data-col-key-value={cell.colKeyValue}
+                                                data-cell-value={cell.value}
                                                 key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-checkbox
-                                                    dt-context-id={_datatableId}
-                                                    has-focus={cell.hasFocus}
-                                                    data-label={cell.dataLabel}
-                                                    key={cell.key}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    row-index={rowIndex}
-                                                    type={row.inputType}
-                                                    is-selected={row.isSelected}
-                                                    is-disabled={row.isDisabled}
-                                                    column-header-id={computedCheckboxColumnHeaderId}>
-                                                </lightning-primitive-cell-checkbox>
+                                                <!-- Fast Path -->
+                                                <template if:true={cell.isInlined}>
+                                                    <span
+                                                        class="slds-checkbox"
+                                                        data-inline-type="primitive-cell-checkbox"
+                                                        onclick={handleInlinedCheckboxContainerClick}
+                                                        onmousedown={handleInlinedCheckboxContainerMouseDown}>
+                                                        <input type="checkbox"
+                                                            name={cell.checkboxName}
+                                                            id={cell.checkboxId}
+                                                            checked={row.isSelected}
+                                                            disabled={row.isDisabled}
+                                                            data-action-triggers="space"
+                                                            data-navigation="enable"
+                                                            tabindex={cell.internalTabIndex}
+                                                            onclick={handleInlinedCheckboxClick}>
+                                                        <label
+                                                            id={cell.checkboxLabelId}
+                                                            class="slds-checkbox__label"
+                                                            for={cell.checkboxId}>
+                                                            <span class="slds-checkbox_faux"></span>
+                                                            <span class="slds-form-element__label slds-assistive-text">
+                                                                {cell.checkboxSelectItemAssistiveText}
+                                                            </span>
+                                                        </label>
+                                                    </span>
+                                                </template>
+                                                <!-- Slow Path -->
+                                                <template if:false={cell.isInlined}>
+                                                    <lightning-primitive-cell-checkbox
+                                                        dt-context-id={_datatableId}
+                                                        has-focus={cell.hasFocus}
+                                                        data-label={cell.dataLabel}
+                                                        key={cell.key}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        row-index={rowIndex}
+                                                        type={row.inputType}
+                                                        is-selected={row.isSelected}
+                                                        is-disabled={row.isDisabled}
+                                                        column-header-id={computedCheckboxColumnHeaderId}>
+                                                    </lightning-primitive-cell-checkbox>
+                                                </template>
                                             </td>
                                         </template>
                                         <template if:true={cell.isDataTypeScope}>
@@ -159,45 +191,377 @@
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
                                                 data-col-key-value={cell.colKeyValue}
+                                                data-cell-value={cell.value}
                                                 key={cell.colKeyValue}
                                                 aria-describedby={cell.describedBy}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
-                                                    aria-selected={cell.ariaSelected}
-                                                    data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-error={cell.hasError}
-                                                    has-focus={cell.hasFocus}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    display-value={cell.displayValue}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
+                                                    <!-- Fast Path -->
+                                                    <template if:true={cell.isInlined}>
+                                                        <template if:true={cell.isCustomBareLayout}>
+                                                            <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle}>
+                                                                <!-- custom type with bare layout -->
+                                                                <lightning-primitive-custom-cell
+                                                                    types={_privateTypes}
+                                                                    row-key-value={row.key}
+                                                                    col-key-value={cell.colKeyValue}
+                                                                    alignment={cell.alignment}
+                                                                    column-type={cell.columnType}
+                                                                    column-sub-type={cell.columnSubType}
+                                                                    editable={cell.editable}
+                                                                    internal-tab-index={cell.internalTabIndex}
+                                                                    keyboard-mode={cell.keyboardMode}
+                                                                    value={cell.value}
+                                                                    wrap-text={cell.wrapText}
+                                                                    type-attribute-0={cell.typeAttribute0}
+                                                                    type-attribute-1={cell.typeAttribute1}
+                                                                    type-attribute-2={cell.typeAttribute2}
+                                                                    type-attribute-3={cell.typeAttribute3}
+                                                                    type-attribute-4={cell.typeAttribute4}
+                                                                    type-attribute-5={cell.typeAttribute5}
+                                                                    type-attribute-6={cell.typeAttribute6}
+                                                                    type-attribute-7={cell.typeAttribute7}
+                                                                    type-attribute-8={cell.typeAttribute8}
+                                                                    type-attribute-9={cell.typeAttribute9}
+                                                                    type-attribute-10={cell.typeAttribute10}>
+                                                                </lightning-primitive-custom-cell>
+                                                            </div>
+                                                        </template>
+                                                        <template if:false={cell.isCustomBareLayout}>
+                                                            <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+                                                                <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle}>
+                                                                    <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
+
+                                                                    <!-- tree toggle -->
+                                                                    <template if:true={cell.hasTreeData}>
+                                                                        <lightning-primitive-treegrid-cell-toggle
+                                                                            data-navigation="enable"
+                                                                            row-key-value={row.key}
+                                                                            col-key-value={cell.colKeyValue}
+                                                                            display-value={cell.displayValue}
+                                                                            value={cell.value}
+                                                                            has-children={cell.typeAttribute21}
+                                                                            is-expanded={cell.typeAttribute22}>
+                                                                        </lightning-primitive-treegrid-cell-toggle>
+                                                                    </template>
+
+                                                                    <!-- left icon -->
+                                                                    <template if:true={cell.hasLeftIcon}>
+                                                                        <lightning-icon
+                                                                            icon-name={cell.iconName}
+                                                                            size="x-small"
+                                                                            class="slds-m-right_x-small"
+                                                                            alternative-text={cell.iconAlternativeText}
+                                                                        ></lightning-icon>
+                                                                        {cell.iconLabel}
+                                                                    </template>
+
+                                                                    <!-- *************** PREFIX ICONS END *************** -->
+
+                                                                    <!-- boolean -->
+                                                                    <template if:true={cell.isBoolean}>
+                                                                        <template if:true={cell.isChecked}>
+                                                                            <lightning-primitive-icon
+                                                                                size="x-small"
+                                                                                icon-name="utility:check">
+                                                                            </lightning-primitive-icon>
+                                                                        </template>
+                                                                        <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
+                                                                    </template>
+
+                                                                    <!-- currency -->
+                                                                    <template if:true={cell.isCurrency}>
+                                                                        <span
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-inline-type="formatted-number">
+                                                                            {cell.currencyValue}
+                                                                        </span>
+                                                                    </template>
+
+                                                                    <!-- custom type with standard layout -->
+                                                                    <template if:true={cell.isCustomStandardLayout}>
+                                                                        <lightning-primitive-custom-cell
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            types={_privateTypes}
+                                                                            row-key-value={row.key}
+                                                                            col-key-value={cell.colKeyValue}
+                                                                            alignment={cell.alignment}
+                                                                            column-type={cell.columnType}
+                                                                            column-sub-type={cell.columnSubType}
+                                                                            editable={cell.editable}
+                                                                            internal-tab-index={cell.internalTabIndex}
+                                                                            keyboard-mode={cell.keyboardMode}
+                                                                            value={cell.value}
+                                                                            wrap-text={cell.wrapText}
+                                                                            type-attribute-0={cell.typeAttribute0}
+                                                                            type-attribute-1={cell.typeAttribute1}
+                                                                            type-attribute-2={cell.typeAttribute2}
+                                                                            type-attribute-3={cell.typeAttribute3}
+                                                                            type-attribute-4={cell.typeAttribute4}
+                                                                            type-attribute-5={cell.typeAttribute5}
+                                                                            type-attribute-6={cell.typeAttribute6}
+                                                                            type-attribute-7={cell.typeAttribute7}
+                                                                            type-attribute-8={cell.typeAttribute8}
+                                                                            type-attribute-9={cell.typeAttribute9}
+                                                                            type-attribute-10={cell.typeAttribute10}>
+                                                                        </lightning-primitive-custom-cell>
+                                                                    </template>
+
+                                                                    <!-- date local -->
+                                                                    <template if:true={cell.isDateLocal}>
+                                                                        <span
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-inline-type="formatted-date-time">
+                                                                            {cell.dateLocalValue}
+                                                                        </span>
+                                                                    </template>
+
+                                                                    <!-- date time -->
+                                                                    <template if:true={cell.isDateTime}>
+                                                                        <span
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-inline-type="formatted-date-time">
+                                                                            {cell.dateTimeValue}
+                                                                        </span>
+                                                                    </template>
+
+                                                                    <!-- email -->
+                                                                    <template if:true={cell.isEmail}>
+                                                                        <template if:true={cell.showEmailLink}>
+                                                                            <a
+                                                                                class={cell.computedMarginClassWhenLeftIconExists}
+                                                                                data-action-triggers="enter"
+                                                                                data-navigation="enable"
+                                                                                href={cell.emailLink}
+                                                                                tabindex={cell.internalTabIndex}>
+                                                                                <template if:false={cell.emailIconHidden}>
+                                                                                    <lightning-primitive-icon
+                                                                                        icon-name="utility:email"
+                                                                                        size="x-small">
+                                                                                    </lightning-primitive-icon>
+                                                                                    <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
+                                                                                </template> {cell.emailLabel}
+                                                                            </a>
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- location -->
+                                                                    <template if:true={cell.isLocation}>
+                                                                        <template if:true={cell.hasLeftIcon}>
+                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                        </template>
+                                                                        <template if:false={cell.hasLeftIcon}>
+                                                                            {cell.locationValue}
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- number -->
+                                                                    <template if:true={cell.isNumber}>
+                                                                        <span
+                                                                            data-inline-type="formatted-number"
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            {cell.numberValue}
+                                                                        </span>
+                                                                    </template>
+
+                                                                    <!-- percent -->
+                                                                    <template if:true={cell.isPercent}>
+                                                                        <span
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-inline-type="formatted-number">
+                                                                            {cell.percentValue}
+                                                                        </span>
+                                                                    </template>
+
+                                                                    <!-- phone -->
+                                                                    <template if:true={cell.isPhone}>
+                                                                        <template if:true={cell.showPhoneLink}>
+                                                                            <a
+                                                                                class={cell.computedMarginClassWhenLeftIconExists}
+                                                                                data-action-triggers="enter"
+                                                                                data-inline-type="formatted-phone"
+                                                                                data-navigation="enable"
+                                                                                href={cell.phoneLink}
+                                                                                tabindex={cell.internalTabIndex}>
+                                                                                {cell.phoneLabel}
+                                                                            </a>
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- lookup (reference) -->
+                                                                    <template if:true={cell.isLookup}>
+                                                                        <template if:true={cell.lookupIsNavigable}>
+                                                                            <a
+                                                                                class={cell.computedMarginClassWhenLeftIconExists}
+                                                                                data-action-triggers="enter"
+                                                                                data-inline-type="formatted-lookup"
+                                                                                data-navigation="enable"
+                                                                                href={cell.lookupLink}
+                                                                                tabindex={cell.internalTabIndex}
+                                                                                onclick={cell.handleLookupAnchorClick}>
+                                                                                {cell.lookupValue}
+                                                                            </a>
+                                                                        </template>
+                                                                        <template if:false={cell.lookupIsNavigable}>
+                                                                            <span
+                                                                                class={cell.computedMarginClassWhenLeftIconExists}
+                                                                                data-inline-type="formatted-lookup"
+                                                                                data-navigation="enable"
+                                                                                data-action-triggers="enter">
+                                                                                {cell.lookupValue}
+                                                                            </span>
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- row number -->
+                                                                    <template if:true={cell.isRowNumber}>
+                                                                        <template if:true={cell.rowHasError}>
+                                                                            <lightning-primitive-datatable-tooltip
+                                                                                class="slds-m-horizontal_xxx-small"
+                                                                                data-navigation="enable"
+                                                                                data-action-triggers="enter,space"
+                                                                                size="xx-small"
+                                                                                header={cell.typeAttribute0.title}
+                                                                                content={cell.typeAttribute0.messages}
+                                                                                variant='error'
+                                                                                internal-tab-index={cell.internalTabIndex}
+                                                                                alternative-text={cell.typeAttribute0.alternativeText}>
+                                                                            </lightning-primitive-datatable-tooltip>
+                                                                        </template>
+                                                                        <span class="slds-row-number slds-text-body_small slds-text-color_weak" style={cell.computedRowNumberStyle}></span>
+                                                                    </template>
+
+                                                                    <!-- text -->
+                                                                    <template if:true={cell.isText}>
+                                                                        <template if:false={cell.shouldFormatText}>
+                                                                            <template if:true={cell.ignoreRTL}>
+                                                                                <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                            </template>
+                                                                            <template if:false={cell.ignoreRTL}>
+                                                                                <template if:true={cell.hasLeftIcon}>
+                                                                                    <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                </template>
+                                                                                <template if:false={cell.hasLeftIcon}>
+                                                                                    {cell.textValue}
+                                                                                </template>
+                                                                            </template>
+                                                                        </template>
+                                                                        <template if:true={cell.shouldFormatText}>
+                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                                <template for:each={cell.textParts} for:item="part">
+                                                                                    <template if:true={part.isLink}>
+                                                                                        <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
+                                                                                    </template>
+                                                                                    <template if:true={part.isText}>
+                                                                                        {part.value}
+                                                                                    </template>
+                                                                                </template>
+                                                                            </span>
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- url -->
+                                                                    <template if:true={cell.isURL}>
+                                                                        <template if:true={cell.showUrlLink}>
+                                                                            <a
+                                                                                class={cell.computedMarginClassWhenLeftIconExists}
+                                                                                data-action-triggers="enter"
+                                                                                data-inline-type="formatted-url"
+                                                                                data-navigation="enable"
+                                                                                href={cell.urlLink}
+                                                                                tabindex={cell.internalTabIndex}
+                                                                                target={cell.urlTarget}
+                                                                                title={cell.urlTooltip}
+                                                                                onclick={cell.handleUrlAnchorClick}>
+                                                                                {cell.urlLabel}
+                                                                            </a>
+                                                                        </template>
+                                                                    </template>
+
+                                                                    <!-- *************** SUFFIX ICONS ADD ALL TYPES BEFORE THIS *************** -->
+
+                                                                    <template if:true={cell.hasRightIcon}>
+                                                                        <lightning-icon
+                                                                            icon-name={cell.iconName}
+                                                                            class="slds-m-left_x-small slds-m-right_x-small"
+                                                                            size="x-small"
+                                                                            alternative-text={cell.iconAlternativeText}></lightning-icon>
+                                                                        {cell.iconLabel}
+                                                                    </template>
+
+                                                                    <!-- *************** SUFFIX ICONS END *************** -->
+
+                                                                </div>
+                                                                <template if:true={cell.isEditable}>
+                                                                    <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                            data-action-edit="true"
+                                                                            data-action-triggers="enter,space"
+                                                                            data-navigation="enable"
+                                                                            tabindex={cell.internalTabIndex}
+                                                                            onclick={handleInlinedEditButtonClick}>
+                                                                        <lightning-primitive-icon
+                                                                            icon-name="utility:edit"
+                                                                            size="xx-small"
+                                                                            svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
+                                                                        </lightning-primitive-icon>
+                                                                        <span class="slds-assistive-text">
+                                                                            {cell.editIconAssistiveText}
+                                                                        </span>
+                                                                    </button>
+                                                                </template>
+                                                                <!-- TODO: displayReadOnlyIcon is true only when the cell's "editable" property is false and its "displayReadOnlyIcon"
+                                                                property is true. The markup in this template therefore cannot be rendered concurrently with the template above that checks
+                                                                the editable property. -->
+                                                                <template if:true={cell.shouldDisplayReadOnlyIcon}>
+                                                                    <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
+                                                                    in them in cases when the cell is read only and hence no button is actually rendered -->
+                                                                    <lightning-primitive-icon
+                                                                        icon-name="utility:lock"
+                                                                        size="xx-small"
+                                                                        svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
+                                                                    </lightning-primitive-icon>
+                                                                </template>
+                                                            </span>
+                                                        </template>
+                                                    </template>
+                                                    <!-- Slow Path -->
+                                                    <template if:false={cell.isInlined}>
+                                                        <lightning-primitive-cell-factory
+                                                            types={_privateTypes}
+                                                            aria-selected={cell.ariaSelected}
+                                                            data-label={cell.dataLabel}
+                                                            alignment={cell.alignment}
+                                                            has-error={cell.hasError}
+                                                            has-focus={cell.hasFocus}
+                                                            column-label={cell.dataLabel}
+                                                            column-type={cell.columnType}
+                                                            column-sub-type={cell.columnSubType}
+                                                            wrap-text={cell.wrapText}
+                                                            wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                            key={cell.columnType}
+                                                            row-key-value={row.key}
+                                                            col-key-value={cell.colKeyValue}
+                                                            value={cell.value}
+                                                            display-value={cell.displayValue}
+                                                            icon-name={cell.iconName}
+                                                            icon-label={cell.iconLabel}
+                                                            icon-position={cell.iconPosition}
+                                                            icon-alternative-text={cell.iconAlternativeText}
+                                                            editable={cell.editable}
+                                                            display-read-only-icon={cell.displayReadOnlyIcon}
+                                                            type-attribute-0={cell.typeAttribute0}
+                                                            type-attribute-1={cell.typeAttribute1}
+                                                            type-attribute-2={cell.typeAttribute2}
+                                                            type-attribute-3={cell.typeAttribute3}
+                                                            type-attribute-4={cell.typeAttribute4}
+                                                            type-attribute-5={cell.typeAttribute5}
+                                                            type-attribute-6={cell.typeAttribute6}
+                                                            type-attribute-7={cell.typeAttribute7}
+                                                            type-attribute-8={cell.typeAttribute8}
+                                                            type-attribute-9={cell.typeAttribute9}
+                                                            type-attribute-10={cell.typeAttribute10}
+                                                            type-attribute-21={cell.typeAttribute21}
+                                                            type-attribute-22={cell.typeAttribute22}>
+                                                        </lightning-primitive-cell-factory>
+                                                    </template>
                                                 <template if:true={cell.describedBy}>
                                                     <span id={cell.describedBy} class="slds-hide">Unsaved</span>
                                                 </template>
@@ -213,45 +577,380 @@
                                                 tabindex={cell.tabIndex}
                                                 data-label={cell.dataLabel}
                                                 data-col-key-value={cell.colKeyValue}
+                                                data-cell-value={cell.value}
                                                 aria-describedby={cell.describedBy}
                                                 key={cell.colKeyValue}>
-                                                <lightning-primitive-cell-factory
-                                                    types={privateTypes}
-                                                    aria-selected={cell.ariaSelected}
-                                                    data-label={cell.dataLabel}
-                                                    alignment={cell.alignment}
-                                                    has-error={cell.hasError}
-                                                    has-focus={cell.hasFocus}
-                                                    column-label={cell.dataLabel}
-                                                    column-type={cell.columnType}
-                                                    column-sub-type={cell.columnSubType}
-                                                    wrap-text={cell.wrapText}
-                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
-                                                    key={cell.columnType}
-                                                    row-key-value={row.key}
-                                                    col-key-value={cell.colKeyValue}
-                                                    value={cell.value}
-                                                    display-value={cell.displayValue}
-                                                    icon-name={cell.iconName}
-                                                    icon-label={cell.iconLabel}
-                                                    icon-position={cell.iconPosition}
-                                                    icon-alternative-text={cell.iconAlternativeText}
-                                                    editable={cell.editable}
-                                                    display-read-only-icon={cell.displayReadOnlyIcon}
-                                                    type-attribute-0={cell.typeAttribute0}
-                                                    type-attribute-1={cell.typeAttribute1}
-                                                    type-attribute-2={cell.typeAttribute2}
-                                                    type-attribute-3={cell.typeAttribute3}
-                                                    type-attribute-4={cell.typeAttribute4}
-                                                    type-attribute-5={cell.typeAttribute5}
-                                                    type-attribute-6={cell.typeAttribute6}
-                                                    type-attribute-7={cell.typeAttribute7}
-                                                    type-attribute-8={cell.typeAttribute8}
-                                                    type-attribute-9={cell.typeAttribute9}
-                                                    type-attribute-10={cell.typeAttribute10}
-                                                    type-attribute-21={cell.typeAttribute21}
-                                                    type-attribute-22={cell.typeAttribute22}>
-                                                </lightning-primitive-cell-factory>
+                                                <!-- Fast Path -->
+                                                <template if:true={cell.isInlined}>
+                                                    <template if:true={cell.isCustomBareLayout}>
+                                                        <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle}>
+                                                            <!-- custom type with bare layout -->
+                                                            <lightning-primitive-custom-cell
+                                                                types={_privateTypes}
+                                                                row-key-value={row.key}
+                                                                col-key-value={cell.colKeyValue}
+                                                                alignment={cell.alignment}
+                                                                column-type={cell.columnType}
+                                                                column-sub-type={cell.columnSubType}
+                                                                editable={cell.editable}
+                                                                internal-tab-index={cell.internalTabIndex}
+                                                                keyboard-mode={cell.keyboardMode}
+                                                                value={cell.value}
+                                                                wrap-text={cell.wrapText}
+                                                                type-attribute-0={cell.typeAttribute0}
+                                                                type-attribute-1={cell.typeAttribute1}
+                                                                type-attribute-2={cell.typeAttribute2}
+                                                                type-attribute-3={cell.typeAttribute3}
+                                                                type-attribute-4={cell.typeAttribute4}
+                                                                type-attribute-5={cell.typeAttribute5}
+                                                                type-attribute-6={cell.typeAttribute6}
+                                                                type-attribute-7={cell.typeAttribute7}
+                                                                type-attribute-8={cell.typeAttribute8}
+                                                                type-attribute-9={cell.typeAttribute9}
+                                                                type-attribute-10={cell.typeAttribute10}>
+                                                            </lightning-primitive-custom-cell>
+                                                        </div>
+                                                    </template>
+                                                    <template if:false={cell.isCustomBareLayout}>
+                                                        <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+                                                            <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle}>
+                                                                <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
+
+                                                                <!-- tree toggle -->
+                                                                <template if:true={cell.hasTreeData}>
+                                                                    <lightning-primitive-treegrid-cell-toggle
+                                                                        data-navigation="enable"
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        display-value={cell.displayValue}
+                                                                        value={cell.value}
+                                                                        has-children={cell.typeAttribute21}
+                                                                        is-expanded={cell.typeAttribute22}>
+                                                                    </lightning-primitive-treegrid-cell-toggle>
+                                                                </template>
+
+                                                                <!-- left icon -->
+                                                                <template if:true={cell.hasLeftIcon}>
+                                                                    <lightning-icon
+                                                                        icon-name={cell.iconName}
+                                                                        size="x-small"
+                                                                        class="slds-m-right_x-small"
+                                                                        alternative-text={cell.iconAlternativeText}
+                                                                    ></lightning-icon>
+                                                                    {cell.iconLabel}
+                                                                </template>
+
+                                                                <!-- *************** PREFIX ICONS END *************** -->
+
+                                                                <!-- boolean -->
+                                                                <template if:true={cell.isBoolean}>
+                                                                    <template if:true={cell.isChecked}>
+                                                                        <lightning-primitive-icon
+                                                                            size="x-small"
+                                                                            icon-name="utility:check">
+                                                                        </lightning-primitive-icon>
+                                                                    </template>
+                                                                    <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
+                                                                </template>
+
+                                                                <!-- currency -->
+                                                                <template if:true={cell.isCurrency}>
+                                                                    <span
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}
+                                                                        data-inline-type="formatted-number">
+                                                                        {cell.currencyValue}
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- custom type with standard layout -->
+                                                                <template if:true={cell.isCustomStandardLayout}>
+                                                                    <lightning-primitive-custom-cell
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}
+                                                                        types={_privateTypes}
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        alignment={cell.alignment}
+                                                                        column-type={cell.columnType}
+                                                                        column-sub-type={cell.columnSubType}
+                                                                        editable={cell.editable}
+                                                                        internal-tab-index={cell.internalTabIndex}
+                                                                        keyboard-mode={cell.keyboardMode}
+                                                                        value={cell.value}
+                                                                        wrap-text={cell.wrapText}
+                                                                        type-attribute-0={cell.typeAttribute0}
+                                                                        type-attribute-1={cell.typeAttribute1}
+                                                                        type-attribute-2={cell.typeAttribute2}
+                                                                        type-attribute-3={cell.typeAttribute3}
+                                                                        type-attribute-4={cell.typeAttribute4}
+                                                                        type-attribute-5={cell.typeAttribute5}
+                                                                        type-attribute-6={cell.typeAttribute6}
+                                                                        type-attribute-7={cell.typeAttribute7}
+                                                                        type-attribute-8={cell.typeAttribute8}
+                                                                        type-attribute-9={cell.typeAttribute9}
+                                                                        type-attribute-10={cell.typeAttribute10}>
+                                                                    </lightning-primitive-custom-cell>
+                                                                </template>
+
+                                                                <!-- date local -->
+                                                                <template if:true={cell.isDateLocal}>
+                                                                    <span
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}
+                                                                        data-inline-type="formatted-date-time">
+                                                                        {cell.dateLocalValue}
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- date time -->
+                                                                <template if:true={cell.isDateTime}>
+                                                                    <span
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}
+                                                                        data-inline-type="formatted-date-time">
+                                                                        {cell.dateTimeValue}
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- email -->
+                                                                <template if:true={cell.isEmail}>
+                                                                    <template if:true={cell.showEmailLink}>
+                                                                        <a
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-action-triggers="enter"
+                                                                            data-navigation="enable"
+                                                                            href={cell.emailLink}
+                                                                            tabindex={cell.internalTabIndex}>
+                                                                            <template if:false={cell.emailIconHidden}>
+                                                                                <lightning-primitive-icon
+                                                                                    icon-name="utility:email"
+                                                                                    size="x-small">
+                                                                                </lightning-primitive-icon>
+                                                                                <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
+                                                                            </template> {cell.emailLabel}
+                                                                        </a>
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- location -->
+                                                                <template if:true={cell.isLocation}>
+                                                                    <template if:true={cell.hasLeftIcon}>
+                                                                        <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                    </template>
+                                                                    <template if:false={cell.hasLeftIcon}>
+                                                                        {cell.locationValue}
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- number -->
+                                                                <template if:true={cell.isNumber}>
+                                                                    <span
+                                                                        data-inline-type="formatted-number"
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                        {cell.numberValue}
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- percent -->
+                                                                <template if:true={cell.isPercent}>
+                                                                    <span
+                                                                        class={cell.computedMarginClassWhenLeftIconExists}
+                                                                        data-inline-type="formatted-number">
+                                                                        {cell.percentValue}
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- phone -->
+                                                                <template if:true={cell.isPhone}>
+                                                                    <template if:true={cell.showPhoneLink}>
+                                                                        <a
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-action-triggers="enter"
+                                                                            data-inline-type="formatted-phone"
+                                                                            data-navigation="enable"
+                                                                            href={cell.phoneLink}
+                                                                            tabindex={cell.internalTabIndex}>
+                                                                            {cell.phoneLabel}
+                                                                        </a>
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- lookup (reference) -->
+                                                                <template if:true={cell.isLookup}>
+                                                                    <template if:true={cell.lookupIsNavigable}>
+                                                                        <a
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-action-triggers="enter"
+                                                                            data-inline-type="formatted-lookup"
+                                                                            data-navigation="enable"
+                                                                            href={cell.lookupLink}
+                                                                            tabindex={cell.internalTabIndex}
+                                                                            onclick={cell.handleLookupAnchorClick}>
+                                                                            {cell.lookupValue}
+                                                                        </a>
+                                                                    </template>
+                                                                    <template if:false={cell.lookupIsNavigable}>
+                                                                        <span
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-inline-type="formatted-lookup"
+                                                                            data-navigation="enable"
+                                                                            data-action-triggers="enter">
+                                                                            {cell.lookupValue}
+                                                                        </span>
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- row number -->
+                                                                <template if:true={cell.isRowNumber}>
+                                                                    <template if:true={cell.rowHasError}>
+                                                                        <lightning-primitive-datatable-tooltip
+                                                                            class="slds-m-horizontal_xxx-small"
+                                                                            data-navigation="enable"
+                                                                            data-action-triggers="enter,space"
+                                                                            size="xx-small"
+                                                                            header={cell.typeAttribute0.title}
+                                                                            content={cell.typeAttribute0.messages}
+                                                                            variant='error'
+                                                                            internal-tab-index={cell.internalTabIndex}
+                                                                            alternative-text={cell.typeAttribute0.alternativeText}>
+                                                                        </lightning-primitive-datatable-tooltip>
+                                                                    </template>
+                                                                    <span
+                                                                        class="slds-row-number slds-text-body_small slds-text-color_weak"
+                                                                        style={cell.computedRowNumberStyle}>
+                                                                    </span>
+                                                                </template>
+
+                                                                <!-- text -->
+                                                                <template if:true={cell.isText}>
+                                                                    <template if:false={cell.shouldFormatText}>
+                                                                        <template if:true={cell.ignoreRTL}>
+                                                                            <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                        </template>
+                                                                        <template if:false={cell.ignoreRTL}>
+                                                                            <template if:true={cell.hasLeftIcon}>
+                                                                                <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                            </template>
+                                                                            <template if:false={cell.hasLeftIcon}>
+                                                                                {cell.textValue}
+                                                                            </template>
+                                                                        </template>
+                                                                    </template>
+                                                                    <template if:true={cell.shouldFormatText}>
+                                                                        <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            <template for:each={cell.textParts} for:item="part">
+                                                                                <template if:true={part.isLink}>
+                                                                                    <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
+                                                                                </template>
+                                                                                <template if:true={part.isText}>
+                                                                                    {part.value}
+                                                                                </template>
+                                                                            </template>
+                                                                        </span>
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- url -->
+                                                                <template if:true={cell.isURL}>
+                                                                    <template if:true={cell.showUrlLink}>
+                                                                        <a
+                                                                            class={cell.computedMarginClassWhenLeftIconExists}
+                                                                            data-action-triggers="enter"
+                                                                            data-inline-type="formatted-url"
+                                                                            data-navigation="enable"
+                                                                            href={cell.urlLink}
+                                                                            tabindex={cell.internalTabIndex}
+                                                                            target={cell.urlTarget}
+                                                                            title={cell.urlTooltip}
+                                                                            onclick={cell.handleUrlAnchorClick}>
+                                                                            {cell.urlLabel}
+                                                                        </a>
+                                                                    </template>
+                                                                </template>
+
+                                                                <!-- *************** SUFFIX ICONS ADD ALL TYPES BEFORE THIS *************** -->
+
+                                                                <template if:true={cell.hasRightIcon}>
+                                                                    <lightning-icon
+                                                                        icon-name={cell.iconName}
+                                                                        class="slds-m-left_x-small slds-m-right_x-small"
+                                                                        size="x-small"
+                                                                        alternative-text={cell.iconAlternativeText}></lightning-icon>
+                                                                    {cell.iconLabel}
+                                                                </template>
+
+                                                                <!-- *************** SUFFIX ICONS END *************** -->
+
+                                                            </div>
+                                                            <template if:true={cell.isEditable}>
+                                                                <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                        data-action-edit="true"
+                                                                        data-action-triggers="enter,space"
+                                                                        data-navigation="enable"
+                                                                        tabindex={cell.internalTabIndex}
+                                                                        onclick={handleInlinedEditButtonClick}>
+                                                                    <lightning-primitive-icon
+                                                                        icon-name="utility:edit"
+                                                                        size="xx-small"
+                                                                        svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
+                                                                    </lightning-primitive-icon>
+                                                                    <span class="slds-assistive-text">
+                                                                        {cell.editIconAssistiveText}
+                                                                    </span>
+                                                                </button>
+                                                            </template>
+                                                            <!-- TODO: displayReadOnlyIcon is true only when the cell's "editable" property is false and its "displayReadOnlyIcon"
+                                                            property is true. The markup in this template therefore cannot be rendered concurrently with the template above that checks
+                                                            the editable property. -->
+                                                            <template if:true={cell.shouldDisplayReadOnlyIcon}>
+                                                                <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
+                                                                in them in cases when the cell is read only and hence no button is actually rendered -->
+                                                                <lightning-primitive-icon
+                                                                    icon-name="utility:lock"
+                                                                    size="xx-small"
+                                                                    svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
+                                                                </lightning-primitive-icon>
+                                                            </template>
+                                                        </span>
+                                                    </template>
+                                                </template>
+                                                <!-- Slow Path -->
+                                                <template if:false={cell.isInlined}>
+                                                    <lightning-primitive-cell-factory
+                                                        types={_privateTypes}
+                                                        aria-selected={cell.ariaSelected}
+                                                        data-label={cell.dataLabel}
+                                                        alignment={cell.alignment}
+                                                        has-error={cell.hasError}
+                                                        has-focus={cell.hasFocus}
+                                                        column-label={cell.dataLabel}
+                                                        column-type={cell.columnType}
+                                                        column-sub-type={cell.columnSubType}
+                                                        wrap-text={cell.wrapText}
+                                                        wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                        key={cell.columnType}
+                                                        row-key-value={row.key}
+                                                        col-key-value={cell.colKeyValue}
+                                                        value={cell.value}
+                                                        display-value={cell.displayValue}
+                                                        icon-name={cell.iconName}
+                                                        icon-label={cell.iconLabel}
+                                                        icon-position={cell.iconPosition}
+                                                        icon-alternative-text={cell.iconAlternativeText}
+                                                        editable={cell.editable}
+                                                        display-read-only-icon={cell.displayReadOnlyIcon}
+                                                        type-attribute-0={cell.typeAttribute0}
+                                                        type-attribute-1={cell.typeAttribute1}
+                                                        type-attribute-2={cell.typeAttribute2}
+                                                        type-attribute-3={cell.typeAttribute3}
+                                                        type-attribute-4={cell.typeAttribute4}
+                                                        type-attribute-5={cell.typeAttribute5}
+                                                        type-attribute-6={cell.typeAttribute6}
+                                                        type-attribute-7={cell.typeAttribute7}
+                                                        type-attribute-8={cell.typeAttribute8}
+                                                        type-attribute-9={cell.typeAttribute9}
+                                                        type-attribute-10={cell.typeAttribute10}
+                                                        type-attribute-21={cell.typeAttribute21}
+                                                        type-attribute-22={cell.typeAttribute22}>
+                                                    </lightning-primitive-cell-factory>
+                                                </template>
                                                 <template if:true={cell.describedBy}>
                                                     <span id={cell.describedBy} class="slds-hide">Unsaved</span>
                                                 </template>