From e77b4f40333c3e5b283b0e47566c9cad828654e4 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Fri, 12 Jul 2024 10:23:35 +0200
Subject: [PATCH] Fix bugs and add the index for each column to the callback.

---
 tp-table.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/tp-table.js b/tp-table.js
index 6704ff9..79a943c 100644
--- a/tp-table.js
+++ b/tp-table.js
@@ -186,7 +186,7 @@ export class TpTable extends DomQuery(LitElement) {
         ${this.renderTableHeader(columns)}
         <div class="list" @row-selection-changed=${(e) => this._selectionChanged(e)}>
           ${this._emptyMessage}
-          <lit-virtualizer id="virtualList" part="list" @scroll=${this._onScroll} scroller .items=${items} .renderItem=${(item, idx) => this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}></lit-virtualizer>
+          <lit-virtualizer id="virtualList" part="list" scroller .items=${items} .renderItem=${(item, idx) => this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}></lit-virtualizer>
         </div>
 
         <tp-scroll-threshold id="threshold" lowerThreshold="40"></tp-scroll-threshold>
@@ -200,12 +200,12 @@ export class TpTable extends DomQuery(LitElement) {
         ${this.selectable ? html`
           <div class="select-col" part="chkAll"><tp-checkbox @toggled=${e => this._checkedChanged(e)}></tp-checkbox></div>
         ` : null}
-        ${columns.map(column => this.renderColumnHeader(column))}
+        ${columns.map((column, idx) => this.renderColumnHeader(column, idx))}
       </div>
     `;
   }
 
-  renderColumnHeader(column) {
+  renderColumnHeader(column, idx) {
     if (column.visible !== true && column.required !== true) return null;
 
     const { name, width, label, sortable } = column;
@@ -254,9 +254,11 @@ export class TpTable extends DomQuery(LitElement) {
 
   static get properties() {
     return {
+      /** @type {{label: string, name: string, width: number, [required]: boolean, [visible]: boolean, [sortable]: boolean}[]} */
+      columns: { type: Array },
+
       sorting: { type: Object },
       selectable: { type: Boolean },
-      columns: { type: Array },
       items: { type: Array },
       columnMoveHandle: { type: String },
       _selItems: { type: Map },
@@ -319,7 +321,9 @@ export class TpTable extends DomQuery(LitElement) {
   }
 
   firstUpdated() {
-    this.shadowRoot.querySelector('tp-scroll-threshold').target = this.shadowRoot.querySelector('lit-virtualizer');
+    this.$.virtualList.addEventListener('scroll', e => this._onScroll(e), true);
+
+    this.shadowRoot.querySelector('tp-scroll-threshold').target = this.$.virtualList;
     new ColumnResizer(this.$.tableHeader, '.width-handle');
 
     if (this.columnMoveHandle) {