fixed problems with tailwind overwriting naive ui styles

implemented user datatable

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>