diff --git a/src/packages/core/components/table/table.element.ts b/src/packages/core/components/table/table.element.ts
index d400a230f9..279c064ffe 100644
--- a/src/packages/core/components/table/table.element.ts
+++ b/src/packages/core/components/table/table.element.ts
@@ -1,5 +1,3 @@
-import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
css,
customElement,
@@ -11,6 +9,8 @@ import {
when,
LitElement,
} from '@umbraco-cms/backoffice/external/lit';
+import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
// TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
export interface UmbTableItem {
@@ -163,17 +163,19 @@ export class UmbTableElement extends LitElement {
}
override render() {
- return html`
- 'width: 60px',
- )}>
-
- ${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
-
- ${repeat(this.items, (item) => item.id, this._renderRow)}
- `;
+ return html`
+
+ 'width: 60px',
+ )}>
+
+ ${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
+
+ ${repeat(this.items, (item) => item.id, this._renderRow)}
+
+ `;
}
private _renderHeaderCell(column: UmbTableColumn) {
@@ -201,48 +203,54 @@ export class UmbTableElement extends LitElement {
private _renderHeaderCheckboxCell() {
if (this.config.hideIcon && !this.config.allowSelection) return;
- return html`
- ${when(
- this.config.allowSelection,
- () =>
- html`
- `,
- )}
- `;
+ return html`
+
+ ${when(
+ this.config.allowSelection,
+ () =>
+ html`
+ `,
+ )}
+
+ `;
}
private _renderRow = (item: UmbTableItem) => {
- return html` this._selectRow(item.id)}
- @deselected=${() => this._deselectRow(item.id)}>
- ${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
- `;
+ return html`
+ this._selectRow(item.id)}
+ @deselected=${() => this._deselectRow(item.id)}>
+ ${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
+
+ `;
};
private _renderRowCheckboxCell(item: UmbTableItem) {
if (this.config.hideIcon && !this.config.allowSelection) return;
- return html`
- ${when(!this.config.hideIcon, () => html``)}
- ${when(
- this.config.allowSelection,
- () => html`
- e.stopPropagation()}
- @change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
- ?checked="${this._isSelected(item.id)}">
-
- `,
- )}
- `;
+ return html`
+
+ ${when(!this.config.hideIcon, () => html``)}
+ ${when(
+ this.config.allowSelection,
+ () => html`
+ e.stopPropagation()}
+ @change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
+ ?checked="${this._isSelected(item.id)}">
+
+ `,
+ )}
+
+ `;
}
private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
@@ -251,7 +259,8 @@ export class UmbTableElement extends LitElement {
style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
${this._renderCellContent(column, item)}
- `;
+
+ `;
}
private _renderCellContent(column: UmbTableColumn, item: UmbTableItem) {
@@ -292,6 +301,7 @@ export class UmbTableElement extends LitElement {
position: sticky;
top: 0;
z-index: 1;
+ background-color: var(--uui-color-surface, #fff);
}
uui-table-row uui-checkbox {
@@ -331,6 +341,7 @@ export class UmbTableElement extends LitElement {
justify-content: space-between;
width: 100%;
}
+
uui-table-head-cell button > span {
flex: 1 0 auto;
}