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

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

@@ -0,0 +1,24 @@
+import { unsafeCSS as d, html as b } from "lit";
+import { P as c } from "../PieElement-DgHPBi0_.js";
+import { safeCustomElement as i } from "@justeattakeaway/pie-webc-core";
+const p = ":host{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);border-bottom:1px solid var(--data-table-border-color);display:table-header-group}";
+var h = Object.getOwnPropertyDescriptor, m = (o, a, n, l) => {
+  for (var e = l > 1 ? void 0 : l ? h(a, n) : a, t = o.length - 1, s; t >= 0; t--)
+    (s = o[t]) && (e = s(e) || e);
+  return e;
+};
+let r = class extends c {
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "rowgroup"), super.connectedCallback();
+  }
+  render() {
+    return b`<slot></slot>`;
+  }
+};
+r.styles = d(p);
+r = m([
+  i("pie-data-table-head")
+], r);
+export {
+  r as PieDataTableHead
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-head/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,gBAAgB,EAA4B,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAC5H,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,CAAC"}

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

@@ -0,0 +1,13 @@
+import * as a from "react";
+import { createComponent as e } from "@lit/react";
+import { PieDataTableHead as t } from "./index.js";
+const o = e({
+  displayName: "PieDataTableHead",
+  elementClass: t,
+  react: a,
+  tagName: "pie-data-table-head",
+  events: {}
+}), l = o;
+export {
+  l as PieDataTableHead
+};

package/dist/pie-data-table-head-cell/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-head-cell/defs-react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs-react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-head-cell/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-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,27 @@
+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
+ */
+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;;GAEG;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-DgHPBi0_.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.js

@@ -1,6 +1,6 @@
 import { unsafeCSS as h, nothing as p, html as n } from "lit";
 import { property as c, state as b } from "lit/decorators.js";
-import { P as g } from "../PieElement-Y2VnHR4y.js";
+import { P as g } from "../PieElement-DgHPBi0_.js";
 import { validPropertyValues as u, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
 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 = {

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,30 @@
+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
+ */
+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'];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    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;;GAEG;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,iBAAiB;IAYjB,oBAAoB;IAOpB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,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,46 @@
+import { unsafeCSS as c, nothing as h, html as p } from "lit";
+import { property as d } from "lit/decorators.js";
+import { P as u } from "../PieElement-DgHPBi0_.js";
+import { safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
+const b = ":host{display:table-row;border-bottom:1px solid var(--data-table-border-color)}:host ::slotted(pie-data-table-cell){background-color:var(--data-table-background-hover-or-active, transparent)}:host([isSelected]){background-color:var(--dt-color-container-subtle)}", g = {
+  isSelected: !1,
+  isHidden: !1
+};
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (r, o, a, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(o, a) : o, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (e = (s ? l(o, a, e) : l(e)) || e);
+  return s && e && m(o, a, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this._handleMouseEnter = () => {
+      this.style.setProperty("--data-table-background-hover-or-active", "var(--dt-color-container-subtle)");
+    }, this._handleMouseLeave = () => {
+      this.style.setProperty("--data-table-background-hover-or-active", "transparent");
+    };
+  }
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "row"), this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mouseleave", this._handleMouseLeave), this.style.setProperty("--data-table-background-hover-or-active", "transparent"), super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("mouseenter", this._handleMouseEnter), this.removeEventListener("mouseleave", this._handleMouseLeave);
+  }
+  render() {
+    const { isHidden: r } = this;
+    return r ? h : p`<slot></slot>`;
+  }
+};
+t.styles = c(b);
+i([
+  d({ type: Boolean })
+], t.prototype, "isSelected", 2);
+i([
+  d({ type: Boolean })
+], t.prototype, "isHidden", 2);
+t = i([
+  v("pie-data-table-row")
+], t);
+export {
+  t as PieDataTableRow,
+  g 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-20250910151748",
+  "version": "0.0.0-snapshot-release-20251010234024",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,10 @@
     "**/*.d.ts"
   ],
   "pieMetadata": {
-    "componentStatus": "alpha"
+    "componentStatus": "alpha",
+    "replaces": {
+      "snacks": []
+    }
   },
   "scripts": {
     "build": "run -T vite build",
@@ -34,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.21.0",
+    "@justeattakeaway/pie-css": "0.22.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "1.1.0"
+    "@justeattakeaway/pie-webc-core": "2.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/data-table.scss

@@ -33,31 +33,29 @@
   }
 }
 
-.c-data-table-header {
+.c-data-table-head-cell {
   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-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);
 }

package/src/defs.ts

@@ -42,12 +42,12 @@ 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

package/src/index.ts

@@ -1,10 +1,16 @@
 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';
 import { classMap } from 'lit/directives/class-map.js';
 
+// import '@justeattakeaway/pie-data-table-contents';
+// import '@justeattakeaway/pie-data-table-head';
+// import '@justeattakeaway/pie-data-table-head-cell';
+// import '@justeattakeaway/pie-data-table-body';
+// import '@justeattakeaway/pie-data-table-row';
+// import '@justeattakeaway/pie-data-table-cell';
+
 import styles from './data-table.scss?inline';
 import {
     type DataTableProps,
@@ -64,12 +70,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,
-            ...this.mapTextAlignClasses('c-data-table-header', textAlign),
+            '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>
         `;
@@ -101,7 +107,7 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
 
         return html`
             <td class="${classMap(classes)}">
-                ${column.accessor ? this.renderCellContent(row[column.accessor]) : ''}
+                ${column.accessor ? row[column.accessor] : ''}
             </td>
         `;
     }
@@ -159,36 +165,14 @@ export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps
         /* 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);
+    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 () {
@@ -199,11 +183,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}
-                    ${this.additionalRows && this.additionalRows.length > 0 ? this.renderAdditionalRows() : 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,3 @@
+:host {
+  display: table-row-group;
+}

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,29 @@
+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
+ */
+@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>

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

@@ -0,0 +1,19 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const dataTableCellTextAlign = ['left', 'right', 'center'] as const;
+
+export interface DataTableCellProps {
+  /**
+   * Text alignment for the cell content
+   */
+  textAlign?: typeof dataTableCellTextAlign[number];
+  /**
+   * Whether the cell is hidden
+   */
+  isHidden?: boolean;
+}
+
+export const defaultProps: ComponentDefaultProps<DataTableCellProps, 'textAlign' | 'isHidden'> = {
+    textAlign: 'left',
+    isHidden: false,
+};