Add no data row when data table empty (#5113)

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

@@ -88,6 +88,7 @@ export class HaDataTable extends LitElement {
   @property({ type: Boolean, attribute: "auto-height" })
   public autoHeight = false;
   @property({ type: String }) public id = "id";
+  @property({ type: String }) public noDataText?: string;
   @property({ type: String }) public filter = "";
   @property({ type: Boolean }) private _filterable = false;
   @property({ type: String }) private _filter = "";
@@ -197,7 +198,7 @@ export class HaDataTable extends LitElement {
           })}"
           style=${styleMap({
             height: this.autoHeight
-              ? `${this._filteredData.length * 53 + 57}px`
+              ? `${(this._filteredData.length || 1) * 53 + 57}px`
               : `calc(100% - ${this._header?.clientHeight}px)`,
           })}
         >
@@ -264,73 +265,85 @@ export class HaDataTable extends LitElement {
               `;
             })}
           </div>
-          <div class="mdc-data-table__content scroller">
+          ${!this._filteredData.length
-            ${scroll({
+            ? html`
-              items: this._filteredData,
+                <div class="mdc-data-table__content">
-              renderItem: (row: DataTableRowData) => html`
+                  <div class="mdc-data-table__row">
-                <div
+                    <div class="mdc-data-table__cell grows center">
-                  .rowId="${row[this.id]}"
+                      ${this.noDataText || "No data"}
-                  @click=${this._handleRowClick}
+                    </div>
-                  class="mdc-data-table__row ${classMap({
+                  </div>
-                    "mdc-data-table__row--selected": this._checkedRows.includes(
+                </div>
-                      String(row[this.id])
+              `
-                    ),
+            : html`
-                  })}"
+                <div class="mdc-data-table__content scroller">
-                  aria-selected=${ifDefined(
+                  ${scroll({
-                    this._checkedRows.includes(String(row[this.id]))
+                    items: this._filteredData,
-                      ? true
+                    renderItem: (row: DataTableRowData) => html`
-                      : undefined
-                  )}
-                  .selectable=${row.selectable !== false}
-                >
-                  ${this.selectable
-                    ? html`
-                        <div
-                          class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                        >
-                          <ha-checkbox
-                            class="mdc-data-table__row-checkbox"
-                            @change=${this._handleRowCheckboxClick}
-                            .disabled=${row.selectable === false}
-                            .checked=${this._checkedRows.includes(
-                              String(row[this.id])
-                            )}
-                          >
-                          </ha-checkbox>
-                        </div>
-                      `
-                    : ""}
-                  ${Object.entries(this.columns).map((columnEntry) => {
-                    const [key, column] = columnEntry;
-                    return html`
                       <div
-                        class="mdc-data-table__cell ${classMap({
+                        .rowId="${row[this.id]}"
-                          "mdc-data-table__cell--numeric": Boolean(
+                        @click=${this._handleRowClick}
-                            column.type && column.type === "numeric"
+                        class="mdc-data-table__row ${classMap({
+                          "mdc-data-table__row--selected": this._checkedRows.includes(
+                            String(row[this.id])
                           ),
-                          "mdc-data-table__cell--icon": Boolean(
-                            column.type && column.type === "icon"
-                          ),
-                          grows: Boolean(column.grows),
                         })}"
-                        style=${column.width
+                        aria-selected=${ifDefined(
-                          ? styleMap({
+                          this._checkedRows.includes(String(row[this.id]))
-                              [column.grows ? "minWidth" : "width"]: String(
+                            ? true
-                                column.width
+                            : undefined
-                              ),
+                        )}
-                            })
+                        .selectable=${row.selectable !== false}
-                          : ""}
                       >
-                        ${column.template
+                        ${this.selectable
-                          ? column.template(row[key], row)
+                          ? html`
-                          : row[key]}
+                              <div
+                                class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                              >
+                                <ha-checkbox
+                                  class="mdc-data-table__row-checkbox"
+                                  @change=${this._handleRowCheckboxClick}
+                                  .disabled=${row.selectable === false}
+                                  .checked=${this._checkedRows.includes(
+                                    String(row[this.id])
+                                  )}
+                                >
+                                </ha-checkbox>
+                              </div>
+                            `
+                          : ""}
+                        ${Object.entries(this.columns).map((columnEntry) => {
+                          const [key, column] = columnEntry;
+                          return html`
+                            <div
+                              class="mdc-data-table__cell ${classMap({
+                                "mdc-data-table__cell--numeric": Boolean(
+                                  column.type && column.type === "numeric"
+                                ),
+                                "mdc-data-table__cell--icon": Boolean(
+                                  column.type && column.type === "icon"
+                                ),
+                                grows: Boolean(column.grows),
+                              })}"
+                              style=${column.width
+                                ? styleMap({
+                                    [column.grows
+                                      ? "minWidth"
+                                      : "width"]: String(column.width),
+                                  })
+                                : ""}
+                            >
+                              ${column.template
+                                ? column.template(row[key], row)
+                                : row[key]}
+                            </div>
+                          `;
+                        })}
                       </div>
-                    `;
+                    `,
                   })}
                 </div>
-              `,
+              `}
-            })}
-          </div>
         </div>
       </div>
     `;

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

@@ -61,6 +61,11 @@ export class HaTabsSubpageDataTable extends LitElement {
    * @type {() => void}
    */
   @property() public backCallback?: () => void;
+  /**
+   * String to show when there are no records in the data table.
+   * @type {String}
+   */
+  @property({ type: String }) public noDataText?: string;
   @property() public route!: Route;
   /**
    * Array of tabs to show on the page.
@@ -104,6 +109,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .filter=${this.filter}
           .selectable=${this.selectable}
           .id=${this.id}
+          .noDataText=${this.noDataText}
         >
           ${!this.narrow
             ? html`

src/panels/config/devices/ha-devices-data-table.ts

@@ -237,7 +237,11 @@ export class HaDevicesDataTable extends LitElement {
           this.domain,
           this.hass.localize
         )}
+        .noDataText=${this.hass.localize(
+          "ui.panel.config.devices.data_table.no_devices"
+        )}
         @row-click=${this._handleRowClicked}
+        auto-height
       ></ha-data-table>
     `;
   }

src/panels/config/integrations/config-entry/ha-config-entry-page.ts

@@ -194,14 +194,12 @@ class HaConfigEntryPage extends LitElement {
     return css`
       .content {
         padding: 4px;
-        height: 100%;
       }
       p {
         text-align: center;
       }
       ha-devices-data-table {
         width: 100%;
-        height: 100%;
       }
     `;
   }

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

@@ -93,6 +93,9 @@ export class HaConfigLovelaceRescources extends LitElement {
         .tabs=${lovelaceTabs}
         .columns=${this._columns(this.hass.language)}
         .data=${this._resources}
+        .noDataText=${this.hass.localize(
+          "ui.panel.config.lovelace.resources.picker.no_resources"
+        )}
         @row-click=${this._editResource}
       >
       </hass-tabs-subpage-data-table>
@@ -100,9 +103,9 @@ export class HaConfigLovelaceRescources extends LitElement {
         ?is-wide=${this.isWide}
         ?narrow=${this.narrow}
         icon="hass:plus"
-        title="${this.hass.localize(
+        title=${this.hass.localize(
           "ui.panel.config.lovelace.resources.picker.add_resource"
-        )}"
+        )}
         @click=${this._addResource}
       ></ha-fab>
     `;

src/translations/en.json

@@ -908,6 +908,7 @@
                 "url": "Url",
                 "type": "Type"
               },
+              "no_resources": "No resources",
               "add_resource": "Add resource"
             },
             "confirm_delete": "Are you sure you want to delete this resource?",
@@ -1479,7 +1480,8 @@
             "model": "Model",
             "area": "Area",
             "integration": "Integration",
-            "battery": "Battery"
+            "battery": "Battery",
+            "no_devices": "No devices"
           }
         },
         "entities": {