Data tables: keep "Actions" as the last column (#29364)

* Data tables: keep "Actions" as the last column * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * last_fixed -> lastFixed * simplify * Update dialog-data-table-settings.ts * narrow down a column * blank line added * narrow dow Assistants a bit more * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions" * remove moveable/hideable for "actions"
2026-04-17 15:45:43 +01:00 · 2026-02-24 22:24:53 +03:00
parent b25f731f0f
commit b798fee116
11 changed files with 48 additions and 23 deletions
--- a/src/components/data-table/dialog-data-table-settings.ts
+++ b/src/components/data-table/dialog-data-table-settings.ts
@@ -32,11 +32,13 @@ export class DialogDataTableSettings extends LitElement {

  @state() private _hiddenColumns?: string[];

+  private _lastFixedKeys: string[] = [];
+
  @state() private _open = false;

  public showDialog(params: DataTableSettingsDialogParams) {
    this._params = params;
-    this._columnOrder = params.columnOrder;
+    this._columnOrder = this._preserveLastFixed(params.columnOrder);
    this._hiddenColumns = params.hiddenColumns;
    this._open = true;
  }
@@ -50,6 +52,29 @@ export class DialogDataTableSettings extends LitElement {
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

+  private _lastFixedCount(): number {
+    const lastFixedKeys = Object.keys(this._params!.columns).filter(
+      (col) => this._params!.columns[col].lastFixed
+    );
+    if (lastFixedKeys.length) {
+      this._lastFixedKeys = lastFixedKeys;
+    }
+    return lastFixedKeys.length;
+  }
+
+  private _preserveLastFixed(columnOrder) {
+    let strippedColumnOrder;
+    const lastFixedCount = this._lastFixedCount();
+    if (lastFixedCount && columnOrder) {
+      strippedColumnOrder = [...columnOrder];
+      strippedColumnOrder.splice(
+        columnOrder.length - lastFixedCount,
+        lastFixedCount
+      );
+    }
+    return strippedColumnOrder;
+  }
+
  private _sortedColumns = memoizeOne(
    (
      columns: DataTableColumnContainer,
@@ -57,7 +82,7 @@ export class DialogDataTableSettings extends LitElement {
      hiddenColumns: string[] | undefined
    ) =>
      Object.keys(columns)
-        .filter((col) => !columns[col].hidden)
+        .filter((col) => !columns[col].hidden && !columns[col].lastFixed)
        .sort((a, b) => {
          const orderA = columnOrder?.indexOf(a) ?? -1;
          const orderB = columnOrder?.indexOf(b) ?? -1;
@@ -195,7 +220,8 @@ export class DialogDataTableSettings extends LitElement {

    this._columnOrder = columnOrder;

-    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+    const reportedOrder = columnOrder.concat(this._lastFixedKeys);
+    this._params!.onUpdate(reportedOrder, this._hiddenColumns);
  }

  private _toggle(ev) {
@@ -276,7 +302,8 @@ export class DialogDataTableSettings extends LitElement {

    this._hiddenColumns = hidden;

-    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+    const reportedOrder = this._columnOrder.concat(this._lastFixedKeys);
+    this._params!.onUpdate(reportedOrder, this._hiddenColumns);
  }

  private _reset() {
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -86,6 +86,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
  flex?: number;
  forceLTR?: boolean;
  hidden?: boolean;
+  lastFixed?: boolean;
 }

 export type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
@@ -359,6 +360,11 @@ export class HaDataTable extends LitElement {
        .sort((a, b) => {
          const orderA = columnOrder!.indexOf(a);
          const orderB = columnOrder!.indexOf(b);
+          const fixedA = Boolean(columns[a].lastFixed);
+          const fixedB = Boolean(columns[b].lastFixed);
+          if (fixedA !== fixedB) {
+            return fixedA ? 1 : -1;
+          }
          if (orderA !== orderB) {
            if (orderA === -1) {
              return 1;
--- a/src/panels/config/application_credentials/ha-config-application-credentials.ts
+++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts
@@ -106,12 +106,11 @@ export class HaConfigApplicationCredentials extends LitElement {
          filterable: true,
        },
        actions: {
+          lastFixed: true,
          title: "",
          label: localize("ui.panel.config.generic.headers.actions"),
          type: "overflow-menu",
          showNarrow: true,
-          hideable: false,
-          moveable: false,
          template: (credential) => html`
            <ha-icon-overflow-menu
              .hass=${this.hass}
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -345,12 +345,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          `,
        },
        actions: {
+          lastFixed: true,
          title: "",
          label: this.hass.localize("ui.panel.config.generic.headers.actions"),
          type: "icon-button",
          showNarrow: true,
-          moveable: false,
-          hideable: false,
          template: (automation) => html`
            <ha-icon-button
              .automation=${automation}
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -255,11 +255,10 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
        },
      },
      actions: {
+        lastFixed: true,
        title: "",
        label: localize("ui.panel.config.generic.headers.actions"),
        showNarrow: true,
-        moveable: false,
-        hideable: false,
        type: "overflow-menu",
        template: (backup) => html`
          <ha-icon-button
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -232,12 +232,11 @@ class HaBlueprintOverview extends LitElement {
        hidden: true,
      },
      actions: {
+        lastFixed: true,
        title: "",
        label: this.hass.localize("ui.panel.config.generic.headers.actions"),
        type: "overflow-menu",
        showNarrow: true,
-        moveable: false,
-        hideable: false,
        template: (blueprint) =>
          blueprint.error
            ? html`<ha-svg-icon
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -380,11 +380,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
        localize("ui.panel.config.entities.picker.status.unmanageable")
      ),
      actions: {
+        lastFixed: true,
        title: "",
        label: this.hass.localize("ui.panel.config.generic.headers.actions"),
        type: "overflow-menu",
-        hideable: false,
-        moveable: false,
        showNarrow: true,
        template: (helper) => html`
          <ha-icon-overflow-menu
--- a/src/panels/config/labels/ha-config-labels.ts
+++ b/src/panels/config/labels/ha-config-labels.ts
@@ -147,11 +147,10 @@ export class HaConfigLabels extends LitElement {
      created_at: getCreatedAtTableColumn(localize, this.hass),
      modified_at: getModifiedAtTableColumn(localize, this.hass),
      actions: {
+        lastFixed: true,
        title: "",
        label: localize("ui.panel.config.generic.headers.actions"),
        showNarrow: true,
-        moveable: false,
-        hideable: false,
        type: "overflow-menu",
        template: (label) => html`
          <ha-icon-button
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -324,12 +324,11 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
          localize("ui.panel.config.scene.picker.only_editable")
        ),
        actions: {
+          lastFixed: true,
          title: "",
          label: this.hass.localize("ui.panel.config.generic.headers.actions"),
          type: "overflow-menu",
          showNarrow: true,
-          moveable: false,
-          hideable: false,
          template: (scene) => html`
            <ha-icon-overflow-menu
              .hass=${this.hass}
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -318,12 +318,11 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
        labels: getLabelsTableColumn(),
        last_triggered: getTriggeredAtTableColumn(localize, this.hass),
        actions: {
+          lastFixed: true,
          title: "",
          label: this.hass.localize("ui.panel.config.generic.headers.actions"),
          type: "overflow-menu",
          showNarrow: true,
-          moveable: false,
-          hideable: false,
          template: (script) => html`
            <ha-icon-overflow-menu
              .hass=${this.hass}
--- a/src/panels/config/voice-assistants/expose/assistants-table-column.ts
+++ b/src/panels/config/voice-assistants/expose/assistants-table-column.ts
@@ -21,12 +21,12 @@ export function getAssistantsTableColumn<T>(
    defaultHidden: !visible,
    sortable: true,
    showNarrow: true,
-    minWidth: "160px",
-    maxWidth: "160px",
+    minWidth: "112px",
+    maxWidth: "112px",
    valueColumn: "assistants_sortable_key",
    template: (entry: any) =>
      html`${entry.assistants.length !== 0
-        ? html`<div style="display: flex; gap: var(--ha-space-4);">
+        ? html`<div style="display: flex; gap: var(--ha-space-1);">
            ${availableAssistants.map((vaId) => {
              const supported =
                !supportedEntities?.[vaId] ||