@nanoporetech-digital/components 5.1.2 → 5.2.0

package/dist/collection/components/table/table.pin-service.js

@@ -0,0 +1,382 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { readTask, writeTask } from '@stencil/core';
+import { CSSNAMESPACE } from './table.constants';
+function addStyleSheet(id, css) {
+  const styleSheet = document.getElementById(id) ||
+    document.createElement('style');
+  styleSheet.id = id;
+  styleSheet.innerHTML = css;
+  if (!styleSheet.isConnected)
+    document.head.append(styleSheet);
+}
+/**
+ * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
+ *
+ * *knowing* when an element is pinned is tricky.
+ * Managing the display of multiple, side-by-side pinned elements is trickier still.
+ *
+ * Pinning table columns are very different from pinning table rows:
+ * - Rows are actual elements we can select, measure and apply styles to.
+ * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
+ *
+ * With this in mind, how columns and rows are pinned is different:
+ * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
+ *
+ * The service is slightly opinionated on how it pins rows and columns (with some room for override):
+ * - Pinned columns are stuck consecutively, without overlapping.
+ * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
+ * Both columns are important for context
+ *
+ * - Pinned rows are set to overlap *when* they have the same ancestor,
+ * and stuck consecutively when they have a different ancestor.
+ * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
+ * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
+ *
+ * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
+ */
+export class TablePinService {
+  constructor(table, scrollElement) {
+    // Private state
+    this.cachedColMeta = new WeakMap();
+    this._pinnedStart = [];
+    this._pinnedEnd = [];
+    this._cssColDimensionCacheKey = '';
+    this.cacheX = 0;
+    this.cacheY = 0;
+    this.tableEle = table;
+    this.tableId = this.tableEle.id;
+    this.scrollElement = scrollElement;
+    // Secret sauce - `getElementsByClassName` is a live collection.
+    // An HTMLCollection will keep itself up-to-date as elements come and go
+    // So we can keep assessing on scroll
+    this.startColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);
+    this.endColumns = table
+      .querySelector('thead')
+      .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);
+    this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);
+    this.bottomRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--bottom`);
+    this.onResize();
+  }
+  // Pinned cols & change detection
+  get pinnedStart() {
+    return this._pinnedStart;
+  }
+  set pinnedStart(cols) {
+    this._pinnedStart = cols;
+    this.handlePinnedStartChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'last' start column.
+   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
+   */
+  handlePinnedStartChange() {
+    writeTask(() => {
+      if (this.pinnedStart.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);
+        const lastActiveCol = this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length - 1]);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {
+            --pin-start-active: 1;
+          }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);
+        addStyleSheet(`${this.tableId}-col-start-active-style`, ``);
+      }
+    });
+  }
+  get pinnedEnd() {
+    return this._pinnedEnd;
+  }
+  set pinnedEnd(cols) {
+    this._pinnedEnd = cols;
+    this.handlePinnedEndChange();
+  }
+  /**
+   * Called when columns are either pinned or unpinned.
+   * Attaches a tiny stylesheet to target the 'first' end column.
+   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
+   */
+  handlePinnedEndChange() {
+    writeTask(() => {
+      if (this.pinnedEnd.length) {
+        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);
+        const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, 
+        /* css */ `
+          #${this.tableId} tr > :nth-child(${firstActiveCol.idx + 1}) { --pin-end-active: 1; }
+        `);
+      }
+      else {
+        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);
+        addStyleSheet(`${this.tableId}-col-end-active-style`, ``);
+      }
+    });
+  }
+  get cssColDimensionCacheKey() {
+    return this._cssColDimensionCacheKey;
+  }
+  set cssColDimensionCacheKey(key) {
+    if (key === this._cssColDimensionCacheKey)
+      return;
+    this._cssColDimensionCacheKey = key;
+    this.createPinnedColDimensionStyles();
+  }
+  /**
+   * To only generate column dimension styles when necessary we
+   * maintain a cache key string via serialised column meta.
+   * Only when this key changes do we generate a new stylesheet
+   */
+  generateCssCacheKey() {
+    let key = '';
+    for (const col of this.startColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    for (const col of this.endColumns) {
+      const colMeta = this.cachedColMeta.get(col);
+      key += `${colMeta.idx}-start-${colMeta.width}`;
+    }
+    this.cssColDimensionCacheKey = key;
+  }
+  /**
+   * Generates pinned column width offset styles
+   * so pinned columns can appear stuck together,
+   * then attaches a stylesheet.
+   */
+  createPinnedColDimensionStyles() {
+    let widthS = 0;
+    let widthE = 0;
+    const startCols = Array.from(this.startColumns);
+    const endCols = Array.from(this.endColumns).reverse();
+    const css = /* css */ `
+      ${startCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthS += colMeta.width || 0;
+      return /* css */ `
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,
+            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {
+              --pin-start: ${widthS - 1}px;
+            }
+          `;
+    })
+      .join('')}
+      ${endCols
+      .map((col) => {
+      const colMeta = this.cachedColMeta.get(col);
+      widthE += colMeta.width;
+      return /* css */ `
+            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),
+            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {
+              --pin-end: ${widthE - 1}px;
+            }
+          `;
+    })
+      .join('')}
+    `;
+    addStyleSheet(`${this.tableId}-dimension-style`, css);
+  }
+  getParentOffsets() {
+    const { x, y } = this.scrollElement.getBoundingClientRect();
+    let offsetX = x;
+    let offsetY = y;
+    if (this.scrollElement === document.documentElement) {
+      offsetX = this.scrollElement.offsetLeft;
+      offsetY = this.scrollElement.offsetTop;
+    }
+    return { offsetX, offsetY };
+  }
+  /**
+   * Loops through all 'top' & 'bottom' rows (on scroll or resize)
+   * Manages their visual state by applying classes on stuck / unstuck
+   * And their pinned offset / distance
+   */
+  assessRows() {
+    if (!this.topRows.length && !this.bottomRows.length)
+      return;
+    // top rows
+    if (this.topRows.length) {
+      readTask(async () => {
+        let heightAggregate = 0;
+        let cacheParent;
+        const { offsetY } = this.getParentOffsets();
+        for (const topRow of this.topRows) {
+          const { y, height } = topRow.getBoundingClientRect();
+          const currParent = topRow.parentElement;
+          // we'll use the applied `--pin-top` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');
+          const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-top`) so we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (y - offsetY <= offset) {
+              topRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            else {
+              topRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-top', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+    // bottom rows
+    if (this.bottomRows.length) {
+      const bottomRows = Array.from(this.bottomRows).reverse();
+      readTask(async () => {
+        let cacheParent;
+        let heightAggregate = 0;
+        const { offsetY } = this.getParentOffsets();
+        for (const bottomRow of bottomRows) {
+          if (!bottomRow.isConnected)
+            continue;
+          const { y, height } = bottomRow.getBoundingClientRect();
+          const currParent = bottomRow.parentElement;
+          // we'll use the applied `--pin-bottom` css var to decide row offset.
+          // This allows devs to override this behaviour through selector specificity
+          const pinBottom = getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');
+          const offset = pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;
+          // we need to wait for the row to finish sticking
+          // and generating it's offset (`--pin-bottom`) to we can see, on
+          // subsequent rows *if* the offset was applied
+          await new Promise((resolve) => writeTask(() => {
+            if (this.tableDims.height + offsetY - (y + height) <= offset) {
+              bottomRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            else {
+              bottomRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
+            }
+            // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
+            // so only aggregate height / offset when cacheParent is different from current parent.
+            // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
+            if (cacheParent !== currParent) {
+              currParent.style.setProperty('--pin-bottom', `${heightAggregate}px`);
+              heightAggregate += height;
+              cacheParent = currParent;
+            }
+            resolve();
+          }));
+        }
+      });
+    }
+  }
+  /**
+   * Loops through all 'start' & 'end' columns (on scroll or resize)
+   * Caches meta about each column (e.g. size, position-index)
+   * and decides which columns are pinned
+   */
+  async assessCols() {
+    if (!this.startColumns.length && !this.endColumns.length)
+      return;
+    let boundBox;
+    let currPinned;
+    let parentEles;
+    const done = new Promise((resolve) => {
+      // start cols
+      if (this.startColumns.length) {
+        readTask(() => {
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = offsetX;
+          parentEles = Array.from(this.startColumns[0].parentElement.children);
+          for (const startCol of this.startColumns) {
+            boundBox = startCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(startCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(startCol),
+            });
+            currPinned = this.pinnedStart.find((c) => c === startCol);
+            if (boundBox.x < widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedStart = [
+                  ...this.pinnedStart,
+                  startCol,
+                ];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          if (!this.endColumns.length)
+            resolve();
+        });
+      }
+      // end cols
+      if (this.endColumns.length) {
+        readTask(() => {
+          const endCols = Array.from(this.endColumns).reverse();
+          parentEles = Array.from(this.endColumns[0].parentElement.children);
+          const { offsetX } = this.getParentOffsets();
+          // cumulatively add widths of columns together
+          // 'cos columns stick together
+          let widthAggregate = 0;
+          for (const endCol of endCols) {
+            boundBox = endCol.getBoundingClientRect();
+            // cache meta for later
+            this.cachedColMeta.set(endCol, {
+              width: boundBox.width,
+              idx: parentEles.indexOf(endCol),
+            });
+            currPinned = this.pinnedEnd.find((c) => c === endCol);
+            if (this.tableDims.width + offsetX - boundBox.right <=
+              widthAggregate) {
+              // this column is pinned
+              if (!currPinned)
+                this.pinnedEnd = [endCol, ...this.pinnedEnd];
+            }
+            else if (currPinned) {
+              // this column is unpinned
+              this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);
+            }
+            widthAggregate += boundBox.width;
+          }
+          resolve();
+        });
+      }
+    });
+    await done;
+    // potentially generate a new css stylesheet if anything changed
+    this.generateCssCacheKey();
+  }
+  onScroll(pos) {
+    if (this.cacheX !== pos.x) {
+      this.cacheX = pos.x;
+      this.assessCols();
+    }
+    if (this.cacheY !== pos.y) {
+      this.cacheY = pos.y;
+      this.assessRows();
+    }
+  }
+  onResize() {
+    const width = this.scrollElement.clientWidth;
+    const height = this.scrollElement.clientHeight;
+    this.tableDims = { width, height };
+    this.assessCols();
+    this.assessRows();
+  }
+}
+//# sourceMappingURL=table.pin-service.js.map

package/dist/collection/components/table/table.pin-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.pin-service.js","sourceRoot":"","sources":["../../../src/components/table/table.pin-service.ts"],"names":[],"mappings":"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","sourcesContent":["import { readTask, writeTask } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\n\nfunction addStyleSheet(id, css) {\n  const styleSheet =\n    (document.getElementById(id) as HTMLStyleElement) ||\n    document.createElement('style');\n  styleSheet.id = id;\n  styleSheet.innerHTML = css;\n  if (!styleSheet.isConnected) document.head.append(styleSheet);\n}\n\n/**\n * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.\n *\n * *knowing* when an element is pinned is tricky.\n * Managing the display of multiple, side-by-side pinned elements is trickier still.\n *\n * Pinning table columns are very different from pinning table rows:\n * - Rows are actual elements we can select, measure and apply styles to.\n * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.\n *\n * With this in mind, how columns and rows are pinned is different:\n * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.\n *\n * The service is slightly opinionated on how it pins rows and columns (with some room for override):\n * - Pinned columns are stuck consecutively, without overlapping.\n * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.\n * Both columns are important for context\n *\n * - Pinned rows are set to overlap *when* they have the same ancestor,\n * and stuck consecutively when they have a different ancestor.\n * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.\n * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.\n *\n * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.\n */\nexport class TablePinService {\n  // Private state\n\n  private cachedColMeta: WeakMap<HTMLElement, { width: number; idx: number }> =\n    new WeakMap();\n  private tableId: string;\n  private tableEle: HTMLTableElement;\n  private scrollElement: HTMLElement;\n  private startColumns: HTMLCollection;\n  private endColumns: HTMLCollection;\n  private topRows: HTMLCollection;\n  private bottomRows: HTMLCollection;\n  private tableDims: { height: number; width: number };\n\n  constructor(table: HTMLTableElement, scrollElement: HTMLElement) {\n    this.tableEle = table;\n    this.tableId = this.tableEle.id;\n    this.scrollElement = scrollElement;\n\n    // Secret sauce - `getElementsByClassName` is a live collection.\n    // An HTMLCollection will keep itself up-to-date as elements come and go\n    // So we can keep assessing on scroll\n\n    this.startColumns = table\n      .querySelector('thead')\n      .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);\n    this.endColumns = table\n      .querySelector('thead')\n      .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);\n    this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);\n    this.bottomRows = table.getElementsByClassName(\n      `${CSSNAMESPACE}__pin--bottom`\n    );\n    this.onResize();\n  }\n\n  // Pinned cols & change detection\n  private get pinnedStart() {\n    return this._pinnedStart;\n  }\n  private set pinnedStart(cols: HTMLElement[]) {\n    this._pinnedStart = cols;\n    this.handlePinnedStartChange();\n  }\n  private _pinnedStart: HTMLElement[] = [];\n\n  /**\n   * Called when columns are either pinned or unpinned.\n   * Attaches a tiny stylesheet to target the 'last' start column.\n   * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)\n   */\n  private handlePinnedStartChange() {\n    writeTask(() => {\n      if (this.pinnedStart.length) {\n        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);\n        const lastActiveCol = this.cachedColMeta.get(\n          this.pinnedStart[this.pinnedStart.length - 1]\n        );\n\n        addStyleSheet(\n          `${this.tableId}-col-start-active-style`,\n          /* css */ `\n          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {\n            --pin-start-active: 1;\n          }\n        `\n        );\n      } else {\n        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);\n        addStyleSheet(`${this.tableId}-col-start-active-style`, ``);\n      }\n    });\n  }\n\n  private get pinnedEnd() {\n    return this._pinnedEnd;\n  }\n  private set pinnedEnd(cols: HTMLElement[]) {\n    this._pinnedEnd = cols;\n    this.handlePinnedEndChange();\n  }\n  private _pinnedEnd: HTMLElement[] = [];\n\n  /**\n   * Called when columns are either pinned or unpinned.\n   * Attaches a tiny stylesheet to target the 'first' end column.\n   * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)\n   */\n  private handlePinnedEndChange() {\n    writeTask(() => {\n      if (this.pinnedEnd.length) {\n        this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);\n        const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);\n\n        addStyleSheet(\n          `${this.tableId}-col-end-active-style`,\n          /* css */ `\n          #${this.tableId} tr > :nth-child(${\n            firstActiveCol.idx + 1\n          }) { --pin-end-active: 1; }\n        `\n        );\n      } else {\n        this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);\n        addStyleSheet(`${this.tableId}-col-end-active-style`, ``);\n      }\n    });\n  }\n\n  private get cssColDimensionCacheKey() {\n    return this._cssColDimensionCacheKey;\n  }\n  private set cssColDimensionCacheKey(key: string) {\n    if (key === this._cssColDimensionCacheKey) return;\n    this._cssColDimensionCacheKey = key;\n    this.createPinnedColDimensionStyles();\n  }\n  private _cssColDimensionCacheKey: string = '';\n\n  /**\n   * To only generate column dimension styles when necessary we\n   * maintain a cache key string via serialised column meta.\n   * Only when this key changes do we generate a new stylesheet\n   */\n  private generateCssCacheKey() {\n    let key = '';\n    for (const col of this.startColumns) {\n      const colMeta = this.cachedColMeta.get(col as HTMLElement);\n      key += `${colMeta.idx}-start-${colMeta.width}`;\n    }\n    for (const col of this.endColumns) {\n      const colMeta = this.cachedColMeta.get(col as HTMLElement);\n      key += `${colMeta.idx}-start-${colMeta.width}`;\n    }\n    this.cssColDimensionCacheKey = key;\n  }\n\n  /**\n   * Generates pinned column width offset styles\n   * so pinned columns can appear stuck together,\n   * then attaches a stylesheet.\n   */\n  private createPinnedColDimensionStyles() {\n    let widthS = 0;\n    let widthE = 0;\n    const startCols = Array.from(this.startColumns);\n    const endCols = Array.from(this.endColumns).reverse();\n\n    const css = /* css */ `\n      ${startCols\n        .map((col) => {\n          const colMeta = this.cachedColMeta.get(col as HTMLElement);\n          widthS += colMeta.width || 0;\n          return /* css */ `\n            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,\n            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {\n              --pin-start: ${widthS - 1}px;\n            }\n          `;\n        })\n        .join('')}\n      ${endCols\n        .map((col) => {\n          const colMeta = this.cachedColMeta.get(col as HTMLElement);\n          widthE += colMeta.width;\n          return /* css */ `\n            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),\n            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {\n              --pin-end: ${widthE - 1}px;\n            }\n          `;\n        })\n        .join('')}\n    `;\n    addStyleSheet(`${this.tableId}-dimension-style`, css);\n  }\n\n  private getParentOffsets() {\n    const { x, y } = this.scrollElement.getBoundingClientRect();\n\n    let offsetX = x;\n    let offsetY = y;\n\n    if (this.scrollElement === document.documentElement) {\n      offsetX = this.scrollElement.offsetLeft;\n      offsetY = this.scrollElement.offsetTop;\n    }\n    return { offsetX, offsetY };\n  }\n\n  /**\n   * Loops through all 'top' & 'bottom' rows (on scroll or resize)\n   * Manages their visual state by applying classes on stuck / unstuck\n   * And their pinned offset / distance\n   */\n  public assessRows() {\n    if (!this.topRows.length && !this.bottomRows.length) return;\n\n    // top rows\n    if (this.topRows.length) {\n      readTask(async () => {\n        let heightAggregate = 0;\n        let cacheParent: HTMLElement;\n        const { offsetY } = this.getParentOffsets();\n\n        for (const topRow of this.topRows) {\n          const { y, height } = topRow.getBoundingClientRect();\n          const currParent = topRow.parentElement;\n          // we'll use the applied `--pin-top` css var to decide row offset.\n          // This allows devs to override this behaviour through selector specificity\n          const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');\n          const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;\n\n          // we need to wait for the row to finish sticking\n          // and generating it's offset (`--pin-top`) so we can see, on\n          // subsequent rows *if* the offset was applied\n          await new Promise<void>((resolve) =>\n            writeTask(() => {\n              if (y - offsetY <= offset) {\n                topRow.classList.add(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--top`\n                );\n              } else {\n                topRow.classList.remove(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--top`\n                );\n              }\n\n              // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)\n              // so only aggregate height / offset when cacheParent is different from current parent.\n              // Devs can override this behaviour by manually setting `--pin-bottom` on the table row\n              if (cacheParent !== currParent) {\n                currParent.style.setProperty(\n                  '--pin-top',\n                  `${heightAggregate}px`\n                );\n                heightAggregate += height;\n                cacheParent = currParent;\n              }\n              resolve();\n            })\n          );\n        }\n      });\n    }\n\n    // bottom rows\n    if (this.bottomRows.length) {\n      const bottomRows = Array.from(this.bottomRows).reverse();\n      readTask(async () => {\n        let cacheParent: HTMLElement;\n        let heightAggregate = 0;\n        const { offsetY } = this.getParentOffsets();\n\n        for (const bottomRow of bottomRows) {\n          if (!bottomRow.isConnected) continue;\n\n          const { y, height } = bottomRow.getBoundingClientRect();\n          const currParent = bottomRow.parentElement;\n          // we'll use the applied `--pin-bottom` css var to decide row offset.\n          // This allows devs to override this behaviour through selector specificity\n          const pinBottom =\n            getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');\n          const offset =\n            pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;\n\n          // we need to wait for the row to finish sticking\n          // and generating it's offset (`--pin-bottom`) to we can see, on\n          // subsequent rows *if* the offset was applied\n          await new Promise<void>((resolve) =>\n            writeTask(() => {\n              if (this.tableDims.height + offsetY - (y + height) <= offset) {\n                bottomRow.classList.add(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--bottom`\n                );\n              } else {\n                bottomRow.classList.remove(\n                  `${CSSNAMESPACE}__pinned`,\n                  `${CSSNAMESPACE}__pinned--bottom`\n                );\n              }\n\n              // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)\n              // so only aggregate height / offset when cacheParent is different from current parent.\n              // Devs can override this behaviour by manually setting `--pin-bottom` on the table row\n              if (cacheParent !== currParent) {\n                currParent.style.setProperty(\n                  '--pin-bottom',\n                  `${heightAggregate}px`\n                );\n                heightAggregate += height;\n                cacheParent = currParent;\n              }\n              resolve();\n            })\n          );\n        }\n      });\n    }\n  }\n\n  /**\n   * Loops through all 'start' & 'end' columns (on scroll or resize)\n   * Caches meta about each column (e.g. size, position-index)\n   * and decides which columns are pinned\n   */\n  public async assessCols() {\n    if (!this.startColumns.length && !this.endColumns.length) return;\n\n    let boundBox: DOMRect;\n    let currPinned: HTMLElement;\n    let parentEles: Element[];\n\n    const done = new Promise<void>((resolve) => {\n      // start cols\n      if (this.startColumns.length) {\n        readTask(() => {\n          const { offsetX } = this.getParentOffsets();\n          // cumulatively add widths of columns together\n          // 'cos columns stick together\n          let widthAggregate = offsetX;\n          parentEles = Array.from(this.startColumns[0].parentElement.children);\n\n          for (const startCol of this.startColumns) {\n            boundBox = startCol.getBoundingClientRect();\n            // cache meta for later\n            this.cachedColMeta.set(startCol as HTMLElement, {\n              width: boundBox.width,\n              idx: parentEles.indexOf(startCol),\n            });\n\n            currPinned = this.pinnedStart.find((c) => c === startCol);\n            if (boundBox.x < widthAggregate) {\n              // this column is pinned\n              if (!currPinned)\n                this.pinnedStart = [\n                  ...this.pinnedStart,\n                  startCol as HTMLElement,\n                ];\n            } else if (currPinned) {\n              // this column is unpinned\n              this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);\n            }\n            widthAggregate += boundBox.width;\n          }\n          if (!this.endColumns.length) resolve();\n        });\n      }\n\n      // end cols\n      if (this.endColumns.length) {\n        readTask(() => {\n          const endCols = Array.from(this.endColumns).reverse();\n          parentEles = Array.from(this.endColumns[0].parentElement.children);\n          const { offsetX } = this.getParentOffsets();\n          // cumulatively add widths of columns together\n          // 'cos columns stick together\n          let widthAggregate = 0;\n\n          for (const endCol of endCols) {\n            boundBox = endCol.getBoundingClientRect();\n            // cache meta for later\n            this.cachedColMeta.set(endCol as HTMLElement, {\n              width: boundBox.width,\n              idx: parentEles.indexOf(endCol),\n            });\n\n            currPinned = this.pinnedEnd.find((c) => c === endCol);\n            if (\n              this.tableDims.width + offsetX - boundBox.right <=\n              widthAggregate\n            ) {\n              // this column is pinned\n              if (!currPinned)\n                this.pinnedEnd = [endCol as HTMLElement, ...this.pinnedEnd];\n            } else if (currPinned) {\n              // this column is unpinned\n              this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);\n            }\n            widthAggregate += boundBox.width;\n          }\n          resolve();\n        });\n      }\n    });\n\n    await done;\n    // potentially generate a new css stylesheet if anything changed\n    this.generateCssCacheKey();\n  }\n\n  private cacheX = 0;\n  private cacheY = 0;\n\n  public onScroll(pos: { x: number; y: number }) {\n    if (this.cacheX !== pos.x) {\n      this.cacheX = pos.x;\n      this.assessCols();\n    }\n    if (this.cacheY !== pos.y) {\n      this.cacheY = pos.y;\n      this.assessRows();\n    }\n  }\n\n  public onResize() {\n    const width = this.scrollElement.clientWidth;\n    const height = this.scrollElement.clientHeight;\n\n    this.tableDims = { width, height };\n    this.assessCols();\n    this.assessRows();\n  }\n}\n"]}

package/dist/collection/components/table/table.row.js

@@ -2,17 +2,21 @@
  * Web Components for Nanopore digital Web Apps
  */
 import { h } from '@stencil/core';
-import { addHObserver, addVObserver, headerPinClasses, mergeProperties, rowDataModel, } from './table.utils';
+import { headerPinClasses, mergeProperties, rowDataModel } from './table.utils';
 import { baseCellClasses } from './table.cell';
 import { CSSNAMESPACE } from './table.constants';
-const TableCell = ({ header, wrap }, children) => {
-  const cell = (h("div", { class: {
+const tableCellContent = (props, children, ctx) => {
+  const cell = (h("div", Object.assign({}, props.wrapperProps, { class: {
       [`${CSSNAMESPACE}__cell-content`]: true,
-      [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-    } }, children));
-  return header ? h("th", { scope: "row" }, cell) : h("td", null, cell);
+      [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
+    } }), children));
+  return props.header ? (h("th", Object.assign({ scope: ctx }, props.cellProps), cell)) : (h("td", Object.assign({}, props.cellProps), cell));
 };
-export const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, children, utils) => {
+export const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
+  // helper, generates <td> or <th>
+  const TableCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'row');
+  };
   let extraProps = {};
   if (!rowModel) {
     const model = rowDataModel(rowIndex);
@@ -22,13 +26,28 @@ export const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, ch
     extraProps =
       rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
   }
-  let pinned;
+  let rowPinned;
   if ((rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.pinned) && typeof rowRenderer.pinned === 'function') {
-    pinned = rowRenderer.pinned();
+    rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
   }
-  const baseProps = { class: headerPinClasses('tr', pinned) };
-  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
+  const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
+  /**
+   * Applies appropriate classes to td / th VNodes;
+   * which can be supplied by user defined templates
+   * @param children virtual / jsx node array
+   * @returns virtual / jsx node array
+   */
+  const applyCellClasses = (children) => {
+    return utils.map(children, (cNode, i) => {
+      if (['td', 'th'].includes(cNode.vtag.toString())) {
+        cNode.vattrs = mergeProperties({
+          class: baseCellClasses(i, true),
+        }, cNode.vattrs);
+      }
+      return cNode;
+    });
+  };
   if (tpl) {
     let toRender = tpl(h, {
       renderedRow: (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children)),
@@ -40,24 +59,9 @@ export const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, ch
         if (node.vtag === 'tr') {
           if (!node.vkey)
             node.vkey = `${rowModel.__uuid}_${i}`;
-          node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
+          node.vattrs = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, node.vattrs);
           if (!!node.vchildren) {
-            node.vchildren = utils.map(node.vchildren, (cNode, i) => {
-              if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                  class: headerPinClasses(cNode.vtag.toString(), pinned, true) + baseCellClasses(i, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
-                }, cNode.vattrs);
-              }
-              return cNode;
-            });
+            node.vchildren = applyCellClasses(node.vchildren);
           }
         }
         return node;
@@ -65,28 +69,25 @@ export const TableRow = ({ rowRenderer, rowIndex, rowModel, onColumnPinned }, ch
     }
     return toRender;
   }
-  return (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), children));
+  return (h("tr", Object.assign({}, props, { key: rowModel.__uuid }), applyCellClasses(children)));
 };
-export const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, utils) => {
+export const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
+children, utils) => {
   let extraProps = {};
   if (rowRenderer.rowProperties) {
     extraProps = rowRenderer.rowProperties() || {};
   }
-  const TableCell = ({ header, wrap }, children) => {
-    const cell = (h("div", { class: {
-        [`${CSSNAMESPACE}__cell-content`]: true,
-        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,
-      } }, children));
-    return header !== false ? h("th", { scope: "col" }, cell) : h("td", null, cell);
+  const TableHeadFootCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
+    return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'col');
   };
   const pinned = rowRenderer.pinned || null;
-  const baseProps = { class: headerPinClasses('tr', null) };
+  const baseProps = { class: headerPinClasses('tr', pinned) };
   const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
   const tpl = rowRenderer === null || rowRenderer === void 0 ? void 0 : rowRenderer.template;
   if (tpl) {
     let toRender = tpl(h, {
       renderedRow: h("tr", Object.assign({}, props), children),
-    }, TableCell);
+    }, TableHeadFootCell);
     if (Array.isArray(toRender)) {
       toRender = utils.map(toRender, (node) => {
         if (node.vtag === 'tr') {
@@ -96,14 +97,6 @@ export const TableHeadFootRow = ({ rowRenderer, onColumnPinned }, children, util
               if (['td', 'th'].includes(cNode.vtag.toString())) {
                 cNode.vattrs = mergeProperties({
                   class: headerPinClasses(cNode.vtag.toString(), pinned, true),
-                  ref: (th) => {
-                    if ((!!th && pinned === 'top') || pinned === 'bottom')
-                      addVObserver(th, pinned, onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--end'))
-                      addHObserver(th, 'end', onColumnPinned);
-                    if (!!th && th.classList.contains('nano-tbl__pin--start'))
-                      addHObserver(th, 'start', onColumnPinned);
-                  },
                 }, cNode.vattrs);
               }
               return cNode;

package/dist/collection/components/table/table.row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.row.js","sourceRoot":"","sources":["../../../src/components/table/table.row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport {\n  addHObserver,\n  addVObserver,\n  headerPinClasses,\n  mergeProperties,\n  rowDataModel,\n} from './table.utils';\nimport { baseCellClasses } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\n// TABLE ROWS\n// (thead > tr, tfoot > tr, tr)\n\ntype TableRowCellHelperProps = { header: boolean; wrap: boolean };\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex: number;\n  rowModel: TableTypes.RowData;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nconst TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n  { header, wrap },\n  children\n): VNode => {\n  const cell = (\n    <div\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n      }}\n    >\n      {children}\n    </div>\n  );\n  return header ? <th scope=\"row\">{cell}</th> : <td>{cell}</td>;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, rowModel, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n\n  if (!rowModel) {\n    const model = rowDataModel(rowIndex);\n    rowModel = model.rowModel;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;\n  }\n\n  let pinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    pinned = rowRenderer.pinned();\n  }\n\n  const baseProps = { class: headerPinClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: (\n          <tr {...props} key={rowModel.__uuid}>\n            {children}\n          </tr>\n        ),\n        rowModel,\n        rowIndex,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node, i) => {\n        if (node.vtag === 'tr') {\n          if (!node.vkey) node.vkey = `${rowModel.__uuid}_${i}`;\n\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode, i) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class:\n                      headerPinClasses(\n                        cNode.vtag.toString() as 'th' | 'td',\n                        pinned,\n                        true\n                      ) + baseCellClasses(i, true),\n                    ref: (th: HTMLTableCellElement) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return (\n    <tr {...props} key={rowModel.__uuid}>\n      {children}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onColumnPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer, onColumnPinned },\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const TableCell: FunctionalComponent<TableRowCellHelperProps> = (\n    { header, wrap },\n    children\n  ): VNode => {\n    const cell = (\n      <div\n        class={{\n          [`${CSSNAMESPACE}__cell-content`]: true,\n          [`${CSSNAMESPACE}__cell-content--wrap`]: wrap,\n        }}\n      >\n        {children}\n      </div>\n    );\n    return header !== false ? <th scope=\"col\">{cell}</th> : <td>{cell}</td>;\n  };\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: headerPinClasses('tr', null) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: <tr {...props}>{children}</tr>,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: headerPinClasses(\n                      cNode.vtag.toString() as 'th' | 'td',\n                      pinned,\n                      true\n                    ),\n                    ref: (th) => {\n                      if ((!!th && pinned === 'top') || pinned === 'bottom')\n                        addVObserver(th, pinned, onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--end'))\n                        addHObserver(th, 'end', onColumnPinned);\n                      if (!!th && th.classList.contains('nano-tbl__pin--start'))\n                        addHObserver(th, 'start', onColumnPinned);\n                    },\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n"]}
+{"version":3,"file":"table.row.js","sourceRoot":"","sources":["../../../src/components/table/table.row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { headerPinClasses, mergeProperties, rowDataModel } from './table.utils';\nimport { baseCellClasses } from './table.cell';\nimport { CSSNAMESPACE } from './table.constants';\nimport type { TableTypes } from '../../interface';\n\n// TABLE ROWS\n// (thead > tr, tfoot > tr, tr)\n\ntype TableRowProps = {\n  rowRenderer: TableTypes.RowRenderer;\n  rowIndex: number;\n  rowModel: TableTypes.RowData;\n  onRowPinned?: TableTypes.PinnedCb;\n};\n\nconst tableCellContent = (\n  props: TableTypes.TableRowCellHelperProps,\n  children: VNode[],\n  ctx: 'col' | 'row'\n): VNode => {\n  const cell = (\n    <div\n      {...props.wrapperProps}\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,\n      }}\n    >\n      {children}\n    </div>\n  );\n  return props.header ? (\n    <th scope={ctx} {...props.cellProps}>\n      {cell}\n    </th>\n  ) : (\n    <td {...props.cellProps}>{cell}</td>\n  );\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n  { rowRenderer, rowIndex, rowModel },\n  children,\n  utils\n) => {\n  // helper, generates <td> or <th>\n  const TableCell: FunctionalComponent<TableTypes.TableRowCellHelperProps> = (\n    { header, wrap, cellProps, wrapperProps },\n    children\n  ): VNode => {\n    return tableCellContent(\n      { header, wrap, cellProps, wrapperProps },\n      children,\n      'row'\n    );\n  };\n\n  let extraProps = {};\n\n  if (!rowModel) {\n    const model = rowDataModel(rowIndex);\n    rowModel = model.rowModel;\n  }\n\n  if (rowRenderer?.rowProperties) {\n    extraProps =\n      rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;\n  }\n\n  let rowPinned: TableTypes.Position;\n  if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n    rowPinned = rowRenderer.pinned({ rowModel, rowIndex });\n  }\n\n  const props = mergeProperties(\n    { class: headerPinClasses('tr', rowPinned, true) },\n    extraProps\n  );\n  const tpl = rowRenderer?.template;\n\n  /**\n   * Applies appropriate classes to td / th VNodes;\n   * which can be supplied by user defined templates\n   * @param children virtual / jsx node array\n   * @returns virtual / jsx node array\n   */\n  const applyCellClasses = (children: VNode[]) => {\n    return utils.map(children, (cNode, i) => {\n      if (['td', 'th'].includes(cNode.vtag.toString())) {\n        cNode.vattrs = mergeProperties(\n          {\n            class: baseCellClasses(i, true),\n          },\n          cNode.vattrs\n        );\n      }\n      return cNode;\n    });\n  };\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: (\n          <tr {...props} key={rowModel.__uuid}>\n            {children}\n          </tr>\n        ),\n        rowModel,\n        rowIndex,\n      },\n      TableCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node, i) => {\n        if (node.vtag === 'tr') {\n          if (!node.vkey) node.vkey = `${rowModel.__uuid}_${i}`;\n\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', rowPinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = applyCellClasses(node.vchildren);\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return (\n    <tr {...props} key={rowModel.__uuid}>\n      {applyCellClasses(children)}\n    </tr>\n  );\n};\n\ntype TableHeadFootProps = {\n  rowRenderer: TableTypes.HeadFootRenderer;\n  onRowPinned?: TableTypes.PinnedCb;\n  onColPinned?: TableTypes.PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n  { rowRenderer }, // onRowPinned, onColPinned\n  children,\n  utils\n) => {\n  let extraProps = {};\n  if (rowRenderer.rowProperties) {\n    extraProps = rowRenderer.rowProperties() || {};\n  }\n\n  const TableHeadFootCell: FunctionalComponent<\n    TableTypes.TableRowCellHelperProps\n  > = ({ header, wrap, cellProps, wrapperProps }, children): VNode => {\n    return tableCellContent(\n      { header, wrap, cellProps, wrapperProps },\n      children,\n      'col'\n    );\n  };\n\n  const pinned = rowRenderer.pinned || null;\n  const baseProps = { class: headerPinClasses('tr', pinned) };\n  const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n  const tpl = rowRenderer?.template;\n\n  if (tpl) {\n    let toRender = tpl(\n      h as TableTypes.HFunc<VNode>,\n      {\n        renderedRow: <tr {...props}>{children}</tr>,\n      },\n      TableHeadFootCell\n    );\n\n    if (Array.isArray(toRender)) {\n      toRender = utils.map(toRender, (node) => {\n        if (node.vtag === 'tr') {\n          node.vattrs = mergeProperties(\n            { class: headerPinClasses('tr', pinned, true) },\n            node.vattrs\n          );\n\n          if (!!node.vchildren) {\n            node.vchildren = utils.map(node.vchildren, (cNode) => {\n              if (['td', 'th'].includes(cNode.vtag.toString())) {\n                cNode.vattrs = mergeProperties(\n                  {\n                    class: headerPinClasses(\n                      cNode.vtag.toString() as 'th' | 'td',\n                      pinned,\n                      true\n                    ),\n                  },\n                  cNode.vattrs\n                );\n              }\n              return cNode;\n            });\n          }\n        }\n        return node;\n      });\n    }\n    return toRender;\n  }\n\n  return <tr {...props}>{children}</tr>;\n};\n"]}