[ACS-5613] process preview on popup displaying the details of selected running process on the popup (#8933)

* ACS-5613 Renamed name column header for process details

* ACS-5613 Change order of columns based on order property

* ACS-5613 Added some unit test

* ACS-5613 Added unit tests

* ACS-5613 Added documentation

* ACS-5613 Fixed e2e

* ACS-5613 Fixed e2e

* ACS-5613 Fixed e2e

* ACS-5613 Fixed e2e

* ACS-5613 Fixed e2e

lib/core/src/lib/datatable/data-column/data-column.component.ts

@@ -98,6 +98,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     sortingKey: string;
 
+    /** Sets position of column. **/
+    @Input()
+    order?: number;
+
     /** Data column header template */
     header?: TemplateRef<any>;
 

lib/core/src/lib/datatable/data/data-column.model.ts

@@ -49,4 +49,5 @@ export interface DataColumn<T = unknown> {
     isHidden?: boolean;
     width?: number;
     customData?: T;
+    order?: number;
 }

lib/core/src/lib/datatable/data/data-table.schema.ts

@@ -82,6 +82,8 @@ export abstract class DataTableSchema<T = unknown> {
 
         if (customSchemaColumns.length === 0) {
             customSchemaColumns = this.getDefaultLayoutPreset();
+        } else {
+            customSchemaColumns.sort((col1, col2) => (col1.order || 0) - (col2.order || 0));
         }
 
         return customSchemaColumns;

lib/core/src/lib/datatable/data/object-datacolumn.model.ts

@@ -37,6 +37,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     isHidden: boolean;
     customData?: T;
     width?: number;
+    order?: number;
 
     constructor(input: any) {
         this.id = input.id ?? '';
@@ -56,5 +57,6 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
         this.isHidden = input.isHidden ?? false;
         this.customData = input.customData;
         this.width = input.width;
+        this.order = input.order;
     }
 }