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