@umbraco-cms/backoffice 17.4.1 → 17.5.0-rc

package/dist-cms/packages/core/collection/view/ref/manifests.js

@@ -1,3 +1,4 @@
+import { UmbRefCollectionViewElement } from './ref-collection-view.element.js';
 export const manifests = [
     {
         type: 'kind',
@@ -7,7 +8,7 @@ export const manifests = [
         manifest: {
             type: 'collectionView',
             kind: 'ref',
-            element: () => import('./ref-collection-view.element.js'),
+            element: UmbRefCollectionViewElement,
             weight: 800,
             meta: {
                 label: 'List',

package/dist-cms/packages/core/collection/view/table/entity-name-table-column-layout.element.d.ts

@@ -0,0 +1,24 @@
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../components/index.js';
+interface UmbEntityNameTableColumnValue {
+    name: string;
+    href?: string;
+}
+/**
+ * Table column layout element that renders an entity name, optionally as a link.
+ * @element umb-entity-name-table-column-layout
+ */
+export declare class UmbEntityNameTableColumnLayoutElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+    column: UmbTableColumn;
+    item: UmbTableItem;
+    value: UmbEntityNameTableColumnValue;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-entity-name-table-column-layout': UmbEntityNameTableColumnLayoutElement;
+    }
+}
+export {};

package/dist-cms/packages/core/collection/view/table/entity-name-table-column-layout.element.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbTextStyles } from '../../../style/index.js';
+import { html, nothing, customElement, property } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+/**
+ * Table column layout element that renders an entity name, optionally as a link.
+ * @element umb-entity-name-table-column-layout
+ */
+let UmbEntityNameTableColumnLayoutElement = class UmbEntityNameTableColumnLayoutElement extends UmbLitElement {
+    render() {
+        if (!this.value)
+            return nothing;
+        if (this.value.href) {
+            return html `<a href=${this.value.href}>${this.value.name}</a>`;
+        }
+        return html `<span>${this.value.name}</span>`;
+    }
+    static { this.styles = [UmbTextStyles]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbEntityNameTableColumnLayoutElement.prototype, "value", void 0);
+UmbEntityNameTableColumnLayoutElement = __decorate([
+    customElement('umb-entity-name-table-column-layout')
+], UmbEntityNameTableColumnLayoutElement);
+export { UmbEntityNameTableColumnLayoutElement };

package/dist-cms/packages/{clipboard → core/collection/view/table}/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { UmbExtensionManifestKind } from '../core/extension-registry/index.js';
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
 export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/collection/view/table/manifests.js

@@ -0,0 +1,20 @@
+import { UmbTableCollectionViewElement } from './table-collection-view.element.js';
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.CollectionView.Table',
+        matchKind: 'table',
+        matchType: 'collectionView',
+        manifest: {
+            type: 'collectionView',
+            kind: 'table',
+            element: UmbTableCollectionViewElement,
+            weight: 1000,
+            meta: {
+                label: 'Table',
+                icon: 'icon-table',
+                pathName: 'table',
+            },
+        },
+    },
+];

package/dist-cms/packages/core/collection/view/table/table-collection-view.element.d.ts

@@ -0,0 +1,25 @@
+import { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import type { UmbCollectionItemModel } from '../../types.js';
+import type { ManifestCollectionViewTableKind } from './types.js';
+import { nothing, type PropertyValues } from '../../../../../external/lit/index.js';
+import './entity-name-table-column-layout.element.js';
+/**
+ * A table-based collection view element provided by the `table` kind.
+ * Renders collection items as table rows with manifest-driven columns, entity context per row, and entity actions.
+ * @element umb-table-collection-view
+ */
+export declare class UmbTableCollectionViewElement extends UmbCollectionViewElementBase<UmbCollectionItemModel, ManifestCollectionViewTableKind> {
+    #private;
+    private _tableColumns;
+    private _tableRows;
+    willUpdate(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbTableCollectionViewElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-table-collection-view': UmbTableCollectionViewElement;
+    }
+}

package/dist-cms/packages/core/collection/view/table/table-collection-view.element.js

@@ -0,0 +1,215 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbCollectionViewElementBase } from '../umb-collection-view-element-base.js';
+import { css, customElement, html, nothing, state } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
+import { UmbElementControllerHost } from '../../../../../libs/controller-api/index.js';
+import { UmbEntityContext } from '../../../entity/index.js';
+import './entity-name-table-column-layout.element.js';
+/**
+ * A table-based collection view element provided by the `table` kind.
+ * Renders collection items as table rows with manifest-driven columns, entity context per row, and entity actions.
+ * @element umb-table-collection-view
+ */
+let UmbTableCollectionViewElement = class UmbTableCollectionViewElement extends UmbCollectionViewElementBase {
+    constructor() {
+        super(...arguments);
+        this._tableColumns = [];
+        this._tableRows = [];
+        this.#tableConfig = { allowSelection: false, allowSelectAll: false, selectOnly: false };
+        this.#hasDescriptions = false;
+        this.#rowContexts = new Map();
+        this.#onRowRendered = (element, item) => {
+            if (!element) {
+                const existing = this.#rowContexts.get(item.id);
+                if (existing) {
+                    existing.host.destroy();
+                    this.#rowContexts.delete(item.id);
+                }
+                return;
+            }
+            const existing = this.#rowContexts.get(item.id);
+            if (existing) {
+                existing.entityContext.setEntityType(item.entityType);
+                existing.entityContext.setUnique(item.id);
+                return;
+            }
+            const host = new UmbElementControllerHost(element);
+            host.hostConnected();
+            const entityContext = new UmbEntityContext(host);
+            entityContext.setEntityType(item.entityType);
+            entityContext.setUnique(item.id);
+            this.#rowContexts.set(item.id, { host, entityContext });
+        };
+    }
+    #tableConfig;
+    get #manifestColumns() {
+        return this.manifest?.meta?.columns ?? [];
+    }
+    #hasDescriptions;
+    #rowContexts;
+    #onRowRendered;
+    #buildTableColumns() {
+        const nameColumn = {
+            name: this.localize.term('general_name'),
+            alias: 'name',
+            elementName: 'umb-entity-name-table-column-layout',
+        };
+        const manifestColumns = this.#manifestColumns.map((col) => ({
+            name: this.localize.string(col.label),
+            alias: col.field,
+        }));
+        const entityActionsColumn = {
+            name: '',
+            alias: 'entityActions',
+            align: 'right',
+            elementName: 'umb-entity-actions-table-column-view',
+        };
+        const descriptionColumn = {
+            name: this.localize.term('general_description'),
+            alias: 'description',
+        };
+        this._tableColumns = [
+            nameColumn,
+            ...(this.#hasDescriptions ? [descriptionColumn] : []),
+            ...manifestColumns,
+            entityActionsColumn,
+        ];
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('_selectable') || changedProperties.has('_multiple') || changedProperties.has('_selectOnly')) {
+            this.#tableConfig = {
+                allowSelection: this._selectable,
+                allowSelectAll: this._multiple,
+                selectOnly: this._selectOnly,
+            };
+        }
+        if (changedProperties.has('_items') || changedProperties.has('_itemHrefs') || changedProperties.has('manifest')) {
+            this.#createTableRows();
+        }
+    }
+    #createTableRows() {
+        this.#hasDescriptions = this._items.some((item) => (item.description ?? '').length > 0);
+        this.#buildTableColumns();
+        this._tableRows = this._items.map((item) => {
+            const href = item.unique ? this._itemHrefs.get(item.unique) : undefined;
+            const manifestColumnData = this.#manifestColumns.map((col) => {
+                const rawValue = item[col.field];
+                if (col.valueType) {
+                    return {
+                        columnAlias: col.field,
+                        value: html `<umb-value-summary-extension
+							.valueType=${col.valueType}
+							.value=${rawValue}></umb-value-summary-extension>`,
+                    };
+                }
+                return {
+                    columnAlias: col.field,
+                    value: rawValue,
+                };
+            });
+            return {
+                id: item.unique,
+                icon: item.icon,
+                entityType: item.entityType,
+                selectable: this._isSelectableItem(item),
+                data: [
+                    {
+                        columnAlias: 'name',
+                        value: { name: item.name, href },
+                    },
+                    ...(this.#hasDescriptions
+                        ? [
+                            {
+                                columnAlias: 'description',
+                                value: item.description ?? '',
+                            },
+                        ]
+                        : []),
+                    ...manifestColumnData,
+                    {
+                        columnAlias: 'entityActions',
+                        value: { name: item.name },
+                    },
+                ],
+            };
+        });
+        // Clean up row contexts for items that no longer exist
+        const currentIds = new Set(this._tableRows.map((row) => row.id));
+        for (const [id, ctx] of this.#rowContexts) {
+            if (!currentIds.has(id)) {
+                ctx.host.destroy();
+                this.#rowContexts.delete(id);
+            }
+        }
+    }
+    #onSelected(event) {
+        event.stopPropagation();
+        const itemId = event.getItemId();
+        // We get the same event for both single and multiple selection.
+        if (itemId) {
+            this._selectItem(itemId);
+        }
+        else {
+            const target = event.target;
+            this._setSelection(target.selection);
+        }
+    }
+    #onDeselected(event) {
+        event.stopPropagation();
+        const itemId = event.getItemId();
+        // We get the same event for both single and multiple deselection.
+        if (itemId) {
+            this._deselectItem(itemId);
+        }
+        else {
+            const target = event.target;
+            this._setSelection(target.selection);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        for (const [, ctx] of this.#rowContexts) {
+            ctx.host.destroy();
+        }
+        this.#rowContexts.clear();
+    }
+    render() {
+        if (this._loading)
+            return nothing;
+        return html `
+			<umb-table
+				.config=${this.#tableConfig}
+				.columns=${this._tableColumns}
+				.items=${this._tableRows}
+				.selection=${this._selection}
+				.onRowRendered=${this.#onRowRendered}
+				@selected=${this.#onSelected}
+				@deselected="${this.#onDeselected}"></umb-table>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbTableCollectionViewElement.prototype, "_tableColumns", void 0);
+__decorate([
+    state()
+], UmbTableCollectionViewElement.prototype, "_tableRows", void 0);
+UmbTableCollectionViewElement = __decorate([
+    customElement('umb-table-collection-view')
+], UmbTableCollectionViewElement);
+export { UmbTableCollectionViewElement };
+export { UmbTableCollectionViewElement as element };

package/dist-cms/packages/core/collection/view/table/types.d.ts

@@ -0,0 +1,33 @@
+import type { ManifestCollectionView, MetaCollectionView } from '../collection-view.extension.js';
+/**
+ * Manifest type for the `table` kind of `collectionView`.
+ * Allows registering a table collection view with custom columns via manifest meta.
+ */
+export interface ManifestCollectionViewTableKind extends Omit<ManifestCollectionView, 'meta'> {
+    type: 'collectionView';
+    kind: 'table';
+    meta: MetaCollectionViewTableKind;
+}
+/**
+ * Configuration for a single column in a table collection view kind.
+ */
+export interface MetaCollectionViewTableKindColumn {
+    /** The property name on the collection item model to display in this column. */
+    field: string;
+    /** The column header label. Supports localization strings (e.g. `#general_status`). */
+    label: string;
+    /** Optional value type for rendering a value summary in this column. */
+    valueType?: keyof UmbValueTypeMap;
+}
+/**
+ * Meta configuration for the `table` kind of `collectionView`.
+ */
+export interface MetaCollectionViewTableKind extends Partial<MetaCollectionView> {
+    /** Additional columns to render between the name and entity actions columns. */
+    columns?: Array<MetaCollectionViewTableKindColumn>;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbCollectionViewTableKind: ManifestCollectionViewTableKind;
+    }
+}

package/dist-cms/packages/core/collection/view/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/collection/view/types.d.ts

@@ -1 +1,2 @@
 export type * from './collection-view.extension.js';
+export type * from './table/types.js';

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.d.ts

@@ -1,11 +1,12 @@
-import type { UmbCollectionItemModel } from '../types.js';
+import type { ManifestCollectionView, UmbCollectionItemModel } from '../types.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 /**
  * Abstract base class for collection view elements.
  * Provides shared state management, selection handling, and context consumption for collection views.
  */
-export declare abstract class UmbCollectionViewElementBase<CollectionItemType extends UmbCollectionItemModel = UmbCollectionItemModel> extends UmbLitElement {
+export declare abstract class UmbCollectionViewElementBase<CollectionItemType extends UmbCollectionItemModel = UmbCollectionItemModel, ManifestType extends Omit<ManifestCollectionView, 'meta'> = ManifestCollectionView> extends UmbLitElement {
     #private;
+    manifest?: ManifestType | undefined;
     protected _items: Array<CollectionItemType>;
     protected _selectable: boolean;
     protected _multiple: boolean;

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
-import { state } from '../../../../external/lit/index.js';
+import { property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 /**
  * Abstract base class for collection view elements.
@@ -87,6 +87,9 @@ export class UmbCollectionViewElementBase extends UmbLitElement {
         this._itemHrefs = new Map(entries.filter((entry) => entry !== null));
     }
 }
+__decorate([
+    property({ attribute: false })
+], UmbCollectionViewElementBase.prototype, "manifest", void 0);
 __decorate([
     state()
 ], UmbCollectionViewElementBase.prototype, "_items", void 0);

package/dist-cms/packages/core/collection/workspace-view/manifests.js

@@ -1,3 +1,4 @@
+import { UmbCollectionWorkspaceViewElement } from './collection-workspace-view.element.js';
 export const manifests = [
     {
         type: 'kind',
@@ -7,7 +8,7 @@ export const manifests = [
         manifest: {
             type: 'workspaceView',
             kind: 'collection',
-            element: () => import('./collection-workspace-view.element.js'),
+            element: UmbCollectionWorkspaceViewElement,
             meta: {
                 label: 'Collection',
                 pathname: 'collection',

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbEntityContext } from '../../entity/entity.context.js';
+import { UmbEntityContext } from '../../entity/index.js';
 import { css, customElement, html, ifDefined, nothing, property, state } from '../../../../external/lit/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '../../../../libs/extension-api/index.js';

package/dist-cms/packages/core/components/icon/icon.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
+import { extractUmbColorVariable } from '../../resources/index.js';
 import { UmbTextStyles } from '../../style/index.js';
 import { html, customElement, property, state, ifDefined, css } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';

package/dist-cms/packages/core/components/input-radio-button-list/input-radio-button-list.element.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, nothing, repeat, customElement, property, classMap } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-import { UUIRadioElement } from '../../../../external/uui/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
 let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     set value(value) {
@@ -32,9 +31,10 @@ let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extend
     }
     #onChange(event) {
         event.stopPropagation();
-        if (!(event.target instanceof UUIRadioElement))
+        const group = event.currentTarget;
+        if (!group)
             return;
-        this.value = event.target.value;
+        this.value = group.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {

package/dist-cms/packages/core/components/input-slider/input-slider.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbFormControlMixin } from '../../validation/mixins/index.js';
+import { UmbFormControlMixin } from '../../validation/index.js';
 import { customElement, html, property } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';

package/dist-cms/packages/core/components/input-with-alias/input-with-alias.element.js

@@ -89,7 +89,7 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
         }
     }
     render() {
-        const nameLabel = this.label ?? this.localize.term('placeholders_entername');
+        const nameLabel = this.label || this.localize.term('placeholders_entername');
         const aliasLabel = this.localize.term('placeholders_enterAlias');
         return html `
 			<uui-input

package/dist-cms/packages/core/components/table/table.element.d.ts

@@ -92,12 +92,14 @@ export declare class UmbTableElement extends UmbLitElement {
      * @memberof UmbTableElement
      */
     selection: Array<string>;
+    onRowRendered?: (element: HTMLElement | undefined, item: UmbTableItem) => void;
     orderingColumn: string;
     orderingDesc: boolean;
     private _sortable;
     get sortable(): boolean;
     set sortable(newVal: boolean);
     private _selectionMode;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     constructor();
     private _isSelected;

package/dist-cms/packages/core/components/table/table.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, html, ifDefined, keyed, property, repeat, state, when, } from '../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, keyed, property, ref, repeat, state, when, } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import { UmbSorterController } from '../../sorter/index.js';
 import { UmbTextStyles } from '../../style/index.js';
@@ -76,11 +76,15 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this.requestUpdate('sortable', oldVal);
     }
     #lastColumnKey;
-    updated(changedProperties) {
-        super.updated(changedProperties);
+    #cellElementCache;
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
         if (changedProperties.has('selection')) {
             this._selectionMode = this.selection.length > 0;
         }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
         // The `keyed` directive in `render()` rebuilds the `<uui-table>` element when the column
         // signature changes. The sorter caches its container element on first initialization, so
         // when the table is replaced we need to reattach it to the fresh node.
@@ -132,6 +136,7 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this._sortable = false;
         this._selectionMode = false;
         this.#lastColumnKey = '';
+        this.#cellElementCache = new WeakMap();
         this.#sorter = new UmbSorterController(this, {
             getUniqueOfElement: (element) => {
                 return element.dataset.sortableId;
@@ -155,6 +160,9 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
             const isItemSelectable = this.#isSelectableItem(item);
             return html `
 			<uui-table-row
+				${ref((el) => {
+                this.onRowRendered?.(el, item);
+            })}
 				data-sortable-id=${item.id}
 				?selectable=${this.config.allowSelection && !this._sortable && isItemSelectable}
 				?select-only=${this._selectionMode || this.config.selectOnly}
@@ -315,7 +323,16 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
     _renderCellContent(column, item) {
         const value = item.data.find((data) => data.columnAlias === column.alias)?.value;
         if (column.elementName) {
-            const element = document.createElement(column.elementName);
+            let itemCache = this.#cellElementCache.get(item);
+            if (!itemCache) {
+                itemCache = new Map();
+                this.#cellElementCache.set(item, itemCache);
+            }
+            let element = itemCache.get(column.alias);
+            if (!element || element.tagName.toLowerCase() !== column.elementName.toLowerCase()) {
+                element = document.createElement(column.elementName);
+                itemCache.set(column.alias, element);
+            }
             element.column = column;
             element.item = item;
             element.value = value;
@@ -419,6 +436,9 @@ __decorate([
 __decorate([
     property({ type: Array, attribute: false })
 ], UmbTableElement.prototype, "selection", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbTableElement.prototype, "onRowRendered", void 0);
 __decorate([
     property({ type: String, attribute: false })
 ], UmbTableElement.prototype, "orderingColumn", void 0);