diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/editor-view-user-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/editor-view-user-groups.element.ts index 710a3c8917..aba414a2a9 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/editor-view-user-groups.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/editor-view-user-groups.element.ts @@ -14,6 +14,8 @@ import UmbTableElement, { UmbTableSelectedEvent, } from '../../../../components/table/table.element'; +import './user-group-table-name-column-layout.element'; + @customElement('umb-editor-view-user-groups') export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(LitElement) { static styles = [ @@ -40,6 +42,7 @@ export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(LitE { name: 'Name', alias: 'userGroupName', + elementName: 'umb-user-group-table-name-column-layout', }, { name: 'Sections', @@ -92,7 +95,9 @@ export class UmbEditorViewUserGroupsElement extends UmbContextConsumerMixin(LitE data: [ { columnAlias: 'userGroupName', - value: userGroup.name, + value: { + name: userGroup.name, + }, }, { columnAlias: 'userGroupSections', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/user-group-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/user-group-table-name-column-layout.element.ts new file mode 100644 index 0000000000..43ba9734eb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/users/views/user-groups/user-group-table-name-column-layout.element.ts @@ -0,0 +1,26 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbTableItem } from '../../../../components/table/table.element'; + +@customElement('umb-user-group-table-name-column-layout') +export class UmbUserGroupTableNameColumnLayoutElement extends LitElement { + @property({ type: Object, attribute: false }) + item!: UmbTableItem; + + @property({ attribute: false }) + value!: any; + + render() { + return html` + ${this.value.name} + `; + } +} + +export default UmbUserGroupTableNameColumnLayoutElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-user-group-table-name-column-layout': UmbUserGroupTableNameColumnLayoutElement; + } +}