first datatable

resources/js/pages/Users/Index.vue

@@ -3,25 +3,42 @@
         <FlashMessages 
             :messages="props.flashMessages"
         />
-    </n-message-provider>
- <div>
-    Bin in Users
- </div>
- <div>
-   {{ users }}
- </div>
+   </n-message-provider>
+   <n-data-table 
+      :columns="columns"
+      :data="users"
+   />
+   <div>
+      {{ users }}
+   </div>
 </template>
 
 <script setup lang="ts">
 
 import BELayout from '@/layouts/BELayout.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
+import type { User } from '../../types/User'
+import type { DataTableColumns } from 'naive-ui'
 
 defineOptions({ layout: BELayout })
 
-const props = defineProps({
-   users: Object,
-   flashMessages: Object
-})
+const props = defineProps<{
+   users?: User[],
+   flashMessages?: Object
+}>()
 
+const columns: DataTableColumns<User> = [
+   {
+      title: "ID",
+      key: "id",
+   },
+   {
+      title: "Benutzername",
+      key: "username",
+   },
+   {
+      title: "Admin?",
+      key: "is_admin",
+   }
+]
 </script>