web: added ids to listviewelement

web/src/components/NavBarIcons/UsersDialog.vue

@@ -11,8 +11,16 @@
         <span>Add/Delete/Manage users who have access to this tool</span>
       </v-card-subtitle>
       <v-card-text>
-        <div>I am just a placeholder</div>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :items-per-page="10"
+          item-key="name"
+          class="elevation-5"
+        ></v-data-table>
+        <v-divider class="border-opacity-50 mt-5" :thickness="2"></v-divider>
       </v-card-text>
+
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="blue darken-1" @click="users = false">Close</v-btn>
@@ -22,9 +30,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { Users } from "lucide-vue-next";
+import { defineComponent, ref, computed, watch } from "vue";
 
+// Data Table values
+const headers = ref([
+  { title: "Name", value: "name" },
+  { title: "Email", value: "email" },
+  { title: "Actions", value: "actions", sortable: false },
+]);
+
+const items = ref([
+  { name: "John Doe", email: "test@john.doe", actions: "Here CRUD" },
+]);
+
+// Dialog open state
 const users = ref(false);
 </script>