Various fixes

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.

package.json

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

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`<div part="cell">${item[column.name]}</div>`;
+    return html`<div part="cell">${reach(column.name, item)}</div>`;
   }
 
   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');
       }
     }
   }

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) {
       <div class="wrap">
         ${this.renderTableHeader(columns)}
         <div class="list" @row-selection-changed=${(e) => this._selectionChanged(e)}>
-          ${this._emptyMessage}
+          ${!Array.isArray(items) || items.length === 0 ? html`
+            <div class="empty-message">
+              <slot name="empty-message"></slot>
+            </div>
+          ` : null}
           <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>
 
@@ -241,7 +237,7 @@ export class TpTable extends DomQuery(LitElement) {
   renderItem(item, idx, columns, selected) {
     return html`
       <tp-table-item
-        exportparts="cell,odd,row,chk"
+        exportparts="cell,odd,even,row,chk"
         item
         .index=${idx}
         .item=${item}