created prototype of tasks for device and dialog, that shows all tasks for admin per each device

management-ui/src/customcompometns/DataTableNoCheckboxScroll.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts" generic="TData, TValue">
+import { defineProps } from 'vue'
+import type { DefineComponent } from 'vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import {
+  useVueTable,
+  getCoreRowModel,
+  FlexRender,
+} from '@tanstack/vue-table'
+
+import {
+  Table, TableHeader, TableRow, TableHead, TableBody, TableCell,
+} from '@/components/ui/table'
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area' // <-- add ScrollBar
+
+const props = defineProps<{
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  dropdownComponent?: DefineComponent<{ row: TData }, any, any>
+  dropdownProps?: Record<string, any>
+  /** Optional tailwind class to control min table width for horizontal scrolling */
+  minTableWidth?: string
+}>()
+
+const table = useVueTable({
+  get data() { return props.data },
+  get columns() { return props.columns },
+  getCoreRowModel: getCoreRowModel(),
+})
+
+const emit = defineEmits<{
+  (e: 'row-updated', row: TData, payload: any): void
+  (e: 'row-deleted', row: TData): void
+}>()
+
+const minWidthClass = props.minTableWidth ?? 'min-w-[1100px]' // tweak as needed
+</script>
+
+<template>
+  <div class="w-full h-full border rounded-md flex flex-col">
+    <!-- Both-direction scroll area -->
+    <ScrollArea class="flex-1 w-full">
+      <!-- The min-width container enables horizontal scroll on small displays -->
+      <div :class="['w-full', minWidthClass]">
+        <Table class="w-full">
+          <!-- header -->
+          <TableHeader>
+            <TableRow
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
+            >
+              <TableHead
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                class="sticky top-0 bg-background z-10 whitespace-nowrap"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+              </TableHead>
+
+              <!-- extra empty head for dropdown column -->
+              <TableHead
+                v-if="props.dropdownComponent"
+                class="sticky top-0 bg-background z-10 w-12"
+              />
+            </TableRow>
+          </TableHeader>
+
+          <!-- body -->
+          <TableBody>
+            <template v-if="table.getRowModel().rows.length">
+              <TableRow
+                v-for="row in table.getRowModel().rows"
+                :key="row.id"
+                class="whitespace-nowrap"
+              >
+                <!-- data cells -->
+                <TableCell
+                  v-for="cell in row.getVisibleCells()"
+                  :key="cell.id"
+                >
+                  <FlexRender
+                    :render="cell.column.columnDef.cell"
+                    :props="cell.getContext()"
+                  />
+                </TableCell>
+
+                <!-- dropdown cell -->
+                <TableCell v-if="props.dropdownComponent" class="text-right">
+                  <component
+                    :is="props.dropdownComponent"
+                    :row="row.original"
+                    v-bind="props.dropdownProps"
+                    @updated="(payload: any) => emit('row-updated', row.original, payload)"
+                    @deleted="() => emit('row-deleted', row.original)"
+                  />
+                </TableCell>
+              </TableRow>
+            </template>
+
+            <!-- no-data row -->
+            <template v-else>
+              <TableRow>
+                <TableCell
+                  :colspan="props.columns.length + (props.dropdownComponent ? 1 : 0)"
+                  class="h-24 text-center"
+                >
+                  No data.
+                </TableCell>
+              </TableRow>
+            </template>
+          </TableBody>
+        </Table>
+      </div>
+
+      <!-- Scrollbars -->
+      <ScrollBar orientation="horizontal" />
+      <ScrollBar orientation="vertical" />
+    </ScrollArea>
+  </div>
+</template>