Sample data added

doc/datatable/ColumnToggleDoc.vue

@@ -119,7 +119,21 @@ const onToggle = (val) => {
 };
 
 <\/script>
-`
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/ContextMenuDoc.vue

@@ -153,7 +153,22 @@ const formatCurrency = (value) => {
 };
 
 <\/script>
-`
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/ExportDoc.vue

@@ -106,7 +106,22 @@ const exportCSV = () => {
     dt.value.exportCSV();
 };
 <\/script>
-`
+`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/LazyLoadDoc.vue

@@ -357,7 +357,27 @@ const onRowUnselect = () => {
 };
 
 <\/script>
-`
+`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
             }
         };
     },

doc/datatable/ReorderDoc.vue

@@ -111,7 +111,21 @@ const onRowReorder = (event) => {
 };
 
 <\/script>                  
-`
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/colresize/ExpandModeDoc.vue

@@ -75,7 +75,21 @@ onMounted(() => {
 });
 
 const products = ref();
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/colresize/FitModeDoc.vue

@@ -78,7 +78,21 @@ onMounted(() => {
 });
 
 const products = ref();
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/edit/FilterSortEditDoc.vue

@@ -189,7 +189,21 @@ const onCellEditComplete = (event) => {
     padding-top: 0;
     padding-bottom: 0;
 }
-</style>`
+</style>`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/filter/AdvancedFilterDoc.vue

@@ -652,7 +652,27 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
             }
         };
     },

doc/datatable/samples/CustomersDoc.vue

@@ -598,7 +598,27 @@ const getSeverity = (status) => {
             return null;
     }
 };
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...`
             }
         };
     },

doc/datatable/samples/ProductsDoc.vue

@@ -189,7 +189,7 @@ export default {
                 basic: `
 <Toolbar class="mb-4">
     <template #start>
-        <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+        <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
         <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
     </template>
     <template #end>
@@ -247,7 +247,7 @@ export default {
         <div class="card">
             <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
@@ -535,7 +535,7 @@ export default {
         <div class="card">
             <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
@@ -810,7 +810,21 @@ const getStatusLabel = (status) => {
 };
 
 <\/script>
-`
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
             }
         };
     },

doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue

@@ -265,7 +265,15 @@ const loadCarsLazy = (event) => {
         lazyLoading.value = false;
     }, Math.random() * 1000 + 250);
 };
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}`
             }
         };
     },

doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue

@@ -83,7 +83,15 @@ const cars = ref();
 onMounted(() => {
     cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}`
             }
         };
     },