fixed problems with tailwind overwriting naive ui styles

implemented user datatable

resources/js/Layouts/BELayout.vue

@@ -1,9 +1,11 @@
 <template>
-    <LoginLayout class="w-3/5">
-        <MainNav />
-        <slot></slot>
+    <n-config-provider preflight-style-disabled>
+        <LoginLayout class="w-3/5">
+            <MainNav />
+            <slot></slot>
 
-    </LoginLayout>
+        </LoginLayout>
+    </n-config-provider>
 </template>
 
 <script lang="ts" setup>

resources/js/app.ts

@@ -1,7 +1,6 @@
 import '../css/app.css'
 import { createApp, h } from "vue";
 import { createInertiaApp, Link } from "@inertiajs/vue3";
-import '../css/app.css'
 
 createInertiaApp({
   resolve: (name) => require(`./pages/${name}`),

resources/js/pages/Login.vue

@@ -37,7 +37,6 @@
 
         <div class="flex justify-center">
             <n-button 
-                class="bg-[#18A058]" 
                 type="success" 
                 @click="onClickLogin"
                 :disabled="!form.password || !form.username"

resources/js/pages/Users/Edit.vue

@@ -0,0 +1,6 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+</script>

resources/js/pages/Users/Index.vue

@@ -7,18 +7,26 @@
    <n-data-table 
       :columns="columns"
       :data="users"
+      row-class-name="group"
    />
-   <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'
+import type { VNode } from 'vue'
+
+import { h } from 'vue'
+import BELayout from '@/layouts/BELayout.vue'
+import FlashMessages from '@/components/FlashMessages.vue'
+import { NIcon, NButton } from 'naive-ui'
+
+import {
+   AdminPanelSettingsFilled as Admin,
+   EditRound as Edit,
+   DeleteRound as Delete,
+} from '@vicons/material'
 
 defineOptions({ layout: BELayout })
 
@@ -29,16 +37,59 @@ const props = defineProps<{
 
 const columns: DataTableColumns<User> = [
    {
-      title: "ID",
-      key: "id",
+      title: "Admin",
+      key: "is_admin",
+      align: "center",
+      render (row) {
+         if(row.is_admin) {
+            return h(
+               NIcon,
+               { size: 20, component: Admin, class: "align-middle" }
+            )
+         }
+      }
    },
    {
       title: "Benutzername",
       key: "username",
    },
    {
-      title: "Admin?",
-      key: "is_admin",
+      title: "Aktionen",
+      key: "actions",
+      className: "space-x-4",
+      render(row) {
+         let arr: VNode[] = []
+         arr[0] = h(
+            NButton,
+            { 
+               class: "invisible group-hover:visible align-middle",
+               circle: true,
+               onClick: () => { clickEdit(row.id) },
+               renderIcon: () => { return h(NIcon, { component: Edit, size: 20 }) },
+            },
+         )
+         arr[1] = h(
+            NButton,
+            { 
+               class: "invisible group-hover:visible align-middle",
+               secondary: true,
+               circle: true,
+               type: "error",
+               onClick: () => { clickDelete(row.id) },
+               renderIcon: () => { return h(NIcon, { component: Delete, size: 20 }) },
+            },
+         )
+         return arr
+      }
    }
 ]
+
+function clickEdit(id: Number){
+   console.log("Edit clicked: "+id)
+}
+
+function clickDelete(id: Number){
+   console.log("Delete clicked: "+id)
+}
+
 </script>