1.0.68

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.67",
+      "version": "1.0.68",
       "license": "MIT",
       "dependencies": {
         "@designestate/dees-domtools": "^1.0.94",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/elements/dees-table.ts

@@ -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>
     `;