diff --git a/README.md b/README.md index 06a19e8..f0f2226 100644 --- a/README.md +++ b/README.md @@ -1 +1,22 @@ # tp-table + +Displays a list of items in a interactive table. + +## Defining columns + +The `columns` property is an array of objects that define the columns of the table. + +Each column object has the following properties: + +- `label`: The label of the column. +- `name`: The name of the column. This is the property name within the item object that is currently being displayed. +- `width`: The width of the column in pixels. Should be a string like `100px`. +- `required`: Whether the column is required. Required columns are always visible. +- `visible`: Whether the column is visible by default. +- `sortable`: Whether the column is sortable. + +## Custom table elements + +To override the default table column headers you can override the `renderColumnHeader(column, idx)` method. + +To override the default cell elements you can override the `renderItem(item, idx, columns, selected)` method. diff --git a/package.json b/package.json index 9a1080d..580dc51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-table", - "version": "1.3.1", + "version": "1.3.2", "description": "", "main": "tp-table.js", "scripts": { diff --git a/tp-table-item.js b/tp-table-item.js index ef38440..eba7587 100644 --- a/tp-table-item.js +++ b/tp-table-item.js @@ -6,6 +6,7 @@ Copyright (c) 2021 EDV Wasmeier import '@tp/tp-checkbox/tp-checkbox.js'; import { LitElement, html, css } from 'lit'; import { DomQuery } from '@tp/helpers/dom-query.js'; +import { reach } from '@tp/helpers/reach.js'; /** # ef-base-table-item @@ -98,7 +99,7 @@ class TpTableItem extends BaseElement { } renderColumn(column, item) { - return html`
${item[column.name]}
`; + return html`
${reach(column.name, item)}
`; } async updated(changes) { @@ -115,8 +116,10 @@ class TpTableItem extends BaseElement { if (changes.has('index')) { if (this.index % 2 === 0) { this.part.add('odd'); + this.part.remove('even'); } else { this.part.remove('odd'); + this.part.add('even'); } } } diff --git a/tp-table.js b/tp-table.js index 79a943c..09f43dc 100644 --- a/tp-table.js +++ b/tp-table.js @@ -119,11 +119,11 @@ export class TpTable extends DomQuery(LitElement) { background: transparent; } - #tableHeader:not(.col-dragging) a.sort-link .width-handle:hover > div { + #tableHeader:not(.col-dragging) .width-handle:hover > div { background: var(--tp-table-handle-color-hover); } - a.sort-link .width-handle.dragging { + .width-handle.dragging { position: fixed; height: 300px; z-index: 100; @@ -161,14 +161,6 @@ export class TpTable extends DomQuery(LitElement) { border-radius: var(--scrollbar-thumb-border-radius, 4px); } - [item]:not(.odd) { - background: var(--table-bg-1); - } - - [item].odd { - background: var(--table-bg-2); - } - [item]:hover { background: var(--table-row-hl); --list-columns-h-borders: var(--list-columns-h-borders-hover); @@ -185,7 +177,11 @@ export class TpTable extends DomQuery(LitElement) {
${this.renderTableHeader(columns)}
this._selectionChanged(e)}> - ${this._emptyMessage} + ${!Array.isArray(items) || items.length === 0 ? html` +
+ +
+ ` : null} this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}>
@@ -241,7 +237,7 @@ export class TpTable extends DomQuery(LitElement) { renderItem(item, idx, columns, selected) { return html`