Add no data row when data table empty (#5113)
This commit is contained in:
Bram Kragten
GitHub
parent
e062940639
commit
35f17fc1d4
|
|
@ -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">
|
||||
${scroll({
|
||||
items: this._filteredData,
|
||||
renderItem: (row: DataTableRowData) => html`
|
||||
<div
|
||||
.rowId="${row[this.id]}"
|
||||
@click=${this._handleRowClick}
|
||||
class="mdc-data-table__row ${classMap({
|
||||
"mdc-data-table__row--selected": this._checkedRows.includes(
|
||||
String(row[this.id])
|
||||
),
|
||||
})}"
|
||||
aria-selected=${ifDefined(
|
||||
this._checkedRows.includes(String(row[this.id]))
|
||||
? true
|
||||
: 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`
|
||||
${!this._filteredData.length
|
||||
? html`
|
||||
<div class="mdc-data-table__content">
|
||||
<div class="mdc-data-table__row">
|
||||
<div class="mdc-data-table__cell grows center">
|
||||
${this.noDataText || "No data"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="mdc-data-table__content scroller">
|
||||
${scroll({
|
||||
items: this._filteredData,
|
||||
renderItem: (row: DataTableRowData) => html`
|
||||
<div
|
||||
class="mdc-data-table__cell ${classMap({
|
||||
"mdc-data-table__cell--numeric": Boolean(
|
||||
column.type && column.type === "numeric"
|
||||
.rowId="${row[this.id]}"
|
||||
@click=${this._handleRowClick}
|
||||
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
|
||||
? styleMap({
|
||||
[column.grows ? "minWidth" : "width"]: String(
|
||||
column.width
|
||||
),
|
||||
})
|
||||
: ""}
|
||||
aria-selected=${ifDefined(
|
||||
this._checkedRows.includes(String(row[this.id]))
|
||||
? true
|
||||
: undefined
|
||||
)}
|
||||
.selectable=${row.selectable !== false}
|
||||
>
|
||||
${column.template
|
||||
? column.template(row[key], row)
|
||||
: row[key]}
|
||||
${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({
|
||||
"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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue