diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 148e5414b515..7221587266ee 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -43,6 +43,10 @@ export interface SelectionChangedEvent { value: string[]; } +export interface CollapsedChangedEvent { + value: string[]; +} + export interface SortingChangedEvent { column: string; direction: SortingDirection; @@ -139,6 +143,8 @@ export class HaDataTable extends LitElement { @property() public sortDirection: SortingDirection = null; + @property({ attribute: false }) public initialCollapsedGroups?: string[]; + @state() private _filterable = false; @state() private _filter = ""; @@ -245,8 +251,12 @@ export class HaDataTable extends LitElement { ).length; } - if (properties.has("groupColumn")) { + if (!this.hasUpdated && this.initialCollapsedGroups) { + this._collapsedGroups = this.initialCollapsedGroups; + fireEvent(this, "collapsed-changed", { value: this._collapsedGroups }); + } else if (properties.has("groupColumn")) { this._collapsedGroups = []; + fireEvent(this, "collapsed-changed", { value: this._collapsedGroups }); } if ( @@ -723,6 +733,7 @@ export class HaDataTable extends LitElement { } else { this._collapsedGroups = [...this._collapsedGroups, groupName]; } + fireEvent(this, "collapsed-changed", { value: this._collapsedGroups }); }; static get styles(): CSSResultGroup { @@ -1096,5 +1107,6 @@ declare global { "selection-changed": SelectionChangedEvent; "row-click": RowClickedEvent; "sorting-changed": SortingChangedEvent; + "collapsed-changed": CollapsedChangedEvent; } } diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index dfab77e67c6a..491e36d2c9e3 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -55,6 +55,8 @@ export class HaTabsSubpageDataTable extends LitElement { @property({ type: Boolean, attribute: "main-page" }) public mainPage = false; + @property({ attribute: false }) public initialCollapsedGroups: string[] = []; + /** * Object with the columns. * @type {Object} @@ -425,6 +427,7 @@ export class HaTabsSubpageDataTable extends LitElement { .sortDirection=${this._sortDirection} .groupColumn=${this._groupColumn} .groupOrder=${this.groupOrder} + .initialCollapsedGroups=${this.initialCollapsedGroups} > ${!this.narrow ? html` diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 53d4425dcec0..5d714d763b8e 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -134,6 +134,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { @storage({ key: "devices-table-grouping", state: false, subscribe: false }) private _activeGrouping?: string; + @storage({ key: "devices-table-collapsed", state: false, subscribe: false }) + private _activeCollapsed?: string; + private _sizeController = new ResizeController(this, { callback: (entries) => entries[0]?.contentRect.width, }); @@ -671,11 +674,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { ) ).length} .initialGroupColumn=${this._activeGrouping} + .initialCollapsedGroups=${this._activeCollapsed} .initialSorting=${this._activeSorting} @clear-filter=${this._clearFilter} @search-changed=${this._handleSearchChange} @sorting-changed=${this._handleSortingChanged} @grouping-changed=${this._handleGroupingChanged} + @collapsed-changed=${this._handleCollapseChanged} @row-click=${this._handleRowClicked} clickable hasFab @@ -1005,6 +1010,10 @@ ${rejected this._activeGrouping = ev.detail.value; } + private _handleCollapseChanged(ev: CustomEvent) { + this._activeCollapsed = ev.detail.value; + } + static get styles(): CSSResultGroup { return [ css`