yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds alignment for umb-table table-cells

Browse Source 
After chatting with @mattbrailsford about this,
I wanted to explore if it was possible.
This commit is contained in:
leekelleher
2024-04-10 19:27:44 +01:00
parent 59fd94bf23
commit abe8a1aeb2
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
View File

@@ -30,6 +30,7 @@ export interface UmbTableColumn {
elementName?: string;
width?: string;
allowSorting?: boolean;
align?: 'left' | 'center' | 'right';
}
export interface UmbTableColumnLayoutElement extends HTMLElement {
@@ -176,7 +177,9 @@ export class UmbTableElement extends LitElement {
private _renderHeaderCell(column: UmbTableColumn) {
return html`
<uui-table-head-cell style="--uui-table-cell-padding: 0 var(--uui-size-5)">
${column.allowSorting ? html`${this._renderSortingUI(column)}` : column.name}
${column.allowSorting
? html`${this._renderSortingUI(column)}`
: html`<span style="text-align:${column.align ?? 'left'};">${column.name}</span>`}
</uui-table-head-cell>
`;
}
@@ -186,7 +189,7 @@ export class UmbTableElement extends LitElement {
<button
style="padding: var(--uui-size-4) var(--uui-size-5);"
@click="${() => this._handleOrderingChange(column)}">
${column.name}
<span style="text-align:${column.align ?? 'left'};">${column.name}</span>
<uui-symbol-sort ?active=${this.orderingColumn === column.alias} ?descending=${this.orderingDesc}>
</uui-symbol-sort>
</button>
@@ -240,8 +243,11 @@ export class UmbTableElement extends LitElement {
}
private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
return html`<uui-table-cell style="--uui-table-cell-padding: 0 var(--uui-size-5); width: ${column.width || 'auto'}"
>${this._renderCellContent(column, item)}</uui-table-cell>
return html`
<uui-table-cell
style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
${this._renderCellContent(column, item)}
</uui-table-cell>
</uui-table-cell>`;
}
@@ -313,6 +319,9 @@ export class UmbTableElement extends LitElement {
justify-content: space-between;
width: 100%;
}
uui-table-head-cell button > span {
flex: 1 0 auto;
}
uui-table-cell uui-icon {
vertical-align: top;