design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-10-07 18:47:36 +02:00
parent 369437ceba
commit 7941628d1d
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ts_web/elements/dees-table.ts
View File

@ -73,7 +73,7 @@ export class DeesTable<T> extends DeesElement {
public heading2: string;
@property({
type: Array
type: Array,
})
public data: T[] = [];
@ -142,6 +142,9 @@ export class DeesTable<T> extends DeesElement {
tr:first-child:hover .innerCellContainer {
background: none;
}
tr.selected .innerCellContainer {
background: #ffffff20
}
th {
text-transform: uppercase;
}
@ -192,28 +195,39 @@ export class DeesTable<T> extends DeesElement {
return html`
<table>
<tr>
${headings.map(headingArg => html`
<th>
<div class="innerCellContainer">${headingArg}</div>
</th>
`)}
${headings.map(
(headingArg) => html`
<th>
<div class="innerCellContainer">${headingArg}</div>
</th>
`
)}
</tr>
${this.data.map(itemArg => html`
<tr>
${headings.map(headingArg => html`
<td>
<div class="innerCellContainer">${itemArg[headingArg]}</div>
</td>
`)}
</tr>
`)}
${this.data.map(
(itemArg) => html`
<tr
@click=${() => {
this.selectedDataRow = itemArg;
}}
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
(headingArg) => html`
<td>
<div class="innerCellContainer">${itemArg[headingArg]}</div>
</td>
`
)}
</tr>
`
)}
</table>
`;
})()
: html` <div class="noDataSet">No data set!</div> `}
<div class="tableStatistics">
${this.data.length} data rows (total) |
${this.selectedDataRow ? html`` : html`No row selected`}
${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
</div>
</div>
`;