Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code Activity

Allow to hide and sort columns in data tables (#21168)

Browse Source 
* Allow to hide and sort columns in data tables

* fix unused

* store
This commit is contained in:
Bram Kragten
2024-06-26 11:51:32 +02:00
committed by GitHub
parent adea384f40
commit 7d28f3f585
19 changed files with 1043 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/layouts/hass-tabs-subpage-data-table.ts
View File

@@ -6,6 +6,7 @@ import {
mdiArrowDown,
mdiArrowUp,
mdiClose,
mdiCog,
mdiFilterVariant,
mdiFilterVariantRemove,
mdiFormatListChecks,
@@ -42,6 +43,7 @@ import "../components/search-input-outlined";
import type { HomeAssistant, Route } from "../types";
import "./hass-tabs-subpage";
import type { PageNavigation } from "./hass-tabs-subpage";
import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings";
@customElement("hass-tabs-subpage-data-table")
export class HaTabsSubpageDataTable extends LitElement {
@@ -171,6 +173,10 @@ export class HaTabsSubpageDataTable extends LitElement {
@property({ attribute: false }) public groupOrder?: string[];
@property({ attribute: false }) public columnOrder?: string[];
@property({ attribute: false }) public hiddenColumns?: string[];
@state() private _sortColumn?: string;
@state() private _sortDirection: SortingDirection = null;
@@ -290,6 +296,14 @@ export class HaTabsSubpageDataTable extends LitElement {
`
: nothing;
const settingsButton = html`<ha-assist-chip
class="has-dropdown select-mode-chip"
@click=${this._openSettings}
.title=${localize("ui.components.subpage-data-table.settings")}
>
<ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
</ha-assist-chip>`;
return html`
<hass-tabs-subpage
.hass=${this.hass}
@@ -416,6 +430,7 @@ export class HaTabsSubpageDataTable extends LitElement {
: ""}
<ha-data-table
.hass=${this.hass}
.narrow=${this.narrow}
.columns=${this.columns}
.data=${this.data}
.noDataText=${this.noDataText}
@@ -430,6 +445,8 @@ export class HaTabsSubpageDataTable extends LitElement {
.groupColumn=${this._groupColumn}
.groupOrder=${this.groupOrder}
.initialCollapsedGroups=${this.initialCollapsedGroups}
.columnOrder=${this.columnOrder}
.hiddenColumns=${this.hiddenColumns}
>
${!this.narrow
? html`
@@ -438,7 +455,7 @@ export class HaTabsSubpageDataTable extends LitElement {
<div class="table-header">
${this.hasFilters && !this.showFilters
? html`${filterButton}`
: nothing}${selectModeBtn}${searchBar}${groupByMenu}${sortByMenu}
: nothing}${selectModeBtn}${searchBar}${groupByMenu}${sortByMenu}${settingsButton}
</div>
</slot>
</div>
@@ -448,7 +465,7 @@ export class HaTabsSubpageDataTable extends LitElement {
${this.hasFilters && !this.showFilters
? html`${filterButton}`
: nothing}
${selectModeBtn}${groupByMenu}${sortByMenu}
${selectModeBtn}${groupByMenu}${sortByMenu}${settingsButton}
</div>`}
</ha-data-table>`}
<div slot="fab"><slot name="fab"></slot></div>
@@ -608,6 +625,22 @@ export class HaTabsSubpageDataTable extends LitElement {
fireEvent(this, "grouping-changed", { value: columnId });
}
private _openSettings() {
showDataTableSettingsDialog(this, {
columns: this.columns,
hiddenColumns: this.hiddenColumns,
columnOrder: this.columnOrder,
onUpdate: (
columnOrder: string[] | undefined,
hiddenColumns: string[] | undefined
) => {
this.columnOrder = columnOrder;
this.hiddenColumns = hiddenColumns;
fireEvent(this, "columns-changed", { columnOrder, hiddenColumns });
},
});
}
private _collapseAllGroups() {
this._dataTable.collapseAllGroups();
}
@@ -874,6 +907,10 @@ declare global {
interface HASSDomEvents {
"search-changed": { value: string };
"grouping-changed": { value: string };
"columns-changed": {
columnOrder: string[] | undefined;
hiddenColumns: string[] | undefined;
};
"clear-filter": undefined;
}
}