diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 2c95735e82..3e8b683021 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -35,15 +35,6 @@ import { filterData, sortData } from "./sort-filter"; import { groupBy } from "../../common/util/group-by"; import { stringCompare } from "../../common/string/compare"; -declare global { - // for fire event - interface HASSDomEvents { - "selection-changed": SelectionChangedEvent; - "row-click": RowClickedEvent; - "sorting-changed": SortingChangedEvent; - } -} - export interface RowClickedEvent { id: string; } @@ -213,17 +204,19 @@ export class HaDataTable extends LitElement { (column) => column.filterable ); - for (const columnId in this.columns) { - if (this.columns[columnId].direction) { - this.sortDirection = this.columns[columnId].direction!; - this.sortColumn = columnId; + if (!this.sortColumn) { + for (const columnId in this.columns) { + if (this.columns[columnId].direction) { + this.sortDirection = this.columns[columnId].direction!; + this.sortColumn = columnId; - fireEvent(this, "sorting-changed", { - column: columnId, - direction: this.sortDirection, - }); + fireEvent(this, "sorting-changed", { + column: columnId, + direction: this.sortDirection, + }); - break; + break; + } } } @@ -1031,4 +1024,11 @@ declare global { interface HTMLElementTagNameMap { "ha-data-table": HaDataTable; } + + // for fire event + interface HASSDomEvents { + "selection-changed": SelectionChangedEvent; + "row-click": RowClickedEvent; + "sorting-changed": SortingChangedEvent; + } } diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 9880503faf..7a9f118452 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -41,14 +41,6 @@ import type { HomeAssistant, Route } from "../types"; import "./hass-tabs-subpage"; import type { PageNavigation } from "./hass-tabs-subpage"; -declare global { - // for fire event - interface HASSDomEvents { - "search-changed": { value: string }; - "clear-filter": undefined; - } -} - @customElement("hass-tabs-subpage-data-table") export class HaTabsSubpageDataTable extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -166,6 +158,11 @@ export class HaTabsSubpageDataTable extends LitElement { @property({ type: Boolean }) public showFilters = false; + @property({ attribute: false }) public initalSorting?: { + column: string; + direction: SortingDirection; + }; + @property() public initialGroupColumn?: string; @state() private _sortColumn?: string; @@ -190,9 +187,16 @@ export class HaTabsSubpageDataTable extends LitElement { this._dataTable.clearSelection(); } - protected firstUpdated() { + protected willUpdate() { + if (this.hasUpdated) { + return; + } if (this.initialGroupColumn) { - this._groupColumn = this.initialGroupColumn; + this._setGroupColumn(this.initialGroupColumn); + } + if (this.initalSorting) { + this._sortColumn = this.initalSorting.column; + this._sortDirection = this.initalSorting.direction; } } @@ -563,7 +567,12 @@ export class HaTabsSubpageDataTable extends LitElement { } private _handleGroupBy(ev) { - this._groupColumn = ev.currentTarget.value; + this._setGroupColumn(ev.currentTarget.value); + } + + private _setGroupColumn(columnId: string) { + this._groupColumn = columnId; + fireEvent(this, "grouping-changed", { value: columnId }); } private _enableSelectMode() { @@ -819,4 +828,11 @@ declare global { interface HTMLElementTagNameMap { "hass-tabs-subpage-data-table": HaTabsSubpageDataTable; } + + // for fire event + interface HASSDomEvents { + "search-changed": { value: string }; + "grouping-changed": { value: string }; + "clear-filter": undefined; + } } diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index e834e453fc..0e5c0eff43 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -26,6 +26,7 @@ import { DataTableColumnContainer, RowClickedEvent, SelectionChangedEvent, + SortingChangedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/data-table/ha-data-table-labels"; import "../../../components/entity/ha-battery-icon"; @@ -74,6 +75,7 @@ import { rejectedItems, } from "../../../common/util/promise-all-settled-results"; import { showAlertDialog } from "../../lovelace/custom-card-helpers"; +import { storage } from "../../../common/decorators/storage"; interface DeviceRowData extends DeviceRegistryEntry { device?: DeviceRowData; @@ -117,6 +119,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { @state() _labels!: LabelRegistryEntry[]; + @storage({ key: "devices-table-sort", state: false, subscribe: false }) + private _activeSorting?: SortingChangedEvent; + + @storage({ key: "devices-table-grouping", state: false, subscribe: false }) + private _activeGrouping?: string; + private _ignoreLocationChange = false; public connectedCallback() { @@ -614,8 +622,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { Array.isArray(val) ? val.length : val ) ).length} + .initialGroupColumn=${this._activeGrouping} + .initalSorting=${this._activeSorting} @clear-filter=${this._clearFilter} @search-changed=${this._handleSearchChange} + @sorting-changed=${this._handleSortingChanged} + @grouping-changed=${this._handleGroupingChanged} @row-click=${this._handleRowClicked} clickable hasFab @@ -855,6 +867,14 @@ ${rejected }); } + private _handleSortingChanged(ev: CustomEvent) { + this._activeSorting = ev.detail; + } + + private _handleGroupingChanged(ev: CustomEvent) { + this._activeGrouping = ev.detail.value; + } + static get styles(): CSSResultGroup { return [ css`