Add sortable last trigger column to automation and script overview (#8783)

src/components/data-table/ha-data-table.ts

@@ -63,7 +63,7 @@ export interface DataTableSortColumnData {
 }
 
 export interface DataTableColumnData extends DataTableSortColumnData {
-  title: string;
+  title: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button";
   template?: <T>(data: any, row: T) => TemplateResult | string;
   width?: string;
@@ -74,7 +74,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
 }
 
 type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
-  title?: string;
+  title?: TemplateResult | string;
 };
 
 export interface DataTableRowData {

src/panels/config/automation/ha-automation-picker.ts

@@ -70,6 +70,7 @@ class HaAutomationPicker extends LitElement {
         return {
           ...automation,
           name: computeStateName(automation),
+          last_triggered: automation.attributes.last_triggered || undefined,
         };
       });
     }
@@ -97,7 +98,9 @@ class HaAutomationPicker extends LitElement {
           filterable: true,
           direction: "asc",
           grows: true,
-          template: (name, automation: any) => html`
+          template: narrow
+            ? (name, automation: any) =>
+                html`
                   ${name}
                   <div class="secondary">
                     ${this.hass.localize("ui.card.automation.last_triggered")}:
@@ -108,12 +111,28 @@ class HaAutomationPicker extends LitElement {
                         )
                       : this.hass.localize("ui.components.relative_time.never")}
                   </div>
-          `,
+                `
+            : undefined,
         },
       };
       if (!narrow) {
+        columns.last_triggered = {
+          sortable: true,
+          width: "20%",
+          title: this.hass.localize("ui.card.automation.last_triggered"),
+          template: (last_triggered) => html`
+            ${last_triggered
+              ? formatDateTime(new Date(last_triggered), this.hass.locale)
+              : this.hass.localize("ui.components.relative_time.never")}
+          `,
+        };
         columns.trigger = {
-          title: "",
+          title: html`
+            <mwc-button style="visibility: hidden">
+              ${this.hass.localize("ui.card.automation.trigger")}
+            </mwc-button>
+          `,
+          width: "20%",
           template: (_info, automation: any) => html`
             <mwc-button
               .automation=${automation}

src/panels/config/script/ha-script-picker.ts

@@ -66,14 +66,15 @@ class HaScriptPicker extends LitElement {
           ...script,
           name: computeStateName(script),
           icon: stateIcon(script),
+          last_triggered: script.attributes.last_triggered || undefined,
         };
       });
     }
   );
 
   private _columns = memoizeOne(
-    (_language): DataTableColumnContainer => {
+    (narrow, _locale): DataTableColumnContainer => {
-      return {
+      const columns: DataTableColumnContainer = {
         activate: {
           title: "",
           type: "icon-button",
@@ -103,7 +104,8 @@ class HaScriptPicker extends LitElement {
           filterable: true,
           direction: "asc",
           grows: true,
-          template: (name, script: any) => html`
+          template: narrow
+            ? (name, script: any) => html`
                 ${name}
                 <div class="secondary">
                   ${this.hass.localize("ui.card.automation.last_triggered")}:
@@ -114,9 +116,23 @@ class HaScriptPicker extends LitElement {
                       )
                     : this.hass.localize("ui.components.relative_time.never")}
                 </div>
-          `,
+              `
+            : undefined,
         },
-        info: {
+      };
+      if (!narrow) {
+        columns.last_triggered = {
+          sortable: true,
+          width: "20%",
+          title: this.hass.localize("ui.card.automation.last_triggered"),
+          template: (last_triggered) => html`
+            ${last_triggered
+              ? formatDateTime(new Date(last_triggered), this.hass.locale)
+              : this.hass.localize("ui.components.relative_time.never")}
+          `,
+        };
+      }
+      columns.info = {
         title: "",
         type: "icon-button",
         template: (_info, script) => html`
@@ -130,8 +146,8 @@ class HaScriptPicker extends LitElement {
             <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
           </mwc-icon-button>
         `,
-        },
+      };
-        edit: {
+      columns.edit = {
         title: "",
         type: "icon-button",
         template: (_info, script: any) => html`
@@ -145,8 +161,8 @@ class HaScriptPicker extends LitElement {
             </mwc-icon-button>
           </a>
         `,
-        },
       };
+      return columns;
     }
   );
 
@@ -158,7 +174,7 @@ class HaScriptPicker extends LitElement {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automation}
-        .columns=${this._columns(this.hass.language)}
+        .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._scripts(this.scripts, this._filteredScripts)}
         .activeFilters=${this._activeFilters}
         id="entity_id"