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)}
this._selectionChanged(e)}> ${this._emptyMessage} - this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}> + this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}>
@@ -200,12 +200,12 @@ export class TpTable extends DomQuery(LitElement) { ${this.selectable ? html`
this._checkedChanged(e)}>
` : null} - ${columns.map(column => this.renderColumnHeader(column))} + ${columns.map((column, idx) => this.renderColumnHeader(column, idx))} `; } - 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) {