design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(styles): enhance actions column with sticky positioning and responsive layout adjustments

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-16 16:12:13 +00:00
parent f739bb608e
commit 49b9e833e8
2 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ts_web/elements/dees-table/dees-table.ts
View File

@@ -324,7 +324,7 @@ export class DeesTable<T> extends DeesElement {
})} })}
${(() => { ${(() => {
if (this.dataActions && this.dataActions.length > 0) { if (this.dataActions && this.dataActions.length > 0) {
return html` <th>Actions</th> `; return html` <th class="actionsCol">Actions</th> `;
} }
})()} })()}
</tr> </tr>
@@ -464,7 +464,7 @@ export class DeesTable<T> extends DeesElement {
${(() => { ${(() => {
if (this.dataActions && this.dataActions.length > 0) { if (this.dataActions && this.dataActions.length > 0) {
return html` return html`
<td> <td class="actionsCol">
<div class="actionsContainer"> <div class="actionsContainer">
${this.getActionsForType('inRow').map( ${this.getActionsForType('inRow').map(
(actionArg) => html` (actionArg) => html`

26
ts_web/elements/dees-table/styles.ts
View File

@@ -117,7 +117,10 @@ export const tableStyles: CSSResult[] = [
} }
.tableScroll { .tableScroll {
/* no overflow by default to preserve current layout */ /* enable horizontal scroll only when content exceeds width */
overflow-x: auto;
/* prevent vertical scroll inside the table container */
overflow-y: hidden;
} }
:host([sticky-header]) .tableScroll { :host([sticky-header]) .tableScroll {
max-height: var(--table-max-height, 360px); max-height: var(--table-max-height, 360px);
@@ -125,7 +128,9 @@ export const tableStyles: CSSResult[] = [
} }
table { table {
width: 100%; /* allow table to grow wider than container so actions column can stick */
width: max-content;
min-width: 100%;
caption-side: bottom; caption-side: bottom;
font-size: 14px; font-size: 14px;
border-collapse: separate; border-collapse: separate;
@@ -188,8 +193,8 @@ export const tableStyles: CSSResult[] = [
td::after { td::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -1000px; top: 0;
bottom: -1000px; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
@@ -225,6 +230,19 @@ export const tableStyles: CSSResult[] = [
border-top: none; border-top: none;
} }
/* Sticky Actions column (right pinned) */
thead th.actionsCol,
tbody td.actionsCol {
position: sticky;
right: 0;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
}
thead th.actionsCol { z-index: 3; }
tbody td.actionsCol {
z-index: 1;
box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
}
tbody tr.selected { tbody tr.selected {
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
} }