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

Compare commits

base: tp-elements:9e046b2c32a546b165b822e69d086809b0e77adc
Branches Tags
tp-elements:master
tp-elements:1.3.1
...
compare: tp-elements:c277ed0eca54880ff070205f23ce4b7df61ac95e
Branches Tags
tp-elements:master
tp-elements:1.3.1

2 Commits
9e046b2c32 ... c277ed0eca

Author SHA1 Message Date
pk
c277ed0eca Bump version 2024-07-12 10:23:59 +02:00
pk
e77b4f4033 Fix bugs and add the index for each column to the callback. 2024-07-12 10:23:35 +02:00
2 changed files with 10 additions and 6 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-table", "name": "@tp/tp-table",
"version": "1.3.0", "version": "1.3.1",
"description": "", "description": "",
"main": "tp-table.js", "main": "tp-table.js",
"scripts": { "scripts": {

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