Added layout element containers

sources/knockout/core/elements-container.html

@@ -0,0 +1,4 @@
+<!-- ko foreach: $data -->
+  <!-- ko component: { name: component, params: data } -->
+  <!-- /ko -->
+<!-- /ko --> 

sources/knockout/core/elements-container.ts

@@ -0,0 +1,12 @@
+import * as ko from "knockout";
+
+export var elementsContainerTemplate = require("./elements-container.html").default;
+
+ko.components.register("table4js-elements", {
+  viewModel: {
+    createViewModel: function (params, componentInfo) {
+      return params.elements || [];
+    }
+  },
+  template: elementsContainerTemplate
+});

sources/knockout/index.ts

@@ -16,6 +16,7 @@ export * from "./table/filter-select";
 export * from "./core/action";
 export * from "./core/actions";
 export * from "./core/dropdown-actions";
+export * from "./core/elements-container";
 export * from "./core/icon";
 
 export * from "./table/cell-editor";

sources/react/core/elements-container.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ILayoutElement } from "../../table";
+import { AbrisComponent } from "../abris-component";
+
+export function ElementsContainer({ elements }: { elements: ILayoutElement[] }) {
+  return (
+    <>
+      {(elements || []).map((element) => {
+          return <AbrisComponent componentName={element.component} componentProps={element.data} />;
+        })}
+    </>
+  );
+}

sources/react/index.ts

@@ -15,6 +15,7 @@ export * from "./table/filter-select";
 export * from "./core/action";
 export * from "./core/actions";
 export * from "./core/dropdown-actions";
+export * from "./core/elements-container";
 
 export * from "./table/cell-editor";
 export * from "./table/row-editor";

sources/table/index.ts

@@ -57,6 +57,13 @@ export interface ITablePlugin {
     onSelectionChanged?(): void;
 }
 
+export interface ILayoutElement {
+    name: string;
+    container: string;
+    component: string;
+    data: any;
+}
+
 /**
  * Creates Table class.
  * @param config - table options.
@@ -495,6 +502,26 @@ export class Table extends Base implements IDataProviderOwner {
         return oldOne;
     }
 
+    private layoutElemets: Array<ILayoutElement> = [];
+    public removeLayoutElement(elementName: string): ILayoutElement {
+        let prevElement: ILayoutElement = undefined;
+        for(let i=0; i<this.layoutElemets.length; i++) {
+            if(this.layoutElemets[i].name === elementName) {
+                prevElement = this.layoutElemets.splice(i, 1)[0];
+                break;
+            }
+        }
+        return prevElement;
+    }
+    public addLayoutElement(element: ILayoutElement): ILayoutElement {
+        let prevElement = this.removeLayoutElement(element.name);
+        this.layoutElemets.push(element);
+        return prevElement;        
+    }
+    getLayoutElements = (container?: string) => {
+        return this.layoutElemets.filter(element => element.container === container);
+    }
+
     dispose() {
         this.detach();
     }