mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 13:37:47 +00:00
Datatable fab padding (#5432)
* Add padding for fab * Add hasFab property * Simplify * Remove query * Change to empty row
This commit is contained in:
Bram Kragten
GitHub
parent
006d989943
commit
a8f9f7ac7a
@ -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,75 +283,84 @@ export class HaDataTable extends LitElement {
|
||||
: html`
|
||||
<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])
|
||||
)}
|
||||
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}
|
||||
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>
|
||||
<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 === "numeric"
|
||||
),
|
||||
"mdc-data-table__cell--icon": Boolean(
|
||||
column.type === "icon"
|
||||
),
|
||||
"mdc-data-table__cell--icon-button": Boolean(
|
||||
column.type === "icon-button"
|
||||
),
|
||||
grows: Boolean(column.grows),
|
||||
})}"
|
||||
style=${column.width
|
||||
? styleMap({
|
||||
[column.grows
|
||||
? "minWidth"
|
||||
: "width"]: column.width,
|
||||
maxWidth: column.maxWidth
|
||||
? column.maxWidth
|
||||
: "",
|
||||
})
|
||||
: ""}
|
||||
>
|
||||
${column.template
|
||||
? column.template(row[key], row)
|
||||
: row[key]}
|
||||
</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 === "numeric"
|
||||
),
|
||||
"mdc-data-table__cell--icon": Boolean(
|
||||
column.type === "icon"
|
||||
),
|
||||
"mdc-data-table__cell--icon-button": Boolean(
|
||||
column.type === "icon-button"
|
||||
),
|
||||
grows: Boolean(column.grows),
|
||||
})}"
|
||||
style=${column.width
|
||||
? styleMap({
|
||||
[column.grows
|
||||
? "minWidth"
|
||||
: "width"]: column.width,
|
||||
maxWidth: column.maxWidth
|
||||
? column.maxWidth
|
||||
: "",
|
||||
})
|
||||
: ""}
|
||||
>
|
||||
${column.template
|
||||
? column.template(row[key], row)
|
||||
: row[key]}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`,
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
})}
|
||||
</div>
|
||||
`}
|
||||
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user