rendering content pages

public/js/components/Cis/Cms/Content.js

@@ -1,3 +1,5 @@
+import raum_contentmittitel from './Content_types/Raum_contentmittitel.js'
+
 
 export default {
   props:{
@@ -19,6 +21,9 @@ export default {
     }
 
 
+  },
+  components:{
+    raum_contentmittitel,
   },
   data() {
     return {
@@ -29,12 +34,14 @@ export default {
   created() {
     console.log("this is the api", this.$fhcApi);
     this.$fhcApi.factory.cms.content(this.content_id,this.version, this.sprache, this.sichtbar).then(res =>{
-        this.content = res.data;
+        this.content = res.data.content;
+        this.content_type = res.data.type;
     });
   },
   template: /*html*/ `
     <!-- div that contains the content -->
-    <div v-if="content" v-html="content"></div>
+    <component :is="content_type" v-if="content" :content="content" />
     <p v-else>No content is available to display</p>
+
     `,
 };

public/js/components/Cis/Cms/Content_types/Raum_contentmittitel.js

@@ -0,0 +1,33 @@
+
+export default {
+    props:{
+      content:{
+          type:String,
+          required:true,
+      },
+    },
+    mounted(){
+        let tables = document.getElementsByClassName("tablesorter");
+        
+        for(let table of tables){
+            new Tabulator(table, {
+                layout:"fitDataStretch",
+               
+                columnDefaults:{
+                    formatter:"html",
+                    resizable:false,
+                    minWidth: "100px",
+                }
+            })
+
+            table.classList.add("mx-auto");
+            table.style.width="30em"; 
+        }
+    },
+    template: /*html*/ `
+      <!-- div that contains the content -->
+      <div v-html="content" v-if="content" :content="content" />
+      <p v-else>Content was not found</p>
+      `,
+  };
+