@beaconsoftware/b-report-table 1.0.0

package/src/b-report-table-footer-cell.ts

@@ -0,0 +1,131 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { ColumnStickyConfig } from './b-report-table.js';
+
+/**
+ * A cell within a table footer row.
+ * Inherits sticky behavior from corresponding header columns.
+ *
+ * @slot - Default slot for cell content
+ */
+@customElement('b-report-table-footer-cell')
+export class BReportTableFooterCell extends LitElement {
+  static styles = css`
+    :host {
+      display: table-cell;
+      padding: 12px 16px;
+      font-weight: 600;
+      background: #f8fafc;
+      border-top: 2px solid #e2e8f0;
+    }
+
+    /* Vertical sticky (when parent footer has sticky attribute) */
+    :host([data-sticky-bottom]) {
+      position: sticky;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    /* Horizontal sticky columns */
+    :host([data-sticky='left']),
+    :host([data-sticky='right']) {
+      position: sticky;
+      z-index: 2;
+      background: #f1f5f9;
+    }
+
+    /* Both vertical and horizontal sticky */
+    :host([data-sticky-bottom][data-sticky='left']),
+    :host([data-sticky-bottom][data-sticky='right']) {
+      z-index: 4;
+    }
+
+    :host([data-sticky='left']) {
+      left: var(--sticky-offset, 0px);
+      box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([data-sticky='right']) {
+      right: var(--sticky-offset, 0px);
+      box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
+    }
+  `;
+
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    const table = this._findTable();
+    if (table) {
+      table.addEventListener('column-config-change', this._handleConfigChange);
+      // Check if configs are already available
+      this._applyInitialConfig();
+    }
+    // Check if parent footer has sticky attribute
+    this._updateVerticalSticky();
+  }
+
+  private _updateVerticalSticky(): void {
+    const footer = this.closest('b-report-table-footer');
+    if (footer?.hasAttribute('sticky')) {
+      this.setAttribute('data-sticky-bottom', '');
+    } else {
+      this.removeAttribute('data-sticky-bottom');
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._findTable()?.removeEventListener(
+      'column-config-change',
+      this._handleConfigChange
+    );
+  }
+
+  private _findTable(): HTMLElement | null {
+    return this.closest('b-report-table');
+  }
+
+  private _applyInitialConfig(): void {
+    const table = this._findTable() as any;
+    if (table?.columnConfigs) {
+      this._applyConfig(table.columnConfigs);
+    }
+  }
+
+  private _handleConfigChange = (event: Event): void => {
+    const customEvent = event as CustomEvent<{ configs: ColumnStickyConfig[] }>;
+    this._applyConfig(customEvent.detail.configs);
+  };
+
+  private _applyConfig(configs: ColumnStickyConfig[]): void {
+    const index = this._getColumnIndex();
+    const config = configs.find((c) => c.index === index);
+
+    if (config) {
+      if (config.sticky) {
+        this.setAttribute('data-sticky', config.sticky);
+        this.style.setProperty('--sticky-offset', `${config.offset}px`);
+      } else {
+        this.removeAttribute('data-sticky');
+        this.style.removeProperty('--sticky-offset');
+      }
+    }
+  }
+
+  private _getColumnIndex(): number {
+    const row = this.parentElement;
+    if (!row) return -1;
+    const cells = Array.from(row.querySelectorAll('b-report-table-footer-cell'));
+    return cells.indexOf(this);
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-footer-cell': BReportTableFooterCell;
+  }
+}

package/src/b-report-table-footer-row.ts

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * A row within the table footer.
+ *
+ * @slot - Default slot for footer cells (b-report-table-footer-cell)
+ */
+@customElement('b-report-table-footer-row')
+export class BReportTableFooterRow extends LitElement {
+  static styles = css`
+    :host {
+      display: table-row;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-footer-row': BReportTableFooterRow;
+  }
+}

package/src/b-report-table-footer.ts

@@ -0,0 +1,32 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * Table footer component that wraps footer rows.
+ *
+ * @slot - Default slot for footer rows (b-report-table-footer-row)
+ */
+@customElement('b-report-table-footer')
+export class BReportTableFooter extends LitElement {
+  static styles = css`
+    :host {
+      display: table-footer-group;
+    }
+  `;
+
+  /**
+   * Whether the footer should be sticky (fixed at the bottom when scrolling).
+   */
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-footer': BReportTableFooter;
+  }
+}

package/src/b-report-table-header-cell.ts

@@ -0,0 +1,128 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { ColumnStickyConfig } from './b-report-table.js';
+
+/**
+ * A header cell within a table header row.
+ *
+ * @slot - Default slot for cell content
+ */
+@customElement('b-report-table-header-cell')
+export class BReportTableHeaderCell extends LitElement {
+  static styles = css`
+    :host {
+      display: table-cell;
+      padding: 12px 16px;
+      text-align: left;
+      font-weight: 600;
+      background: #f8fafc;
+      border-bottom: 2px solid #e2e8f0;
+      white-space: nowrap;
+    }
+
+    /* Vertical sticky (when parent header has sticky attribute) */
+    :host([data-sticky-top]) {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    /* Horizontal sticky columns */
+    :host([sticky='left']),
+    :host([sticky='right']) {
+      position: sticky;
+      z-index: 2;
+      background: #f1f5f9;
+    }
+
+    /* Both vertical and horizontal sticky */
+    :host([data-sticky-top][sticky='left']),
+    :host([data-sticky-top][sticky='right']) {
+      z-index: 4;
+    }
+
+    :host([sticky='left']) {
+      left: var(--sticky-offset, 0px);
+      box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
+    }
+
+    :host([sticky='right']) {
+      right: var(--sticky-offset, 0px);
+      box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
+    }
+  `;
+
+  /**
+   * Determines if this column should be sticky.
+   * - "left": Column sticks to the left side
+   * - "right": Column sticks to the right side
+   * - null/undefined: Column is not sticky
+   */
+  @property({ type: String, reflect: true })
+  sticky: 'left' | 'right' | null = null;
+
+  @state()
+  private _offset = 0;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._findTable()?.addEventListener(
+      'column-config-change',
+      this._handleConfigChange
+    );
+    // Check if parent header has sticky attribute
+    this._updateVerticalSticky();
+  }
+
+  private _updateVerticalSticky(): void {
+    const header = this.closest('b-report-table-header');
+    if (header?.hasAttribute('sticky')) {
+      this.setAttribute('data-sticky-top', '');
+    } else {
+      this.removeAttribute('data-sticky-top');
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._findTable()?.removeEventListener(
+      'column-config-change',
+      this._handleConfigChange
+    );
+  }
+
+  private _findTable(): HTMLElement | null {
+    return this.closest('b-report-table');
+  }
+
+  private _handleConfigChange = (event: Event): void => {
+    const customEvent = event as CustomEvent<{ configs: ColumnStickyConfig[] }>;
+    const configs = customEvent.detail.configs;
+    const index = this._getColumnIndex();
+
+    const config = configs.find((c) => c.index === index);
+    if (config && config.sticky) {
+      this._offset = config.offset;
+      this.style.setProperty('--sticky-offset', `${this._offset}px`);
+    }
+  };
+
+  private _getColumnIndex(): number {
+    const row = this.parentElement;
+    if (!row) return -1;
+    const cells = Array.from(
+      row.querySelectorAll('b-report-table-header-cell')
+    );
+    return cells.indexOf(this);
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-header-cell': BReportTableHeaderCell;
+  }
+}

package/src/b-report-table-header-row.ts

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * A row within the table header.
+ *
+ * @slot - Default slot for header cells (b-report-table-header-cell)
+ */
+@customElement('b-report-table-header-row')
+export class BReportTableHeaderRow extends LitElement {
+  static styles = css`
+    :host {
+      display: table-row;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-header-row': BReportTableHeaderRow;
+  }
+}

package/src/b-report-table-header.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { BReportTable, ColumnStickyConfig } from './b-report-table.js';
+import type { BReportTableHeaderCell } from './b-report-table-header-cell.js';
+
+/**
+ * Table header component that wraps header rows.
+ *
+ * @slot - Default slot for header rows (b-report-table-header-row)
+ */
+@customElement('b-report-table-header')
+export class BReportTableHeader extends LitElement {
+  static styles = css`
+    :host {
+      display: table-header-group;
+    }
+  `;
+
+  /**
+   * Whether the header should be sticky (fixed at the top when scrolling).
+   */
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
+
+  private _resizeObserver?: ResizeObserver;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._setupResizeObserver();
+    // Delay initial calculation to ensure all children are rendered
+    requestAnimationFrame(() => {
+      this._calculateColumnConfigs();
+    });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+
+  private _setupResizeObserver(): void {
+    this._resizeObserver = new ResizeObserver(() => {
+      this._calculateColumnConfigs();
+    });
+    this._resizeObserver.observe(this);
+  }
+
+  private _calculateColumnConfigs(): void {
+    const table = this.closest('b-report-table') as BReportTable | null;
+    if (!table) return;
+
+    // Find the first header row to get column configurations
+    const firstRow = this.querySelector('b-report-table-header-row');
+    if (!firstRow) return;
+
+    const cells = Array.from(
+      firstRow.querySelectorAll('b-report-table-header-cell')
+    ) as BReportTableHeaderCell[];
+
+    const configs: ColumnStickyConfig[] = [];
+    let leftOffset = 0;
+    let rightOffset = 0;
+
+    // First pass: collect all cells and their sticky values
+    const cellData = cells.map((cell, index) => ({
+      index,
+      sticky: cell.sticky as 'left' | 'right' | null,
+      width: cell.offsetWidth || 100,
+    }));
+
+    // Calculate left sticky offsets
+    for (const data of cellData) {
+      if (data.sticky === 'left') {
+        configs.push({
+          index: data.index,
+          sticky: 'left',
+          width: data.width,
+          offset: leftOffset,
+        });
+        leftOffset += data.width;
+      }
+    }
+
+    // Calculate right sticky offsets (from right to left)
+    for (let i = cellData.length - 1; i >= 0; i--) {
+      const data = cellData[i];
+      if (data.sticky === 'right') {
+        configs.push({
+          index: data.index,
+          sticky: 'right',
+          width: data.width,
+          offset: rightOffset,
+        });
+        rightOffset += data.width;
+      }
+    }
+
+    // Add non-sticky columns
+    for (const data of cellData) {
+      if (data.sticky !== 'left' && data.sticky !== 'right') {
+        configs.push({
+          index: data.index,
+          sticky: null,
+          width: data.width,
+          offset: 0,
+        });
+      }
+    }
+
+    // Sort by index
+    configs.sort((a, b) => a.index - b.index);
+
+    table.updateColumnConfigs(configs);
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-header': BReportTableHeader;
+  }
+}

package/src/b-report-table-row.ts

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * A row within the table body.
+ *
+ * @slot - Default slot for cells (b-report-table-cell)
+ */
+@customElement('b-report-table-row')
+export class BReportTableRow extends LitElement {
+  static styles = css`
+    :host {
+      display: table-row;
+    }
+
+    :host(:hover) {
+      background: #f8fafc;
+    }
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table-row': BReportTableRow;
+  }
+}

package/src/b-report-table.ts

@@ -0,0 +1,80 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+export interface ColumnStickyConfig {
+  index: number;
+  sticky: 'left' | 'right' | null;
+  width: number;
+  offset: number;
+}
+
+/**
+ * A report table component with support for sticky headers, footers, and columns.
+ *
+ * @slot header - The table header (b-report-table-header)
+ * @slot - Default slot for table body (b-report-table-body)
+ * @slot footer - The table footer (b-report-table-footer)
+ */
+@customElement('b-report-table')
+export class BReportTable extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 14px;
+    }
+
+    ::slotted(*) {
+      display: table-row-group;
+    }
+  `;
+
+  @state()
+  private _columnConfigs: ColumnStickyConfig[] = [];
+
+  get columnConfigs(): ColumnStickyConfig[] {
+    return this._columnConfigs;
+  }
+
+  /**
+   * Updates the sticky column configuration based on header cells.
+   * This is called by the header component when it's connected or updated.
+   */
+  updateColumnConfigs(configs: ColumnStickyConfig[]): void {
+    this._columnConfigs = configs;
+    this._notifyChildren();
+  }
+
+  private _notifyChildren(): void {
+    // Dispatch event to notify all children of column config changes
+    this.dispatchEvent(
+      new CustomEvent('column-config-change', {
+        detail: { configs: this._columnConfigs },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <table role="table">
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="footer"></slot>
+      </table>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'b-report-table': BReportTable;
+  }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { BReportTable } from './b-report-table.js';
+export { BReportTableHeader } from './b-report-table-header.js';
+export { BReportTableHeaderRow } from './b-report-table-header-row.js';
+export { BReportTableHeaderCell } from './b-report-table-header-cell.js';
+export { BReportTableBody } from './b-report-table-body.js';
+export { BReportTableRow } from './b-report-table-row.js';
+export { BReportTableCell } from './b-report-table-cell.js';
+export { BReportTableFooter } from './b-report-table-footer.js';
+export { BReportTableFooterRow } from './b-report-table-footer-row.js';
+export { BReportTableFooterCell } from './b-report-table-footer-cell.js';
+
+export type { ColumnStickyConfig } from './b-report-table.js';