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) {