1 year ago
#375022
G-key
How to expose lightning-primitive elements for embedding into LWC HTML files of Salesforce Platform
I am customising LWC <lightning-datatable/> for a version for my company. I have been successful importing and extending LightningDatatable in a local app generated by create-lwc-app.
ie.
import LightningDatatable from 'lightning/datatable';
import datatable from './datatable.html`; // copied lightning-datatable component from installed package of https://www.npmjs.com/package/lightning-base-components
export default class DcxDataTable extends LightningDatatable {
render() {
return datatable;
}
}
The problem is that I would like to use this custom lightning-datatable component for Salesforce Platform, but there are dependencies of <lightning-primitive-datatable-*/> components that not available for some parent components in the platform, and I am trying to understand why these primitive components are available in some components only, but not all.
Firstly, I'm trying to find where the repository would be for the npm lightning-base-component package, so I could possibly fork the repo instead of making a copy of the package. https://www.npmjs.com/package/lightning-base-components
Once lightning-base-components package is installed, there are options to expose these primitive components in the package.json of the lighting-base-component package, which would make lightning-primitive elements available for use by the copied ./datatable.html template.
{
"lwc": {
"expose": [
"lightning/primitiveCellCheckbox",
"lightning/primitiveCellFactory",
"lightning/primitiveDatatableStatusBar",
"lightning/primitiveDatatableIeditPanel",
"lightning/primitiveDatatableLoadingIndicator",
"lightning/primitiveHeaderFactory",
]
}
}
However, I almost thought that exposing these components was going to not be possible for Platform applications, and that I would have to create <c-primitive-datatable-* /> component versions myself. To test out that assumption, I deployed <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator> outside of the lightning-datatable definition. To my surprise, I was able to embed it in one component, but not in another component. When I try to deploy the component to one page, it deploys and is seen. But when I deploy using another component, I get a deployment error saying, 'No MODULE named lightning:primitiveDatatableStatusBar found'. For the component that deployed successfully with the embeded lightning-prlmitive component, I am able to see the component fine. But as I tried to embeded it the same way into another component, I get the no module found error trying to deploy to a sandbox.
So I'm trying to understand either how:
- explicitly expose <lightning-primitive-datatable-* /> components for the Salesform Platform, so I can deploy and use in all components, instead of some.
- or understand why it works in some components, so I can configure other components that can use these primitive components.
- or chalk it up as a runtime fluke, and convert all
<lightning-primitive-datatable-*/>components into local<c-primitive-datatable-*/>components
Any insights or possible cases are appreciated. Thank you.
ref of ./datatable.html from https://www.npmjs.com/package/lightning-base-components
<template>
<span aria-live="polite">
<span class={computedAriaLiveClassForNavMode}
>{ariaLiveNavigationModeText}</span
>
<span class={computedAriaLiveClassForActionMode}
>{ariaLiveActionModeText}</span
>
</span>
<div
lwc:dom="manual"
class="dt-width-observer"
style="width: 100%; height: 0px"
></div>
<div class="dt-outer-container" style="height: 100%; position: relative">
<lightning-primitive-datatable-iedit-panel
data-iedit-panel="true"
visible={state.inlineEdit.isPanelVisible}
row-key-value={state.inlineEdit.rowKeyValue}
col-key-value={state.inlineEdit.colKeyValue}
edited-value={state.inlineEdit.editedValue}
column-def={state.inlineEdit.columnDef}
is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
onieditfinished={handleInlineEditFinish}
onmasscheckboxchange={handleMassCheckboxChange}
></lightning-primitive-datatable-iedit-panel>
<div
class={computedTableContainerClass}
onscroll={handleHorizontalScroll}
style={scrollerXStyles}
>
<div
class="slds-scrollable_y"
onscroll={handleVerticalScroll}
style={computedScrollerStyle}
>
<table
class={computedTableClass}
role={computedTableRole}
style={computedTableStyle}
onkeydown={handleTableKeydown}
onclick={handleCellClick}
onfocusin={handleTableFocusIn}
onfocusout={handleTableFocusOut}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
aria-rowcount={ariaRowCount}
>
<template if:false={hasValidKeyField}>
<!-- empty since keyField wasn't provided -->
</template>
<template if:true={hasValidKeyField}>
<thead class={computedTableHeaderClass}>
<tr
class="slds-line-height_reset"
onprivateresizestart={handleResizeStart}
onprivateresizeend={handleResizeEnd}
>
<template
for:each={state.columns}
for:item="def"
for:index="colIndex"
>
<th
style={def.style}
scope="col"
tabindex={def.tabIndex}
aria-label={def.ariaLabel}
aria-sort={def.sortAriaLabel}
key={def.colKeyValue}
>
<template if:true={def.fixedWidth}>
<lightning-primitive-header-factory
style={def.style}
def={def}
dt-context-id={privateDatatableId}
key={def.colKeyValue}
row-key-value="HEADER"
col-key-value={def.colKeyValue}
has-focus={def.hasFocus}
column-width={def.columnWidth}
col-index={colIndex}
sortable={def.sortable}
sorted={def.sorted}
sorted-direction={def.sortedDirection}
show-checkbox={showSelectAllCheckbox}
actions={def.actions}
>
</lightning-primitive-header-factory>
</template>
<template if:false={def.fixedWidth}>
<lightning-primitive-header-factory
style={def.style}
def={def}
dt-context-id={privateDatatableId}
key={def.colKeyValue}
row-key-value="HEADER"
col-key-value={def.colKeyValue}
col-index={colIndex}
resizable={hasResizebleColumns}
sortable={def.sortable}
sorted={def.sorted}
sorted-direction={def.sortedDirection}
has-focus={def.hasFocus}
column-width={def.columnWidth}
resizestep={state.resizeStep}
actions={def.actions}
>
</lightning-primitive-header-factory>
<div>
<input
placeholder="query here"
/>
</div>
</template>
</th>
</template>
</tr>
</thead>
<tbody style={computedTbodyStyle}>
<template
for:each={renderedRows}
for:item="row"
for:index="rowIndex"
>
<tr
class={row.classnames}
onkeydown={handleTrRowKeyDown}
key={row.key}
data-row-key-value={row.key}
aria-selected={row.ariaSelected}
aria-level={row.level}
aria-expanded={row.isExpanded}
aria-setsize={row.setSize}
aria-posinset={row.posInSet}
tabindex={row.tabIndex}
>
<template
for:each={row.cells}
for:item="cell"
>
<template if:true={cell.isCheckbox}>
<td
class={cell.class}
role="gridcell"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
key={cell.colKeyValue}
>
<lightning-primitive-cell-checkbox
dt-context-id={privateDatatableId}
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}
>
</lightning-primitive-cell-checkbox>
</td>
</template>
<template
if:true={cell.isDataTypeScope}
>
<th
class={cell.class}
style={cell.paddingStyle}
aria-selected={cell.ariaSelected}
aria-readonly={cell.ariaReadOnly}
scope="row"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
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}
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>
</th>
</template>
<template if:true={cell.isDataType}>
<td
class={cell.class}
style={cell.paddingStyle}
aria-selected={cell.ariaSelected}
aria-readonly={cell.ariaReadOnly}
role="gridcell"
tabindex={cell.tabIndex}
data-label={cell.dataLabel}
key={cell.colKeyValue}
>
<lightning-primitive-cell-factory
types={privateTypes}
aria-selected={cell.ariaSelected}
role="gridcell"
data-label={cell.dataLabel}
alignment={cell.alignment}
has-focus={cell.hasFocus}
has-error={cell.hasError}
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}
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>
</td>
</template>
</template>
</tr>
</template>
<template if:true={isLoading}>
<tr>
<td
colspan={numberOfColumns}
class="slds-is-relative"
>
<lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
</td>
</tr>
</template>
</tbody>
</template>
</table>
</div>
</div>
<template if:true={showStatusBar}>
<lightning-primitive-datatable-status-bar
error={tableError}
onprivatesave={handleInlineEditSave}
onprivatecancel={handleInlineEditCancel}
></lightning-primitive-datatable-status-bar>
</template>
</div>
</template>
salesforce
salesforce-lightning
lwc
0 Answers
Your Answer