fixed table style

projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.html

@@ -1,33 +1,9 @@
-<div class="table-responsive">
-  <table [id]="id" class="table table-striped table-hover table-bordered">
-
-    <thead>
-      <tr>
-        <ng-container *ngFor="let property of _configuration; let c = index">
-          <th *ngIf="!property.isHidden(undefined, mode, true)">
-            {{ property.getLabel(undefined, mode) }}
-          </th>
-        </ng-container>
-      </tr>
-    </thead>
-
-    <tbody *ngIf="data?.length">
-
-      <ng-container *ngFor="let row of data; let i = index">
-        <tr>
-
-          <ng-container *ngFor="let property of _configuration; let c = index">
-            <td *ngIf="!property.isHidden(undefined, mode, true)">
-              {{ property.getDisplayValue(row, mode, true) }}
-            </td>
-          </ng-container>
-
-        </tr>
-      </ng-container>
-
-    </tbody>
-
-  </table>
-</div>
-
-Work in progress...
+<pe-table [addResponsiveContainer]="true"
+          responsiveContainerClass="property-table-container"
+          [isStriped]="true"
+          [isBordered]="true"
+          [isHover]="true"
+          tableClass="property-table"
+          [header]="_tableHeader"
+          [data]="_tableData">
+</pe-table>

projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.scss

@@ -0,0 +1,16 @@
+pe-property-table > pe-table > .property-table-container > .property-table {
+
+  & > thead  {
+    & > tr > .property-table-header-cell {
+      white-space: pre;
+      vertical-align: top;
+    }
+  }
+
+  & > tbody {
+    & > tr > .property-table-data-cell {
+      white-space: pre;
+    }
+  }
+
+}

projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.ts

@@ -1,7 +1,17 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
-import { PropertiesConfiguration } from '../property-configuration';
+import { PropertyConfiguration, PropertiesConfiguration } from '../property-configuration';
 import { PropertyEditorMode } from '../property-editor-mode';
+import { TableData, TableHeader, TableRow, TableHeaderRow } from '../table-configuration';
+
+
+export type PropertyTableColumn = {
+  property: PropertyConfiguration,
+  parent: PropertyTableColumn | undefined,
+  isGroup: boolean,
+  children: PropertyTableColumn[],
+};
+
 
 /**
  * A component displaying configured properties of multiple `data` objects as table.
@@ -11,8 +21,9 @@ import { PropertyEditorMode } from '../property-editor-mode';
   selector: 'pe-property-table',
   templateUrl: './property-table.component.html',
   styleUrls: ['./property-table.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
-export class PropertyTableComponent implements OnChanges {
+export class PropertyTableComponent implements OnInit, OnChanges {
 
   /** ID attribute of the container element. */
   @Input() public id: string = PEGlobalFunctions.generateRandomId();
@@ -24,6 +35,20 @@ export class PropertyTableComponent implements OnChanges {
   @Input() public configuration: PropertiesConfiguration | undefined = undefined;
 
   protected _configuration: PropertiesConfiguration = [];
+  /** Maximum number of header rows based on the group depth of `_configuration`. */
+  protected _headerRowCount: number = 1;
+  /**
+   * All currently visible columns in the currently visible order including it's
+   * property configurations and parent columns.
+   * Group columns are not included in this array but are reachable via each columns
+   * parent column property.
+   */
+  protected _columns: PropertyTableColumn[] = [];
+
+  /** Table header definition used by the <pe-table> component. */
+  protected _tableHeader: TableHeader = [];
+  /** Table data definition used by the <pe-table> component. */
+  protected _tableData: TableData = [];
 
   /**
    * Display these objects in the table.
@@ -36,40 +61,189 @@ export class PropertyTableComponent implements OnChanges {
   /** If true, the properties displayed in the table are editable by the user. */
   @Input() public editable: boolean = false;
 
+  /** This property is set to true by `ngOnInit()`. */
+  private isInitialized: boolean = false;
+
+  public constructor() {
+  }
+
+  public ngOnInit(): void {
+    this.isInitialized = true;
+
+    this.prepareConfiguration();
+    this.generateTableData();
+  }
+
   public ngOnChanges(changes: SimpleChanges): void {
+    // Don't generate table data for each property change before initialization is complete.
+    // See ngOnInit().
+    if (!this.isInitialized) return;
+
     if (changes.hasOwnProperty('configuration')) {
-      this.generateConfiguration();
+      this.prepareConfiguration();
+    }
+    if (changes.hasOwnProperty('configuration') ||
+      changes.hasOwnProperty('data')) {
+      this.generateTableData();
     }
   }
 
   /**
-   * Prepare the given `PropertiesConfiguration` for being used in the template.
+   * Prepares the given `configuration`.
    */
-  private generateConfiguration(): void {
-    // Get properties configuration
-    let configuration: PropertiesConfiguration = this.configuration || [];
-
-    // Join items from disabled groups
-    let modifiedConfiguration: PropertiesConfiguration = [];
-    for (let item of configuration) {
-      if (item.hasGroup &&
-        item.getDisableGroup(undefined, 'table')) {
-        modifiedConfiguration.push(...item.flatGroup);
-      } else {
+  private prepareConfiguration(): void {
+    function helper(configuration: PropertiesConfiguration | undefined, currentGroupDepth: number): {
+      configuration: PropertiesConfiguration,
+      maxGroupDepth: number,
+    } {
+      configuration = configuration || [];
+      let maxGroupDepth: number = currentGroupDepth;
+
+      // Join items from disabled groups
+      let modifiedConfiguration: PropertiesConfiguration = [];
+      for (let item of configuration) {
+        if (item.hasGroup) {
+          if (item.getDisableGroup(undefined, 'table')) {
+            modifiedConfiguration.push(...item.flatGroup);
+          } else {
+            const groupResult = helper(item.flatGroup, currentGroupDepth + 1);
+            item.group = [groupResult.configuration];
+            modifiedConfiguration.push(item);
+            if (groupResult.maxGroupDepth > maxGroupDepth)
+              maxGroupDepth = groupResult.maxGroupDepth;
+          }
+        } else {
+          modifiedConfiguration.push(item);
+        }
+      }
+      configuration = modifiedConfiguration;
+
+      // Remove all separators and hidden properties.
+      modifiedConfiguration = [];
+      for (let item of configuration) {
+        // Remove separator
+        if (item.separator) continue;
+        // Remove hidden row
+        if (item.isHidden(undefined, 'table', true)) continue;
         modifiedConfiguration.push(item);
       }
+      configuration = modifiedConfiguration;
+
+      return {
+        configuration: configuration,
+        maxGroupDepth: maxGroupDepth,
+      };
+    }
+
+    const result = helper(this.configuration || [], 1);
+    this._configuration = result.configuration;
+    this._headerRowCount = result.maxGroupDepth;
+  }
+
+  /**
+   * Generates the displayed table data from the given `configuration` and `data`.
+   */
+  private generateTableData(): void {
+    if (!this._configuration?.length) {
+      this._tableHeader = [[]];
+      this._tableData = [];
+    }
+
+    // Initialize new table data
+    const tableHeader: TableHeader = [];
+    const tableData: TableData = [];
+    // Initialize table header rows
+    for (let i = 0; i < this._headerRowCount; i++) {
+      tableHeader.push([]);
+    }
+
+    const columns: PropertyTableColumn[] = []
+
+    /**
+     * 
+     * @param tableHeaderRowIndex The index of the table header row into which the property column should be added.
+     * @param property The Property definition from which a table header cell should be generated.
+     * @returns The total number of added columns (1 without property groups).
+     */
+    function handleHeaderProperty(property: PropertyConfiguration,
+                                  tableHeaderRowIndex: number = 0,
+                                  parentColumn: PropertyTableColumn | undefined = undefined): {
+      column: PropertyTableColumn,
+      totalAddedColumns: number,
+    } {
+      const column: PropertyTableColumn = {
+        property,
+        parent: parentColumn,
+        isGroup: false,
+        children: [],
+      }
+
+      if (property.hasGroup) {
+        column.isGroup = true;
+
+        // Generate group columns
+        let columnCount: number = 0;
+        const groupProperties: PropertiesConfiguration = property.group![0];
+        if (tableHeader.length <= tableHeaderRowIndex + 1) tableHeader.push([]);
+        for (const property of groupProperties) {
+          const result = handleHeaderProperty(property, tableHeaderRowIndex + 1);
+          column.children.push(result.column);
+          columnCount += result.totalAddedColumns;
+        }
+
+        if (columnCount > 0) {
+          tableHeader[tableHeaderRowIndex].push({
+            content: property.getLabel(undefined, 'table'),
+            class: 'property-table-header-cell',
+            colspan: columnCount,
+          });
+        }
+        return {
+          column: column,
+          totalAddedColumns: columnCount,
+        };
+
+      } else {
+
+        // Generate single column
+        columns.push(column);
+        tableHeader[tableHeaderRowIndex].push({
+          content: property.getLabel(undefined, 'table'),
+          class: 'property-table-header-cell',
+          rowspan: tableHeader.length - tableHeaderRowIndex,
+        });
+        return {
+          column: column,
+          totalAddedColumns: 1,
+        };
+
+      }
     }
-    configuration = modifiedConfiguration;
 
-    // Remove all separators.
-    modifiedConfiguration = [];
-    for (let item of configuration) {
-      if (item.separator) continue;
-      modifiedConfiguration.push(item);
+    // Generate header:
+    for (const property of this._configuration) {
+      handleHeaderProperty(property);
+    }
+
+    // Generate body:
+    for (const dataRow of this.data || []) {
+      // Initialize new table row
+      const tableRow: TableRow = [];
+      // Generat cells:
+      for (const column of columns) {
+        tableRow.push({
+          content: column.property.getDisplayValue(dataRow, 'table', true),
+          class: 'property-table-data-cell',
+        });
+      }
+      // Add new table row
+      tableData.push(tableRow);
     }
-    configuration = modifiedConfiguration;
 
-    this._configuration = configuration;
+    // Assign new table data
+    this._tableHeader = tableHeader;
+    this._tableData = tableData;
+    this._columns = columns;
   }
 
 }

projects/ngx-property-editor/src/lib/components/property-views/property-view/property-view.component.ts

@@ -63,7 +63,7 @@ export class PropertyViewComponent implements OnInit, OnChanges {
     }).flat(1);
 
     if (!this.data || !config?.length) {
-      this.tableData = [[{ content: 'Keine Daten', style: 'data' }]];
+      this.tableData = [[{ content: 'Keine Daten', elementType: 'data' }]];
       return;
     }
 
@@ -96,11 +96,12 @@ export class PropertyViewComponent implements OnInit, OnChanges {
         tableData.push([
           {
             content: label,
-            style: 'header',
+            elementType: 'header',
+            style: 'width: 1%;',
           },
           {
             content: propertyValue,
-            style: 'data',
+            elementType: 'data',
             routerLink: routerLink,
             routerLinkIsExternal: routerLinkIsExternal,
             routerLinkTooltip: routerLinkTooltip,