@dasidev/dasi-ui 1.0.0

package/src/components/tables/DashboardDataTable.vue

@@ -0,0 +1,707 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from "vue";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.vue";
+import {
+	LucideArrowDownWideNarrow,
+	LucideArrowUpDown,
+	LucideArrowUpNarrowWide,
+	LucideDatabase,
+	LucideOctagonAlert,
+} from "lucide-vue-next";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import { cn } from "@/lib/utils";
+import { useRoute } from "vue-router";
+import type { ColumnRef } from "@/vueform/config/types";
+
+export interface DashboardColumnRef
+	extends Omit<ColumnRef, "cellRender" | "textAlign"> {
+	sticky?: boolean; // New property to mark columns as sticky
+	textAlign?: "right" | "left" | "center";
+	cellRender?: (index: number, row: any) => string;
+	parentHeader?: string; // Parent header for grouped columns
+}
+
+interface Props {
+	data: any[];
+	columns: DashboardColumnRef[];
+	loading?: boolean;
+	loadingType?: "skeleton" | "loader";
+	error?: string | null;
+	showCheckboxItem?: boolean;
+	stickyOffset?: number; // Offset for sticky positioning
+	groupBy?: string; // New: key to group by (e.g., 'pltu')
+}
+
+const route = useRoute();
+const props = withDefaults(defineProps<Props>(), {
+	loading: false,
+	loadingType: "loader",
+	error: null,
+	showCheckboxItem: false,
+	stickyOffset: 0,
+});
+
+const emits = defineEmits(["getData", "openDetail", "editItem", "rowClick"]);
+const selectedId = defineModel("selectedId");
+const sortBy = defineModel<any>("sortBy");
+
+// Compute sticky and scrollable columns
+const stickyColumns = computed<DashboardColumnRef[]>(() =>
+	props.columns.filter((col) => col.visible && col.sticky)
+);
+
+const scrollableColumns = computed<DashboardColumnRef[]>(() =>
+	props.columns.filter((col) => col.visible && !col.sticky)
+);
+
+// Group scrollable columns by parent header
+const groupedScrollableColumns = computed(() => {
+	const groups: { [key: string]: DashboardColumnRef[] } = {};
+	const ungrouped: DashboardColumnRef[] = [];
+
+	scrollableColumns.value.forEach((col) => {
+		if (col.parentHeader) {
+			if (!groups[col.parentHeader]) {
+				groups[col.parentHeader] = [];
+			}
+			groups[col.parentHeader].push(col);
+		} else {
+			ungrouped.push(col);
+		}
+	});
+
+	return { groups, ungrouped };
+});
+
+// Calculate sticky positioning for each sticky column
+const getStickyLeft = (index: number) => {
+	let offset = props.stickyOffset;
+	for (let i = 0; i < index; i++) {
+		offset += stickyColumns.value[i].size || 150; // Default width 150px
+	}
+	return `${offset}px`;
+};
+
+function setSortBy(key?: string) {
+	if (!key) return;
+	if (sortBy.value && sortBy.value.key === key) {
+		const by = sortBy.value.by === "asc" ? "desc" : "asc";
+		sortBy.value = { key, by };
+	} else {
+		sortBy.value = { key, by: "asc" };
+	}
+}
+
+function handleRowClick(row: any, index: number) {
+	selectedId.value = row.id;
+	emits("rowClick", row, index);
+}
+
+/**
+ * Handle edit from query parameter
+ */
+function handleEditQueryParam() {
+	const editId = route.query.edit;
+	if (editId && props.data.length > 0) {
+		const itemToEdit = props.data.find(
+			(item: any) =>
+				item.id === editId ||
+				(typeof item.id === "object" && item.id.toString() === editId)
+		);
+
+		if (itemToEdit) {
+			const itemIndex = props.data.findIndex(
+				(item: any) =>
+					item.id === editId ||
+					(typeof item.id === "object" && item.id.toString() === editId)
+			);
+
+			if (itemIndex !== -1) {
+				emits("editItem", itemIndex, itemToEdit);
+				selectedId.value = itemToEdit.id;
+			}
+		}
+	}
+}
+
+watch(
+	() => props.data,
+	() => {
+		if (route.query.edit && props.data.length > 0) {
+			handleEditQueryParam();
+		}
+	},
+	{ deep: true }
+);
+
+onMounted(() => {
+	if (route.query.edit) {
+		if (props.data.length > 0) {
+			handleEditQueryParam();
+		}
+	}
+});
+</script>
+
+<template>
+	<div class="relative">
+		<div class="overflow-x-auto">
+			<Table
+				class="bg-white border-y dark:bg-slate-800 dark:border-y-slate-700 relative"
+			>
+				<TableHeader>
+					<!-- First Header Row: Parent Headers -->
+					<TableRow class="dark:border-slate-700">
+						<!-- Sticky Headers (span both rows) -->
+						<TableHead
+							v-for="(cell, index) in stickyColumns"
+							:key="`sticky-parent-${cell.key}`"
+							:rowspan="2"
+							:class="
+								cn(
+									'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm sticky z-10',
+									cell.headerClass
+								)
+							"
+							:style="{
+								width: cell.size ? `${cell.size}px` : '150px',
+								left: getStickyLeft(index),
+								minWidth: cell.size ? `${cell.size}px` : '150px',
+							}"
+						>
+							<div
+								class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
+								:class="{
+									'transition hover:bg-slate-200 cursor-pointer': cell.sortKey,
+									'justify-end': cell.textAlign === 'right',
+									'justify-center': cell.textAlign === 'center',
+								}"
+								v-on:click="setSortBy(cell.sortKey)"
+							>
+								{{ cell.header }}
+								<div class="ml-2 flex-none" v-if="cell.sortKey">
+									<LucideArrowDownWideNarrow
+										:size="18"
+										v-if="
+											sortBy &&
+											sortBy.key === cell.sortKey &&
+											sortBy.by === 'desc'
+										"
+									/>
+									<LucideArrowUpNarrowWide
+										:size="18"
+										v-else-if="
+											sortBy &&
+											sortBy.key === cell.sortKey &&
+											sortBy.by === 'asc'
+										"
+									/>
+									<LucideArrowUpDown :size="18" class="opacity-40" v-else />
+								</div>
+							</div>
+						</TableHead>
+
+						<!-- Parent Headers for Grouped Columns -->
+						<TableHead
+							v-for="(parentName, groupKey) in groupedScrollableColumns.groups"
+							:key="`parent-${groupKey}`"
+							:colspan="parentName.length"
+							:class="
+								cn(
+									'bg-slate-200 text-center text-[13px] 2xl:text-sm font-semibold border-b border-r-2 border-slate-300 dark:bg-slate-800 dark:border-slate-600'
+								)
+							"
+						>
+							{{ groupKey }}
+						</TableHead>
+
+						<!-- Ungrouped Headers (span both rows) -->
+						<TableHead
+							v-for="cell in groupedScrollableColumns.ungrouped"
+							:key="`ungrouped-parent-${cell.key}`"
+							:rowspan="2"
+							:class="
+								cn(
+									'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm',
+									cell.headerClass
+								)
+							"
+							:style="{
+								width: cell.size ? `${cell.size}px` : 'auto',
+								minWidth: cell.size ? `${cell.size}px` : '100px',
+							}"
+						>
+							<div
+								class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
+								:class="{
+									'transition hover:bg-slate-200 cursor-pointer': cell.sortKey,
+									'justify-end': cell.textAlign === 'right',
+									'justify-center': cell.textAlign === 'center',
+								}"
+								v-on:click="setSortBy(cell.sortKey)"
+							>
+								{{ cell.header }}
+								<div class="ml-2 flex-none" v-if="cell.sortKey">
+									<LucideArrowDownWideNarrow
+										:size="18"
+										v-if="
+											sortBy &&
+											sortBy.key === cell.sortKey &&
+											sortBy.by === 'desc'
+										"
+									/>
+									<LucideArrowUpNarrowWide
+										:size="18"
+										v-else-if="
+											sortBy &&
+											sortBy.key === cell.sortKey &&
+											sortBy.by === 'asc'
+										"
+									/>
+									<LucideArrowUpDown :size="18" class="opacity-40" v-else />
+								</div>
+							</div>
+						</TableHead>
+					</TableRow>
+
+					<!-- Second Header Row: Child Headers -->
+					<TableRow class="dark:border-slate-700">
+						<!-- Child Headers for Grouped Columns -->
+						<template
+							v-for="(parentName, groupKey) in groupedScrollableColumns.groups"
+							:key="`group-${groupKey}`"
+						>
+							<TableHead
+								v-for="(cell, cellIndex) in parentName"
+								:key="`child-${cell.key}`"
+								:class="
+									cn(
+										'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm',
+										cell.headerClass,
+										{
+											'border-r-2 border-r-slate-300':
+												cellIndex === parentName.length - 1,
+										}
+									)
+								"
+								:style="{
+									width: cell.size ? `${cell.size}px` : 'auto',
+									minWidth: cell.size ? `${cell.size}px` : '100px',
+								}"
+							>
+								<div
+									class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
+									:class="{
+										'transition hover:bg-slate-200 cursor-pointer':
+											cell.sortKey,
+										'justify-end': cell.textAlign === 'right',
+										'justify-center': cell.textAlign === 'center',
+									}"
+									v-on:click="setSortBy(cell.sortKey)"
+								>
+									{{ cell.header }}
+									<div class="ml-2 flex-none" v-if="cell.sortKey">
+										<LucideArrowDownWideNarrow
+											:size="18"
+											v-if="
+												sortBy &&
+												sortBy.key === cell.sortKey &&
+												sortBy.by === 'desc'
+											"
+										/>
+										<LucideArrowUpNarrowWide
+											:size="18"
+											v-else-if="
+												sortBy &&
+												sortBy.key === cell.sortKey &&
+												sortBy.by === 'asc'
+											"
+										/>
+										<LucideArrowUpDown :size="18" class="opacity-40" v-else />
+									</div>
+								</div>
+							</TableHead>
+						</template>
+					</TableRow>
+				</TableHeader>
+
+				<TableBody v-if="error">
+					<TableRow>
+						<TableCell
+							:colspan="stickyColumns.length + scrollableColumns.length"
+							class="bg-red-50"
+						>
+							<div
+								class="min-h-[400px] h-[60vh] flex items-center justify-center"
+							>
+								<div class="text-center w-full text-red-500">
+									<LucideOctagonAlert
+										:size="40"
+										:stroke-width="1.5"
+										class="mx-auto mb-3"
+									/>
+									<div class="font-bold text-lg">Loading Data Error</div>
+									<div class="text-sm mb-4">{{ error }}</div>
+									<BtnPrimary
+										class="py-0 h-9 rounded-full"
+										v-on:click="emits('getData')"
+										>Coba Lagi</BtnPrimary
+									>
+								</div>
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+
+				<TableBody v-else-if="props.loading">
+					<template v-if="props.loadingType === 'skeleton'">
+						<TableRow
+							v-for="i in 25"
+							:key="i"
+							class="border-slate-100 dark:border-slate-700"
+						>
+							<TableCell
+								:colspan="stickyColumns.length + scrollableColumns.length"
+								class="px-4 2xl:px-6 py-3 bg-white dark:bg-slate-800"
+							>
+								<div class="flex gap-2">
+									<Skeleton class="h-6 w-6 rounded-s"></Skeleton>
+									<Skeleton class="h-6 rounded-s w-full"></Skeleton>
+								</div>
+							</TableCell>
+						</TableRow>
+					</template>
+					<TableRow v-else>
+						<TableCell
+							:colspan="stickyColumns.length + scrollableColumns.length"
+							class="bg-slate-50 dark:bg-slate-900"
+						>
+							<div
+								class="min-h-[400px] h-[60vh] flex items-center justify-center"
+							>
+								<div class="text-center">
+									<LoadingIndicator
+										class="mx-auto mb-4"
+									></LoadingIndicator>
+									<p class="text-sm text-gray-500">Memuat data...</p>
+								</div>
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+
+				<!-- Grouped Table Body -->
+				<TableBody v-else-if="props.groupBy && data.length">
+					<template
+						v-for="(group, groupIdx) in data"
+						:key="group[props.groupBy]"
+					>
+						<!-- Parent Row -->
+						<TableRow class="bg-blue-50 font-bold sticky top-0 z-10">
+							<TableCell
+								:colspan="stickyColumns.length + scrollableColumns.length"
+							>
+								<div class="flex items-center gap-4">
+									<span class="text-blue-700">{{ group[props.groupBy] }}</span>
+									<span v-if="group.kapasitas" class="text-xs text-gray-500">{{
+										group.kapasitas
+									}}</span>
+								</div>
+							</TableCell>
+						</TableRow>
+						<!-- Child Rows -->
+						<TableRow
+							v-for="(row, i) in group.children"
+							:key="row.id || i"
+							class="border-gray-100 dark:border-slate-700 hover:bg-gray-50 transition-colors cursor-pointer"
+							:class="{ '!bg-blue-100': selectedId === row.id }"
+							v-on:click.stop="handleRowClick(row, i)"
+						>
+							<!-- Sticky Cells -->
+							<TableCell
+								v-for="(cell, index) in stickyColumns"
+								:key="`sticky-cell-${cell.key}`"
+								:class="
+									cn(
+										'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm bg-white sticky z-5 border-r border-gray-200',
+										{ 'font-semibold': cell.bold }
+									)
+								"
+								:style="{
+									width: cell.size ? `${cell.size}px` : '150px',
+									left: getStickyLeft(index),
+									minWidth: cell.size ? `${cell.size}px` : '150px',
+								}"
+							>
+								<div
+									v-if="cell.cellRender"
+									v-html="cell.cellRender(i, row)"
+									:class="{
+										'text-right': cell.textAlign === 'right',
+										'text-center': cell.textAlign === 'center',
+									}"
+								></div>
+								<div
+									v-else
+									:class="{
+										'text-right': cell.textAlign === 'right',
+										'text-center': cell.textAlign === 'center',
+									}"
+								>
+									{{ row[cell.key] }}
+								</div>
+							</TableCell>
+							<!-- Scrollable Cells -->
+							<TableCell
+								v-for="(cell, cellIndex) in scrollableColumns"
+								:key="`scroll-cell-${cell.key}`"
+								:class="
+									cn(
+										'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm',
+										{ 'font-semibold': cell.bold },
+										{
+											'border-r-2 border-r-slate-200':
+												cell.parentHeader &&
+												cellIndex < scrollableColumns.length - 1 &&
+												cell.parentHeader !==
+													scrollableColumns[cellIndex + 1].parentHeader,
+										}
+									)
+								"
+								:style="{
+									width: cell.size ? `${cell.size}px` : 'auto',
+									minWidth: cell.size ? `${cell.size}px` : '100px',
+								}"
+							>
+								<div
+									v-if="cell.cellRender"
+									v-html="cell.cellRender(i, row)"
+									:class="{
+										'text-right': cell.textAlign === 'right',
+										'text-center': cell.textAlign === 'center',
+									}"
+								></div>
+								<div
+									v-else
+									:class="{
+										'text-right': cell.textAlign === 'right',
+										'text-center': cell.textAlign === 'center',
+									}"
+								>
+									{{ row[cell.key] }}
+								</div>
+							</TableCell>
+						</TableRow>
+						<!-- Subtotal Row -->
+						<TableRow class="bg-gray-100 font-bold">
+							<TableCell
+								:colspan="stickyColumns.length + scrollableColumns.length - 2"
+								class="text-right text-gray-700"
+								>Sub Total</TableCell
+							>
+							<TableCell class="text-center text-blue-700">{{
+								group.subtotal?.rencana?.toLocaleString() || "-"
+							}}</TableCell>
+							<TableCell class="text-center text-blue-700">{{
+								group.subtotal?.realisasi?.toLocaleString() || "-"
+							}}</TableCell>
+						</TableRow>
+					</template>
+				</TableBody>
+
+				<!-- Flat Table Body (default) -->
+				<TableBody v-else-if="data.length">
+					<TableRow
+						v-for="(row, i) in data"
+						:key="i"
+						class="border-gray-100 dark:border-slate-700 hover:bg-gray-50 transition-colors cursor-pointer"
+						:class="{ '!bg-blue-100': selectedId === row.id }"
+						v-on:click.stop="handleRowClick(row, i)"
+					>
+						<!-- Sticky Cells -->
+						<TableCell
+							v-for="(cell, index) in stickyColumns"
+							:key="`sticky-cell-${cell.key}`"
+							:class="
+								cn(
+									'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm bg-white sticky z-5 border-r border-gray-200',
+									{ 'font-semibold': cell.bold }
+								)
+							"
+							:style="{
+								width: cell.size ? `${cell.size}px` : '150px',
+								left: getStickyLeft(index),
+								minWidth: cell.size ? `${cell.size}px` : '150px',
+							}"
+						>
+							<div
+								v-if="cell.cellRender"
+								v-html="cell.cellRender(i, row)"
+								:class="{
+									'text-right': cell.textAlign === 'right',
+									'text-center': cell.textAlign === 'center',
+								}"
+							></div>
+							<div
+								v-else
+								:class="{
+									'text-right': cell.textAlign === 'right',
+									'text-center': cell.textAlign === 'center',
+								}"
+							>
+								{{ row[cell.key] }}
+							</div>
+						</TableCell>
+
+						<!-- Scrollable Cells -->
+						<TableCell
+							v-for="(cell, cellIndex) in scrollableColumns"
+							:key="`scroll-cell-${cell.key}`"
+							:class="
+								cn(
+									'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm',
+									{ 'font-semibold': cell.bold },
+									{
+										'border-r-2 border-r-slate-200':
+											cell.parentHeader &&
+											cellIndex < scrollableColumns.length - 1 &&
+											cell.parentHeader !==
+												scrollableColumns[cellIndex + 1].parentHeader,
+									}
+								)
+							"
+							:style="{
+								width: cell.size ? `${cell.size}px` : 'auto',
+								minWidth: cell.size ? `${cell.size}px` : '100px',
+							}"
+						>
+							<div
+								v-if="cell.cellRender"
+								v-html="cell.cellRender(i, row)"
+								:class="{
+									'text-right': cell.textAlign === 'right',
+									'text-center': cell.textAlign === 'center',
+								}"
+							></div>
+							<div
+								v-else
+								:class="{
+									'text-right': cell.textAlign === 'right',
+									'text-center': cell.textAlign === 'center',
+								}"
+							>
+								{{ row[cell.key] }}
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+
+				<TableBody v-else>
+					<TableRow>
+						<TableCell
+							:colspan="stickyColumns.length + scrollableColumns.length"
+							class="bg-slate-50"
+						>
+							<div
+								class="min-h-[400px] h-[60vh] flex items-center justify-center"
+							>
+								<div class="text-center w-full">
+									<LucideDatabase
+										:stroke-width="1.5"
+										class="mx-auto mb-3 text-gray-500 size-[34px] 2xl:size-[40px]"
+									/>
+									<div class="font-semibold 2xl:text-lg">Tidak Ada Data</div>
+									<div class="text-gray-500 text-xs 2xl:text-sm">
+										Maaf! Data Anda belum tersedia
+									</div>
+								</div>
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</Table>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+/* Ensure sticky columns have proper shadows and z-index hierarchy */
+.sticky {
+	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Ensure table sticky elements respect leftbar z-index */
+.sticky.z-10 {
+	z-index: 10;
+}
+
+.sticky.z-5 {
+	z-index: 5;
+}
+
+/* Custom scrollbar */
+.overflow-x-auto::-webkit-scrollbar {
+	height: 8px;
+}
+
+.overflow-x-auto::-webkit-scrollbar-track {
+	background: #f1f5f9;
+}
+
+.overflow-x-auto::-webkit-scrollbar-thumb {
+	background: #cbd5e1;
+	border-radius: 4px;
+}
+
+.overflow-x-auto::-webkit-scrollbar-thumb:hover {
+	background: #94a3b8;
+}
+
+/* Hover effect for sticky cells */
+tr:hover .sticky {
+	background-color: #f9fafb;
+}
+
+/* Selected row styling for sticky cells */
+tr.bg-blue-100 .sticky {
+	background-color: #dbeafe !important;
+}
+
+/* Enhanced styling for grouped headers */
+.bg-slate-200 {
+	background-color: #e2e8f0;
+	border-bottom: 2px solid #cbd5e1;
+}
+
+/* Ensure proper border styling for grouped columns */
+thead th {
+	border-bottom: 1px solid #e2e8f0;
+}
+
+thead tr:first-child th {
+	border-bottom: 1px solid #cbd5e1;
+}
+
+/* Dark mode adjustments for grouped headers */
+.dark .bg-slate-200 {
+	background-color: #475569;
+	border-bottom-color: #64748b;
+}
+
+.dark thead th {
+	border-bottom-color: #475569;
+}
+
+.dark thead tr:first-child th {
+	border-bottom-color: #64748b;
+}
+</style>