@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20260119130527 → 0.0.0-snapshot-release-20260121170533

package/dist/pie-data-table-head-cell/defs.d.ts

@@ -0,0 +1,14 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export declare const dataTableHeadCellTextAlign: readonly ["left", "right", "center"];
+export interface DataTableHeadCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    textAlign?: typeof dataTableHeadCellTextAlign[number];
+    /**
+     * Whether the cell is hidden
+     */
+    isHidden?: boolean;
+}
+export declare const defaultProps: ComponentDefaultProps<DataTableHeadCellProps, 'textAlign' | 'isHidden'>;
+//# sourceMappingURL=defs.d.ts.map

package/dist/pie-data-table-head-cell/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-head-cell/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,0BAA0B,sCAAuC,CAAC;AAE/E,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,sBAAsB,EAAE,WAAW,GAAG,UAAU,CAGhG,CAAC"}

package/dist/pie-data-table-head-cell/index.d.ts

@@ -0,0 +1,28 @@
+import { nothing } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { DataTableHeadCellProps } from './defs';
+export * from './defs';
+declare const componentSelector = "pie-data-table-head-cell";
+/**
+ * @tagname pie-data-table-head-cell
+ * @slot - Default slot
+ */
+export declare class PieDataTableHeadCell extends PieElement implements DataTableHeadCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    textAlign?: DataTableHeadCellProps['textAlign'];
+    /**
+     * Whether the cell is hidden
+     */
+    isHidden?: DataTableHeadCellProps['isHidden'];
+    connectedCallback(): void;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHeadCell;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-head-cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,EACH,KAAK,sBAAsB,EAG9B,MAAM,QAAQ,CAAC;AAEhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,6BAA6B,CAAC;AAErD;;;GAGG;AACH,qBACa,oBAAqB,SAAQ,UAAW,YAAW,sBAAsB;IAClF;;OAEG;IAGI,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IAEvD;;OAEG;IAEI,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAErD,iBAAiB;IAOjB,MAAM;IAUN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;KAC7C;CACJ"}

package/dist/pie-data-table-head-cell/index.js

@@ -0,0 +1,39 @@
+import { unsafeCSS as p, nothing as c, html as f } from "lit";
+import { property as d } from "lit/decorators.js";
+import { P as h } from "../PieElement-XdhDoayO.js";
+import { validPropertyValues as g, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
+const m = ":host{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color);display:table-cell}:host([textAlign=right]){text-align:right}:host([textAlign=center]){text-align:center}:host([textAlign=left]){text-align:left}:host([isHidden]){display:none}", x = ["left", "right", "center"], u = {
+  textAlign: "left",
+  isHidden: !1
+};
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (l, r, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? v(r, n) : r, a = l.length - 1, i; a >= 0; a--)
+    (i = l[a]) && (e = (o ? i(r, n, e) : i(e)) || e);
+  return o && e && y(r, n, e), e;
+};
+const A = "pie-data-table-head-cell";
+let t = class extends h {
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "columnheader"), super.connectedCallback();
+  }
+  render() {
+    const { isHidden: l } = this;
+    return l ? c : f`<slot></slot>`;
+  }
+};
+t.styles = p(m);
+s([
+  d({ type: String }),
+  g(A, x, u.textAlign)
+], t.prototype, "textAlign", 2);
+s([
+  d({ type: Boolean })
+], t.prototype, "isHidden", 2);
+t = s([
+  b("pie-data-table-head-cell")
+], t);
+export {
+  t as PieDataTableHeadCell,
+  x as dataTableHeadCellTextAlign,
+  u as defaultProps
+};

package/dist/pie-data-table-head-cell/react.d.ts

@@ -0,0 +1,7 @@
+import { PieDataTableHeadCell as PieDataTableHeadCellLit } from './index';
+import { DataTableHeadCellProps } from './defs';
+import * as React from 'react';
+export * from './defs';
+type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+export declare const PieDataTableHeadCell: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableHeadCellProps> & React.RefAttributes<PieDataTableHeadCellLit> & ReactBaseType>;
+//# sourceMappingURL=react.d.ts.map

package/dist/pie-data-table-head-cell/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-head-cell/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,oBAAoB,IAAI,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAErD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,oBAAoB,EAAgC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,sBAAsB,CAAC,GACxI,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,GAAG,aAAa,CAAC,CAAC"}

package/dist/pie-data-table-head-cell/react.js

@@ -0,0 +1,16 @@
+import * as e from "react";
+import { createComponent as a } from "@lit/react";
+import { PieDataTableHeadCell as l } from "./index.js";
+import { dataTableHeadCellTextAlign as p, defaultProps as s } from "./index.js";
+const t = a({
+  displayName: "PieDataTableHeadCell",
+  elementClass: l,
+  react: e,
+  tagName: "pie-data-table-head-cell",
+  events: {}
+}), d = t;
+export {
+  d as PieDataTableHeadCell,
+  p as dataTableHeadCellTextAlign,
+  s as defaultProps
+};

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

@@ -4,6 +4,7 @@ export * from './defs';
 declare const componentSelector = "pie-data-table-header";
 /**
  * @tagname pie-data-table-header
+ * @slot action-button - Slot for action buttons in the header
  */
 export declare class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
     /**

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,OAAO,EAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAEjD;;OAEG;IAEI,UAAU,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAEtD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,iBAAiB,CAAsB;IAG/C,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,CAAC,4BAA4B;IAIpC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,YAAY;IAIZ,MAAM;IA2BN,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;;;GAGG;AACH,qBACa,kBAAmB,SAAQ,UAAW,YAAW,oBAAoB;IAC9E;;OAEG;IAEI,OAAO,EAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAEjD;;OAEG;IAEI,UAAU,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAEtD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,iBAAiB,CAAsB;IAG/C,OAAO,CAAC,gBAAgB,CAAS;IAEjC,OAAO,CAAC,4BAA4B;IAIpC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,YAAY;IAIZ,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

@@ -1,6 +1,6 @@
 import { unsafeCSS as p, nothing as h, html as l } from "lit";
 import { property as c, queryAssignedElements as g, state as b } from "lit/decorators.js";
-import { P as u } from "../PieElement-DF1Wh7-N.js";
+import { P as u } from "../PieElement-XdhDoayO.js";
 import { validPropertyValues as f, safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
 import { classMap as m } from "lit/directives/class-map.js";
 const y = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table-header{--data-table-header-background: transparent;--data-table-border-color: var(--dt-color-border-default);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-heading-wrapper{display:flex;flex-direction:column;gap:var(--dt-spacing-b)}.c-data-table-header-heading{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-sub-heading{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)}", x = ["subtle", "strong"], S = {

package/dist/pie-data-table-row/defs-react.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+//# sourceMappingURL=defs-react.d.ts.map

package/dist/pie-data-table-row/defs-react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs-react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-row/defs-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA"}

package/dist/pie-data-table-row/defs.d.ts

@@ -0,0 +1,13 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export interface DataTableRowProps extends Partial<HTMLTableRowElement> {
+    /**
+     * Whether the row is currently selected
+     */
+    isSelected?: boolean;
+    /**
+     * Whether the row is hidden
+     */
+    isHidden?: boolean;
+}
+export declare const defaultProps: ComponentDefaultProps<DataTableRowProps, 'isSelected' | 'isHidden'>;
+//# sourceMappingURL=defs.d.ts.map

package/dist/pie-data-table-row/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-row/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,mBAAmB,CAAC;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,EAAE,YAAY,GAAG,UAAU,CAG5F,CAAC"}

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

@@ -0,0 +1,27 @@
+import { nothing } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { DataTableRowProps } from './defs';
+export * from './defs';
+declare const componentSelector = "pie-data-table-row";
+/**
+ * @tagname pie-data-table-row
+ * @slot - Default slot
+ */
+export declare class PieDataTableRow extends PieElement implements DataTableRowProps {
+    /**
+     * Whether the row is currently selected
+     */
+    isSelected?: DataTableRowProps['isSelected'];
+    /**
+     * Whether the row is hidden
+     */
+    isHidden?: DataTableRowProps['isHidden'];
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableRow;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,EACH,KAAK,iBAAiB,EACzB,MAAM,QAAQ,CAAC;AAEhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,uBAAuB,CAAC;AAE/C;;;GAGG;AACH,qBACa,eAAgB,SAAQ,UAAW,YAAW,iBAAiB;IACxE;;OAEG;IAEI,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAEpD;;OAEG;IAEI,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAEhD,MAAM;IAWN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC;KACxC;CACJ"}

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

@@ -0,0 +1,33 @@
+import { unsafeCSS as d, nothing as c, html as f } from "lit";
+import { property as i } from "lit/decorators.js";
+import { P as b } from "../PieElement-XdhDoayO.js";
+import { safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
+const u = ":host{display:table-row;border-bottom:1px solid var(--data-table-border-color)}:host(:hover){background-color:var(--pie-data-table-row-background-hover, transparent)}:host([isSelected]){background-color:var(--dt-color-container-subtle)}", S = {
+  isSelected: !1,
+  isHidden: !1
+};
+var v = Object.defineProperty, h = Object.getOwnPropertyDescriptor, p = (t, r, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? h(r, a) : r, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (e = (s ? n(r, a, e) : n(e)) || e);
+  return s && e && v(r, a, e), e;
+};
+let o = class extends b {
+  render() {
+    const { isHidden: t } = this;
+    return t ? c : f`<slot></slot>`;
+  }
+};
+o.styles = d(u);
+p([
+  i({ type: Boolean })
+], o.prototype, "isSelected", 2);
+p([
+  i({ type: Boolean })
+], o.prototype, "isHidden", 2);
+o = p([
+  m("pie-data-table-row")
+], o);
+export {
+  o as PieDataTableRow,
+  S as defaultProps
+};

package/dist/pie-data-table-row/react.d.ts

@@ -0,0 +1,7 @@
+import { PieDataTableRow as PieDataTableRowLit } from './index';
+import { DataTableRowProps } from './defs';
+import * as React from 'react';
+export * from './defs';
+type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+export declare const PieDataTableRow: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableRowProps> & React.RefAttributes<PieDataTableRowLit> & ReactBaseType>;
+//# sourceMappingURL=react.d.ts.map

package/dist/pie-data-table-row/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-row/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,eAAe,EAA2B,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,iBAAiB,CAAC,GACzH,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,aAAa,CAAC,CAAC"}

package/dist/pie-data-table-row/react.js

@@ -0,0 +1,15 @@
+import * as a from "react";
+import { createComponent as e } from "@lit/react";
+import { PieDataTableRow as t } from "./index.js";
+import { defaultProps as s } from "./index.js";
+const o = e({
+  displayName: "PieDataTableRow",
+  elementClass: t,
+  react: a,
+  tagName: "pie-data-table-row",
+  events: {}
+}), i = o;
+export {
+  i as PieDataTableRow,
+  s 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-20260119130527",
+  "version": "0.0.0-snapshot-release-20260121170533",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.0.0-snapshot-release-20260119130527",
+    "@justeattakeaway/pie-css": "0.26.1",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20260119130527"
+    "@justeattakeaway/pie-webc-core": "6.0.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/data-table.scss

@@ -33,40 +33,34 @@
   }
 }
 
-.c-data-table-header {
+.c-data-table-head-cell {
   background-color: transparent;
   font-weight: var(--dt-font-weight-bold);
   color: var(--data-table-text-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-head-cell-text-align--left, 
+.c-data-table-cell-text-align--left {
   text-align: left;
 }
 
-.c-data-table-header-text-align--right {
+.c-data-table-head-cell-text-align--right, 
+.c-data-table-cell-text-align--right {
   text-align: right;
 }
 
-.c-data-table-header-text-align--center {
+.c-data-table-head-cell-text-align--center,
+.c-data-table-cell-text-align--center {
   text-align: center;
 }
 
-.c-data-table-cell {
+.c-data-table-cell, .c-data-table-head-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;
-}
+.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,19 +26,35 @@ 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
    */
-  columns: Column[];
+  columns?: Column[];
 
   /**
    * Array of data objects to display
    */
-  data: Record<string, unknown>[];
+  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

@@ -8,6 +8,8 @@ import styles from './data-table.scss?inline';
 import {
     type DataTableProps,
     type Column,
+    type DataTableAdditionalRow,
+    defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -17,6 +19,8 @@ const componentSelector = 'pie-data-table';
 
 /**
  * @tagname pie-data-table
+ * @slot table-header - Slot for custom table header content
+ * @slot - Default slot for when there is no data to display in the table
  */
 @safeCustomElement('pie-data-table')
 export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps {
@@ -32,6 +36,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
@@ -40,14 +65,12 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
         const { width, heading, textAlign } = column;
         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',
+            'c-data-table-head-cell': true,
+            ...this.mapTextAlignClasses('c-data-table-head-cell', textAlign),
         };
 
         return html`
-            <th style="${style}" class="${classMap(classes)}">
+            <th style="${String(style)}" class="${classMap(classes)}">
                 ${heading}
             </th>
         `;
@@ -74,9 +97,7 @@ 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`
@@ -101,6 +122,54 @@ 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 */
+    }
+
+    private renderHTMLTable () {
+        return html`
+            <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>
+        `;
+    }
+
     render () {
         const classes = {
             'c-data-table': true,
@@ -109,10 +178,7 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
         return html`
             <div class="${classMap(classes)}">
                 <slot name="table-header"></slot>
-                <table>
-                    ${this.columns.length > 0 ? this.renderTableHeader() : nothing}
-                    ${this.data.length > 0 ? this.renderTableRows() : nothing}
-                </table>
+                ${this.data.length > 0 && this.columns.length > 0 ? this.renderHTMLTable() : html`<slot></slot>`}
             </div>
         `;
     }

package/src/pie-data-table-body/data-table-body.scss

@@ -0,0 +1,7 @@
+:host {
+  display: table-row-group;
+
+  ::slotted(pie-data-table-row) {
+    --pie-data-table-row-background-hover: var(--dt-color-container-subtle);
+  }
+}

package/src/pie-data-table-body/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/pie-data-table-body/defs.ts

@@ -0,0 +1 @@
+export type DataTableBodyProps = Partial<HTMLTableSectionElement>;

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

@@ -0,0 +1,30 @@
+import { html, unsafeCSS } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-body.scss?inline';
+import { type DataTableBodyProps } from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-body';
+
+/**
+ * @tagname pie-data-table-body
+ * @slot - Default slot
+ */
+@safeCustomElement('pie-data-table-body')
+export class PieDataTableBody extends PieElement implements DataTableBodyProps {
+    render () {
+        return html`<slot></slot>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableBody;
+    }
+}

package/src/pie-data-table-body/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableBody as PieDataTableBodyLit } from './index';
+import { type DataTableBodyProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableBodyReact = createComponent({
+    displayName: 'PieDataTableBody',
+    elementClass: PieDataTableBodyLit,
+    react: React,
+    tagName: 'pie-data-table-body',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableBody = PieDataTableBodyReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableBodyProps>
+    & React.RefAttributes<PieDataTableBodyLit> & ReactBaseType>;

package/src/pie-data-table-cell/data-table-cell.scss

@@ -0,0 +1,21 @@
+:host {
+  padding: var(--dt-spacing-d);
+  border-bottom: 1px solid var(--data-table-border-color);
+  display: table-cell;
+}
+
+:host([textAlign="right"]) {
+  text-align: right;
+}
+
+:host([textAlign="center"]) {
+  text-align: center;
+}
+
+:host([textAlign="left"]) {
+  text-align: left; 
+}
+
+:host([isHidden]) {
+  display: none;
+}

package/src/pie-data-table-cell/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>