Port React table fixes to Vue and sanitize HTML text columns

resources/js/components/ApiTester.vue

@@ -664,6 +664,17 @@ const exportOpenApiJson = () => {
     showExportMenu.value = false
 }
 
+// Quote strings that would break or be re-typed as plain YAML scalars (newlines, indicators, booleans, null,
+// numbers). JSON string syntax is a valid double-quoted YAML scalar and escapes newlines and quotes.
+const toYamlString = (value: string): string =>
+    value === '' ||
+    /[\n\r:#]/.test(value) ||
+    /^[\s\-?,[\]{}&*!|>'"%@`]|\s$/.test(value) ||
+    /^(?:true|false|yes|no|on|off|null|~)$/i.test(value) ||
+    !isNaN(Number(value))
+        ? JSON.stringify(value)
+        : value
+
 const toYaml = (obj: any, indent = 0): string => {
     const prefix = '  '.repeat(indent)
     let yaml = ''
@@ -675,11 +686,7 @@ const toYaml = (obj: any, indent = 0): string => {
         } else if (typeof value === 'number') {
             yaml += `${prefix}${key}: ${value}\n`
         } else if (typeof value === 'string') {
-            if (value.includes('\n') || value.includes(':') || value.includes('#')) {
-                yaml += `${prefix}${key}: "${value.replace(/"/g, '\\"')}"\n`
-            } else {
-                yaml += `${prefix}${key}: ${value}\n`
-            }
+            yaml += `${prefix}${key}: ${toYamlString(value)}\n`
         } else if (Array.isArray(value)) {
             if (value.length === 0) {
                 yaml += `${prefix}${key}: []\n`
@@ -690,7 +697,7 @@ const toYaml = (obj: any, indent = 0): string => {
                         const itemYaml = toYaml(item, indent + 2).trim()
                         yaml += `${prefix}- ${itemYaml.split('\n').join('\n' + prefix + '  ')}\n`
                     } else {
-                        yaml += `${prefix}- ${item}\n`
+                        yaml += `${prefix}- ${typeof item === 'string' ? toYamlString(item) : item}\n`
                     }
                 }
             }

resources/js/components/CardGrid.vue

@@ -87,6 +87,28 @@ watch(() => props.clearSelections, () => {
     selectAll.value = false
 })
 
+// Normalize any value (number, object, null) to a display string before calling string methods on it
+const toDisplayString = (value: unknown): string => {
+    if (value === null || value === undefined) return ''
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value)
+        } catch {
+            return String(value)
+        }
+    }
+    return String(value)
+}
+
+// Forward the full column config (limit, wrap, badge, imageWidth, editable, name, ...) to the grid column
+// component, restricted to the props it declares so unknown keys don't fall through as DOM attributes.
+const getColumnProps = (column: any) => {
+    const declared = getColumnComponent(column.component)?.props
+    if (!declared) return {}
+    const keys = Array.isArray(declared) ? declared : Object.keys(declared)
+    return Object.fromEntries(Object.entries(column).filter(([key]) => keys.includes(key)))
+}
+
 const getColumnComponent = (columnType: string) => {
     const components: Record<string, any> = {
         'text_grid_column': TextGridColumn,
@@ -300,7 +322,8 @@ const getRelativeTime = (record: any) => {
 
 // Get avatar initials from title
 const getAvatarInitials = (record: any) => {
-    const title = getTitle(record)
+    // Normalize first: the configured title field may hold a number or object
+    const title = toDisplayString(getTitle(record))
     if (!title) return '?'
     const words = title.split(' ')
     if (words.length >= 2) {
@@ -560,30 +583,13 @@ const handleCardClick = (event: MouseEvent, record: any) => {
                     <!-- Top Header: Checkbox + ID -->
                     <div class="flex items-center gap-2 mb-4 pb-3 border-b border-border/50">
                         <!-- Selection Checkbox -->
-                        <div
+                        <Checkbox
                             v-if="bulkActionsAvailable"
-                            @click.stop="handleSelectRecord(record.id)"
-                        >
-                            <div
-                                :class="[
-                                    'h-5 w-5 rounded border-2 flex items-center justify-center cursor-pointer transition-all duration-200',
-                                    isSelected(record.id)
-                                        ? 'bg-primary border-primary'
-                                        : 'border-muted-foreground/40 hover:border-primary/60 bg-background'
-                                ]"
-                            >
-                                <svg
-                                    v-if="isSelected(record.id)"
-                                    class="h-3.5 w-3.5 text-primary-foreground"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                    stroke-width="3"
-                                >
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                                </svg>
-                            </div>
-                        </div>
+                            :model-value="isSelected(record.id)"
+                            @update:model-value="() => handleSelectRecord(record.id)"
+                            :aria-label="`Select record #${toDisplayString(record.id)}`"
+                            class="size-5 rounded border-2 border-muted-foreground/40 bg-background cursor-pointer hover:border-primary/60"
+                        />
                         <!-- Record ID -->
                         <span class="text-xs font-mono text-muted-foreground/70 select-none">#{{ record.id }}</span>
                     </div>
@@ -696,7 +702,7 @@ const handleCardClick = (event: MouseEvent, record: any) => {
                         class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                     />
                     <div v-else class="absolute inset-0 bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
-                        <span class="text-4xl font-bold text-primary/30">{{ getTitle(record)?.charAt(0) || '?' }}</span>
+                        <span class="text-4xl font-bold text-primary/30">{{ toDisplayString(getTitle(record)).charAt(0) || '?' }}</span>
                     </div>
 
                     <!-- Gradient Overlay -->
@@ -705,8 +711,9 @@ const handleCardClick = (event: MouseEvent, record: any) => {
                     <!-- Selection Checkbox (top-left) -->
                     <div v-if="bulkActionsAvailable" class="absolute top-3 left-3 z-10">
                         <Checkbox
-                            :checked="isSelected(record.id)"
-                            @update:checked="() => handleSelectRecord(record.id)"
+                            :model-value="isSelected(record.id)"
+                            @update:model-value="() => handleSelectRecord(record.id)"
+                            :aria-label="`Select record #${toDisplayString(record.id)}`"
                             class="border-white/50 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                         />
                     </div>
@@ -772,26 +779,12 @@ const handleCardClick = (event: MouseEvent, record: any) => {
             >
                 <!-- Selection Checkbox (floating) -->
                 <div v-if="bulkActionsAvailable" class="absolute top-3 left-3 z-20">
-                    <div
-                        @click.stop="handleSelectRecord(record.id)"
-                        :class="[
-                            'h-5 w-5 rounded border-2 flex items-center justify-center cursor-pointer transition-all duration-200 shadow-sm',
-                            isSelected(record.id)
-                                ? 'bg-primary border-primary'
-                                : 'border-white/80 hover:border-primary/60 bg-white/90 backdrop-blur-sm'
-                        ]"
-                    >
-                        <svg
-                            v-if="isSelected(record.id)"
-                            class="h-3.5 w-3.5 text-primary-foreground"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            stroke-width="3"
-                        >
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
-                        </svg>
-                    </div>
+                    <Checkbox
+                        :model-value="isSelected(record.id)"
+                        @update:model-value="() => handleSelectRecord(record.id)"
+                        :aria-label="`Select record #${toDisplayString(record.id)}`"
+                        class="size-5 rounded border-2 border-white/80 bg-white/90 backdrop-blur-sm shadow-sm cursor-pointer hover:border-primary/60"
+                    />
                 </div>
 
                 <!-- Badge (floating top-right) -->
@@ -931,8 +924,9 @@ const handleCardClick = (event: MouseEvent, record: any) => {
                 <CardHeader v-if="bulkActionsAvailable || getTitle(record)" class="flex-row items-start gap-3 space-y-0 pb-3">
                     <Checkbox
                         v-if="bulkActionsAvailable"
-                        :checked="isSelected(record.id)"
-                        @update:checked="() => handleSelectRecord(record.id)"
+                        :model-value="isSelected(record.id)"
+                        @update:model-value="() => handleSelectRecord(record.id)"
+                        :aria-label="`Select record #${toDisplayString(record.id)}`"
                         class="mt-1"
                     />
                     <div class="flex-1 min-w-0">
@@ -951,8 +945,10 @@ const handleCardClick = (event: MouseEvent, record: any) => {
                         v-for="column in gridColumns"
                         :key="column.name"
                         :is="getColumnComponent(column.component)"
+                        v-bind="getColumnProps(column)"
                         :column="column"
                         :record="record"
+                        :record-id="record.id"
                         :value="record[column.name]"
                         :color="record._colors?.[column.name]"
                         :icon="record._icons?.[column.name]"

resources/js/components/DataTable.vue

@@ -6,6 +6,9 @@ import IconColumn from './columns/IconColumn.vue'
 import ImageColumn from './columns/ImageColumn.vue'
 import ColorColumn from './columns/ColorColumn.vue'
 import ToggleColumn from './columns/ToggleColumn.vue'
+import SelectColumn from './columns/SelectColumn.vue'
+import TextInputColumn from './columns/TextInputColumn.vue'
+import CheckboxColumn from './columns/CheckboxColumn.vue'
 import RecordActions from '@laravilt/actions/components/RecordActions.vue'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -64,6 +67,7 @@ interface DataTableProps {
   bulkActionsAvailable?: boolean
   resourceSlug?: string
   columnExecutionRoute?: string
+  columnUpdateRoute?: string | null
   modelClass?: string
   recordActions?: Action[]
   executionRoute?: string
@@ -90,6 +94,7 @@ const props = withDefaults(defineProps<DataTableProps>(), {
   bulkActionsAvailable: false,
   resourceSlug: '',
   columnExecutionRoute: undefined,
+  columnUpdateRoute: null,
   modelClass: undefined,
   recordActions: () => [],
   executionRoute: undefined,
@@ -191,7 +196,7 @@ const saveReorder = async (items: { id: number | string, order: number }[]) => {
   isReordering.value = true
   try {
     const url = props.reorderRoute || `/admin/${props.resourceSlug}/reorder`
-    await fetch(url, {
+    const response = await fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -204,6 +209,11 @@ const saveReorder = async (items: { id: number | string, order: number }[]) => {
         column: props.reorderableColumn,
       }),
     })
+
+    // fetch only rejects on network failure; treat 4xx/5xx as a failed save too
+    if (!response.ok) {
+      throw new Error(`Reorder request failed with status ${response.status}`)
+    }
   } catch (error) {
     console.error('Failed to save reorder:', error)
     // Revert to original order on error
@@ -389,6 +399,12 @@ const getColumnComponent = (columnType: string) => {
       return ColorColumn
     case 'ToggleColumn':
       return ToggleColumn
+    case 'SelectColumn':
+      return SelectColumn
+    case 'TextInputColumn':
+      return TextInputColumn
+    case 'CheckboxColumn':
+      return CheckboxColumn
     default:
       return TextColumn
   }
@@ -548,6 +564,9 @@ const getColumnWidthClass = (column: Column, index: number): string => {
             :key="`skeleton-${i}`"
             :class="[striped && i % 2 !== 0 ? 'bg-muted' : 'bg-card']"
           >
+            <!-- Drag Handle Skeleton (keeps cells aligned with the reorder header) -->
+            <td v-if="reorderable" class="w-[40px] px-2 py-3.5" />
+
             <!-- Checkbox Skeleton -->
             <td v-if="bulkActionsAvailable" class="px-3 py-3.5 w-[52px]">
               <Skeleton class="h-4 w-4 rounded" />
@@ -642,6 +661,7 @@ const getColumnWidthClass = (column: Column, index: number): string => {
                 :record-id="record.id"
                 :resource-slug="resourceSlug"
                 :column-execution-route="columnExecutionRoute"
+                :column-update-route="columnUpdateRoute"
                 v-bind="column"
                 :default-image-url="record._defaultImageUrls?.[column.name] ?? column.defaultImageUrl"
               />

resources/js/components/Table.vue

@@ -284,7 +284,9 @@ watch(() => props.records, (newRecords, oldRecords) => {
     } else {
         allRecords.value = newRecords
     }
-}, { immediate: true, deep: true })
+    // Not immediate: allRecords is already seeded with props.records. Running immediately on a deep link to
+    // page > 1 appended the initial page to itself, duplicating every record.
+}, { deep: true })
 
 // Watch for search, filter, sort changes to reset records (only after initialization)
 watch([searchQuery, activeFilters, sortColumn, sortDirection], (newValues, oldValues) => {
@@ -382,9 +384,9 @@ const handleGroupChange = (group: string | null) => {
         urlParams.delete('group')
     }
 
-    // If using AJAX mode, reload data
+    // If using AJAX mode, reload data (reloadData() sends the new group from activeGroup).
+    // AJAX mode keeps search/filter/group state out of the URL, so there is nothing to push here.
     if (props.useAjax) {
-        updateUrl({ group: group || undefined })
         reloadData()
     } else {
         // For Inertia, do a full navigation
@@ -943,6 +945,7 @@ onUnmounted(() => {
                 :bulk-actions-available="extractedBulkActions.length > 0"
                 :resource-slug="resourceSlug"
                 :column-execution-route="relationContext?.columnExecutionRoute || table.columnExecutionRoute"
+                :column-update-route="relationContext ? null : table.columnUpdateRoute"
                 :model-class="table.model"
                 :clear-selections="clearSelectionsKey"
                 :fixed-actions="table.fixedActions"

resources/js/components/columns/CheckboxColumn.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Checkbox } from '@/components/ui/checkbox'
+import { useColumnUpdate } from '../../composables/useColumnUpdate'
+
+interface CheckboxColumnProps {
+  value: any
+  name: string
+  label?: string | null
+  recordId: number | string
+  columnUpdateRoute?: string | null
+  editable?: boolean
+  disabled?: boolean
+  description?: string | null
+  descriptionPosition?: 'above' | 'below'
+}
+
+const props = withDefaults(defineProps<CheckboxColumnProps>(), {
+  label: null,
+  columnUpdateRoute: null,
+  editable: true,
+  disabled: false,
+  description: null,
+  descriptionPosition: 'below',
+})
+
+const { localValue, isSaving, isDisabled, save } = useColumnUpdate<boolean>(
+  () => Boolean(props.value),
+  () => ({
+    name: props.name,
+    recordId: props.recordId,
+    columnUpdateRoute: props.columnUpdateRoute,
+    editable: props.editable,
+    disabled: props.disabled,
+  }),
+)
+</script>
+
+<template>
+  <!-- Editing a cell must not trigger the row's click-to-open behaviour -->
+  <div class="flex flex-col gap-0.5" @click.stop>
+    <div v-if="description && descriptionPosition === 'above'" class="text-[10px] text-muted-foreground/60 leading-tight">
+      {{ description }}
+    </div>
+
+    <div class="flex items-center">
+      <Checkbox
+        :model-value="Boolean(localValue)"
+        :disabled="isDisabled"
+        :aria-label="label || name"
+        :aria-busy="isSaving"
+        :class="isSaving ? 'opacity-60 cursor-wait' : undefined"
+        @update:model-value="(checked: boolean | 'indeterminate') => save(checked === true)"
+      />
+    </div>
+
+    <div v-if="description && descriptionPosition === 'below'" class="text-[10px] text-muted-foreground/60 leading-tight">
+      {{ description }}
+    </div>
+  </div>
+</template>