tp-elements/tp-table
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bugs and add the index for each column to the callback.

Browse Source
This commit is contained in:
trading_peter 2024-07-12 10:23:35 +02:00
parent 9e046b2c32
commit e77b4f4033
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
tp-table.js
View File

@ -186,7 +186,7 @@ export class TpTable extends DomQuery(LitElement) {
${this.renderTableHeader(columns)} ${this.renderTableHeader(columns)}
<div class="list" @row-selection-changed=${(e) => this._selectionChanged(e)}> <div class="list" @row-selection-changed=${(e) => this._selectionChanged(e)}>
${this._emptyMessage} ${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> </div>
<tp-scroll-threshold id="threshold" lowerThreshold="40"></tp-scroll-threshold> <tp-scroll-threshold id="threshold" lowerThreshold="40"></tp-scroll-threshold>
@ -200,12 +200,12 @@ export class TpTable extends DomQuery(LitElement) {
${this.selectable ? html` ${this.selectable ? html`
<div class="select-col" part="chkAll"><tp-checkbox @toggled=${e => this._checkedChanged(e)}></tp-checkbox></div> <div class="select-col" part="chkAll"><tp-checkbox @toggled=${e => this._checkedChanged(e)}></tp-checkbox></div>
` : null} ` : null}
${columns.map(column => this.renderColumnHeader(column))} ${columns.map((column, idx) => this.renderColumnHeader(column, idx))}
</div> </div>
`; `;
} }
renderColumnHeader(column) { renderColumnHeader(column, idx) {
if (column.visible !== true && column.required !== true) return null; if (column.visible !== true && column.required !== true) return null;
const { name, width, label, sortable } = column; const { name, width, label, sortable } = column;
@ -254,9 +254,11 @@ export class TpTable extends DomQuery(LitElement) {
static get properties() { static get properties() {
return { return {
/** @type {{label: string, name: string, width: number, [required]: boolean, [visible]: boolean, [sortable]: boolean}[]} */
columns: { type: Array },
sorting: { type: Object }, sorting: { type: Object },
selectable: { type: Boolean }, selectable: { type: Boolean },
columns: { type: Array },
items: { type: Array }, items: { type: Array },
columnMoveHandle: { type: String }, columnMoveHandle: { type: String },
_selItems: { type: Map }, _selItems: { type: Map },
@ -319,7 +321,9 @@ export class TpTable extends DomQuery(LitElement) {
} }
firstUpdated() { 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'); new ColumnResizer(this.$.tableHeader, '.width-handle');
if (this.columnMoveHandle) { if (this.columnMoveHandle) {