Deferred context added

components/doc/codeeditor/services.js

@@ -9726,7 +9726,7 @@ const services = {
                         {
                             key: '7-1',
                             data: {
-                                name: 'primeng.png',
+                                name: 'primevue.png',
                                 size: '30kb',
                                 type: 'Picture'
                             }

doc/galleria/AdvancedDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Advanced Galleria implementation with a custom UI.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria
                 ref="galleria"
@@ -48,6 +49,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
 </template>
 
@@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
             this.bindDocumentListeners();
         },
-    methods: {
         toggleAutoSlide() {
             this.isAutoPlay = !this.isAutoPlay;
         },

doc/galleria/AutoPlayDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -133,8 +135,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/BasicDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -130,8 +132,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/CaptionDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                 <template #item="slotProps">
@@ -16,6 +17,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -146,8 +148,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/ControlledDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="mb-3">
                 <Button icon="pi pi-minus" @click="prev" />
@@ -17,6 +18,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -168,10 +170,10 @@ const prev = () => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         },
-    methods: {
         next() {
             this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1;
         },

doc/galleria/ResponsiveDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Settings per screen size is defined via the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
                 <template #item="slotProps">
@@ -14,6 +15,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -138,8 +140,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/ThumbnailDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails represent a smaller version of the actual content.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex flex-wrap gap-3 mb-5">
                 <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -20,6 +21,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -213,8 +215,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/fullscreen/CustomContentDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card flex justify-content-center">
             <Galleria
                 v-model:activeIndex="activeIndex"
@@ -29,6 +30,7 @@
                 </div>
             </div>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -191,10 +193,10 @@ const imageClick = (index) => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         },
-    methods: {
         imageClick(index) {
             this.activeIndex = index;
             this.displayCustom = true;

doc/galleria/fullscreen/WithThumbnailsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Full screen mode is enabled by adding <i>fullScreen</i> property and and visibility is controlled with a binding to <i>visible</i> property.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card flex justify-content-center">
             <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
                 <template #item="slotProps">
@@ -14,6 +15,7 @@
 
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/fullscreen/WithoutThumbnailsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails can also be hidden in full screen mode.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card flex justify-content-center">
             <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
                 <template #item="slotProps">
@@ -14,6 +15,7 @@
 
             <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -165,8 +167,10 @@ onMounted(() => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/indicator/ClickEventDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
                 <template #item="slotProps">
@@ -9,6 +10,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/indicator/HoverEventDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
                 <template #item="slotProps">
@@ -9,6 +10,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -91,8 +93,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/indicator/PositionDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex flex-wrap gap-3 mb-5">
                 <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -19,6 +20,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -181,8 +183,10 @@ const positionOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/indicator/TemplateDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -103,8 +105,10 @@ const images = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/navigator/HoverDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -130,8 +132,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/navigator/IndicatorsDoc.vue

@@ -2,8 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators and Indicators can be combined as well.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
+            <Galleria
+                :value="images"
+                :responsiveOptions="responsiveOptions"
+                :numVisible="5"
+                :circular="true"
+                containerStyle="max-width: 640px"
+                :showItemNavigators="true"
+                :showThumbnails="false"
+                :showItemNavigatorsOnHover="true"
+                :showIndicators="true"
+            >
                 <template #item="slotProps">
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
@@ -12,6 +23,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -145,8 +157,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/navigator/ItemThumbnailsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -133,8 +135,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Simple example with indicators only.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
                 <template #item="slotProps">
@@ -12,6 +13,7 @@
                 </template>
             </Galleria>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
 
@@ -145,8 +147,10 @@ const responsiveOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             PhotoService.getImages().then((data) => (this.images = data));
         }
+    }
 };
 </script>

doc/treetable/BasicDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>TreeTable requires a collection of <i>TreeNode</i> instances as a <i>value</i> and <i>Column</i> components as children for the representation. The column with the element to toggle a node should have <i>expander</i> enabled.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/ColumnToggleDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes">
                 <template #header>
@@ -13,6 +14,7 @@
                 <Column v-for="col of selectedColumns" :key="col.field" :field="col.field" :header="col.header"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -155,10 +157,10 @@ const onToggle = (val) => {
 
         this.selectedColumns = this.columns;
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         },
-    methods: {
         onToggle(value) {
             this.selectedColumns = this.columns.filter((col) => value.includes(col));
         }

doc/treetable/ControlledDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Expansion state is controlled with <i>expandedKeys</i> property. The <i>expandedKeys</i> should be an object whose keys refer to the node key and values represent the expanded state e.g. <i>&#123;'0-0': true&#125;</i>.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Button @click="toggleApplications" label="Toggle Applications" />
             <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
@@ -10,6 +11,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -131,10 +133,10 @@ const toggleApplications = () => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         },
-    methods: {
         toggleApplications() {
             let _expandedKeys = { ...this.expandedKeys };
 

doc/treetable/DynamicColumnsDoc.vue

@@ -2,11 +2,13 @@
     <DocSectionText v-bind="$attrs">
         <p>Columns can be created programmatically.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes">
                 <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -119,8 +121,10 @@ const columns = ref([
             { field: 'type', header: 'Type' }
         ];
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/FilterDoc.vue

@@ -6,6 +6,7 @@
             support filtering.
         </p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center mb-4">
                 <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
@@ -38,6 +39,7 @@
                 </Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -226,8 +228,10 @@ const filterOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/LazyLoadDoc.vue

@@ -10,6 +10,7 @@
         </p>
         <p>In addition, only the root elements should be loaded, children can be loaded on demand using <i>nodeExpand</i> callback.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
                 <Column field="name" header="Name" expander></Column>
@@ -17,6 +18,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" />
 </template>
 
@@ -237,7 +239,8 @@ const loadNodes = (first, rows) => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             this.loading = true;
 
             setTimeout(() => {
@@ -246,7 +249,7 @@ const loadNodes = (first, rows) => {
                 this.totalRecords = 1000;
             }, 1000);
         },
-    methods: {
+
         onExpand(node) {
             if (!node.children) {
                 this.loading = true;

doc/treetable/ResponsiveDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A horizontal scrollbar is displayed when parent of the table gets smaller than the defined <i>minWidth</i>.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/SizeDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center mb-4">
                 <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
@@ -12,6 +13,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -127,8 +129,10 @@ const sizeOptions = ref([
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/TemplateDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Custom content at <i>header</i> and <i>footer</i> slots are supported via templating.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes">
                 <template #header>
@@ -25,6 +26,7 @@
                 </template>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -170,8 +172,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/paginator/PaginatorBasicDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" />
 </template>
 
@@ -121,7 +123,9 @@ nodes.value = files;
             }
         };
     },
-    mounted() {
+    mounted() {},
+    methods: {
+        loadDemoData() {
             let files = [];
 
             for (let i = 0; i < 50; i++) {
@@ -149,5 +153,6 @@ nodes.value = files;
 
             this.nodes = files;
         }
+    }
 };
 </script>

doc/treetable/paginator/PaginatorTemplateDoc.vue

@@ -5,6 +5,7 @@
             <PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
         </p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable
                 :value="nodes"
@@ -25,6 +26,7 @@
                 </template>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" />
 </template>
 
@@ -161,7 +163,8 @@ nodes.value = files;
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             let files = [];
 
             for (let i = 0; i < 50; i++) {
@@ -189,5 +192,6 @@ nodes.value = files;
 
             this.nodes = files;
         }
+    }
 };
 </script>

doc/treetable/resize/ExpandModeDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/resize/FitModeDoc.vue

@@ -5,6 +5,7 @@
             that does not change the overall table width.
         </p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
                 <Column field="name" header="Name" expander></Column>
@@ -12,6 +13,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -109,8 +111,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/scroll/FlexibleScrollDoc.vue

@@ -5,6 +5,7 @@
             adjusts itself according to the size changes.
         </p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
@@ -19,6 +20,7 @@
                 </template>
             </Dialog>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -110,8 +112,10 @@ const dialogVisible = ref(false);
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/scroll/FrozenColumnsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
                 <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
@@ -12,6 +13,7 @@
                 <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -118,8 +120,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/scroll/HorizontalScrollDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
                 <Column field="name" header="Name" expander style="width: 250px"></Column>
@@ -12,6 +13,7 @@
                 <Column field="size" header="Size 3" style="width: 250px"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -118,8 +120,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/scroll/VerticalScrollDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" scrollable scrollHeight="270px">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/selection/CheckboxRowSelectionDoc.vue

@@ -6,6 +6,7 @@
         </p>
     </DocSectionText>
     <DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
                 <Column field="name" header="Name" expander></Column>
@@ -13,6 +14,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -123,8 +125,10 @@ const selectedKey = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/selection/MultipleRowsSelectionDoc.vue

@@ -6,6 +6,7 @@
         </p>
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
                 <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -17,6 +18,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -130,8 +132,10 @@ const metaKey = ref(true);
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/selection/RowSelectionEventsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>TreeTable provides <i>nodeSelect</i> and <i>nodeUnselect</i> events to listen selection events.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false">
                 <Column field="name" header="Name" expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -130,10 +132,10 @@ const onNodeUnselect = (node) => {
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         },
-    methods: {
         onNodeSelect(node) {
             this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 });
         },

doc/treetable/selection/SingleRowSelectionDoc.vue

@@ -6,6 +6,7 @@
             setting it to false.
         </p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <div class="flex justify-content-center align-items-center mb-4 gap-2">
                 <InputSwitch v-model="metaKey" inputId="input-metakey" />
@@ -17,6 +18,7 @@
                 <Column field="type" header="Type"></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -130,8 +132,10 @@ const metaKey = ref(true);
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/sort/MultipleColumnsDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" sortMode="multiple">
                 <Column field="name" header="Name" sortable expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type" sortable></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/sort/RemovableSortDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>removableSort</i> is present, the third click removes the sorting from the column.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes" sortMode="multiple" removableSort>
                 <Column field="name" header="Name" sortable expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type" sortable></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

doc/treetable/sort/SingleColumnDoc.vue

@@ -2,6 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Sorting on a column is enabled by adding the <i>sortable</i> property.</p>
     </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
         <div class="card">
             <TreeTable :value="nodes">
                 <Column field="name" header="Name" sortable expander></Column>
@@ -9,6 +10,7 @@
                 <Column field="type" header="Type" sortable></Column>
             </TreeTable>
         </div>
+    </DeferredDemo>
     <DocSectionCode :code="code" :service="['NodeService']" />
 </template>
 
@@ -106,8 +108,10 @@ const nodes = ref();
             }
         };
     },
-    mounted() {
+    methods: {
+        loadDemoData() {
             NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
         }
+    }
 };
 </script>

service/NodeService.js

@@ -377,7 +377,7 @@ export const NodeService = {
                     {
                         key: '7-1',
                         data: {
-                            name: 'primeng.png',
+                            name: 'primevue.png',
                             size: '30kb',
                             type: 'Picture'
                         }