first datatable

components.d.ts

@@ -8,9 +8,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     NButton: typeof import('naive-ui')['NButton']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']

resources/js/Layouts/BELayout.vue

@@ -1,13 +1,13 @@
 <template>
-    <LoginLayout>
+    <LoginLayout class="w-3/5">
         <MainNav />
         <slot></slot>
 
     </LoginLayout>
 </template>
 
-<script setup>
-    import LoginLayout from '@/layouts/LoginLayout'
-    import MainNav from '@/components/MainNav'
+<script lang="ts" setup>
+    import LoginLayout from '@/layouts/LoginLayout.vue'
+    import MainNav from '@/components/MainNav.vue'
 
 </script>

resources/js/Layouts/LoginLayout.vue

@@ -1,10 +1,13 @@
 <template>
     <main class="bg-slate-100 flex justify-center h-screen">
-        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
+        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow" :class="class">
                 <slot></slot>
         </div>
     </main>
 </template>
 
 <script setup lang="ts">
+
+defineProps(['class'])
+
 </script>

resources/js/components/MainNav.vue

@@ -1,10 +1,12 @@
 <template>
-    <n-menu 
+    <div class="flex justify-center">
+        <n-menu 
         v-model:value="activeKey" 
         mode="horizontal" 
         :options="menuOptions" 
         class="-mx-4"
     />
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -25,8 +27,6 @@
     const activeKey: Ref<string> = ref((usePage().props.request as any)?.url)
     const user: User = usePage().props.user as User
     
-    console.log(usePage().props.request)
-
     const menuOptions: MenuOption[] = []
 
     menuOptions.push({
@@ -85,9 +85,6 @@
             icon: renderIcon(Logout)
         }]
     })
-    menuOptions.push({
-        
-    })
 
     
 

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>

webpack.config.js

@@ -1,4 +1,4 @@
-const { join, resolve } = require('path')
+const { join } = require('path')
 const Encore = require('@symfony/webpack-encore')
 const Components = require('unplugin-vue-components/webpack')
 const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')