From 37ceb5d19f796aac9bcb3921a128d98381bfa331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:58:55 +0300
Subject: [PATCH] browser source added

---
 src/views/datatable/DataTableReorderDemo.vue | 60 ++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 23024207a..903fa4f2b 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -128,6 +128,66 @@ export default {
     }
 }
 <\\/script>                  
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="./ProductService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
+            <p-datatable :value="products" :reorderable-columns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder" responsive-layout="scroll">
+                <p-column :row-reorder="true" header-style="width: 3rem" :reorderable-column="false"></p-column>
+                <p-column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></p-column>
+            </p-datatable>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    productService.value.getProductsSmall().then(data => products.value = data);
+                }) 
+
+                const toast = useToast();
+                const columns = ref([
+                    {field: 'code', header: 'Code'},
+                    {field: 'name', header: 'Name'},
+                    {field: 'category', header: 'Category'},
+                    {field: 'quantity', header: 'Quantity'}
+                ]);
+                const products = ref();
+                const productService = ref(new ProductService());
+
+                const onColReorder = () => {
+                    toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
+                };
+                const onRowReorder = (event) => {
+                    products.value = event.value;
+                    toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
+                };
+
+                return { columns, products, onColReorder, onRowReorder }
+            },
+            components: {
+                "p-datatable": primevue.datatable,
+                "p-column": primevue.column,
+                "p-toast": primevue.toast
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>                  
 `
                 }
             }