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

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(' ');
   }