Datatable fab padding (#5432)

* Add padding for fab

* Add hasFab property

* Simplify

* Remove query

* Change to empty row

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

@@ -86,6 +86,7 @@ export class HaDataTable extends LitElement {
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
   @property({ type: Array }) public data: DataTableRowData[] = [];
   @property({ type: Boolean }) public selectable = false;
+  @property({ type: Boolean }) public hasFab = false;
   @property({ type: Boolean, attribute: "auto-height" })
   public autoHeight = false;
   @property({ type: String }) public id = "id";
@@ -98,6 +99,7 @@ export class HaDataTable extends LitElement {
   @property({ type: Array }) private _filteredData: DataTableRowData[] = [];
   @query("slot[name='header']") private _header!: HTMLSlotElement;
   @query(".mdc-data-table__table") private _table!: HTMLDivElement;
+
   private _checkableRowsCount?: number;
   private _checkedRows: string[] = [];
   private _sortColumns: {
@@ -281,8 +283,16 @@ export class HaDataTable extends LitElement {
             : html`
                 <div class="mdc-data-table__content scroller">
                   ${scroll({
-                    items: this._filteredData,
-                    renderItem: (row: DataTableRowData) => html`
+                    items: !this.hasFab
+                      ? this._filteredData
+                      : [...this._filteredData, ...[{ empty: true }]],
+                    renderItem: (row: DataTableRowData) => {
+                      if (row.empty) {
+                        return html`
+                          <div class="mdc-data-table__row"></div>
+                        `;
+                      }
+                      return html`
                         <div
                           .rowId="${row[this.id]}"
                           @click=${this._handleRowClick}
@@ -349,7 +359,8 @@ export class HaDataTable extends LitElement {
                             `;
                           })}
                         </div>
-                    `,
+                      `;
+                    },
                   })}
                 </div>
               `}

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

@@ -40,6 +40,11 @@ export class HaTabsSubpageDataTable extends LitElement {
    * @type {Boolean}
    */
   @property({ type: Boolean }) public selectable = false;
+  /**
+   * Do we need to add padding for a fab.
+   * @type {Boolean}
+   */
+  @property({ type: Boolean }) public hasFab = false;
   /**
    * Field with a unique id per entry in data.
    * @type {String}
@@ -111,6 +116,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .data=${this.data}
           .filter=${this.filter}
           .selectable=${this.selectable}
+          .hasFab=${this.hasFab}
           .id=${this.id}
           .noDataText=${this.noDataText}
         >

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

@@ -108,6 +108,7 @@ export class HaConfigAreasDashboard extends LitElement {
           "ui.panel.config.areas.picker.no_areas"
         )}
         id="area_id"
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"

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

@@ -160,6 +160,7 @@ class HaAutomationPicker extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.automation.picker.no_automations"
         )}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab

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

@@ -148,6 +148,7 @@ export class HaConfigHelpers extends LitElement {
         .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._getItems(this._stateItems)}
         @row-click=${this._openEditDialog}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab

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

@@ -229,6 +229,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .data=${this._getItems(this._dashboards)}
         @row-click=${this._editDashboard}
         id="url_path"
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab

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

@@ -97,6 +97,7 @@ export class HaConfigLovelaceRescources extends LitElement {
           "ui.panel.config.lovelace.resources.picker.no_resources"
         )}
         @row-click=${this._editResource}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab

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

@@ -131,6 +131,7 @@ class HaSceneDashboard extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.scene.picker.no_scenes"
         )}
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"

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

@@ -126,6 +126,7 @@ class HaScriptPicker extends LitElement {
         .noDataText=${this.hass.localize(
           "ui.panel.config.script.picker.no_scripts"
         )}
+        hasFab
       >
         <paper-icon-button
           slot="toolbar-icon"

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

@@ -94,6 +94,7 @@ export class HaConfigUsers extends LitElement {
         .columns=${this._columns(this.hass.language)}
         .data=${this._users}
         @row-click=${this._editUser}
+        hasFab
       >
       </hass-tabs-subpage-data-table>
       <ha-fab