From 86d5a507eba21b4eb7004562a1623bd940233e14 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Wed, 24 Jun 2026 10:13:36 +0200
Subject: [PATCH] Add selectionHeaderRenderer hook and make the width of the
 selection checkbox column configurable.

---
 README.md        |  6 ++++++
 package.json     |  2 +-
 tp-table-item.js |  2 +-
 tp-table.js      | 17 ++++++++++++++++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f0f2226..951bb88 100644
--- a/README.md
+++ b/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`.
diff --git a/package.json b/package.json
index c5667aa..5e8db9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-table",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "",
   "main": "tp-table.js",
   "scripts": {
diff --git a/tp-table-item.js b/tp-table-item.js
index 1855551..2296da9 100644
--- a/tp-table-item.js
+++ b/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;
diff --git a/tp-table.js b/tp-table.js
index 8062b3d..8b9c4d2 100644
--- a/tp-table.js
+++ b/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(' ');
   }