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

package/src/index.ts

@@ -4,10 +4,19 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 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,
     type Column,
+    type DataTableAdditionalRow,
+    defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -32,6 +41,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 +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,
-            '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 +102,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 +127,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 +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}
-                </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,
+};

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

@@ -0,0 +1,61 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-cell.scss?inline';
+import {
+    type DataTableCellProps,
+    dataTableCellTextAlign,
+    defaultProps,
+} from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-cell';
+
+/**
+ * @tagname pie-data-table-cell
+ */
+@safeCustomElement('pie-data-table-cell')
+export class PieDataTableCell extends PieElement implements DataTableCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    @property({ type: String })
+    @validPropertyValues(componentSelector, dataTableCellTextAlign, defaultProps.textAlign)
+    public textAlign?: DataTableCellProps['textAlign'];
+
+    /**
+     * Whether the cell is hidden
+     */
+    @property({ type: Boolean })
+    public isHidden?: DataTableCellProps['isHidden'];
+
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'cell');
+        }
+
+        super.connectedCallback();
+    }
+
+    render () {
+        const { isHidden } = this;
+
+        if (isHidden) {
+            return nothing;
+        }
+
+        return html`<slot></slot>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableCell;
+    }
+}

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

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

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

@@ -0,0 +1,4 @@
+:host {
+    inline-size: 100%;
+    display: table;
+}

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

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

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

@@ -0,0 +1 @@
+export type DataTableContentsProps = Partial<HTMLTableElement>;

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

@@ -0,0 +1,35 @@
+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-contents.scss?inline';
+import { type DataTableContentsProps } from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-contents';
+
+/**
+ * @tagname pie-data-table-contents
+ */
+@safeCustomElement('pie-data-table-contents')
+export class PieDataTableContents extends PieElement implements DataTableContentsProps {
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'table');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableContents;
+    }
+}

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

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

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

@@ -0,0 +1,8 @@
+: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;
+}
+

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

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

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

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

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

@@ -0,0 +1,36 @@
+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-head.scss?inline';
+import { type DataTableHeadProps } from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-head';
+
+/**
+ * @tagname pie-data-table-head
+ */
+@safeCustomElement('pie-data-table-head')
+export class PieDataTableHead extends PieElement implements DataTableHeadProps {
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'rowgroup');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHead;
+    }
+}
+

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

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

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

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

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

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

package/src/pie-data-table-head-cell/index.ts

@@ -0,0 +1,59 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-head-cell.scss?inline';
+import {
+    type DataTableHeadCellProps,
+    dataTableHeadCellTextAlign,
+    defaultProps,
+} from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-head-cell';
+
+/**
+ * @tagname pie-data-table-head-cell
+ */
+@safeCustomElement('pie-data-table-head-cell')
+export class PieDataTableHeadCell extends PieElement implements DataTableHeadCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    @property({ type: String })
+    @validPropertyValues(componentSelector, dataTableHeadCellTextAlign, defaultProps.textAlign)
+    public textAlign?: DataTableHeadCellProps['textAlign'];
+
+    /**
+     * Whether the cell is hidden
+     */
+    @property({ type: Boolean })
+    public isHidden?: DataTableHeadCellProps['isHidden'];
+
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'columnheader');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        const { isHidden } = this;
+
+        if (isHidden) {
+            return nothing;
+        }
+
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHeadCell;
+    }
+}

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

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

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

@@ -76,6 +76,7 @@ export class PieDataTableHeader extends PieElement implements DataTableHeaderPro
             <header class="${classMap(classes)}">
                 <div class="c-data-table-header-title-wrapper">
                     ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing}
+
                     ${subtitle ? html`<span class="c-data-table-header-subtitle">${subtitle}</span>` : nothing}
                 </div>
                 ${this.hasActionButtons ? html`

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

@@ -0,0 +1,12 @@
+:host {
+  display: table-row;
+  border-bottom: 1px solid var(--data-table-border-color);
+
+  ::slotted(pie-data-table-cell) {
+    background-color: var(--data-table-background-hover-or-active, transparent);
+  }  
+}
+
+:host([isSelected]) {
+  background-color: var(--dt-color-container-subtle);
+}

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

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

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

@@ -0,0 +1,17 @@
+import { type 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 const defaultProps: ComponentDefaultProps<DataTableRowProps, 'isSelected' | 'isHidden'> = {
+    isSelected: false,
+    isHidden: false,
+};