From 35f17fc1d48329fbe1bceee99540bf47579e081a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 11 Mar 2020 08:42:52 +0100 Subject: [PATCH] Add no data row when data table empty (#5113) --- src/components/data-table/ha-data-table.ts | 135 ++++++++++-------- src/layouts/hass-tabs-subpage-data-table.ts | 6 + .../config/devices/ha-devices-data-table.ts | 4 + .../config-entry/ha-config-entry-page.ts | 2 - .../resources/ha-config-lovelace-resources.ts | 7 +- src/translations/en.json | 4 +- 6 files changed, 92 insertions(+), 66 deletions(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 0a8d86fee4..859be8cec3 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/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 { `; })} -
- ${scroll({ - items: this._filteredData, - renderItem: (row: DataTableRowData) => html` -
- ${this.selectable - ? html` -
- - -
- ` - : ""} - ${Object.entries(this.columns).map((columnEntry) => { - const [key, column] = columnEntry; - return html` + ${!this._filteredData.length + ? html` +
+
+
+ ${this.noDataText || "No data"} +
+
+
+ ` + : html` +
+ ${scroll({ + items: this._filteredData, + renderItem: (row: DataTableRowData) => html`
- ${column.template - ? column.template(row[key], row) - : row[key]} + ${this.selectable + ? html` +
+ + +
+ ` + : ""} + ${Object.entries(this.columns).map((columnEntry) => { + const [key, column] = columnEntry; + return html` +
+ ${column.template + ? column.template(row[key], row) + : row[key]} +
+ `; + })}
- `; + `, })}
- `, - })} -
+ `}
`; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index ea4f411fb3..d12ed9e8f8 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/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` diff --git a/src/panels/config/devices/ha-devices-data-table.ts b/src/panels/config/devices/ha-devices-data-table.ts index faed6f27dd..b9ee20a35c 100644 --- a/src/panels/config/devices/ha-devices-data-table.ts +++ b/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 > `; } diff --git a/src/panels/config/integrations/config-entry/ha-config-entry-page.ts b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts index 514b796d53..bc2923aed4 100755 --- a/src/panels/config/integrations/config-entry/ha-config-entry-page.ts +++ b/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%; } `; } diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index bda2497f13..4bd0fd538b 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/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} > @@ -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} > `; diff --git a/src/translations/en.json b/src/translations/en.json index 32fd807cfb..c2824ff6b5 100755 --- a/src/translations/en.json +++ b/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": {