@omnitend/dashboard-for-laravel 0.23.0 → 0.24.0

package/resources/js/components/extended/DXTable.vue

@@ -69,40 +69,40 @@
                                     <!-- Text Filter -->
                                     <DFormInput
                                         v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
                                     <DAutocomplete
                                         v-else-if="field.filter === 'select'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
                                         :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
                                         type="number"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Date Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         type="date"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- No filter for this column -->
@@ -115,7 +115,7 @@
                         <template v-for="field in fields" :key="`head-${field.key}`" #[`head(${field.key})`]="{ label }">
                             <div class="d-flex align-items-center justify-content-between gap-2">
                                 <div class="flex-grow-1">
-                                    <div class="fw-semibold">{{ label || field.key }}</div>
+                                    <div class="fw-semibold">{{ headerLabel(field, label) }}</div>
                                     <small v-if="field.hint" class="text-muted d-block" style="font-weight: normal;">{{ field.hint }}</small>
                                 </div>
                                 <div v-if="field.sortable" class="sort-indicator text-muted flex-shrink-0" style="font-size: 0.75rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center;">
@@ -165,40 +165,40 @@
                                     <!-- Text Filter -->
                                     <DFormInput
                                         v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
                                     <DAutocomplete
                                         v-else-if="field.filter === 'select'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
                                         :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
                                         type="number"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Date Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         type="date"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- No filter for this column -->
@@ -211,7 +211,7 @@
                         <template v-for="field in fields" :key="`head-${field.key}`" #[`head(${field.key})`]="{ label }">
                             <div class="d-flex align-items-center justify-content-between gap-2">
                                 <div class="flex-grow-1">
-                                    <div class="fw-semibold">{{ label || field.key }}</div>
+                                    <div class="fw-semibold">{{ headerLabel(field, label) }}</div>
                                     <small v-if="field.hint" class="text-muted d-block" style="font-weight: normal;">{{ field.hint }}</small>
                                 </div>
                                 <div v-if="field.sortable" class="sort-indicator text-muted flex-shrink-0" style="font-size: 0.75rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center;">
@@ -262,40 +262,40 @@
                                     <!-- Text Filter -->
                                     <DFormInput
                                         v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Select Filter: typeahead — browse the full list on focus, or type to narrow; clear (✕) resets to "no filter" -->
                                     <DAutocomplete
                                         v-else-if="field.filter === 'select'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :options="getFieldFilterOptions(field)"
                                         :placeholder="field.filterPlaceholder || `All ${field.label || field.key}`"
                                         size="sm"
                                         open-on-focus
-                                        @update:model-value="handleFilterChange(field.key, ($event ?? '') as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), ($event ?? '') as string)"
                                     />
 
                                     <!-- Number Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
                                         type="number"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- Date Filter -->
                                     <DFormInput
                                         v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[field.key] || ''"
+                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
                                         type="date"
                                         size="sm"
-                                        @update:model-value="handleFilterChange(field.key, $event as string)"
+                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
                                     />
 
                                     <!-- No filter for this column -->
@@ -308,7 +308,7 @@
                         <template v-for="field in fields" :key="`head-${field.key}`" #[`head(${field.key})`]="{ label }">
                             <div class="d-flex align-items-center justify-content-between gap-2">
                                 <div class="flex-grow-1">
-                                    <div class="fw-semibold">{{ label || field.key }}</div>
+                                    <div class="fw-semibold">{{ headerLabel(field, label) }}</div>
                                     <small v-if="field.hint" class="text-muted d-block" style="font-weight: normal;">{{ field.hint }}</small>
                                 </div>
                                 <div v-if="field.sortable" class="sort-indicator text-muted flex-shrink-0" style="font-size: 0.75rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center;">
@@ -431,15 +431,15 @@
                     </div>
 
                     <!-- Pagination and Controls (API mode) -->
-                    <div v-if="isProviderMode && apiPaginationMeta" class="mt-3">
+                    <div v-if="isProviderMode && providerPagination" class="mt-3">
                         <!-- Top row: Pagination and Per-page selector -->
                         <div class="d-flex justify-content-between align-items-center mb-2">
                             <!-- Pagination controls (only when multiple pages) -->
                             <DPagination
-                                v-if="showPagination && apiPaginationMeta.total > apiPaginationMeta.per_page"
-                                :model-value="apiPaginationMeta.current_page"
-                                :total-rows="apiPaginationMeta.total"
-                                :per-page="apiPaginationMeta.per_page"
+                                v-if="showPagination && providerPagination.total > providerPagination.per_page"
+                                :model-value="providerPagination.current_page"
+                                :total-rows="providerPagination.total"
+                                :per-page="providerPagination.per_page"
                                 size="sm"
                                 @update:model-value="handleApiPageChange"
                             />
@@ -462,18 +462,18 @@
                         <!-- Bottom row: Info text -->
                         <div class="small text-muted">
                             <div>
-                                <template v-if="apiPaginationMeta.total > apiPaginationMeta.per_page">
-                                    {{ apiPaginationMeta.from }} to {{ apiPaginationMeta.to }} out of {{ apiPaginationMeta.total }} {{ apiPaginationMeta.total === 1 ? singularItemName : pluralItemName }}.
+                                <template v-if="providerPagination.total > providerPagination.per_page">
+                                    {{ providerPagination.from }} to {{ providerPagination.to }} out of {{ providerPagination.total }} {{ providerPagination.total === 1 ? singularItemName : pluralItemName }}.
                                 </template>
-                                <template v-else-if="apiPaginationMeta.total === 1">
-                                    {{ apiPaginationMeta.total }} {{ singularItemName }}.
+                                <template v-else-if="providerPagination.total === 1">
+                                    {{ providerPagination.total }} {{ singularItemName }}.
                                 </template>
                                 <template v-else>
-                                    {{ apiPaginationMeta.total }} {{ pluralItemName }}.
+                                    {{ providerPagination.total }} {{ pluralItemName }}.
                                 </template>
                             </div>
-                            <div v-if="hasActiveFilters && apiPaginationMeta.total_unfiltered">
-                                <small>Filtered from {{ apiPaginationMeta.total_unfiltered }} {{ apiPaginationMeta.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
+                            <div v-if="hasActiveFilters && providerPagination.total_unfiltered">
+                                <small>Filtered from {{ providerPagination.total_unfiltered }} {{ providerPagination.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
                             </div>
                         </div>
                     </div>
@@ -664,6 +664,27 @@ export interface FilterOption {
 export interface TableField {
     key: string;
     label?: string;
+
+    /**
+     * The key this column's filter is sent under, when it differs from the
+     * column's own key (default: `key`). Lets a *display* column filter on a
+     * different server param — e.g. a "Customer" column rendering a name but
+     * filtering on `customer_id` — instead of forcing the column to be named
+     * after the server's filter param and the human-facing value into a
+     * `#cell` slot.
+     */
+    filterKey?: string;
+
+    /**
+     * For a `select` filter: adds an option meaning "has no value", e.g.
+     * `filterNullText: "Unassigned"` on an assignee column. Selecting it sends
+     * `filterNullValue` (default `"null"`) as the filter value; client-side, it
+     * matches rows whose value is null, undefined or empty.
+     */
+    filterNullText?: string;
+
+    /** The value sent when the `filterNullText` option is chosen. Default `"null"`. */
+    filterNullValue?: string;
     sortable?: boolean;
     hint?: string;
     filter?: FilterType;
@@ -990,20 +1011,37 @@ const effectiveBusy = computed(() => isProviderMode.value ? props.busy : props.l
  */
 const instance = getCurrentInstance();
 
-const hasUpdateListener = (name: string): boolean => {
+const hasListener = (event: string): boolean => {
     const vnodeProps = instance?.vnode.props ?? {};
-    // `v-model:per-page` compiles to `onUpdate:perPage`, but a hand-written
-    // `@update:per-page` stays hyphenated — accept either.
-    const hyphenated = name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
-    return `onUpdate:${name}` in vnodeProps || `onUpdate:${hyphenated}` in vnodeProps;
+    const toHandlerKey = (name: string) => `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+    // `v-model:per-page` / `@row-clicked` compile to camelCase handler keys, but
+    // a hand-written hyphenated listener stays hyphenated — accept either.
+    const hyphenated = event.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+    return toHandlerKey(event) in vnodeProps || toHandlerKey(hyphenated) in vnodeProps;
 };
 
 const isControlled = {
-    perPage: hasUpdateListener('perPage'),
-    sortBy: hasUpdateListener('sortBy'),
-    filters: hasUpdateListener('filters'),
+    perPage: hasListener('update:perPage'),
+    sortBy: hasListener('update:sortBy'),
+    filters: hasListener('update:filters'),
 };
 
+/*
+ * Rows are interactive when clicking one does something: the built-in edit
+ * modal (`editFields`) opens, or the consumer is listening for `row-clicked`.
+ * The cursor and hover affordance follow from that — DXTable already knows,
+ * so consumers shouldn't have to reach into `:deep(tbody tr)` to say it (#107).
+ * The listener case was the gap: only `editFields` used to count.
+ */
+const rowsAreInteractive = computed(
+    () => (props.editFields?.length ?? 0) > 0 || hasListener('rowClicked'),
+);
+
+const rowCursor = computed(() => (rowsAreInteractive.value ? 'pointer' : 'default'));
+const rowHoverBackground = computed(() =>
+    rowsAreInteractive.value ? 'var(--bs-table-hover-bg)' : 'inherit',
+);
+
 // Internal sortBy state, seeded from the prop when it's an initial value.
 const internalSortBy = ref<BTableSortBy[]>(props.sortBy ? [...props.sortBy] : []);
 
@@ -1030,6 +1068,52 @@ const hasActiveFilters = computed(() => {
 // API mode pagination metadata (extracted from responses)
 const apiPaginationMeta = ref<PaginationData | null>(null);
 
+/**
+ * Pagination shown in provider mode.
+ *
+ * Only the built-in `apiUrl` provider can populate `apiPaginationMeta` — it's
+ * the one that knows to read `response.data.pagination`. A CUSTOM provider
+ * returns rows and nothing else, so the pager simply never rendered: a table
+ * with no pagination and no warning, which is why a page needing custom request
+ * shaping quietly lost its pager (#106). A custom provider now takes its
+ * pagination from the `pagination` prop, and says so when it's missing.
+ */
+// `pagination` carries a default from withDefaults, so props alone can't tell
+// whether the consumer actually passed one — ask the vnode. (Gating on
+// `total > 0` instead would treat a legitimately empty page as "no pagination".)
+const paginationWasProvided = 'pagination' in (instance?.vnode.props ?? {});
+
+const providerPagination = computed<PaginationData | null>(() => {
+    if (apiPaginationMeta.value) return apiPaginationMeta.value;
+    if (props.provider && paginationWasProvided && props.pagination) {
+        return props.pagination;
+    }
+    return null;
+});
+
+/*
+ * Loud, once, rather than a silently pager-less table — but only AFTER the
+ * provider has actually run, and judged on `providerPagination` (not the raw
+ * apiPaginationMeta). Warning at setup would fire on every consumer whose
+ * `pagination` prop arrives with the response rather than before it.
+ */
+const providerHasRun = ref(false);
+let warnedAboutProviderPagination = false;
+watch(
+    () => [props.provider, props.showPagination, providerPagination.value, providerHasRun.value] as const,
+    ([provider, showPagination, pagination, hasRun]) => {
+        if (warnedAboutProviderPagination || !hasRun) return;
+        if (provider && showPagination && !pagination) {
+            warnedAboutProviderPagination = true;
+            // eslint-disable-next-line no-console
+            console.warn(
+                '[DXTable] A custom `provider` cannot report its own pagination, so no pager will render. ' +
+                    'Pass the page metadata via the `pagination` prop, or set `:show-pagination="false"` to hide the pager deliberately.',
+            );
+        }
+    },
+);
+
 // ============================================
 // Client-Side Mode: Filtering, Sorting, Pagination
 // ============================================
@@ -1051,8 +1135,23 @@ const clientSideFilteredItems = computed<T[]>(() => {
     return props.items.filter(item => {
         return filterKeys.every(key => {
             const filterValue = filters[key].trim().toLowerCase();
-            const field = props.fields.find(f => f.key === key);
-            const itemValue = (item as any)[key];
+            // Resolve by the FILTER key, which may differ from the column's key.
+            const field = props.fields.find(f => filterKeyFor(f) === key);
+            // `filterKey` names the param the SERVER filters on; a local row may
+            // not carry it at all (a `customer_name` row filtered on
+            // `customer_id`). Match on the filter key when the row has it,
+            // otherwise fall back to the column's own value — which is also the
+            // one the user can actually see and type against.
+            const itemValue =
+                field && key in (item as any)
+                    ? (item as any)[key]
+                    : (item as any)[field?.key ?? key];
+
+            // The "no value" option (e.g. Unassigned) is the one filter that
+            // MATCHES an absent value rather than failing on it.
+            if (field?.filterNullText && filters[key] === filterNullValueFor(field)) {
+                return itemValue === null || itemValue === undefined || itemValue === '';
+            }
 
             if (itemValue === null || itemValue === undefined) {
                 return false;
@@ -1122,21 +1221,43 @@ const clientSideSortedItems = computed<T[]>(() => {
 const apiFilterValues = ref<Record<string, string[]>>({});
 
 // Computed: Get effective filter options for a field
+// The key a column's filter is SENT under, which is not always the column's own
+// key: a display column can filter on a different server param via `filterKey`.
+const filterKeyFor = (field: TableField): string => field.filterKey ?? field.key;
+
+// The value that means "has no value" for a select filter (#106).
+const filterNullValueFor = (field: TableField): string => field.filterNullValue ?? 'null';
+
+/**
+ * Column header text. An explicitly empty `label` means an EMPTY header — an
+ * actions column headed `actions` (lowercase, as-keyed) is a leak, not a
+ * default. Only fall back when no label was declared at all.
+ */
+const headerLabel = (field: TableField, slotLabel?: string): string =>
+    field.label !== undefined ? field.label : (slotLabel || field.key);
+
 const getFieldFilterOptions = (field: TableField): FilterOption[] => {
+    const options: FilterOption[] = [];
+
+    // An "Unassigned"-style option, so a select filter can express "no value".
+    if (field.filterNullText) {
+        options.push({ value: filterNullValueFor(field), text: field.filterNullText });
+    }
+
     // If field has static filterOptions, use those
     if (field.filterOptions && field.filterOptions.length > 0) {
-        return field.filterOptions;
+        return [...options, ...field.filterOptions];
     }
 
-    // Otherwise, check for server-provided values
-    const serverValues = props.filterValues?.[field.key] || apiFilterValues.value[field.key];
+    // Otherwise, check for server-provided values (keyed by the filter key)
+    const serverValues =
+        props.filterValues?.[filterKeyFor(field)] ?? apiFilterValues.value[filterKeyFor(field)];
 
     if (serverValues && serverValues.length > 0) {
-        // Convert string array to FilterOption array
-        return serverValues.map(value => ({ value, text: value }));
+        return [...options, ...serverValues.map(value => ({ value, text: value }))];
     }
 
-    return [];
+    return options;
 };
 
 // LocalStorage key for perPage preference
@@ -1185,8 +1306,10 @@ watch(() => props.pagination?.per_page, (newPerPage) => {
 
 // Watch for external filter changes (when filters prop is controlled by parent)
 watch(() => props.filters, (newFilters, oldFilters) => {
-    // Only trigger refresh if filters prop is being used (not internal state)
-    if (props.filters === undefined) return;
+    // Only when the consumer CONTROLS filters. Uncontrolled, the prop is just a
+    // seed: `effectiveFilters` stays internal, so refreshing on a later prop
+    // change would fetch with filters the table isn't actually showing (#110).
+    if (!isControlled.filters || props.filters === undefined) return;
 
     // Only refresh if filters actually changed
     if (JSON.stringify(newFilters) === JSON.stringify(oldFilters)) return;
@@ -1247,7 +1370,7 @@ const effectivePerPage = computed(() => {
     }
 
     // For API mode, use internal state (which gets updated immediately on change)
-    // Don't use apiPaginationMeta.per_page here because it's from the previous request
+    // Don't use providerPagination.per_page here because it's from the previous request
     // and causes the select to flicker when user changes it
     return internalPerPage.value;
 });
@@ -1322,7 +1445,10 @@ const shouldShowPerPageSelector = computed(() => {
         ? clientSidePagination.value?.total || 0
         : isInertiaMode.value
             ? props.pagination?.total || 0
-            : apiPaginationMeta.value?.total || 0;
+            // Same source as the pager itself — reading apiPaginationMeta here
+            // hid the selector for a custom provider whose pagination comes
+            // from the `pagination` prop, while the page buttons still showed.
+            : providerPagination.value?.total || 0;
 
     return total >= smallestOption;
 });
@@ -1331,7 +1457,7 @@ const shouldShowPerPageSelector = computed(() => {
 const fieldsNeedingFilterValues = computed(() => {
     return props.fields
         .filter(field => field.filter === 'select' && (!field.filterOptions || field.filterOptions.length === 0))
-        .map(field => field.key);
+        .map(field => filterKeyFor(field));
 });
 
 // Error state for API mode
@@ -1416,6 +1542,8 @@ const wrappedProvider: BTableProvider<T> = async (context: Readonly<BTableProvid
             error?.message ||
             'Failed to load data. Please try again.';
         return [];
+    } finally {
+        providerHasRun.value = true;
     }
 };
 
@@ -1670,6 +1798,26 @@ try {
 // Forward only the keyed edit slots the consumer actually provided, so
 // DXForm doesn't mistake an always-present (but empty) wrapper for
 // a real custom-value override.
+// Fields whose value actually belongs in the payload. A presentational field
+// (submit: false) renders but holds no data — see FieldDefinition.submit.
+const submittableEditFields = computed(() =>
+    (props.editFields ?? []).filter((field) => field.submit !== false),
+);
+
+// Enforced at SUBMIT, not just at seeding: the modal still renders every field,
+// so a `submit: false` control — or a `span` slot calling `update` — can write
+// its key back into the form data after seeding. Strip them on the way out.
+const nonSubmittedFieldKeys = computed(
+    () => new Set((props.editFields ?? []).filter((field) => field.submit === false).map((field) => field.key)),
+);
+
+const stripNonSubmittedFields = (data: Record<string, any>): Record<string, any> => {
+    if (nonSubmittedFieldKeys.value.size === 0) return data;
+    return Object.fromEntries(
+        Object.entries(data).filter(([key]) => !nonSubmittedFieldKeys.value.has(key)),
+    );
+};
+
 const tableSlots = useSlots();
 
 /*
@@ -1789,13 +1937,15 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
         // seeding is synchronous — no interleaving between successive row opens.
         if (!editForm.value) {
             const formData: Record<string, any> = {};
-            props.editFields!.forEach(field => {
+            // Presentational fields (submit: false) lay the form out; they hold
+            // no data and must not be POSTed just because they were declared.
+            submittableEditFields.value.forEach(field => {
                 formData[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
             editForm.value = useForm(formData);
         } else {
             // Update existing form
-            props.editFields.forEach(field => {
+            submittableEditFields.value.forEach(field => {
                 editForm.value.data[field.key] = (item as any)[field.key] ?? field.default ?? '';
             });
             editForm.value.clearErrors();
@@ -1826,7 +1976,7 @@ const fetchFullRecordForEdit = async (item: T) => {
 
         const record = response.data?.data ?? response.data;
         if (record && editForm.value) {
-            props.editFields!.forEach(field => {
+            submittableEditFields.value.forEach(field => {
                 if (Object.prototype.hasOwnProperty.call(record, field.key)) {
                     editForm.value.data[field.key] = record[field.key];
                 }
@@ -1866,13 +2016,13 @@ const handleCreateNew = () => {
 
     if (!editForm.value) {
         const formData: Record<string, any> = {};
-        props.editFields!.forEach(field => {
+        submittableEditFields.value.forEach(field => {
             formData[field.key] = field.default ?? '';
         });
         editForm.value = useForm(formData);
     } else {
         // Reset existing form to defaults
-        props.editFields!.forEach(field => {
+        submittableEditFields.value.forEach(field => {
             editForm.value.data[field.key] = field.default ?? '';
         });
         editForm.value.clearErrors();
@@ -1898,6 +2048,7 @@ const performSave = async () => {
     if (isCreateMode.value && props.createUrl) {
         try {
             await editForm.value.post(props.createUrl, {
+                transform: stripNonSubmittedFields,
                 onSuccess: (data: any) => {
                     createToast?.({
                         title: 'Success',
@@ -1950,6 +2101,7 @@ const performSave = async () => {
             const url = props.editUrl.replace(':id', itemId);
 
             await editForm.value.put(url, {
+                transform: stripNonSubmittedFields,
                 onSuccess: (data: any) => {
                     // Show success toast
                     createToast?.({
@@ -2097,13 +2249,13 @@ defineExpose({
 </script>
 
 <style scoped>
-/* Add pointer cursor to table rows when editFields is enabled */
+/* Rows that do something on click look like it — see `rowsAreInteractive`. */
 :deep(tbody tr) {
-    cursor: v-bind('editFields && editFields.length > 0 ? "pointer" : "default"');
+    cursor: v-bind(rowCursor);
 }
 
 :deep(tbody tr:hover) {
-    background-color: v-bind('editFields && editFields.length > 0 ? "var(--bs-table-hover-bg)" : "inherit"');
+    background-color: v-bind(rowHoverBackground);
 }
 
 /* Improve pagination button sizing to match form controls */

package/resources/js/types/index.ts

@@ -118,6 +118,17 @@ export interface FieldDefinition {
     /** Re-run `optionsLoader` whenever the form model changes. */
     reloadOptionsOnChange?: boolean;
 
+    /**
+     * For `select` fields: render a **searchable** select — type to filter a
+     * long option list, while the model still holds `option.value` (an id).
+     *
+     * A plain `select` is fine for ten options and unusable for hundreds; the
+     * `autocomplete` type filters but models the *typed text*, so it can't back
+     * a foreign key (picking "Tesco" gives you `"Tesco"`, not `37`). This is the
+     * combination high-frequency data entry against a long list needs.
+     */
+    searchable?: boolean;
+
     /** Number of rows for textarea (default: 3) */
     rows?: number;
 
@@ -318,6 +329,18 @@ export interface FieldDefinition {
      */
     revealable?: boolean;
 
+    /**
+     * Include this field's value in the submitted payload. Default `true`.
+     *
+     * Set `false` for a **presentational** field — a header, an alert, an
+     * explanatory block rendered via `span` — that exists to lay out the form,
+     * not to hold data. Without it, `DXTable`'s edit modal seeds its form from
+     * every `editFields` key, so those decorative fields are POSTed alongside
+     * the real ones (an empty string, an empty array) purely because they were
+     * declared.
+     */
+    submit?: boolean;
+
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated