Basic Layout of Page

lang/id.json

@@ -95,5 +95,6 @@
     "are you want to try again": "are you want to try again",
     "referenceerror: ccount is not defined": "ReferenceError: ccount is not defined",
     "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined",
-    "referenceerror: assignment to undeclared variable acntry": "ReferenceError: assignment to undeclared variable aCntry"
+    "referenceerror: assignment to undeclared variable acntry": "ReferenceError: assignment to undeclared variable aCntry",
+    "referenceerror: _code is not defined": "ReferenceError: _code is not defined"
 }

package.json

@@ -29,6 +29,7 @@
         "sweetalert2": "^11.4.23",
         "vue-google-charts": "^1.1.0",
         "vue-multiselect": "^3.0.0-beta.3",
+        "vue3-easy-data-table": "^1.5.47",
         "vuedraggable": "^4.1.0"
     }
 }

resources/js/Pages/IkeaRoot.vue

@@ -7,6 +7,9 @@ import LogoIkea from '@/assets/Ikea_logo.svg';
 import Multiselect from 'vue-multiselect';
 import { GChart } from 'vue-google-charts';
 import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import EasyTable from "vue3-easy-data-table";
+
+
 import {
   FwbNavbar,
   FwbNavbarCollapse,
@@ -42,7 +45,8 @@ const fetch = async () => {
     ccountry_filter.value.push(...aCntry);
     
     ccountry_list.value = ccountry.value.map((country) => country.country_name);
-
+    var i=1;
+   items.value = ccountry.value.map((country) => { return {"country": country.country_name, "currency": country.currency_code, "id": i++ } });
     console.log("TEST=", ccountry_filter.value, ccountry_list.value);
   } catch (e) {
     const response = await Swal.fire({
@@ -56,6 +60,14 @@ const fetch = async () => {
     response.isConfirmed && fetch()
   }
 }
+
+const headers = ref([
+        { text: "Id", value: "id", sortable: true },
+        { text: "Country", value: "country",sortable: true},
+        { text: "Currency", value: "currency"},
+      ]);
+const items = ref([]);
+
 function selectCountry(item,id) {
   let cCntry = [ ['Country'], ];
   let aCntry = selected.value.map((country) => [country]);
@@ -70,7 +82,7 @@ onMounted(fetch);
   <fwb-navbar>
     <template #logo>
       <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
-        IKEA Price Craweler
+        IKEA Price Crawler
       </fwb-navbar-logo>
     </template>
     <template #default="{ isShowMenu }">
@@ -91,15 +103,27 @@ onMounted(fetch);
     </template>
   </fwb-navbar>
   <div class="m-3">
-  <div class="grid gap-2">
-    <div class="justify-center rounded-md border-black border-8 max-w-fit">
+  <div class="flex flex-wrap gap-2 justify-center align-middle ">
+    <div class="justify-center rounded-md border-black border-8 max-h-[518px]" >
       <GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
     </div>
-    <div class="max-">
-      <multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
+    <div class="mr-auto">
+      <div class="flex flex-col start-0">
+        <span class="font-extrabold font-mono">Zadaj krajiny v ktorych chces vyhadavat</span>
+      </div>
+      <div>
+        <multiselect  :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry" @remove="selectCountry">
         </multiselect>
+      </div>
+        <div class="mt-5">
+          <EasyTable rows-per-page=10 :headers="headers" :items="items"></EasyTable>
+        </div>
+
     </div>
   </div>
   </div>
 </template>
+<style>
+@import 'vue3-easy-data-table/dist/style.css';
+</style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>