Allow for selection

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 => {
-          if (column.visible !== true && column.required !== true) return;
-            return this.renderColumn(column, item) || null;
-          }) : null
-        }
+        ${Array.isArray(columns) ? columns.map((column, idx) => {
+      if (column.visible !== true && column.required !== true) return;
+      return this.renderColumn(column, item, idx) || 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 },
     };