diff --git a/components/datatable/DataTable.d.ts b/components/datatable/DataTable.d.ts
index 22a01aacd..3a17b43a5 100755
--- a/components/datatable/DataTable.d.ts
+++ b/components/datatable/DataTable.d.ts
@@ -171,7 +171,6 @@ export interface DataTableFilterEvent extends DataTableSortEvent {
 
 /**
  * Custom row click event.
- * @event
  */
 export interface DataTableRowClickEvent {
     /**
@@ -204,7 +203,7 @@ export interface DataTableRowContextMenuEvent extends DataTableRowClickEvent {}
 
 /**
  * Custom row select event.
- * @event
+ *
  */
 export interface DataTableRowSelectEvent {
     /**
@@ -234,7 +233,7 @@ export interface DataTableRowUnselectEvent extends DataTableRowSelectEvent {}
 
 /**
  * Custom row select all event.
- * @event
+ *
  */
 export interface DataTableRowSelectAllEvent {
     /**
@@ -249,7 +248,7 @@ export interface DataTableRowSelectAllEvent {
 
 /**
  * Custom row unselect all event.
- * @event
+ *
  */
 export interface DataTableRowUnselectAllEvent {
     /**
@@ -260,7 +259,7 @@ export interface DataTableRowUnselectAllEvent {
 
 /**
  * Custom row select all change event.
- * @event
+ *
  */
 export interface DataTableSelectAllChangeEvent {
     /**
@@ -275,7 +274,7 @@ export interface DataTableSelectAllChangeEvent {
 
 /**
  * Custom row resize end event.
- * @event
+ *
  */
 export interface DataTableColumnResizeEndEvent {
     /**
@@ -290,7 +289,7 @@ export interface DataTableColumnResizeEndEvent {
 
 /**
  * Custom row column reorder event.
- * @event
+ *
  */
 export interface DataTableColumnReorderEvent {
     /**
@@ -309,7 +308,7 @@ export interface DataTableColumnReorderEvent {
 
 /**
  * Custom row reorder event.
- * @event
+ *
  */
 export interface DataTableRowReorderEvent {
     /**
@@ -332,7 +331,7 @@ export interface DataTableRowReorderEvent {
 
 /**
  * Custom row expand event.
- * @event
+ *
  */
 export interface DataTableRowExpandEvent {
     /**
@@ -354,7 +353,7 @@ export interface DataTableRowCollapseEvent extends DataTableRowExpandEvent {}
 
 /**
  * Custom cell edit init event.
- * @event
+ *
  */
 export interface DataTableCellEditInitEvent {
     /**
@@ -378,14 +377,13 @@ export interface DataTableCellEditInitEvent {
 /**
  * Custom cell edit cancel event.
  * @see cell-edit-init
- * @todo
  * @extends DataTableCellEditInitEvent
  */
 export interface DataTableCellEditCancelEvent extends DataTableCellEditInitEvent {}
 
 /**
  * Custom cell edit complete event.
- * @event
+ *
  */
 export interface DataTableCellEditCompleteEvent {
     /**
@@ -424,7 +422,7 @@ export interface DataTableCellEditCompleteEvent {
 
 /**
  * Custom row edit complete event.
- * @event
+ *
  */
 export interface DataTableRowEditInitEvent {
     /**
@@ -465,7 +463,7 @@ export interface DataTableRowEditCancelEvent extends DataTableRowEditInitEvent {
 
 /**
  * Custom state event.
- * @event
+ *
  */
 export interface DataTableStateEvent {
     /**
diff --git a/layouts/doc/DocApiSection.vue b/layouts/doc/DocApiSection.vue
index 4d0945bd2..caf6c5730 100644
--- a/layouts/doc/DocApiSection.vue
+++ b/layouts/doc/DocApiSection.vue
@@ -4,7 +4,7 @@
             <h1>{{ header }} API</h1>
             <p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p>
         </div>
-        <DocSections :docs="docs" />
+        <DocSections :docs="docs" :header="header" />
     </div>
     <DocSectionNav :docs="docs" />
 </template>
@@ -152,15 +152,18 @@ export default {
             const data = [];
 
             for (const emit of emits) {
-                const parameters = emit.parameters.reduce((acc, param) => {
+                /*    const parameters = emit.parameters.reduce((acc, param) => {
                     acc.push(`${param.name}: ${param.type}`);
 
                     return acc;
-                }, []);
+                }, []); */
 
                 data.push({
                     name: emit.name,
-                    parameters: parameters.join(', '),
+                    parameters: {
+                        name: emit.parameters[0]?.name,
+                        type: emit.parameters[0]?.type
+                    },
                     returnType: emit.returnType,
                     description: emit.description
                 });
diff --git a/layouts/doc/DocApiTable.vue b/layouts/doc/DocApiTable.vue
index d05f0a02b..f30dfd7f1 100644
--- a/layouts/doc/DocApiTable.vue
+++ b/layouts/doc/DocApiTable.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="pt-3">
         <div :id="id">
-            <DocSectionText :id="id" :label="label">
+            <DocSectionText :id="id" :label="label" :level="componentLevel">
                 {{ description || null }}
                 <p v-if="relatedProp" class="inline-block">
                     See <i>{{ relatedProp }}</i>
@@ -30,8 +30,22 @@
                                         <i class="pi pi-link"></i>
                                     </NuxtLink>
                                 </span>
+                                <template v-else-if="k === 'type'">
+                                    <template v-for="(value, i) in getType(v)" :key="value">
+                                        {{ i !== 0 ? ' |' : '' }}
+                                        <NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
+                                        <span v-else> {{ value }} </span>
+                                    </template>
+                                </template>
 
-                                <NuxtLink v-else-if="isLinkType(k, v)" :to="setLinkPath(v)" class="doc-option-link"> {{ v }} </NuxtLink>
+                                <template v-else-if="k === 'parameters'">
+                                    <span v-if="v.name"> {{ v.name }} : </span>
+                                    <template v-for="(value, i) in getType(v.type)" :key="value">
+                                        {{ i !== 0 ? ' |' : '' }}
+                                        <NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-link"> {{ value }} </NuxtLink>
+                                        <span v-else> {{ value }} </span>
+                                    </template>
+                                </template>
 
                                 <span v-else :id="id + '.' + v">
                                     {{ v }}
@@ -45,7 +59,7 @@
 
         <template v-if="data[0].data && data[0].data.length > 0">
             <template v-for="childData in data" :key="childData">
-                <DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" />
+                <DocApiTable :id="childData.id" :data="childData.data" :label="childData.label" :description="childData.description" :relatedProp="childData.relatedProp" :level="3" />
             </template>
         </template>
     </section>
@@ -68,21 +82,59 @@ export default {
         },
         relatedProp: {
             type: String
+        },
+        level: {
+            type: Number,
+            default: 1
+        },
+        header: {
+            type: String,
+            default: null
         }
     },
     methods: {
-        isLinkType(key, value) {
-            const primitiveTypes = ['string', 'number', 'boolean', 'object', 'array', 'function', 'symbol', 'null', 'undefined', 'any', 'Event'];
+        getType(value) {
+            const newValue = value?.split('|').map((item) => {
+                return item
+                    .replace(/"/g, '')
+                    .replace(/(\[|\]|<|>).*$/gm, '')
+                    .trim();
+            });
 
-            return key === 'type' && !primitiveTypes.includes(value);
+            return newValue;
+        },
+
+        getParameters(value) {
+            const newValue = value.split(':').map((item) => {
+                return item
+                    .replace(/"/g, '')
+                    .replace(/(\[|\]|<|>).*$/gm, '')
+                    .trim();
+            });
+
+            return this.getType(newValue[1]);
+        },
+        isLinkType(value) {
+            return value.includes(this.header);
         },
         setLinkPath(value) {
             const currentRoute = this.$router.currentRoute.value.name;
 
-            const definationType = value.includes('Type') ? 'types' : 'interfaces';
+            const definationType = value.includes('Type') ? 'types' : value.includes('Event') ? 'events' : 'interfaces';
 
             return `/${currentRoute}/#api.${currentRoute}.${definationType}.${value}`;
         }
+    },
+    computed: {
+        componentLevel() {
+            if (this.label === 'Interfaces' || this.label === 'Events') {
+                return 2;
+            } else if (this.level === 3) {
+                return 3;
+            }
+
+            return this.data[0].data ? 1 : 2;
+        }
     }
 };
 </script>
diff --git a/layouts/doc/DocSectionText.vue b/layouts/doc/DocSectionText.vue
index 1dbd16e30..3e49b2780 100644
--- a/layouts/doc/DocSectionText.vue
+++ b/layouts/doc/DocSectionText.vue
@@ -1,5 +1,5 @@
 <template>
-    <component :is="$attrs.level === 2 ? 'h3' : 'h2'" class="doc-section-label">
+    <component :is="headerTag" class="doc-section-label">
         {{ $attrs.label }}
         <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
     </component>
@@ -32,6 +32,15 @@ export default {
             }
 
             return path;
+        },
+        headerTag() {
+            if (this.$attrs.level === 3) {
+                return 'h4';
+            } else if (this.$attrs.level === 2) {
+                return 'h3';
+            }
+
+            return 'h2';
         }
     }
 };
diff --git a/layouts/doc/DocSections.vue b/layouts/doc/DocSections.vue
index f9e123bf1..88f263eb8 100644
--- a/layouts/doc/DocSections.vue
+++ b/layouts/doc/DocSections.vue
@@ -9,7 +9,7 @@
                 </div>
                 <template v-for="comp of doc.children" :key="comp.label">
                     {{ comp.relatedProp }}
-                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
+                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" :header="$attrs.header" />
                 </template>
             </template>