Add selectionHeaderRenderer hook and make the width of the selection checkbox column configurable.

README.md

@@ -19,4 +19,10 @@ Each column object has the following properties:
 
 To override the default table column headers you can override the `renderColumnHeader(column, idx)` method.
 
+To override only the selection header, provide a `selectionHeaderRenderer` function property. Return `null` or `undefined` to use the default select-all checkbox.
+
 To override the default cell elements you can override the `renderItem(item, idx, columns, selected)` method.
+
+## Styling
+
+- `--tp-table-checkbox-column-width`: Width of the checkbox selection column. Defaults to `40px`.

package.json

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

tp-table-item.js

@@ -127,7 +127,7 @@ class TpTableItem extends BaseElement {
         .join(' ');
 
       if (this.selectable && this.selectionMode !== 'row-click') {
-        colWidths = '40px ' + colWidths;
+        colWidths = 'var(--tp-table-checkbox-column-width, 40px) ' + colWidths;
       }
 
       this.$grid.style.gridTemplateColumns = colWidths;

tp-table.js

@@ -213,6 +213,14 @@ export class TpTable extends DomQuery(LitElement) {
   }
 
   renderSelectionHeader() {
+    if (typeof this.selectionHeaderRenderer === 'function') {
+      const rendered = this.selectionHeaderRenderer(this);
+
+      if (rendered !== null && rendered !== undefined) {
+        return rendered;
+      }
+    }
+
     return html`<tp-checkbox @toggled=${e => this._checkedChanged(e)}></tp-checkbox>`;
   }
 
@@ -271,6 +279,7 @@ export class TpTable extends DomQuery(LitElement) {
 
       sorting: { type: Object },
       selectable: { type: Boolean },
+
       /**
        * Controls how rows are selected when `selectable` is true.
        * - "checkbox" (default): header + per-row checkboxes; multi-select.
@@ -279,6 +288,12 @@ export class TpTable extends DomQuery(LitElement) {
        *   from the last clicked row. No checkbox column is rendered.
        */
       selectionMode: { type: String },
+
+      /**
+       * Optional renderer for the selection header cell. Return null or
+       * undefined to use the default select-all checkbox.
+       */
+      selectionHeaderRenderer: { attribute: false },
       items: { type: Array },
       columnMoveHandle: { type: String },
       _selItems: { state: true },
@@ -392,7 +407,7 @@ export class TpTable extends DomQuery(LitElement) {
 
   _updateColumns() {
     this.$.tableHeader.style.gridTemplateColumns = this._updateColumnWidths(
-      this._hasCheckboxColumn ? ['40px'] : []
+      this._hasCheckboxColumn ? ['var(--tp-table-checkbox-column-width, 40px)'] : []
     ).join(' ');
   }