From a34b3b4c0f9f649d8061ab2571439b2a7e655b63 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 13 Dec 2023 10:37:31 +0300
Subject: [PATCH] DataTable size demo updates

---
 doc/datatable/SizeDoc.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/doc/datatable/SizeDoc.vue b/doc/datatable/SizeDoc.vue
index f4892e250..0987f7d8f 100644
--- a/doc/datatable/SizeDoc.vue
+++ b/doc/datatable/SizeDoc.vue
@@ -6,7 +6,7 @@
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
         </div>
-        <DataTable :value="products" :class="`p-datatable-${size.class}`" tableStyle="min-width: 50rem">
+        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
@@ -23,16 +23,16 @@ export default {
     data() {
         return {
             products: null,
-            size: { label: 'Normal', value: 'normal' },
+            size: { label: 'Normal', value: 'null' },
             sizeOptions: [
-                { label: 'Small', value: 'small', class: 'sm' },
-                { label: 'Normal', value: 'normal' },
-                { label: 'Large', value: 'large', class: 'lg' }
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'null' },
+                { label: 'Large', value: 'large' }
             ],
             code: {
                 basic: `
 <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
-<DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
+<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
     <Column field="code" header="Code"></Column>
     <Column field="name" header="Name"></Column>
     <Column field="category" header="Category"></Column>
@@ -45,7 +45,7 @@ export default {
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
         </div>
-        <DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
+        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
@@ -61,11 +61,11 @@ export default {
     data() {
         return {
             products: null,
-            size: { label: 'Normal', value: 'normal' },
+            size: { label: 'Normal', value: 'null' },
             sizeOptions: [
-                { label: 'Small', value: 'small', class: 'sm' },
-                { label: 'Normal', value: 'normal' },
-                { label: 'Large', value: 'large', class: 'lg' }
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'null' },
+                { label: 'Large', value: 'large' }
             ]
         };
     },
@@ -81,7 +81,7 @@ export default {
         <div class="flex justify-content-center mb-4">
             <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
         </div>
-        <DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
+        <DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
             <Column field="code" header="Code"></Column>
             <Column field="name" header="Name"></Column>
             <Column field="category" header="Category"></Column>
@@ -99,11 +99,11 @@ onMounted(() => {
 });
 
 const products = ref();
-const size = ref({ label: 'Normal', value: 'normal' });
+const size = ref({ label: 'Normal', value: 'null' });
 const sizeOptions = ref([
-    { label: 'Small', value: 'small', class: 'sm' },
-    { label: 'Normal', value: 'normal' },
-    { label: 'Large', value: 'large', class: 'lg' }
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'null' },
+    { label: 'Large', value: 'large' }
 ]);
 
 <\/script>