@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20250818110841 → 0.0.0-snapshot-release-20250910151748

package/custom-elements.json

@@ -16,9 +16,9 @@
           "kind": "variable",
           "name": "defaultProps",
           "type": {
-            "text": "ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>"
+            "text": "ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data' >>"
           },
-          "default": "{\n    hasBorder: true,\n    isStriped: false,\n}"
+          "default": "{\n    additionalRows: [],\n}"
         }
       ],
       "exports": [
@@ -61,6 +61,43 @@
               "default": "[]",
               "description": "Array of data objects to display"
             },
+            {
+              "kind": "field",
+              "name": "additionalRows",
+              "type": {
+                "text": "DataTableAdditionalRow[] | undefined"
+              },
+              "privacy": "public",
+              "description": "Arbitrary additional rows to display at the bottom of the table"
+            },
+            {
+              "kind": "method",
+              "name": "mapTextAlignClasses",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "prefix",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The prefix for the CSS class"
+                },
+                {
+                  "name": "textAlign",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text alignment value"
+                }
+              ],
+              "description": "Maps text alignment values to corresponding CSS classes",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "renderHeaderCell",
@@ -109,6 +146,51 @@
               "name": "renderTableRows",
               "privacy": "private",
               "description": "Renders the table rows"
+            },
+            {
+              "kind": "method",
+              "name": "renderAdditionalRows",
+              "privacy": "private",
+              "description": "Renders the additional rows for the table"
+            },
+            {
+              "kind": "method",
+              "name": "isHTMLString",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Util method that checks if a string contains HTML tags"
+            },
+            {
+              "kind": "method",
+              "name": "renderCellContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "unknown"
+                  },
+                  "description": "The content to render in the cell"
+                }
+              ],
+              "description": "Renders the content of a table cell, handling different types of content"
             }
           ],
           "mixins": [

package/dist/defs.d.ts

@@ -1,4 +1,5 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+type TextAlign = 'left' | 'right' | 'center';
 export interface Column {
     /**
      * Unique identifier for the column
@@ -11,7 +12,7 @@ export interface Column {
     /**
      * Optional property to specify the text alignment of the column
      * */
-    textAlign?: 'left' | 'right' | 'center';
+    textAlign?: TextAlign;
     /**
      * Optional property to specify the width of the column
      * */
@@ -21,6 +22,16 @@ export interface Column {
      * */
     accessor?: string;
 }
+export type AdditionalCell = {
+    content: string | number;
+    textAlign?: TextAlign;
+    colSpan?: number;
+    hideCell?: boolean;
+};
+export type DataTableAdditionalRow = {
+    cells: AdditionalCell[];
+    hideRow?: boolean;
+};
 export interface DataTableProps {
     /**
      * Array of column definitions
@@ -30,6 +41,11 @@ export interface DataTableProps {
      * Array of data objects to display
      */
     data: Record<string, unknown>[];
+    /**
+     * Arbitrary additional rows to display at the bottom of the table
+     */
+    additionalRows?: DataTableAdditionalRow[];
 }
 export declare const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>;
+export {};
 //# sourceMappingURL=defs.d.ts.map

package/dist/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,WAAW,MAAM;IACrB;;SAEK;IACL,EAAE,EAAE,MAAM,CAAC;IACX;;SAEK;IACL,OAAO,EAAE,MAAM,CAAC;IAChB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAExC;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,CAAC,CAG9G,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,MAAM;IACrB;;SAEK;IACL,EAAE,EAAE,MAAM,CAAC;IACX;;SAEK;IACL,OAAO,EAAE,MAAM,CAAC;IAChB;;SAEK;IACL,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAEhC;;OAEG;IACH,cAAc,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAC3C;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,CAAE,CAE/G,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { DataTableProps, Column } from './defs';
+import { DataTableProps, Column, DataTableAdditionalRow } from './defs';
 export * from './defs';
 declare const componentSelector = "pie-data-table";
 declare const PieDataTable_base: import('@justeattakeaway/pie-webc-core').GenericConstructor<import('@justeattakeaway/pie-webc-core').RTLInterface> & typeof PieElement;
@@ -15,6 +15,18 @@ export declare class PieDataTable extends PieDataTable_base implements DataTable
      * Array of data objects to display
      */
     data: Record<string, unknown>[];
+    /**
+     * Arbitrary additional rows to display at the bottom of the table
+     */
+    additionalRows?: DataTableAdditionalRow[];
+    /**
+     * Maps text alignment values to corresponding CSS classes
+     *
+     * @param prefix - The prefix for the CSS class
+     * @param textAlign - The text alignment value
+     * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
+     */
+    private mapTextAlignClasses;
     /**
      * Renders a header cell for the table
      * @param column - The column definition to render
@@ -34,6 +46,20 @@ export declare class PieDataTable extends PieDataTable_base implements DataTable
      * Renders the table rows
      */
     private renderTableRows;
+    /**
+     * Renders the additional rows for the table
+     */
+    private renderAdditionalRows;
+    /**
+     * Util method that checks if a string contains HTML tags
+     */
+    private isHTMLString;
+    /**
+     * Renders the content of a table cell, handling different types of content
+     *
+     * @param value - The content to render in the cell
+     */
+    private renderCellContent;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,MAAM,EACd,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;;AAE3C;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAAqB,YAAW,cAAc;IAC5E;;OAEG;IAEI,OAAO,EAAE,MAAM,EAAE,CAAM;IAE9B;;OAEG;IAEI,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAiBxB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB,MAAM;IAiBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC;KACrC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,sBAAsB,EAE9B,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;;AAE3C;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAAqB,YAAW,cAAc;IAC5E;;OAEG;IAEI,OAAO,EAAE,MAAM,EAAE,CAAM;IAE9B;;OAEG;IAEI,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAE5C;;OAEG;IAEI,cAAc,CAAC,EAAE,sBAAsB,EAAE,CAA+B;IAE/E;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAexB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAavB;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAmC5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAoBzB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC;KACrC;CACJ"}

package/dist/index.js

@@ -1,35 +1,47 @@
-import { nothing as n, html as d, unsafeCSS as g } from "lit";
+import { nothing as i, html as l, unsafeCSS as p } from "lit";
+import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
 import { property as h } from "lit/decorators.js";
-import { P as p } from "./PieElement-Y2VnHR4y.js";
-import { RtlMixin as u, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
-import { classMap as i } from "lit/directives/class-map.js";
-const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table{--data-table-background-color: var(--dt-color-container-default);--data-table-background-hover-or-active: var(--dt-color-container-subtle);--data-table-border-color: var(--dt-color-border-default);--data-table-border-radius: var(--dt-radius-rounded-c);--data-table-text-color: var(--dt-color-content-default);background-color:var(--data-table-background-color);border:1px solid var(--data-table-border-color);border-radius:var(--data-table-border-radius);color:var(--data-table-text-color);width:100%;overflow:hidden}.c-data-table table{border-spacing:0;width:100%}.c-data-table tbody{overflow:auto}.c-data-table tbody tr:hover{background-color:var(--data-table-background-hover-or-active)}.c-data-table-header{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);text-align:left;padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-header-text-align--left{text-align:left}.c-data-table-header-text-align--right{text-align:right}.c-data-table-header-text-align--center{text-align:center}.c-data-table-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell-text-align--left{text-align:left}.c-data-table-cell-text-align--right{text-align:right}.c-data-table-cell-text-align--center{text-align:center}", T = {
-  hasBorder: !0,
-  isStriped: !1
+import { P as u } from "./PieElement-Y2VnHR4y.js";
+import { RtlMixin as f, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
+import { classMap as n } from "lit/directives/class-map.js";
+const w = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table{--data-table-background-color: var(--dt-color-container-default);--data-table-background-hover-or-active: var(--dt-color-container-subtle);--data-table-border-color: var(--dt-color-border-default);--data-table-border-radius: var(--dt-radius-rounded-c);--data-table-text-color: var(--dt-color-content-default);background-color:var(--data-table-background-color);border:1px solid var(--data-table-border-color);border-radius:var(--data-table-border-radius);color:var(--data-table-text-color);width:100%;overflow:hidden}.c-data-table table{border-spacing:0;width:100%}.c-data-table tbody{overflow:auto}.c-data-table tbody tr:hover{background-color:var(--data-table-background-hover-or-active)}.c-data-table-header{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);text-align:left;padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-header-text-align--left,.c-data-table-cell-text-align--left{text-align:left}.c-data-table-header-text-align--right,.c-data-table-cell-text-align--right{text-align:right}.c-data-table-header-text-align--center,.c-data-table-cell-text-align--center{text-align:center}.c-data-table-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell--hidden,.c-data-table-row--hidden{display:none}", x = {
+  additionalRows: []
 };
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, b = (t, e, l, r) => {
-  for (var a = r > 1 ? void 0 : r ? m(e, l) : e, c = t.length - 1, s; c >= 0; c--)
-    (s = t[c]) && (a = (r ? s(e, l, a) : s(a)) || a);
-  return r && a && v(e, l, a), a;
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (t, e, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? $(e, a) : e, s = t.length - 1, b; s >= 0; s--)
+    (b = t[s]) && (r = (o ? b(e, a, r) : b(r)) || r);
+  return o && r && y(e, a, r), r;
 };
-let o = class extends u(p) {
+let d = class extends f(u) {
   constructor() {
-    super(...arguments), this.columns = [], this.data = [];
+    super(...arguments), this.columns = [], this.data = [], this.additionalRows = x.additionalRows;
+  }
+  /**
+   * Maps text alignment values to corresponding CSS classes
+   *
+   * @param prefix - The prefix for the CSS class
+   * @param textAlign - The text alignment value
+   * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
+   */
+  mapTextAlignClasses(t, e) {
+    return {
+      [`${t}-text-align--left`]: e === "left",
+      [`${t}-text-align--right`]: e === "right",
+      [`${t}-text-align--center`]: e === "center"
+    };
   }
   /**
    * Renders a header cell for the table
    * @param column - The column definition to render
    */
   renderHeaderCell(t) {
-    const { width: e, heading: l, textAlign: r } = t, a = e ? `width: ${e}` : n;
-    return d`
-            <th style="${a}" class="${i({
+    const { width: e, heading: a, textAlign: o } = t, r = e ? `width: ${e}` : i, s = {
       "c-data-table-header": !0,
-      "c-data-table-header-text-align--left": r === "left",
-      "c-data-table-header-text-align--right": r === "right",
-      "c-data-table-header-text-align--center": r === "center"
-    })}">
-                ${l}
+      ...this.mapTextAlignClasses("c-data-table-header", o)
+    };
+    return l`
+            <th style="${r}" class="${n(s)}">
+                ${a}
             </th>
         `;
   }
@@ -37,7 +49,7 @@ let o = class extends u(p) {
    * Renders the table header
    */
   renderTableHeader() {
-    return d`
+    return l`
             <thead>
                 <tr>
                     ${this.columns.map((t) => this.renderHeaderCell(t))}
@@ -51,15 +63,13 @@ let o = class extends u(p) {
    * @param row - The data object for the current row
    */
   renderTableCell(t, e) {
-    const l = {
+    const a = {
       "c-data-table-cell": !0,
-      "c-data-table-cell-text-align--left": t.textAlign === "left",
-      "c-data-table-cell-text-align--right": t.textAlign === "right",
-      "c-data-table-cell-text-align--center": t.textAlign === "center"
+      ...this.mapTextAlignClasses("c-data-table-cell", t.textAlign)
     };
-    return d`
-            <td class="${i(l)}">
-                ${t.accessor ? e[t.accessor] : ""}
+    return l`
+            <td class="${n(a)}">
+                ${t.accessor ? this.renderCellContent(e[t.accessor]) : ""}
             </td>
         `;
   }
@@ -67,9 +77,9 @@ let o = class extends u(p) {
    * Renders the table rows
    */
   renderTableRows() {
-    return d`
+    return l`
             <tbody>
-                ${this.data.map((t) => d`
+                ${this.data.map((t) => l`
                     <tr class="c-data-table-row">
                         ${this.columns.map((e) => this.renderTableCell(e, t))}
                     </tr>
@@ -77,31 +87,83 @@ let o = class extends u(p) {
             </tbody>
         `;
   }
+  /**
+   * Renders the additional rows for the table
+   */
+  renderAdditionalRows() {
+    return l`
+            <tfoot>
+                ${this.additionalRows && this.additionalRows.length > 0 && this.additionalRows.map((t) => {
+      const e = {
+        "c-data-table-row": !0,
+        "c-data-table-row--hidden": !!t.hideRow
+      };
+      return l`
+                        <tr class="${n(e)}">
+                        ${t.cells.map((a) => {
+        const o = {
+          "c-data-table-cell": !0,
+          "c-data-table-cell--hidden": !!a.hideCell,
+          ...this.mapTextAlignClasses("c-data-table-cell", a.textAlign)
+        };
+        return l`
+                                <td
+                                    class="${n(o)}"
+                                    colspan=${a.colSpan || 1}
+                                >
+                                    ${a.content}
+                                </td>
+                            `;
+      })}
+                        </tr>
+                    `;
+    })}
+            </tfoot>
+        `;
+  }
+  /**
+   * Util method that checks if a string contains HTML tags
+   */
+  isHTMLString(t) {
+    return /<[a-z][\s\S]*>/i.test(t.trim());
+  }
+  /**
+   * Renders the content of a table cell, handling different types of content
+   *
+   * @param value - The content to render in the cell
+   */
+  renderCellContent(t) {
+    return t == null ? "" : t instanceof HTMLElement || t && typeof t == "object" ? t : typeof t == "function" ? this.renderCellContent(t()) : typeof t == "string" && this.isHTMLString(t) ? g(t) : String(t);
+  }
   render() {
-    return d`
-            <div class="${i({
+    return l`
+            <div class="${n({
       "c-data-table": !0
     })}">
                 <slot name="table-header"></slot>
                 <table>
-                    ${this.columns.length > 0 ? this.renderTableHeader() : n}
-                    ${this.data.length > 0 ? this.renderTableRows() : n}
+                    ${this.columns.length > 0 ? this.renderTableHeader() : i}
+                    ${this.data.length > 0 ? this.renderTableRows() : i}
+                    ${this.additionalRows && this.additionalRows.length > 0 ? this.renderAdditionalRows() : i}
                 </table>
             </div>
         `;
   }
 };
-o.styles = g(x);
-b([
+d.styles = p(w);
+c([
+  h({ type: Array })
+], d.prototype, "columns", 2);
+c([
   h({ type: Array })
-], o.prototype, "columns", 2);
-b([
+], d.prototype, "data", 2);
+c([
   h({ type: Array })
-], o.prototype, "data", 2);
-o = b([
-  f("pie-data-table")
-], o);
+], d.prototype, "additionalRows", 2);
+d = c([
+  m("pie-data-table")
+], d);
 export {
-  o as PieDataTable,
-  T as defaultProps
+  d as PieDataTable,
+  x as defaultProps
 };

package/dist/pie-data-table-header/index.d.ts

@@ -25,6 +25,10 @@ export declare class PieDataTableHeader extends PieElement implements DataTableH
      * @param event - The slot change event
      */
     private handleSlotChange;
+    /**
+     * Lit lifecycle: called after the component's DOM has been rendered the first time.
+     */
+    firstUpdated(): void;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/pie-data-table-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,oBAAoB,EAEzB,YAAY,EACf,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,0BAA0B,CAAC;AAElD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAW,YAAW,oBAAoB;IAC9E;;OAEG;IAEI,KAAK,EAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE7C;;OAEG;IAEI,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,gBAAgB,CAAS;IAEjC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM;IA0BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;KAC3C;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,oBAAoB,EAEzB,YAAY,EACf,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,0BAA0B,CAAC;AAElD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAW,YAAW,oBAAoB;IAC9E;;OAEG;IAEI,KAAK,EAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE7C;;OAEG;IAEI,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,gBAAgB,CAAS;IAEjC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,YAAY;IAQZ,MAAM;IA2BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;KAC3C;CACJ"}

package/dist/pie-data-table-header/index.js

@@ -6,13 +6,13 @@ import { classMap as v } from "lit/directives/class-map.js";
 const m = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table-header{--data-table-header-background: transparent;padding:var(--dt-spacing-d);background-color:var(--data-table-header-background);border-bottom:1px solid var(--data-table-border-color);display:flex;justify-content:space-between;align-items:flex-end}.c-data-table-header-title-wrapper{display:flex;flex-direction:column;gap:var(--dt-spacing-b)}.c-data-table-header-title{font-weight:var(--dt-font-weight-extrabold);font-size:calc(var(--dt-font-size-24) * 1px);line-height:calc(var(--dt-font-size-24-line-height) * 1px)}.c-data-table-header-subtitle{font-weight:var(--dt-font-weight-regular);font-size:calc(var(--dt-font-size-16) * 1px);line-height:calc(var(--dt-font-size-16-line-height) * 1px)}.c-data-table-header--strong{--data-table-header-background: var(--dt-color-support-brand-02)}.c-data-table-action-buttons-wrapper{display:flex;gap:var(--dt-spacing-d)}", y = ["subtle", "strong"], x = {
   variant: "subtle"
 };
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? P(t, s) : t, i = e.length - 1, d; i >= 0; i--)
-    (d = e[i]) && (a = (o ? d(t, s, a) : d(a)) || a);
-  return o && a && w(t, s, a), a;
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, r, o) => {
+  for (var a = o > 1 ? void 0 : o ? S(t, r) : t, i = e.length - 1, d; i >= 0; i--)
+    (d = e[i]) && (a = (o ? d(t, r, a) : d(a)) || a);
+  return o && a && w(t, r, a), a;
 };
-const S = "pie-data-table-header";
-let r = class extends g {
+const P = "pie-data-table-header";
+let s = class extends g {
   constructor() {
     super(...arguments), this.hasActionButtons = !1;
   }
@@ -25,15 +25,24 @@ let r = class extends g {
     const t = e.target;
     this.hasActionButtons = t.assignedElements().length > 0;
   }
+  /**
+   * Lit lifecycle: called after the component's DOM has been rendered the first time.
+   */
+  firstUpdated() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="action-button"]');
+    e && (this.hasActionButtons = e.assignedElements().length > 0);
+  }
   render() {
-    const { title: e, subtitle: t, variant: s } = this;
+    const { title: e, subtitle: t, variant: r } = this;
     return n`
             <header class="${v({
       "c-data-table-header": !0,
-      "c-data-table-header--strong": s === "strong"
+      "c-data-table-header--strong": r === "strong"
     })}">
                 <div class="c-data-table-header-title-wrapper">
-                    ${e ? n`<span class="c-data-table-header-title">${e}</span>` : p} 
+                    ${e ? n`<span class="c-data-table-header-title">${e}</span>` : p}
+
                     ${t ? n`<span class="c-data-table-header-subtitle">${t}</span>` : p}
                 </div>
                 ${this.hasActionButtons ? n`
@@ -47,25 +56,25 @@ let r = class extends g {
         `;
   }
 };
-r.styles = h(m);
+s.styles = h(m);
 l([
   c({ type: String })
-], r.prototype, "title", 2);
+], s.prototype, "title", 2);
 l([
   c({ type: String })
-], r.prototype, "subtitle", 2);
+], s.prototype, "subtitle", 2);
 l([
   c({ type: String }),
-  u(S, y, x.variant)
-], r.prototype, "variant", 2);
+  u(P, y, x.variant)
+], s.prototype, "variant", 2);
 l([
   b()
-], r.prototype, "hasActionButtons", 2);
-r = l([
+], s.prototype, "hasActionButtons", 2);
+s = l([
   f("pie-data-table-header")
-], r);
+], s);
 export {
-  r as PieDataTableHeader,
+  s as PieDataTableHeader,
   y as dataTableHeaderVariant,
   x as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-data-table",
   "description": "PIE Design System Data Table built using Web Components",
-  "version": "0.0.0-snapshot-release-20250818110841",
+  "version": "0.0.0-snapshot-release-20250910151748",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.19.0",
+    "@justeattakeaway/pie-css": "0.21.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },

package/src/data-table.scss

@@ -42,15 +42,18 @@
   border-bottom: 1px solid var(--data-table-border-color);
 }
 
-.c-data-table-header-text-align--left {
+.c-data-table-header-text-align--left, 
+.c-data-table-cell-text-align--left {
   text-align: left;
 }
 
-.c-data-table-header-text-align--right {
+.c-data-table-header-text-align--right, 
+.c-data-table-cell-text-align--right {
   text-align: right;
 }
 
-.c-data-table-header-text-align--center {
+.c-data-table-header-text-align--center,
+.c-data-table-cell-text-align--center {
   text-align: center;
 }
 
@@ -59,14 +62,7 @@
   border-bottom: 1px solid var(--data-table-border-color);
 }
 
-.c-data-table-cell-text-align--left {
-  text-align: left;
-}
-
-.c-data-table-cell-text-align--right {
-  text-align: right;
-}
-
-.c-data-table-cell-text-align--center {
-  text-align: center;
+.c-data-table-cell--hidden, 
+.c-data-table-row--hidden {
+  display: none;
 }

package/src/defs.ts

@@ -1,5 +1,7 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
+type TextAlign = 'left' | 'right' | 'center';
+
 export interface Column {
   /**
    * Unique identifier for the column
@@ -12,7 +14,7 @@ export interface Column {
   /**
    * Optional property to specify the text alignment of the column
    * */
-  textAlign?: 'left' | 'right' | 'center';
+  textAlign?: TextAlign;
 
   /**
    * Optional property to specify the width of the column
@@ -24,6 +26,18 @@ export interface Column {
   accessor?: string;
 }
 
+export type AdditionalCell = {
+  content: string | number;
+  textAlign?: TextAlign;
+  colSpan?: number;
+  hideCell?: boolean;
+};
+
+export type DataTableAdditionalRow = {
+  cells: AdditionalCell[];
+  hideRow?: boolean;
+};
+
 export interface DataTableProps {
   /**
    * Array of column definitions
@@ -34,9 +48,13 @@ export interface DataTableProps {
    * Array of data objects to display
    */
   data: Record<string, unknown>[];
+
+  /**
+   * Arbitrary additional rows to display at the bottom of the table
+   */
+  additionalRows?: DataTableAdditionalRow[];
 }
 
-export const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>> = {
-    hasBorder: true,
-    isStriped: false,
+export const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data' >> = {
+    additionalRows: [],
 };

package/src/index.ts

@@ -1,4 +1,5 @@
 import { html, nothing, unsafeCSS } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { property } from 'lit/decorators.js';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -8,6 +9,8 @@ import styles from './data-table.scss?inline';
 import {
     type DataTableProps,
     type Column,
+    type DataTableAdditionalRow,
+    defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -32,6 +35,27 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
     @property({ type: Array })
     public data: Record<string, unknown>[] = [];
 
+    /**
+     * Arbitrary additional rows to display at the bottom of the table
+     */
+    @property({ type: Array })
+    public additionalRows?: DataTableAdditionalRow[] = defaultProps.additionalRows;
+
+    /**
+     * Maps text alignment values to corresponding CSS classes
+     *
+     * @param prefix - The prefix for the CSS class
+     * @param textAlign - The text alignment value
+     * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
+     */
+    private mapTextAlignClasses (prefix: string, textAlign?: string) {
+        return {
+            [`${prefix}-text-align--left`]: textAlign === 'left',
+            [`${prefix}-text-align--right`]: textAlign === 'right',
+            [`${prefix}-text-align--center`]: textAlign === 'center',
+        };
+    }
+
     /**
      * Renders a header cell for the table
      * @param column - The column definition to render
@@ -41,9 +65,7 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
         const style = width ? `width: ${width}` : nothing;
         const classes = {
             'c-data-table-header': true,
-            'c-data-table-header-text-align--left': textAlign === 'left',
-            'c-data-table-header-text-align--right': textAlign === 'right',
-            'c-data-table-header-text-align--center': textAlign === 'center',
+            ...this.mapTextAlignClasses('c-data-table-header', textAlign),
         };
 
         return html`
@@ -74,14 +96,12 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
     private renderTableCell (column: Column, row: Record<string, unknown>) {
         const classes = {
             'c-data-table-cell': true,
-            'c-data-table-cell-text-align--left': column.textAlign === 'left',
-            'c-data-table-cell-text-align--right': column.textAlign === 'right',
-            'c-data-table-cell-text-align--center': column.textAlign === 'center',
+            ...this.mapTextAlignClasses('c-data-table-cell', column.textAlign),
         };
 
         return html`
             <td class="${classMap(classes)}">
-                ${column.accessor ? row[column.accessor] : ''}
+                ${column.accessor ? this.renderCellContent(row[column.accessor]) : ''}
             </td>
         `;
     }
@@ -101,6 +121,76 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
         `;
     }
 
+    /**
+     * Renders the additional rows for the table
+     */
+    private renderAdditionalRows () {
+        /* eslint-disable indent */
+        return html`
+            <tfoot>
+                ${this.additionalRows && this.additionalRows.length > 0 && this.additionalRows.map((row) => {
+                    const rowClasses = {
+                        'c-data-table-row': true,
+                        'c-data-table-row--hidden': !!row.hideRow,
+                    };
+                    return html`
+                        <tr class="${classMap(rowClasses)}">
+                        ${row.cells.map((cell) => {
+                            const cellClasses = {
+                                'c-data-table-cell': true,
+                                'c-data-table-cell--hidden': !!cell.hideCell,
+                                ...this.mapTextAlignClasses('c-data-table-cell', cell.textAlign),
+                            };
+
+                            return html`
+                                <td
+                                    class="${classMap(cellClasses)}"
+                                    colspan=${cell.colSpan || 1}
+                                >
+                                    ${cell.content}
+                                </td>
+                            `;
+                        })}
+                        </tr>
+                    `;
+                })}
+            </tfoot>
+        `;
+        /* eslint-enable indent */
+    }
+
+    /**
+     * Util method that checks if a string contains HTML tags
+     */
+    private isHTMLString (str: string): boolean {
+        return /<[a-z][\s\S]*>/i.test(str.trim());
+    }
+
+    /**
+     * Renders the content of a table cell, handling different types of content
+     *
+     * @param value - The content to render in the cell
+     */
+    private renderCellContent (value: unknown): unknown {
+        if (value == null) {
+            return '';
+        }
+
+        if ((value instanceof HTMLElement) || (value && typeof value === 'object')) {
+            return value;
+        }
+
+        if (typeof value === 'function') {
+            return this.renderCellContent(value());
+        }
+
+        if (typeof value === 'string' && this.isHTMLString(value)) {
+            return unsafeHTML(value);
+        }
+
+        return String(value);
+    }
+
     render () {
         const classes = {
             'c-data-table': true,
@@ -112,6 +202,7 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
                 <table>
                     ${this.columns.length > 0 ? this.renderTableHeader() : nothing}
                     ${this.data.length > 0 ? this.renderTableRows() : nothing}
+                    ${this.additionalRows && this.additionalRows.length > 0 ? this.renderAdditionalRows() : nothing}
                 </table>
             </div>
         `;

package/src/pie-data-table-header/index.ts

@@ -53,6 +53,17 @@ export class PieDataTableHeader extends PieElement implements DataTableHeaderPro
         this.hasActionButtons = slot.assignedElements().length > 0;
     }
 
+    /**
+     * Lit lifecycle: called after the component's DOM has been rendered the first time.
+     */
+    firstUpdated () {
+        // Get the named slot element after shadowRoot is ready
+        const slot = this.shadowRoot?.querySelector('slot[name="action-button"]') as HTMLSlotElement | null;
+        if (slot) {
+            this.hasActionButtons = slot.assignedElements().length > 0;
+        }
+    }
+
     render () {
         const { title, subtitle, variant } = this;
 
@@ -64,7 +75,8 @@ export class PieDataTableHeader extends PieElement implements DataTableHeaderPro
         return html`
             <header class="${classMap(classes)}">
                 <div class="c-data-table-header-title-wrapper">
-                    ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing} 
+                    ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing}
+
                     ${subtitle ? html`<span class="c-data-table-header-subtitle">${subtitle}</span>` : nothing}
                 </div>
                 ${this.hasActionButtons ? html`