New "clickable" property for <ha-data-table> (#7351)

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

@@ -94,6 +94,8 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public selectable = false;
 
+  @property({ type: Boolean }) public clickable = false;
+
   @property({ type: Boolean }) public hasFab = false;
 
   @property({ type: Boolean, attribute: "auto-height" })
@@ -333,6 +335,7 @@ export class HaDataTable extends LitElement {
                             "mdc-data-table__row--selected": this._checkedRows.includes(
                               String(row[this.id])
                             ),
+                            clickable: this.clickable,
                           })}"
                           aria-selected=${ifDefined(
                             this._checkedRows.includes(String(row[this.id]))
@@ -886,6 +889,9 @@ export class HaDataTable extends LitElement {
       .forceLTR {
         direction: ltr;
       }
+      .clickable {
+        cursor: pointer;
+      }
     `;
   }
 }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -48,6 +48,12 @@ export class HaTabsSubpageDataTable extends LitElement {
    */
   @property({ type: Boolean }) public selectable = false;
 
+  /**
+   * Should rows be clickable.
+   * @type {Boolean}
+   */
+  @property({ type: Boolean }) public clickable = false;
+
   /**
    * Do we need to add padding for a fab.
    * @type {Boolean}
@@ -164,6 +170,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .id=${this.id}
           .noDataText=${this.noDataText}
           .dir=${computeRTLDirection(this.hass)}
+          .clickable=${this.clickable}
         >
           ${!this.narrow
             ? html`

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -117,6 +117,7 @@ export class HaConfigAreasDashboard extends LitElement {
         )}
         id="area_id"
         hasFab
+        clickable
       >
         <ha-icon-button
           slot="toolbar-icon"

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -310,6 +310,7 @@ export class HaConfigDeviceDashboard extends LitElement {
           this.hass.localize
         )}
         @row-click=${this._handleRowClicked}
+        clickable
       >
       </hass-tabs-subpage-data-table>
     `;

src/panels/config/entities/ha-config-entities.ts

@@ -594,6 +594,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .data=${entityData}
         .filter=${this._filter}
         selectable
+        clickable
         @selection-changed=${this._handleSelectionChanged}
         @row-click=${this._openEditEntry}
         id="entity_id"

src/panels/config/helpers/ha-config-helpers.ts

@@ -153,6 +153,7 @@ export class HaConfigHelpers extends LitElement {
         .data=${this._getItems(this._stateItems)}
         @row-click=${this._openEditDialog}
         hasFab
+        clickable
         .noDataText=${this.hass.localize(
           "ui.panel.config.helpers.picker.no_helpers"
         )}

src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts

@@ -117,6 +117,7 @@ class OZWNetworkNodes extends LitElement {
         .data=${this._nodes}
         id="node_id"
         @row-click=${this._handleRowClicked}
+        clickable
       >
       </hass-tabs-subpage-data-table>
     `;

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -124,6 +124,7 @@ export class ZHAGroupsDashboard extends LitElement {
         .columns=${this._columns(this.narrow)}
         .data=${this._formattedGroups(this._groups)}
         @row-click=${this._handleRowClicked}
+        clickable
       >
         <a href="/config/zha/group-add" slot="fab">
           <mwc-fab

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -221,6 +221,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         @row-click=${this._editDashboard}
         id="url_path"
         hasFab
+        clickable
       >
         <mwc-fab
           slot="fab"

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -101,6 +101,7 @@ export class HaConfigLovelaceRescources extends LitElement {
         )}
         @row-click=${this._editResource}
         hasFab
+        clickable
       >
         <mwc-fab
           slot="fab"

src/panels/config/users/ha-config-users.ts

@@ -96,6 +96,7 @@ export class HaConfigUsers extends LitElement {
         .data=${this._users}
         @row-click=${this._editUser}
         hasFab
+        clickable
       >
         <mwc-fab
           slot="fab"