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

Compare commits

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

No commits in common. "c277ed0eca54880ff070205f23ce4b7df61ac95e" and "9e046b2c32a546b165b822e69d086809b0e77adc" have entirely different histories.
c277ed0eca ... 9e046b2c32

2 changed files with 6 additions and 10 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.1", "version": "1.3.0",
"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" 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" @scroll=${this._onScroll} 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, idx) => this.renderColumnHeader(column, idx))} ${columns.map(column => this.renderColumnHeader(column))}
</div> </div>
`; `;
} }
renderColumnHeader(column, idx) { renderColumnHeader(column) {
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,11 +254,9 @@ 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 },
@ -321,9 +319,7 @@ export class TpTable extends DomQuery(LitElement) {
} }
firstUpdated() { firstUpdated() {
this.$.virtualList.addEventListener('scroll', e => this._onScroll(e), true); this.shadowRoot.querySelector('tp-scroll-threshold').target = this.shadowRoot.querySelector('lit-virtualizer');
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) {