simrsx-fe/app/components/pub/my-ui/data-table/data-table.vue

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

const props = defineProps<Config & { rows: unknown[] }>()

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, event?: Event) {
  if (event) event.stopPropagation() // cegah event bubble ke TableRow

  const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||

  // gunakan pembanding berdasarkan id atau stringify data
  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))

  if (!isMultiple) {
    // mode single
    selected.value = [row]
    emit('update:modelValue', row)
  } else {
    if (findIndex >= 0) {
      selected.value.splice(findIndex, 1)
    } else {
      selected.value.push(row)
    }
    emit('update:modelValue', [...selected.value])
  }
}

function deepFetch(data: Record<string, any>, key: string): string {
  let result = ''
  const keys = key.split('.')
  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
  for (let i = 0; i < keys.length; i++) {
    let idx = keys[i] || ''
    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
      if (i == keys.length - 1) {
        return lastVal[idx]
      } else {
        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
      }
    }
  }
  return result
}

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
      v-if="headers"
      class="bg-gray-50 dark:bg-gray-800"
    >
      <TableRow v-for="(hr, hrIdx) in headers">
        <TableHead
          v-for="(th, idx) in headers[hrIdx]"
          :key="`head-${idx}`"
          :class="`border ${th.classVal || ''}`"
          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
        >
          {{ th.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 text-muted-foreground dark:bg-gray-700" />
        </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.some((r) => JSON.stringify(r) === JSON.stringify(row)),
          'bg-blue-50':
            (props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
            selected.some((r) => JSON.stringify(r) === JSON.stringify(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.some((r) => JSON.stringify(r) === JSON.stringify(row))"
            @click.stop="toggleSelection(row, $event)"
          />
          <input
            v-else
            type="checkbox"
            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
            @click.stop="toggleSelection(row, $event)"
          />
        </TableCell>

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