simrsx-fe/app/components/pub/base/data-table/data-table.vue

<script setup lang="ts">
import type { DataTableLoader } from './type'
import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
import { Info } from 'lucide-vue-next'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'

const props = defineProps<{
  skeletonSize?: number
  rows: unknown[]
  cols: Col[]
  header: Th[][]
  keys: string[]
  funcParsed?: RecStrFuncUnknown
  funcHtml?: RecStrFuncUnknown
  funcComponent?: RecStrFuncComponent
  selectMode?: 'single' | 'multiple'
  modelValue?: any[] | any
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: any[] | any): void
}>()

const getSkeletonSize = computed(() => {
  return props.skeletonSize || 5
})
const loader = inject('table_data_loader') as DataTableLoader

// local state utk selection
const selected = ref<any[]>([])

function toggleSelection(row: any) {
  if (props.selectMode === 'single') {
    selected.value = [row]
    emit('update:modelValue', row)
  } else {
    const idx = selected.value.findIndex((r) => r === row)
    if (idx >= 0) {
      selected.value.splice(idx, 1)
    } else {
      selected.value.push(row)
    }
    emit('update:modelValue', [...selected.value])
  }
}

function handleActionCellClick(event: Event, _cellRef: string) {
  // Prevent event if clicked directly on the button/dropdown
  const target = event.target as HTMLElement
  if (target.closest('button') || target.closest('[role="button"]')) {
    return
  }

  // Find the dropdown trigger button and click it
  const cell = event.currentTarget as HTMLElement
  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
  if (triggerButton) {
    ;(triggerButton as HTMLButtonElement).click()
  }
}
</script>

<template>
  <Table>
    <TableHeader class="bg-gray-50 dark:bg-gray-800">
      <TableRow>
        <TableHead
          v-for="(h, idx) in header[0]"
          :key="`head-${idx}`"
          class="border"
          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
        >
          {{ h.label }}
        </TableHead>
      </TableRow>
    </TableHeader>

    <TableBody v-if="loader.isTableLoading">
      <!-- Loading state with 5 skeleton rows -->
      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
        </TableCell>
      </TableRow>
    </TableBody>
    <TableBody v-else-if="rows.length === 0">
      <TableRow>
        <TableCell :colspan="keys.length" class="py-8 text-center">
          <div class="flex items-center justify-center">
            <Info class="size-5 text-muted-foreground" />
            <span class="ml-2">Tidak ada data tersedia</span>
          </div>
        </TableCell>
      </TableRow>
    </TableBody>
    <TableBody v-else>
      <TableRow
        v-for="(row, rowIndex) in rows"
        :key="`row-${rowIndex}`"
        :class="{
          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
        }"
        @click="toggleSelection(row)"
      >
        <!-- opsional: kalau mau tampilkan checkbox/radio di cell pertama -->
        <TableCell v-if="props.selectMode">
          <input
            v-if="props.selectMode === 'single'"
            type="radio"
            :checked="selected.includes(row)"
            @change="toggleSelection(row)"
          />
          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
        </TableCell>

        <!-- lanjut render cell normal -->
        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
          <!-- existing cell renderer -->
          <component
            :is="funcComponent?.[key]?.(row, rowIndex).component"
            v-if="funcComponent?.[key]"
            :rec="row"
            :idx="rowIndex"
            v-bind="funcComponent[key]?.(row, rowIndex).props"
          />
          <template v-else>
            <div v-if="funcHtml?.[key]" v-html="funcHtml?.[key]?.(row, rowIndex)"></div>
            <template v-else>
              {{ funcParsed?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
            </template>
          </template>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>