Allow for selection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-table",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "tp-table.js",
   "scripts": {

tp-table-item.js

@@ -41,6 +41,17 @@ class TpTableItem extends BaseElement {
           align-items: center;
         }
 
+        [part="chk"] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+        }
+
+        tp-checkbox::part(label) {
+          display: none;
+        }
+
         [part="cell"] {
           align-self: stretch;
           overflow: hidden;
@@ -63,15 +74,15 @@ class TpTableItem extends BaseElement {
     return html`
       <div id="grid" class="wrap" part="row">
         ${this.selectable ? html`
-          <div class="chk">
+          <div class="chk" part="chk">
             <tp-checkbox id="selectionChk" @click=${this._updateSelectionState}></tp-checkbox>
           </div>
         ` : null}
-        ${Array.isArray(columns) ? columns.map(column => {
+        ${Array.isArray(columns) ? columns.map((column, idx) => {
-          if (column.visible !== true && column.required !== true) return;
+      if (column.visible !== true && column.required !== true) return;
-            return this.renderColumn(column, item) || null;
+      return this.renderColumn(column, item, idx) || null;
-          }) : null
+    }) : null
-        }
+      }
       </div>
     `;
   }
@@ -79,7 +90,7 @@ class TpTableItem extends BaseElement {
   static get properties() {
     return {
       index: { type: Array },
-      item: { type: Object },
+      item: { type: Object, hasChanged: () => true },
       columns: { type: Array },
       selectable: { type: Boolean },
     };

tp-table.js

@@ -132,7 +132,14 @@ export class TpTable extends DomQuery(LitElement) {
         }
 
         .select-col {
-          padding: 0px 20px 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+        }
+
+        .select-col tp-checkbox::part(label) {
+          display: none;
         }
 
         lit-virtualizer {
@@ -177,7 +184,7 @@ export class TpTable extends DomQuery(LitElement) {
       <div class="wrap">
         <div id="tableHeader" part="header" class="list-headline" @track=${this._colResizeTracked}>
           ${this.selectable ? html`
-            <div class="select-col"><tp-checkbox @checked-changed=${e => this._checkedChanged(e)}></tp-checkbox></div>
+            <div class="select-col" part="chkAll"><tp-checkbox @checked-changed=${e => this._checkedChanged(e)}></tp-checkbox></div>
           ` : null}
           ${columns.map(column => this.renderColumnHeader(column))}
         </div>
@@ -227,7 +234,7 @@ export class TpTable extends DomQuery(LitElement) {
   renderItem(item, idx, columns) {
     return html`
       <tp-table-item
-        exportparts="cell,odd,row"
+        exportparts="cell,odd,row,chk"
         item
         .index=${idx}
         .item=${item}
@@ -294,11 +301,15 @@ export class TpTable extends DomQuery(LitElement) {
     this.reloadPagedList();
   }
 
+  scrollToIndex(idx) {
+    this.$.virtualList.scrollToIndex(idx);
+  }
+
   firstUpdated() {
     this.shadowRoot.querySelector('tp-scroll-threshold').target = this.shadowRoot.querySelector('lit-virtualizer');
     new ColumResizer(this.$.tableHeader, '.width-handle');
   }
-  
+
   _onScroll(e) {
     this.$.tableHeader.style.paddingRight = (this.$.virtualList.offsetWidth - this.$.virtualList.clientWidth) + 'px';
     this.$.tableHeader.scrollLeft = this.$.virtualList.scrollLeft;
@@ -319,11 +330,11 @@ export class TpTable extends DomQuery(LitElement) {
   }
 
   _updateColumns() {
-    this.$.tableHeader.style.gridTemplateColumns = this._updateColumnWidths(this.selectable ? [ '40px' ] : []).join(' ');
+    this.$.tableHeader.style.gridTemplateColumns = this._updateColumnWidths(this.selectable ? ['40px'] : []).join(' ');
   }
 
   _updateColumnWidths(prepend) {
-    return [ ...(prepend || []), ...this.columns.filter(col => col.required || col.visible).map(col => col.width) ];
+    return [...(prepend || []), ...this.columns.filter(col => col.required || col.visible).map(col => col.width)];
   }
 
   _colResizeTracked(e) {
@@ -376,26 +387,29 @@ export class TpTable extends DomQuery(LitElement) {
   _checkedChanged(e) {
     if (Array.isArray(this.items) === false) return;
 
-    if (e.detail.value) {
+    if (e.detail) {
       this._selectAll();
     } else {
       this._selectNone();
     }
 
-    this.items = [...this.times];
+    this.items = [...this.items];
   }
 
   _selectAll() {
-    this.items.forEach((entry, idx) => {
+    this.items = this.items.map((entry) => {
-      this.items[idx].__selected__ = true;
+      entry.__selected__ = true;
+      return entry;
     });
 
+    this.requestUpdate('items');
     this._selectionChanged();
   }
 
   _selectNone() {
-    this._items.forEach((entry, idx) => {
+    this.items = this.items.map((entry) => {
-      this._items[idx].__selected__ = false;
+      entry.__selected__ = false;
+      return entry;
     });
 
     this._selectionChanged();
@@ -405,28 +419,28 @@ export class TpTable extends DomQuery(LitElement) {
     if (this.__restoringSelection) return;
 
     if (e !== undefined) {
-      const item = this._items.find(item => item._id === e.detail.item._id);
+      const item = this.items.find(item => item._id === e.detail.item._id);
       item.__selected__ = e.detail.selected;
     }
 
-    this._selItems = this._items.filter(entry => entry.__selected__ === true);
+    this._selItems = this.items.filter(entry => entry.__selected__ === true);
     this.dispatchEvent(new CustomEvent('item-selection-changed', { detail: this._selItems, bubbles: true, composed: true }));
   }
 
   _updateSelEntries() {
     this._hiddenSelection = 0;
 
-    if (!this._items) {
+    if (!this.items) {
       this._selItems = [];
     } else {
       this._selItems.forEach(sel => {
-        const idx = this._items.findIndex(entry => entry._id === sel._id);
+        const idx = this.items.findIndex(entry => entry._id === sel._id);
         if (idx > -1) {
           // Suppress rebuild of the selected invoices list.
           // When we restore the selection on a filtered list of invoices we would loose the selection of hidden onces
           // when _selectionChanged is triggered. So we set a flag that the observer is skipped.
           this.__restoringSelection = true;
-          this._items[idx].__selected__ = true;
+          this.items[idx].__selected__ = true;
           this.__restoringSelection = false;
         } else {
           this._hiddenSelection++;