lightning-base-components 1.14.2-alpha → 1.14.6-alpha

package/metadata/raptor.json

@@ -52,6 +52,7 @@
   "analyticsDataServiceApi": {
     "minVersion": "52.0"
   },
+  "analyticsSmartDataDiscoveryApi": {},
   "analyticsWaveApi": {
     "minVersion": "52.0"
   },
@@ -1351,15 +1352,21 @@
   "iconUtils": {},
   "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
+  "industriesEinsteinAIAcceleratorApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},
+  "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesSustainabilityBeiApi": {},
+  "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
   "industriesSustainabilityRecordLockUnlockApi": {},
   "industriesSustainabilityReferenceDataApi": {},
+  "industriesTimelineApi": {},
   "industriesVideoVisitsApi": {},
   "input": {
     "minVersion": "0.0",
@@ -2211,6 +2218,7 @@
       }
     ]
   },
+  "marketingAssetcreationApi": {},
   "menuDivider": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -3394,6 +3402,7 @@
   "uiAssistantPlatformApi": {},
   "uiDuplicatesApi": {},
   "uiLayoutApi": {},
+  "uiLearningContentPlatformApi": {},
   "uiListApi": {
     "minVersion": "45.0"
   },
@@ -3406,12 +3415,35 @@
   },
   "uiRecordActionsApi": {},
   "uiRecordApi": {
-    "minVersion": "45.0"
+    "minVersion": "46.0"
   },
   "uiRecordAvatarApi": {},
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
+  "unstable_analyticsDataServiceApi": {},
+  "unstable_analyticsSmartDataDiscoveryApi": {},
+  "unstable_analyticsWaveApi": {},
+  "unstable_cmsAuthoringApi": {},
+  "unstable_cmsDeliveryApi": {},
+  "unstable_cmsTypeApi": {},
+  "unstable_commerceApi": {},
+  "unstable_communityNavigationMenuApi": {},
+  "unstable_communityRecordSeoPropertiesApi": {},
+  "unstable_communitySitesSearchApi": {},
+  "unstable_experienceMarketingIntegrationApi": {},
+  "unstable_industriesCibApi": {},
+  "unstable_industriesDecisionMatrixDesignerApi": {},
+  "unstable_industriesExplainabilityApi": {},
+  "unstable_industriesHealthcloudHpiApi": {},
+  "unstable_industriesInterestTaggingApi": {},
+  "unstable_industriesLoyaltyEngineApi": {},
+  "unstable_industriesPublicSectorApi": {},
+  "unstable_industriesRcgTenantmanagementApi": {},
+  "unstable_industriesRuleBuilderApi": {},
+  "unstable_platformAdminSuccessGuidanceApi": {},
+  "unstable_platformInteractionOrchestratorApi": {},
+  "unstable_platformScaleCenterApi": {},
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.2-alpha",
+    "version": "1.14.6-alpha",
     "engines": {
-        "node": ">=12.18.3"
+        "node": ">=14.16.0"
     },
     "files": [
         "external",
@@ -57,6 +57,10 @@
                 "name": "@salesforce/label/LightningErrorMessage.validityTooShort",
                 "path": "scopedImports/@salesforce-label-LightningErrorMessage.validityTooShort.js"
             },
+            {
+                "name": "@salesforce/label/LightningErrorMessage.validitySelectAtleastOne",
+                "path": "scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js"
+            },
             {
                 "name": "@salesforce/label/LightningCarousel.tabString",
                 "path": "scopedImports/@salesforce-label-LightningCarousel.tabString.js"
@@ -369,6 +373,14 @@
                 "name": "@salesforce/label/LightningDualListbox.requiredOptionError",
                 "path": "scopedImports/@salesforce-label-LightningDualListbox.requiredOptionError.js"
             },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsSingular",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js"
+            },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsPlural",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js"
+            },
             {
                 "name": "@salesforce/label/LightningProgressIndicator.stageComplete",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js"
@@ -861,6 +873,10 @@
                 "name": "@salesforce/label/LightningMap.iframeTitle",
                 "path": "scopedImports/@salesforce-label-LightningMap.iframeTitle.js"
             },
+            {
+                "name": "@salesforce/label/LightningMap.titleWithAddress",
+                "path": "scopedImports/@salesforce-label-LightningMap.titleWithAddress.js"
+            },
             {
                 "name": "@salesforce/label/LightningPrimitiveCoordinate.selected",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveCoordinate.selected.js"
@@ -942,8 +958,8 @@
                 "path": "scopedImports/@salesforce-label-LightningRating.nStars.js"
             },
             {
-                "name": "@salesforce/label/LightningModalBase.close",
-                "path": "scopedImports/@salesforce-label-LightningModalBase.close.js"
+                "name": "@salesforce/label/LightningModalBase.cancelandclose",
+                "path": "scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js"
             },
             {
                 "name": "@salesforce/label/LightningModalBase.waitstate",

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js

@@ -0,0 +1 @@
+export default 'Items {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js

@@ -0,0 +1 @@
+export default 'Item {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js

@@ -0,0 +1 @@
+export default 'You must select at least one choice from this set.';

package/scopedImports/@salesforce-label-LightningMap.titleWithAddress.js

@@ -0,0 +1 @@
+export default 'Map of {0}';

package/scopedImports/@salesforce-label-LightningModalBase.cancelandclose.js

@@ -0,0 +1 @@
+export default 'Cancel and close';

package/src/lightning/ariaObserver/__component__/ariaObserver.spec.js

@@ -47,6 +47,15 @@ describe('AriaObserver', () => {
                 expect(testElement.labelContent).toEqual('Foo\nBar');
             });
 
+            it('should work with label ids appearing in the opposite of document order', async () => {
+                const container = createTestElement();
+                container.updateAriaLabelledby('alt-label-id id-label');
+                await Promise.resolve();
+
+                const testElement = container.testElement;
+                expect(testElement.labelContent).toEqual('Bar\nFoo');
+            });
+
             it('should update the internal label content when external content changes', async () => {
                 const container = createTestElement();
                 container.updateLabelContent();

package/src/lightning/ariaObserver/__docs__/ariaObserver.md

@@ -0,0 +1,142 @@
+The `lightning/ariaObserver` module provides an easy way for users to write accessible component that works in both synthetic and native shadow.
+
+## Aria ID referencing in native shadow
+Use the` AriaObserver` library to write accessible component that works where `ariaLabelledBy` would break native shadow. 
+
+Here's an example that won't work with native shadow. In the following code, we support attribute `ariaLabelledBy` in our component `c-foo`, so the `input` element is labelled by external elements.
+
+``` html
+<template>
+    <input aria-labelledby={ariaLabelledBy}>
+</template>
+```
+
+```
+class Foo extends LightningElement {
+    @api ariaLabelledBy;
+}
+```
+
+This example uses the `aria-labelledby` attribute to use the internal input as an external label in `c-foo`.
+
+``` html
+<span id="my-label">Input field</span>
+<c-foo aria-labelledby="my-label"></c-foo>
+```
+
+The above example works fine in synthetic shadow, but in native shadow mode, the `aria-labelledby` ID reference is broken. The `input` element is isolated in its own shadow DOM, so the label with id `my-label` isn't in the same shadow boundary.
+
+## Creating AriaObserver
+
+To use `AriaObserver` in your component, first import it from `lightning/ariaObserver`. Then, instantiate the `AriaObserver` within your component.
+
+The `AriaObserver` constructor takes one parameter:
+- `cmpReference` The reference of the current component (`this`).
+
+``` js
+import AriaObserver from 'lightning/ariaObserver';
+
+class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+}
+```
+
+Next, use the `connect(options)` method to connect between the internal element and the external reference. It takes an options object with the following keys:
+- `targetSelector` The selector to the internal element where the aria attribute should be attached.
+- `attribute` The name of the aria attribute. Two supported options: `aria-labelledby`and `aria-describedby`.
+- `id` The ID of the external element. Alternatively, you can use `ids` for multiple IDs.
+
+This example uses `connect(options)` to display an aria label for the internal `input` element.
+``` js
+@api
+get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+}
+set ariaLabelledBy(refs) {
+    this._ariaLabelledBy = refs;
+
+    this.ariaObserver.connect({
+        targetSelector: 'input',
+        attribute: 'aria-labelledby',
+        id: refs
+    });
+}
+```
+
+Then use the `sync()` method to synchronize the ID references when the template is re-rendered.
+
+``` js
+renderedCallback() {
+    this.ariaObserver.sync();
+}
+```
+
+Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
+
+``` js
+disconnectedCallback() {
+    if (this.ariaObserver) {
+        this.ariaObserver.disconnect();
+        this.ariaObserver = undefined;
+    }
+}
+```
+
+Here is all these steps combined into a complete example of a component using `AriaObserver`.
+
+``` html
+<template>
+    <!-- element where the aria attribute is attached -->
+    <input>
+</template>
+```
+
+``` js
+import {api, LightningElement} from 'lwc';
+import AriaObserver from 'lightning/ariaObserver';
+
+export default class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
+    _ariaLabelledBy = '';
+
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(refs) {
+        this._ariaLabelledBy = refs;
+
+        /* Establish the connection between input and the external label */
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: 'aria-labelledby',
+            id: refs
+        });
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync();
+    }
+
+    disconnectedCallback() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+}
+```
+
+## Limitations
+`AriaObserver` only works with text-only aria ID references.
+
+Supported attributes:
+- `aria-labelledby`
+- `aria-describedby`

package/src/lightning/ariaObserver/ariaObserver.js

@@ -13,11 +13,13 @@ function getAttr(elm, attr) {
     return elm.getAttribute(attr);
 }
 
-function extractElements(root, selector) {
-    if (typeof selector !== 'string' || selector === '') {
+function extractElements(root, ids) {
+    if (typeof ids !== 'string' || ids === '') {
         return [];
     }
-    return [].slice.call(root.querySelectorAll(selector));
+    // We must query the elements in the order of ids, so that
+    // the content will be extracted in the correct order.
+    return splitIds(ids).map((id) => root.querySelector(`#${id}`));
 }
 
 function extractContent(elements) {
@@ -113,38 +115,28 @@ export default class AriaObserver {
     connect({ targetSelector, attribute, id, ids }) {
         ids = ids || id;
 
-        let attrState = this.state[attribute];
-        if (attrState) {
-            // note: we don't support linking to a different targetSelector, attribute
-            if (!this.isNative) {
-                const elm = this.template.querySelector(
-                    attrState.innerSelector
-                );
-                if (elm) {
-                    // removing the old ids if possible before setting the new ones
-                    removeAriaRefWhenPossible(elm, attribute, attrState.ids);
-                }
-                attrState.ids = ids;
+        this.state[attribute] = this.state[attribute] || {};
+        const attrState = this.state[attribute];
+
+        // note: we don't support linking to a different targetSelector
+        attrState.innerSelector = attrState.innerSelector || targetSelector;
+
+        // removing the old ids if possible before setting the new ones
+        if (!this.isNative && attrState.ids) {
+            const elm = this.template.querySelector(attrState.innerSelector);
+            if (elm) {
+                removeAriaRefWhenPossible(elm, attribute, attrState.ids);
             }
-        } else {
-            attrState = this.state[attribute] = {
-                ids,
-                innerSelector: targetSelector,
-            };
         }
-        if (this.isNative) {
-            attrState.outerSelector = (ids + '')
-                .trim()
-                .split(/\s+/)
-                .map((ref) => `#${ref}`)
-                .join(',');
 
+        attrState.ids = ids;
+
+        if (this.isNative && !attrState.placeholder) {
             // create placeholder element for copied content
-            if (!attrState.placeholder) {
-                attrState.placeholder = document.createElement('span');
-                attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
-            }
+            attrState.placeholder = document.createElement('span');
+            attrState.placeholder.id = `auto-link-${attribute}-${this.guid}`;
         }
+
         if (this.component.isConnected) {
             this.privateUpdate(attribute);
         }
@@ -213,12 +205,9 @@ export default class AriaObserver {
         }
         let computedIds;
         if (this.isNative) {
-            const { outerSelector, content, placeholder } =
-                this.state[attrName];
+            const { ids, content, placeholder } = this.state[attrName];
 
-            const newContent = extractContent(
-                extractElements(this.root, outerSelector)
-            );
+            const newContent = extractContent(extractElements(this.root, ids));
             if (content !== newContent) {
                 this.state[attrName].content = placeholder.textContent =
                     newContent;

package/src/lightning/baseFormattedText/baseFormattedText.html

@@ -1,5 +1,10 @@
 <template>
-    <template if:false={shouldFormat}>{normalizedValue}</template>
+    <template if:false={shouldFormat}>
+        <template if:true={ignoreRTL}>
+            <span dir="ltr">{normalizedValue}</span>
+        </template>
+        <template if:false={ignoreRTL}>{normalizedValue}</template>
+    </template>
     <template if:true={shouldFormat} for:each={formattedParts} for:item="part">
         <template if:true={part.isLink}>
             <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>

package/src/lightning/baseFormattedText/baseFormattedText.js

@@ -64,4 +64,9 @@ export default class BaseFormattedText extends LightningElement {
         }
         return parseToFormattedLinkifiedParts(this.value, true);
     }
+
+    get ignoreRTL() {
+        // Ignoring RTL for hex color codes
+        return this.isString && this.value.match(/^#[0-9abcdef]{6}$/i) !== null;
+    }
 }

package/src/lightning/buttonMenu/keyboard.js

@@ -113,16 +113,6 @@ export function handleKeyDownOnMenuTrigger(event, menuInterface) {
                 menuInterface.toggleMenuVisibility();
             }
             break;
-        // W3: Home and End: If arrow key wrapping is not supported, move focus to first and last item
-        // Note: We do support wrapping, but it doesn't hurt to support these keys anyway.
-        case keyCodes.home:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(0);
-            break;
-        case keyCodes.end:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(menuInterface.getTotalMenuItems() - 1);
-            break;
         // W3: Escape: Close the menu and return focus to the element or context, e.g., menu button or
         // parent menu item, from which the menu was opened
         case keyCodes.escape:

package/src/lightning/card/card.html

@@ -40,5 +40,11 @@
                 <slot name="footer"></slot>
             </div>
         </template>
+        <!-- This dummy placeholder slot is required because
+            a slot's presence is verified by assignedElements count
+            and not whether the slot itself is present or not -->
+        <template if:false={showFooter}>
+            <slot name="footer" class="slds-hide"></slot>
+        </template>
     </article>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <fieldset aria-required={required}>
+    <fieldset aria-describedby={computearaiDescriedBy}>
 
         <legend class={computedLegendClass}>
             <template if:true={required}>
@@ -32,6 +32,6 @@
         <template if:true={_helpMessage}>
             <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
         </template>
-
+        
     </fieldset>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -295,7 +295,7 @@ export default class LightningCheckboxGroup extends LightningElement {
     get _constraint() {
         if (!this._constraintApi) {
             this._constraintApi = new FieldConstraintApi(() => this, {
-                valueMissing: () =>
+                validitySelectAtleastOneValue: () =>
                     !this.disabled && this.required && this.value.length === 0,
             });
         }
@@ -313,4 +313,9 @@ export default class LightningCheckboxGroup extends LightningElement {
             })
             .toString();
     }
+
+    computearaiDescriedBy() {
+        const helpMessage = this.template.querySelector('[data-helptext]');
+        return getRealDOMId(helpMessage);
+    }
 }

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -8,6 +8,7 @@ import labelHexLabel from '@salesforce/label/LightningColorPicker.hexLabel';
 import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
+import formFactorPropertyName from '@salesforce/client/formFactor';
 import { LightningElement, api, track } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
@@ -58,7 +59,25 @@ export default class LightningColorPickerCustom extends LightningElement {
         if (!this._initialized) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
-                this.focus();
+                // (*1*)
+                if (formFactorPropertyName !== 'Large') {
+                    /**
+                     * We need to wait for one more animation frame and invoke .focus()
+                     * in iOS. This is because the positionLibray.js initially sets the position
+                     * of this color-picker element to "top: 0px" and then later repositions it asynchronously
+                     * it the next animation frames. The first (*1*) rAF callback is fired between
+                     * setting "top: 0px" and then later repositioning it. Calling .focus() in this callback
+                     * triggers a re-paint step and the page is scrolled to the top due to "top: 0px" being
+                     * present in the styles. To avoid this, we can delay the next re-paint after color-picker
+                     * is repositioned correctly by positionLibrary.js. Hence we wait for next animation frame
+                     * and then call .focus() to trigger the next re-paint after the color-picker is repositioned correctly
+                     * which was initially positioned with "top: 0px" by positionLibrary.js
+                     */
+                    // eslint-disable-next-line @lwc/lwc/no-async-operation
+                    requestAnimationFrame(() => this.focus());
+                } else {
+                    this.focus();
+                }
             });
             this.gradient();
             this.handleUpdateAnchor();

package/src/lightning/datatable/__docs__/datatable.md

@@ -244,6 +244,28 @@ Valid data types and their supported attributes include:
 | text        | Displays text using [lightning-formatted-text](bundle/lightning-formatted-text/). This is the default data type.                                                                                                                                                                                                                                                       | linkify                                                                                                                                                       |
 | url         | Displays a URL using [lightning-formatted-url](bundle/lightning-formatted-url/)                                                                                                                                                                                                                                                                                        | label, target, tooltip                                                                                                                                        |
 
+In some situations, multiple columns reference the same `fieldName` but have different `fieldApiNames` and different ways of working with the field information. To give a column a unique ID when using the same field name for two columns, use the attribute `columnKey` instead of `fieldName` on one of the column definitions.
+
+```javascript
+get columns() {
+    return [
+        // Column using 'fieldName' as identifier
+        {
+            label: 'Lead',
+            fieldName: 'leadId',
+            ...
+        },
+        // Column using 'columnKey' as identifier
+        {
+            label: 'Company',
+            columnKey: 'leadCompany',
+            fieldName: 'leadId',
+            ...
+        }
+    ]
+}
+```
+
 #### Custom Formatting Examples
 
 To customize the formatting based on the data type, pass in the attributes for
@@ -494,6 +516,21 @@ const columns = [
 
 Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See [Custom Data Type Layout and Styles](docs/component-library/documentation/lwc/lwc.data_table_custom_types_styling).
 
+#### Displaying Indicators for Read-Only Fields
+
+You can display a lock icon on read-only fields to specify they're not editable. To specify that a column's field as read-only, set the column attribute `editable` to `false` and the column attribute `displayReadOnlyIcon` to `true` in the associated column definition. This example displays a lock icon on each field in a column called "Website."
+
+```javascript
+const columns = [
+    {
+        label: 'Website',
+        fieldName: 'website',
+        type: 'url',
+        editable: false,
+        displayReadOnlyIcon: true,
+    }
+```
+
 #### Using Infinite Scrolling to Load More Rows
 
 Infinite scrolling enables you to load a subset of data and then display more
@@ -1031,6 +1068,24 @@ handleSave(event) {
 }
 ```
 
+You can also program an external element, such as a button, to open an inline edit panel on the currently active cell or next editable cell in the datatable. Invoke the `openInlineEdit()` method in the external element that should direct a user to the first editable cell in your datatable component.
+
+This example opens a datatable cell for inline edit when the user clicks an "Edit" button.
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class DatatableWithInlineEdit extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    handleClick() {
+        const dt = this.template.querySelector('lightning-datatable');
+        dt.openInlineEdit();
+    }
+}
+```
+
 For more information, see [Display Data in a Table with Inline Editing](docs/component-library/documentation/lwc/lwc.data_table_inline_edit).
 
 #### Displaying Errors

package/src/lightning/datatable/__examples__/basic/basic.html

@@ -5,5 +5,5 @@
                 data={data}
                 columns={columns}>
         </lightning-datatable>
-    </div>    
+    </div>
 </template>

package/src/lightning/datatable/__examples__/withInfiniteLoading/fetchDataHelper.js

@@ -0,0 +1,21 @@
+const recordMetadata = {
+    name: 'name',
+    email: 'email',
+    website: 'url',
+    amount: 'currency',
+    phone: 'phoneNumber',
+    closeAt: 'dateInFuture',
+};
+
+export default function fetchData(amountOfRecords) {
+    return fetch('https://data-faker.herokuapp.com/collection', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json; charset=utf-8',
+        },
+        body: JSON.stringify({
+            amountOfRecords,
+            recordMetadata,
+        }),
+    }).then((response) => response.json());
+}

package/src/lightning/datatable/__examples__/withInfiniteLoading/withInfiniteLoading.html

@@ -0,0 +1,13 @@
+<template>
+    <p>Total Rows: {data.length}</p>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            enable-infinite-loading
+            onloadmore={handleLoadMore}>
+        </lightning-datatable>
+    </div>
+    <p>{loadMoreStatus}</p>
+</template>