Skip to content

Datatable fab padding #5432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 5 commits into from
Apr 3, 2020
Merged

Datatable fab padding #5432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
416f07f
Add padding for fab
bramkragten Apr 3, 2020
b2ca493
Add hasFab property
bramkragten Apr 3, 2020
eb1a208
Simplify
bramkragten Apr 3, 2020
cc9341b
Remove query
bramkragten Apr 3, 2020
0bcac57
Change to empty row
bramkragten Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 77 additions & 66 deletions src/components/data-table/ha-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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: {
Expand Down Expand Up @@ -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`
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
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 mdc-data-table__cell--checkbox"
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
: "",
})
: ""}
>
<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>
${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>
`}
Expand Down
6 changes: 6 additions & 0 deletions src/layouts/hass-tabs-subpage-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
>
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/areas/ha-config-areas-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/automation/ha-automation-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/helpers/ha-config-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/scene/ha-scene-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/script/ha-script-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/panels/config/users/ha-config-users.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down