@justeattakeaway/pie-data-table 0.1.6 → 0.2.0

package/custom-elements.json

@@ -11,8 +11,26 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>"
+          },
+          "default": "{\n    hasBorder: true,\n    isStriped: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +40,77 @@
           "kind": "class",
           "description": "",
           "name": "PieDataTable",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "Column[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "Array of column definitions"
+            },
+            {
+              "kind": "field",
+              "name": "data",
+              "type": {
+                "text": "Record<string, unknown>[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "Array of data objects to display"
+            },
+            {
+              "kind": "method",
+              "name": "renderHeaderCell",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "column",
+                  "type": {
+                    "text": "Column"
+                  },
+                  "description": "The column definition to render"
+                }
+              ],
+              "description": "Renders a header cell for the table"
+            },
+            {
+              "kind": "method",
+              "name": "renderTableHeader",
+              "privacy": "private",
+              "description": "Renders the table header"
+            },
+            {
+              "kind": "method",
+              "name": "renderTableCell",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "column",
+                  "type": {
+                    "text": "Column"
+                  },
+                  "description": "The column definition to render"
+                },
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "Record<string, unknown>"
+                  },
+                  "description": "The data object for the current row"
+                }
+              ],
+              "description": "Renders a table cell for the given column and row"
+            },
+            {
+              "kind": "method",
+              "name": "renderTableRows",
+              "privacy": "private",
+              "description": "Renders the table rows"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",
@@ -55,6 +143,153 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-data-table-header/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-data-table-header/defs.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "dataTableHeaderVariant",
+          "type": {
+            "text": "array"
+          },
+          "default": "['subtle', 'strong']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'heading' | 'subHeading'>>"
+          },
+          "default": "{\n    variant: 'subtle',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dataTableHeaderVariant",
+          "declaration": {
+            "name": "dataTableHeaderVariant",
+            "module": "src/pie-data-table-header/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/pie-data-table-header/defs.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/pie-data-table-header/index.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PieDataTableHeader",
+          "members": [
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "DataTableHeaderProps['heading']"
+              },
+              "privacy": "public",
+              "description": "heading text for the data table header"
+            },
+            {
+              "kind": "field",
+              "name": "subHeading",
+              "type": {
+                "text": "DataTableHeaderProps['subHeading']"
+              },
+              "privacy": "public",
+              "description": "Sub heading text for the data table header"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "typeof defaultProps.variant | undefined"
+              },
+              "privacy": "public",
+              "description": "Emphasis level for the header"
+            },
+            {
+              "kind": "field",
+              "name": "_actionButtonSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hasActionButtons",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "handleActionButtonSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The slot change event"
+                }
+              ],
+              "description": "Handles the slot change event to determine if there are action buttons."
+            }
+          ],
+          "superclass": {
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
+          },
+          "tagName": "pie-data-table-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./defs"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PieDataTableHeader",
+          "declaration": {
+            "name": "PieDataTableHeader",
+            "module": "src/pie-data-table-header/index.js"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/PieElement-B3g_8vKy.js

@@ -0,0 +1,11 @@
+import { LitElement as i } from "lit";
+const t = class t extends i {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", t.v);
+  }
+};
+t.v = "0.2.0";
+let s = t;
+export {
+  s as P
+};

package/dist/defs-react.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+//# sourceMappingURL=defs-react.d.ts.map

package/dist/defs-react.d.ts.map

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

package/dist/defs.d.ts

@@ -0,0 +1,35 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export interface Column {
+    /**
+     * Unique identifier for the column
+     * */
+    id: string;
+    /**
+     * Optional property to specify the display name for the column heading
+     * */
+    heading: string;
+    /**
+     * Optional property to specify the text alignment of the column
+     * */
+    textAlign?: 'left' | 'right' | 'center';
+    /**
+     * Optional property to specify the width of the column
+     * */
+    width?: string;
+    /**
+     * Optional property to specify the key in the data object to display in this column
+     * */
+    accessor?: string;
+}
+export interface DataTableProps {
+    /**
+     * Array of column definitions
+     */
+    columns: Column[];
+    /**
+     * Array of data objects to display
+     */
+    data: Record<string, unknown>[];
+}
+export declare const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>;
+//# sourceMappingURL=defs.d.ts.map

package/dist/defs.d.ts.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -1,20 +1,45 @@
-import { CSSResult } from 'lit';
-import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import { TemplateResult } from 'lit-html';
-
-export declare interface DataTableProps {
-}
-
-/**
- * @tagname pie-data-table
- */
-export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
-    render(): TemplateResult<1>;
-    static styles: CSSResult;
-}
-
-declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
-
-export { }
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { DataTableProps, Column } 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;
+/**
+ * @tagname pie-data-table
+ */
+export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
+    /**
+     * Array of column definitions
+     */
+    columns: Column[];
+    /**
+     * Array of data objects to display
+     */
+    data: Record<string, unknown>[];
+    /**
+     * Renders a header cell for the table
+     * @param column - The column definition to render
+     */
+    private renderHeaderCell;
+    /**
+     * Renders the table header
+     */
+    private renderTableHeader;
+    /**
+     * Renders a table cell for the given column and row
+     * @param column - The column definition to render
+     * @param row - The data object for the current row
+     */
+    private renderTableCell;
+    /**
+     * Renders the table rows
+     */
+    private renderTableRows;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTable;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -1,27 +1,107 @@
-import { LitElement as b, html as d, unsafeCSS as f } from "lit";
-import { RtlMixin as h, safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
-const e = class e extends b {
-  willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", e.v);
-  }
+import { nothing as n, html as d, unsafeCSS as h } from "lit";
+import { property as g } from "lit/decorators.js";
+import { P as p } from "./PieElement-B3g_8vKy.js";
+import { RtlMixin as u, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
+import { classMap as i } from "lit/directives/class-map.js";
+const f = "*,*: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-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{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
 };
-e.v = "0.1.6";
-let r = e;
-const c = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
-var u = Object.getOwnPropertyDescriptor, m = (i, l, p, o) => {
-  for (var t = o > 1 ? void 0 : o ? u(l, p) : l, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = n(t) || t);
-  return t;
+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;
 };
-let a = class extends h(r) {
+let o = class extends u(p) {
+  constructor() {
+    super(...arguments), this.columns = [], this.data = [];
+  }
+  /**
+   * 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({
+      "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}
+            </th>
+        `;
+  }
+  /**
+   * Renders the table header
+   */
+  renderTableHeader() {
+    return d`
+            <thead>
+                <tr>
+                    ${this.columns.map((t) => this.renderHeaderCell(t))}
+                </tr>
+            </thead>
+        `;
+  }
+  /**
+   * Renders a table cell for the given column and row
+   * @param column - The column definition to render
+   * @param row - The data object for the current row
+   */
+  renderTableCell(t, e) {
+    const l = {
+      "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"
+    };
+    return d`
+            <td class="${i(l)}">
+                ${t.accessor ? e[t.accessor] : ""}
+            </td>
+        `;
+  }
+  /**
+   * Renders the table rows
+   */
+  renderTableRows() {
+    return d`
+            <tbody>
+                ${this.data.map((t) => d`
+                    <tr class="c-data-table-row">
+                        ${this.columns.map((e) => this.renderTableCell(e, t))}
+                    </tr>
+                `)} 
+            </tbody>
+        `;
+  }
   render() {
-    return d`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
+    return d`
+            <div class="${i({
+      "c-data-table": !0
+    })}">
+                <slot name="table-header"></slot>
+                <table>
+                    ${this.columns.length > 0 ? this.renderTableHeader() : n}
+                    ${this.data.length > 0 ? this.renderTableRows() : n}
+                </table>
+            </div>
+        `;
   }
 };
-a.styles = f(c);
-a = m([
-  v("pie-data-table")
-], a);
+o.styles = h(f);
+b([
+  g({ type: Array })
+], o.prototype, "columns", 2);
+b([
+  g({ type: Array })
+], o.prototype, "data", 2);
+o = b([
+  x("pie-data-table")
+], o);
 export {
-  a as PieDataTable
+  o as PieDataTable,
+  T as defaultProps
 };

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+//# sourceMappingURL=defs-react.d.ts.map

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

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

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

@@ -0,0 +1,18 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+export declare const dataTableHeaderVariant: string[];
+export interface DataTableHeaderProps {
+    /**
+     * Heading text for the data table header
+     */
+    heading: string;
+    /**
+     * Sub heading text for the data table header
+     */
+    subHeading?: string;
+    /**
+     * Emphasis level for the header
+     */
+    variant?: typeof dataTableHeaderVariant[number];
+}
+export declare const defaultProps: ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'heading' | 'subHeading'>>;
+//# sourceMappingURL=defs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,UAAuB,CAAC;AAE3D,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,oBAAoB,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,YAAY,CAAC,CAEhI,CAAC"}

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

@@ -0,0 +1,42 @@
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { DataTableHeaderProps, defaultProps } from './defs';
+export * from './defs';
+declare const componentSelector = "pie-data-table-header";
+/**
+ * @tagname pie-data-table-header
+ */
+export declare class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
+    /**
+     * heading text for the data table header
+     */
+    heading: DataTableHeaderProps['heading'];
+    /**
+     * Sub heading text for the data table header
+     */
+    subHeading: DataTableHeaderProps['subHeading'];
+    /**
+     * Emphasis level for the header
+     */
+    variant?: typeof defaultProps.variant;
+    private _actionButtonSlot;
+    private hasActionButtons;
+    private handleActionButtonSlotChange;
+    /**
+     * Handles the slot change event to determine if there are action buttons.
+     *
+     * @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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHeader;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,84 @@
+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-B3g_8vKy.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 = {
+  variant: "subtle"
+};
+var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? B(t, r) : t, d = e.length - 1, i; d >= 0; d--)
+    (i = e[d]) && (n = (s ? i(t, r, n) : i(n)) || n);
+  return s && n && w(t, r, n), n;
+};
+const P = "pie-data-table-header";
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.hasActionButtons = !1;
+  }
+  handleActionButtonSlotChange() {
+    this.hasActionButtons = !!this._actionButtonSlot.length;
+  }
+  /**
+   * Handles the slot change event to determine if there are action buttons.
+   *
+   * @param event - The slot change event
+   */
+  handleSlotChange(e) {
+    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() {
+    this.handleActionButtonSlotChange();
+  }
+  render() {
+    const { heading: e, subHeading: t, variant: r } = this;
+    return l`
+            <header class="${m({
+      "c-data-table-header": !0,
+      "c-data-table-header--strong": r === "strong"
+    })}">
+                <div class="c-data-table-header-heading-wrapper">
+                    ${e ? l`<span class="c-data-table-header-heading">${e}</span>` : h}
+
+                    ${t ? l`<span class="c-data-table-header-sub-heading">${t}</span>` : h}
+                </div>
+                ${this.hasActionButtons ? l`
+                    <div class="c-data-table-action-buttons-wrapper">
+                        <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
+                    </div>
+                ` : l`
+                    <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
+                `}
+            </header>
+        `;
+  }
+};
+a.styles = p(y);
+o([
+  c({ type: String })
+], a.prototype, "heading", 2);
+o([
+  c({ type: String })
+], a.prototype, "subHeading", 2);
+o([
+  c({ type: String }),
+  f(P, x, S.variant)
+], a.prototype, "variant", 2);
+o([
+  g({ slot: "action-button", flatten: !0 })
+], a.prototype, "_actionButtonSlot", 2);
+o([
+  b()
+], a.prototype, "hasActionButtons", 2);
+a = o([
+  v("pie-data-table-header")
+], a);
+export {
+  a as PieDataTableHeader,
+  x as dataTableHeaderVariant,
+  S as defaultProps
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAEnD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAA8B,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,oBAAoB,CAAC,GAClI,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,GAAG,aAAa,CAAC,CAAC"}

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

@@ -0,0 +1,16 @@
+import * as e from "react";
+import { createComponent as a } from "@lit/react";
+import { PieDataTableHeader as t } from "./index.js";
+import { dataTableHeaderVariant as p, defaultProps as s } from "./index.js";
+const r = a({
+  displayName: "PieDataTableHeader",
+  elementClass: t,
+  react: e,
+  tagName: "pie-data-table-header",
+  events: {}
+}), i = r;
+export {
+  i as PieDataTableHeader,
+  p as dataTableHeaderVariant,
+  s as defaultProps
+};

package/dist/react.d.ts

@@ -1,25 +1,7 @@
-import { CSSResult } from 'lit';
-import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import * as React_2 from 'react';
-import { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import { TemplateResult } from 'lit-html';
-
-export declare interface DataTableProps {
-}
-
-export declare const PieDataTable: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<DataTableProps> & React_2.RefAttributes<PieDataTable_2> & ReactBaseType>;
-
-/**
- * @tagname pie-data-table
- */
-declare class PieDataTable_2 extends PieDataTable_base implements DataTableProps {
-    render(): TemplateResult<1>;
-    static styles: CSSResult;
-}
-
-declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
-
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
-
-export { }
+import { PieDataTable as PieDataTableLit } from './index';
+import { DataTableProps } from './defs';
+import * as React from 'react';
+export * from './defs';
+type ReactBaseType = React.HTMLAttributes<HTMLElement>;
+export declare const PieDataTable: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableProps> & React.RefAttributes<PieDataTableLit> & ReactBaseType>;
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,YAAY,EAAwB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,GAChH,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC,CAAC"}

package/dist/react.js

@@ -1,13 +1,15 @@
 import * as a from "react";
 import { createComponent as e } from "@lit/react";
 import { PieDataTable as t } from "./index.js";
+import { defaultProps as s } from "./index.js";
 const o = e({
   displayName: "PieDataTable",
   elementClass: t,
   react: a,
   tagName: "pie-data-table",
   events: {}
-}), l = o;
+}), i = o;
 export {
-  l as PieDataTable
+  i as PieDataTable,
+  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.1.6",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/data-table.scss

@@ -1,7 +1,72 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 :host {
-    // Note: For consistency sake, the recommended display should be either
-    // "block" or "inline-block", otherwise it can be ommited for floating elements
     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;
+  
+  table {
+    border-spacing: 0;
+    width: 100%;
+  }
+
+  tbody {
+    overflow: auto;
+  }
+
+  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-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 {
+  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;
+}

package/src/defs.ts

@@ -1,3 +1,42 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface DataTableProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export interface Column {
+  /**
+   * Unique identifier for the column
+   * */
+  id: string;
+  /**
+   * Optional property to specify the display name for the column heading
+   * */
+  heading: string;
+  /**
+   * Optional property to specify the text alignment of the column
+   * */
+  textAlign?: 'left' | 'right' | 'center';
+
+  /**
+   * Optional property to specify the width of the column
+   * */
+  width?: string;
+  /**
+   * Optional property to specify the key in the data object to display in this column
+   * */
+  accessor?: string;
+}
+
+export interface DataTableProps {
+  /**
+   * Array of column definitions
+   */
+  columns: Column[];
+
+  /**
+   * Array of data objects to display
+   */
+  data: Record<string, unknown>[];
+}
+
+export const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>> = {
+    hasBorder: true,
+    isStriped: false,
+};

package/src/index.ts

@@ -1,9 +1,14 @@
-import { html, unsafeCSS } from 'lit';
+import { html, nothing, unsafeCSS } from 'lit';
+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 styles from './data-table.scss?inline';
-import { type DataTableProps } from './defs';
+import {
+    type DataTableProps,
+    type Column,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -15,8 +20,101 @@ const componentSelector = 'pie-data-table';
  */
 @safeCustomElement('pie-data-table')
 export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps {
+    /**
+     * Array of column definitions
+     */
+    @property({ type: Array })
+    public columns: Column[] = [];
+
+    /**
+     * Array of data objects to display
+     */
+    @property({ type: Array })
+    public data: Record<string, unknown>[] = [];
+
+    /**
+     * Renders a header cell for the table
+     * @param column - The column definition to render
+     */
+    private renderHeaderCell (column: Column) {
+        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',
+        };
+
+        return html`
+            <th style="${style}" class="${classMap(classes)}">
+                ${heading}
+            </th>
+        `;
+    }
+
+    /**
+     * Renders the table header
+     */
+    private renderTableHeader () {
+        return html`
+            <thead>
+                <tr>
+                    ${this.columns.map((column) => this.renderHeaderCell(column))}
+                </tr>
+            </thead>
+        `;
+    }
+
+    /**
+     * Renders a table cell for the given column and row
+     * @param column - The column definition to render
+     * @param row - The data object for the current row
+     */
+    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',
+        };
+
+        return html`
+            <td class="${classMap(classes)}">
+                ${column.accessor ? row[column.accessor] : ''}
+            </td>
+        `;
+    }
+
+    /**
+     * Renders the table rows
+     */
+    private renderTableRows () {
+        return html`
+            <tbody>
+                ${this.data.map((row) => html`
+                    <tr class="c-data-table-row">
+                        ${this.columns.map((column) => this.renderTableCell(column, row))}
+                    </tr>
+                `)} 
+            </tbody>
+        `;
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
+        const classes = {
+            'c-data-table': true,
+        };
+
+        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>
+            </div>
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

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

@@ -0,0 +1,46 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+: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: #{p.font-size(--dt-font-size-24)};
+  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: #{p.font-size(--dt-font-size-16)};
+  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);
+}

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

@@ -0,0 +1,8 @@
+import type React from 'react';
+/**
+ * TODO: Verify if ReactBaseType can be set as a more specific React interface
+ * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
+ * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
+ */
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

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

@@ -0,0 +1,22 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const dataTableHeaderVariant = ['subtle', 'strong'];
+
+export interface DataTableHeaderProps {
+  /**
+   * Heading text for the data table header
+   */
+  heading: string;
+  /**
+   * Sub heading text for the data table header
+   */
+  subHeading?: string;
+  /**
+   * Emphasis level for the header
+   */
+  variant?: typeof dataTableHeaderVariant[number];
+}
+
+export const defaultProps: ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'heading' | 'subHeading'>> = {
+    variant: 'subtle',
+};

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

@@ -0,0 +1,104 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property, state, queryAssignedElements } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { classMap } from 'lit/directives/class-map.js';
+
+import styles from './data-table-header.scss?inline';
+import {
+    type DataTableHeaderProps,
+    dataTableHeaderVariant,
+    defaultProps,
+} from './defs';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-data-table-header';
+
+/**
+ * @tagname pie-data-table-header
+ */
+@safeCustomElement('pie-data-table-header')
+export class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
+    /**
+     * heading text for the data table header
+     */
+    @property({ type: String })
+    public heading!: DataTableHeaderProps['heading'];
+
+    /**
+     * Sub heading text for the data table header
+     */
+    @property({ type: String })
+    public subHeading: DataTableHeaderProps['subHeading'];
+
+    /**
+     * Emphasis level for the header
+     */
+    @property({ type: String })
+    @validPropertyValues(componentSelector, dataTableHeaderVariant, defaultProps.variant)
+    public variant?: typeof defaultProps.variant;
+
+    @queryAssignedElements({ slot: 'action-button', flatten: true })
+    private _actionButtonSlot!: Array<HTMLElement>;
+
+    @state()
+    private hasActionButtons = false;
+
+    private handleActionButtonSlotChange () {
+        this.hasActionButtons = Boolean(this._actionButtonSlot.length);
+    }
+
+    /**
+     * Handles the slot change event to determine if there are action buttons.
+     *
+     * @param event - The slot change event
+     */
+    private handleSlotChange (event: Event) {
+        const slot = event.target as HTMLSlotElement;
+        this.hasActionButtons = slot.assignedElements().length > 0;
+    }
+
+    /**
+     * Lit lifecycle: called after the component's DOM has been rendered the first time.
+     */
+    firstUpdated () {
+        this.handleActionButtonSlotChange();
+    }
+
+    render () {
+        const { heading, subHeading, variant } = this;
+
+        const classes = {
+            'c-data-table-header': true,
+            'c-data-table-header--strong': variant === 'strong',
+        };
+
+        return html`
+            <header class="${classMap(classes)}">
+                <div class="c-data-table-header-heading-wrapper">
+                    ${heading ? html`<span class="c-data-table-header-heading">${heading}</span>` : nothing}
+
+                    ${subHeading ? html`<span class="c-data-table-header-sub-heading">${subHeading}</span>` : nothing}
+                </div>
+                ${this.hasActionButtons ? html`
+                    <div class="c-data-table-action-buttons-wrapper">
+                        <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
+                    </div>
+                ` : html`
+                    <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
+                `}
+            </header>
+        `;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHeader;
+    }
+}

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

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