feat: enhance RowDeleteAction and useDestroy for reactive URL handling; add rowKey prop to DataTable

resources/js/components/button/RowDeleteAction.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Trash2 } from '@lucide/vue';
+import { toRef } from 'vue';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -19,7 +20,7 @@ const props = defineProps<{
 }>();
 
 const { open, processing, destroy } = useDestroy({
-    url: props.actionUrl,
+    url: toRef(props, 'actionUrl'),
     errorMessage: props.errorMessage ?? 'Gagal menghapus data.',
     onSuccess: props.onSuccess,
     onError: props.onError,

resources/js/components/data-table/DataTable.vue

@@ -37,6 +37,7 @@ const props = withDefaults(
         paginationDisplayedCount?: number;
         paginationItemLabel?: string;
         getRowClassName?: (row: TData, index: number) => string | undefined;
+        rowKey?: string | ((row: TData, index: number) => string | number);
         loading?: boolean;
     }>(),
     {
@@ -76,6 +77,18 @@ const resolvedColumns = computed(() => (
     props.showRowNumber ? [rowNumberColumn, ...props.columns] : props.columns
 ));
 
+function getRowId(row: TData, index: number): string {
+    if (!props.rowKey) {
+        return String(index);
+    }
+
+    if (typeof props.rowKey === 'function') {
+        return String(props.rowKey(row, index));
+    }
+
+    return String((row as Record<string, unknown>)[props.rowKey as string]);
+}
+
 const table = useVueTable({
     get data() {
         return props.data;
@@ -85,6 +98,7 @@ const table = useVueTable({
     },
     getCoreRowModel: getCoreRowModel(),
     manualSorting: true,
+    getRowId,
 });
 
 function handleSort(column: string): void {

resources/js/composables/useDestroy.ts

@@ -1,9 +1,9 @@
 import { router } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { computed, ref, type Ref } from 'vue';
 import { toast } from 'vue-sonner';
 
 interface UseDestroyOptions {
-    url: string;
+    url: string | Ref<string>;
     preserveScroll?: boolean;
     errorMessage?: string;
     onSuccess?: () => void;
@@ -13,11 +13,12 @@ interface UseDestroyOptions {
 export function useDestroy({ url, preserveScroll = true, errorMessage, onSuccess, onError }: UseDestroyOptions) {
     const open = ref(false);
     const processing = ref(false);
+    const resolvedUrl = computed(() => (typeof url === 'string' ? url : url.value));
 
     function destroy() {
         processing.value = true;
 
-        router.delete(url, {
+        router.delete(resolvedUrl.value, {
             preserveScroll,
             onSuccess: () => {
                 open.value = false;

resources/js/pages/admin/master/categories/Index.vue

@@ -107,6 +107,7 @@ watch(
                     :pagination="pagination"
                     :pagination-links="categories.links"
                     :sort="currentSort"
+                    row-key="id"
                     @sort-change="setSort"
                     @filters-reset="resetFilters"
                 />