@omnitend/dashboard-for-laravel 0.26.0 → 0.28.0

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

@@ -40,24 +40,25 @@
                         <p class="mt-2">{{ loadingText }}</p>
                     </div>
 
-                    <!-- Provider Mode: Use BTable's provider pattern -->
+                    <!-- One table for all three data modes. The modes differ only
+                         in a few bound props, supplied by `tableModeBindings`, so
+                         the filter row, headers, dotted-cell rendering and slot
+                         forwarding live ONCE here instead of being copied per mode
+                         (#123). The `v-else-if` guard keeps "render nothing when
+                         there is no data source" — none of the three modes true. -->
                     <DTable
-                        v-else-if="isProviderMode"
+                        v-else-if="isProviderMode || isClientSideMode || isInertiaMode"
                         ref="tableRef"
                         :key="tableSlotSignature($slots)"
-                        :provider="effectiveProvider"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
-                        :per-page="effectivePerPage"
-                        :current-page="apiCurrentPage"
                         :multisort="false"
                         :no-sortable-icon="true"
                         :striped="striped"
                         :hover="hover"
                         :responsive="responsive"
-                        :busy="busy"
                         :tbody-tr-class="composeRowClass"
-                        v-bind="tablePassthroughProps"
+                        v-bind="{ ...tableModeBindings, ...tablePassthroughProps }"
                         @update:sort-by="handleSortChange"
                         @update:expanded-items="emit('update:expandedItems', $event)"
                         @update:current-page="apiCurrentPage = $event"
@@ -137,113 +138,16 @@
                             </div>
                         </template>
 
-                        <!-- Forward every slot the inner table understands: cell(<key>),
-                             foot(<key>), custom-foot, empty, empty-filtered, row-expansion,
-                             table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
-                             See `isTableSlot` for the two DXTable renders itself. -->
+                        <!-- A dotted field key (`paid_by.card`) renders as an EMPTY cell in
+                             bootstrap-vue-next, in every payload shape, so DXTable resolves
+                             those columns itself (#121). A consumer's own cell(<key>) slot
+                             wins — `dottedCellFields` excludes it, and the forwarding below
+                             would otherwise declare the same slot name twice. -->
                         <template
-                            v-for="name in forwardableSlotNames($slots)"
-                            :key="name"
-                            #[name]="slotProps"
-                        >
-                            <!--
-                              @slot Any slot the underlying table supports, forwarded with its scope: `cell(<fieldKey>)` for a cell, `foot(<fieldKey>)` for a footer cell (needs `footClone`), `empty` for the no-rows message, `row-expansion` for expandable row detail, plus `custom-foot`, `top-row`, `bottom-row`, `thead-sub` and the `table-*` slots.
-                            -->
-                            <slot :name="name" v-bind="slotProps" />
-                        </template>
-                    </DTable>
-
-                    <!-- Client-Side Mode: Local filtering, sorting, pagination -->
-                    <DTable
-                        v-else-if="isClientSideMode"
-                        :key="tableSlotSignature($slots)"
-                        :items="clientSidePaginatedItems"
-                        :fields="fields"
-                        :sort-by="effectiveSortBy"
-                        :multisort="false"
-                        :no-local-sorting="true"
-                        :no-sortable-icon="true"
-                        :striped="striped"
-                        :hover="hover"
-                        :responsive="responsive"
-                        :tbody-tr-class="composeRowClass"
-                        v-bind="tablePassthroughProps"
-                        @update:sort-by="handleSortChange"
-                        @update:expanded-items="emit('update:expandedItems', $event)"
-                        @row-clicked="handleRowClick"
-                    >
-                        <!-- DXTable owns `thead-top` (its filter row lives there), so a
-                             consumer's own thead-top content is COMPOSED above it rather
-                             than being dropped: a grouped column-header banner or a pinned
-                             totals row sits above the headers where it belongs (#120). -->
-                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
-                            <!--
-                              @slot A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.
-                              @binding {object} columns The number of columns in the table.
-                              @binding {object} fields The table's fields.
-                            -->
-                            <slot name="thead-top" v-bind="theadScope" />
-
-                            <tr v-if="hasFilters" class="filter-row">
-                                <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
-                                    <!-- Text Filter -->
-                                    <DFormInput
-                                        v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
-                                        size="sm"
-                                        @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[filterKeyFor(field)] || ''"
-                                        :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
-                                        size="sm"
-                                        open-on-focus
-                                        @update:model-value="handleSelectFilterChange(field, $event)"
-                                    />
-
-                                    <!-- Number Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
-                                        type="number"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- Date Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        type="date"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- No filter for this column -->
-                                    <div v-else></div>
-                                </th>
-                            </tr>
-                        </template>
-
-                        <!-- Custom headers for all fields -->
-                        <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">{{ 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;">
-                                    <span :style="{ opacity: getFieldSortState(field.key) === 'asc' ? 1 : 0.3 }">▲</span>
-                                    <span :style="{ opacity: getFieldSortState(field.key) === 'desc' ? 1 : 0.3 }">▼</span>
-                                </div>
-                            </div>
-                        </template>
+                            v-for="field in dottedCellFields($slots)"
+                            :key="`dotted-cell-${field.key}`"
+                            #[`cell(${field.key})`]="{ item }"
+                        >{{ fieldValueOf(item, field.key) }}</template>
 
                         <!-- Forward every slot the inner table understands: cell(<key>),
                              foot(<key>), custom-foot, empty, empty-filtered, row-expansion,
@@ -261,435 +165,85 @@
                         </template>
                     </DTable>
 
-                    <!-- Inertia Mode: Use items prop -->
-                    <DTable
-                        v-else-if="isInertiaMode"
-                        :key="tableSlotSignature($slots)"
-                        :items="items"
-                        :fields="fields"
-                        :sort-by="effectiveSortBy"
-                        :multisort="false"
-                        :no-local-sorting="true"
-                        :no-sortable-icon="true"
-                        :striped="striped"
-                        :hover="hover"
-                        :responsive="responsive"
-                        :busy="effectiveBusy"
-                        :tbody-tr-class="composeRowClass"
-                        v-bind="tablePassthroughProps"
-                        @update:sort-by="handleSortChange"
-                        @update:expanded-items="emit('update:expandedItems', $event)"
-                        @row-clicked="handleRowClick"
-                    >
-                        <!-- DXTable owns `thead-top` (its filter row lives there), so a
-                             consumer's own thead-top content is COMPOSED above it rather
-                             than being dropped: a grouped column-header banner or a pinned
-                             totals row sits above the headers where it belongs (#120). -->
-                        <template v-if="hasFilters || $slots['thead-top']" #thead-top="theadScope">
-                            <!--
-                              @slot A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.
-                              @binding {object} columns The number of columns in the table.
-                              @binding {object} fields The table's fields.
-                            -->
-                            <slot name="thead-top" v-bind="theadScope" />
-
-                            <tr v-if="hasFilters" class="filter-row">
-                                <th v-for="field in fields" :key="`filter-${field.key}`" class="p-2">
-                                    <!-- Text Filter -->
-                                    <DFormInput
-                                        v-if="field.filter === 'text'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Search ${field.label || field.key}...`"
-                                        size="sm"
-                                        @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[filterKeyFor(field)] || ''"
-                                        :options="getFieldFilterOptions(field)"
-                                        :placeholder="field.filterPlaceholder || filterAllLabelFor(field)"
-                                        size="sm"
-                                        open-on-focus
-                                        @update:model-value="handleSelectFilterChange(field, $event)"
-                                    />
-
-                                    <!-- Number Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'number'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        :placeholder="field.filterPlaceholder || `Filter ${field.label || field.key}...`"
-                                        type="number"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- Date Filter -->
-                                    <DFormInput
-                                        v-else-if="field.filter === 'date'"
-                                        :model-value="effectiveFilters[filterKeyFor(field)] || ''"
-                                        type="date"
-                                        size="sm"
-                                        @update:model-value="handleFilterChange(filterKeyFor(field), $event as string)"
-                                    />
-
-                                    <!-- No filter for this column -->
-                                    <div v-else></div>
-                                </th>
-                            </tr>
-                        </template>
-
-                        <!-- Custom headers for all fields -->
-                        <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">{{ 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;">
-                                    <span :style="{ opacity: getFieldSortState(field.key) === 'asc' ? 1 : 0.3 }">▲</span>
-                                    <span :style="{ opacity: getFieldSortState(field.key) === 'desc' ? 1 : 0.3 }">▼</span>
-                                </div>
-                            </div>
-                        </template>
-
-                        <!-- Forward every slot the inner table understands: cell(<key>),
-                             foot(<key>), custom-foot, empty, empty-filtered, row-expansion,
-                             table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
-                             See `isTableSlot` for the two DXTable renders itself. -->
-                        <template
-                            v-for="name in forwardableSlotNames($slots)"
-                            :key="name"
-                            #[name]="slotProps"
-                        >
-                            <!--
-                              @slot Any slot the underlying table supports, forwarded with its scope: `cell(<fieldKey>)` for a cell, `foot(<fieldKey>)` for a footer cell (needs `footClone`), `empty` for the no-rows message, `row-expansion` for expandable row detail, plus `custom-foot`, `top-row`, `bottom-row`, `thead-sub` and the `table-*` slots.
-                            -->
-                            <slot :name="name" v-bind="slotProps" />
-                        </template>
-                    </DTable>
-
-                    <!-- Pagination and Controls (Client-Side mode) -->
-                    <div v-if="isClientSideMode" 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 && clientSidePagination.total > clientSidePagination.per_page"
-                                :model-value="clientSidePagination.current_page"
-                                :total-rows="clientSidePagination.total"
-                                :per-page="clientSidePagination.per_page"
-                                size="sm"
-                                @update:model-value="handleClientSidePageChange"
-                            />
-                            <div v-else></div>
-
-                            <!-- Per-page selector -->
-                            <div v-if="shouldShowPerPageSelector" class="d-flex align-items-center gap-2">
-                                <label for="perPageSelectClientSide" class="mb-0 small text-muted">Per page</label>
-                                <DFormSelect
-                                    id="perPageSelectClientSide"
-                                    :model-value="effectivePerPage"
-                                    :options="perPageOptions.map(n => ({ value: n, text: n.toString() }))"
-                                    size="sm"
-                                    style="width: 85px;"
-                                    @update:model-value="handlePerPageChange"
-                                />
-                            </div>
-                        </div>
-
-                        <!-- Bottom row: Info text -->
-                        <div class="small text-muted">
-                            <div>
-                                <template v-if="clientSidePagination.total > clientSidePagination.per_page">
-                                    {{ clientSidePagination.from }} to {{ clientSidePagination.to }} out of {{ clientSidePagination.total }} {{ clientSidePagination.total === 1 ? singularItemName : pluralItemName }}.
-                                </template>
-                                <template v-else-if="clientSidePagination.total === 1">
-                                    {{ clientSidePagination.total }} {{ singularItemName }}.
-                                </template>
-                                <template v-else>
-                                    {{ clientSidePagination.total }} {{ pluralItemName }}.
-                                </template>
-                            </div>
-                            <div v-if="hasActiveFilters && clientSidePagination.total_unfiltered">
-                                <small>Filtered from {{ clientSidePagination.total_unfiltered }} {{ clientSidePagination.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Pagination and Controls (Inertia mode) -->
-                    <div v-if="isInertiaMode && pagination" 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 && pagination.total > pagination.per_page"
-                                :model-value="pagination.current_page"
-                                :total-rows="pagination.total"
-                                :per-page="pagination.per_page"
-                                size="sm"
-                                @update:model-value="handlePageChange"
-                            />
-                            <div v-else></div>
-
-                            <!-- Per-page selector -->
-                            <div v-if="shouldShowPerPageSelector" class="d-flex align-items-center gap-2">
-                                <label for="perPageSelect" class="mb-0 small text-muted">Per page</label>
-                                <DFormSelect
-                                    id="perPageSelect"
-                                    :model-value="effectivePerPage"
-                                    :options="perPageOptions.map(n => ({ value: n, text: n.toString() }))"
-                                    size="sm"
-                                    style="width: 85px;"
-                                    @update:model-value="handlePerPageChange"
-                                />
-                            </div>
-                        </div>
-
-                        <!-- Bottom row: Info text -->
-                        <div class="small text-muted">
-                            <div>
-                                <template v-if="pagination.total > pagination.per_page">
-                                    {{ pagination.from }} to {{ pagination.to }} out of {{ pagination.total }} {{ pagination.total === 1 ? singularItemName : pluralItemName }}.
-                                </template>
-                                <template v-else-if="pagination.total === 1">
-                                    {{ pagination.total }} {{ singularItemName }}.
-                                </template>
-                                <template v-else>
-                                    {{ pagination.total }} {{ pluralItemName }}.
-                                </template>
-                            </div>
-                            <div v-if="hasActiveFilters && pagination.total_unfiltered">
-                                <small>Filtered from {{ pagination.total_unfiltered }} {{ pagination.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Pagination and Controls (API mode) -->
-                    <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 && 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"
-                            />
-                            <div v-else></div>
-
-                            <!-- Per-page selector -->
-                            <div v-if="shouldShowPerPageSelector" class="d-flex align-items-center gap-2">
-                                <label for="perPageSelectApi" class="mb-0 small text-muted">Per page</label>
-                                <DFormSelect
-                                    id="perPageSelectApi"
-                                    :model-value="effectivePerPage"
-                                    :options="perPageOptions.map(n => ({ value: n, text: n.toString() }))"
-                                    size="sm"
-                                    style="width: 85px;"
-                                    @update:model-value="handlePerPageChange"
-                                />
-                            </div>
-                        </div>
-
-                        <!-- Bottom row: Info text -->
-                        <div class="small text-muted">
-                            <div>
-                                <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="providerPagination.total === 1">
-                                    {{ providerPagination.total }} {{ singularItemName }}.
-                                </template>
-                                <template v-else>
-                                    {{ providerPagination.total }} {{ pluralItemName }}.
-                                </template>
-                            </div>
-                            <div v-if="hasActiveFilters && providerPagination.total_unfiltered">
-                                <small>Filtered from {{ providerPagination.total_unfiltered }} {{ providerPagination.total_unfiltered === 1 ? singularItemName : pluralItemName }}.</small>
-                            </div>
-                        </div>
-                    </div>
+                    <!-- Pagination + per-page footer, rendered ONCE for all three
+                         data modes (#123). `activePagination` picks the mode's
+                         PaginationData; `handleActivePageChange` routes the page
+                         event to the right per-mode handler. Previously three
+                         byte-identical copies, one per mode. -->
+                    <DXTablePagination
+                        v-if="activePagination"
+                        :pagination="activePagination"
+                        :per-page="effectivePerPage"
+                        :per-page-options="perPageOptions"
+                        :show-pagination="showPagination"
+                        :show-per-page-selector="shouldShowPerPageSelector"
+                        :singular-item-name="singularItemName"
+                        :plural-item-name="pluralItemName"
+                        :has-active-filters="hasActiveFilters"
+                        @page-change="handleActivePageChange"
+                        @per-page-change="handlePerPageChange"
+                    />
                 </DXTableShell>
             </DCol>
         </DRow>
 
-        <!-- Edit Modal (if editFields provided) -->
-        <DModal
+        <!-- Edit/create modal (only when editFields provided). The consumer's
+             edit-value / edit-span / tab-* slots are forwarded through to it
+             generically; it maps them onto DXForm and provides the row context
+             + a close handle (#129). -->
+        <DXTableEditorModal
             v-if="editFields && editFields.length > 0"
-            v-model="showEditModal"
+            v-model:show="showEditModal"
+            v-model:active-tab="activeTabIndex"
             :title="computedModalTitle"
             :size="editModalSize"
+            :loading="editLoading"
+            :form="editForm"
+            :form-instance-key="editFormInstanceKey"
+            :fields="editFields"
+            :tabs="editTabs"
+            :item="selectedItem"
+            :is-create-mode="isCreateMode"
+            :pending-action="pendingAction"
+            :delete-url="deleteUrl"
+            @save="handleEditSave"
+            @cancel="handleEditCancel"
+            @delete="handleDelete"
         >
-            <!-- Loading the full record for edit (showUrl fetch) -->
-            <div
-                v-if="editLoading"
-                class="dx-edit-loading d-flex align-items-center gap-2 text-muted mb-3"
-            >
-                <DSpinner small />
-                <span>Loading…</span>
-            </div>
-
-            <!-- Edit/create form (tabbed when editTabs provided, flat otherwise).
-
-                 Keyed per modal open: the form OBJECT is created once and then
-                 reseeded in place for each row, so without a key Vue reuses the
-                 same DXField instances across records — and any per-field UI
-                 state rides along with them. That leaked a revealed password
-                 from one row into the next. The key gives each record a fresh
-                 field subtree; the data still lives in `editForm`, so nothing
-                 is lost by remounting. -->
-            <DXForm
-                v-if="editForm"
-                :key="editFormInstanceKey"
-                v-model:active-tab="activeTabIndex"
-                :form="editForm"
-                :fields="editFields"
-                :tabs="editTabs"
-                :context="selectedItem ?? undefined"
-                :show-submit="false"
-                @submit="handleEditSave"
+            <!--
+              @slot edit-value(<fieldKey>) / edit-span(<fieldKey>) /
+              tab-content|tab-before|tab-after(<tabKey>) — forwarded to the edit
+              modal (see DXTableEditorModal for their bindings).
+            -->
+            <template
+                v-for="name in editModalSlotNames($slots)"
+                :key="name"
+                #[name]="slotProps"
             >
-                <!-- Forward DXTable's edit-value(key) → DXForm value(key) -->
-                <template
-                    v-for="key in editValueSlotKeys"
-                    :key="`ev-${key}`"
-                    #[`value(${key})`]="sp"
-                >
-                    <!--
-                      @slot Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.
-                      @binding {object} item The row being edited (null in create mode).
-                      @binding {any} value The current field value.
-                      @binding {Function} update Call with a new value to update the field.
-                      @binding {object} field The field definition.
-                    -->
-                    <slot
-                        :name="`edit-value(${key})`"
-                        :item="selectedItem"
-                        :value="sp.value"
-                        :update="sp.update"
-                        :field="sp.field"
-                    />
-                </template>
-
-                <!-- Forward edit-span(key) → span(key) -->
-                <template
-                    v-for="key in editSpanSlotKeys"
-                    :key="`es-${key}`"
-                    #[`span(${key})`]="sp"
-                >
-                    <!--
-                      @slot Full-width custom content for field `<key>` in the edit/create modal, forwarded to DXForm's span slot. Name it `edit-span(<fieldKey>)`.
-                      @binding {object} item The row being edited (null in create mode).
-                      @binding {any} value The current field value.
-                      @binding {Function} update Call with a new value to update the field.
-                      @binding {Function} close Call to close the edit modal.
-                    -->
-                    <slot
-                        :name="`edit-span(${key})`"
-                        :item="selectedItem"
-                        :value="sp.value"
-                        :update="sp.update"
-                        :close="handleEditCancel"
-                    />
-                </template>
-
-                <!-- Forward tab-content / tab-before / tab-after slots -->
-                <template
-                    v-for="key in tabContentSlotKeys"
-                    :key="`tc-${key}`"
-                    #[`tab-content(${key})`]="sp"
-                >
-                    <!--
-                      @slot Replaces the auto-rendered fields of edit-modal tab `<key>` with custom content. Name it `tab-content(<tabKey>)`.
-                      @binding {object} item The row being edited (null in create mode).
-                      @binding {object} tab The tab definition.
-                    -->
-                    <slot :name="`tab-content(${key})`" :item="selectedItem" :tab="sp.tab" />
-                </template>
-                <template
-                    v-for="key in tabBeforeSlotKeys"
-                    :key="`tb-${key}`"
-                    #[`tab-before(${key})`]="sp"
-                >
-                    <!--
-                      @slot Custom content rendered before the fields of edit-modal tab `<key>`. Name it `tab-before(<tabKey>)`.
-                      @binding {object} item The row being edited (null in create mode).
-                      @binding {object} tab The tab definition.
-                    -->
-                    <slot :name="`tab-before(${key})`" :item="selectedItem" :tab="sp.tab" />
-                </template>
-                <template
-                    v-for="key in tabAfterSlotKeys"
-                    :key="`taf-${key}`"
-                    #[`tab-after(${key})`]="sp"
-                >
-                    <!--
-                      @slot Custom content rendered after the fields of edit-modal tab `<key>`. Name it `tab-after(<tabKey>)`.
-                      @binding {object} item The row being edited (null in create mode).
-                      @binding {object} tab The tab definition.
-                    -->
-                    <slot :name="`tab-after(${key})`" :item="selectedItem" :tab="sp.tab" />
-                </template>
-            </DXForm>
-
-            <template #footer>
-                <div class="d-flex justify-content-between w-100">
-                    <div>
-                        <DButton
-                            v-if="deleteUrl && !isCreateMode"
-                            variant="danger"
-                            :loading="pendingAction === 'delete'"
-                            loading-text="Deleting..."
-                            :disabled="editForm?.processing || editLoading"
-                            @click="handleDelete"
-                        >
-                            Delete
-                        </DButton>
-                    </div>
-                    <div class="d-flex gap-2">
-                        <DButton variant="secondary" @click="handleEditCancel">
-                            Cancel
-                        </DButton>
-                        <DButton
-                            variant="primary"
-                            :loading="pendingAction === 'save'"
-                            :loading-text="isCreateMode ? 'Creating...' : 'Saving...'"
-                            :disabled="editForm?.processing || editLoading"
-                            @click="handleEditSave"
-                        >
-                            {{ isCreateMode ? 'Create' : 'Save Changes' }}
-                        </DButton>
-                    </div>
-                </div>
+                <slot :name="name" v-bind="slotProps" />
             </template>
-        </DModal>
+        </DXTableEditorModal>
     </DContainer>
 </template>
 
 <script setup lang="ts" generic="T = any">
-import { computed, getCurrentInstance, ref, watch, useSlots } from "vue";
+import { computed, getCurrentInstance, ref, watch } from "vue";
 import { router } from "@inertiajs/vue3";
 import axios from "axios";
 import pluralize from "pluralize";
-import { useToast } from "../../composables/useToast";
-import { useForm } from "../../composables/useForm";
+import { useResourceEditor } from "../../composables/useResourceEditor";
+import { getByPath } from "../../utils/objectPath";
 import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
 import DXTableShell from "./DXTableShell.vue";
 import DSpinner from "../base/DSpinner.vue";
 import DTable from "../base/DTable.vue";
-import DPagination from "../base/DPagination.vue";
 import DFormInput from "../base/DFormInput.vue";
-import DFormSelect from "../base/DFormSelect.vue";
 import DAutocomplete from "../base/DAutocomplete.vue";
-import DModal from "../base/DModal.vue";
 import DButton from "../base/DButton.vue";
-import DXForm from "./DXForm.vue";
+import DXTablePagination from "./DXTablePagination.vue";
+import DXTableEditorModal from "./DXTableEditorModal.vue";
 export type FilterType = 'text' | 'select' | 'number' | 'date' | false;
 
 export interface FilterOption {
@@ -1222,10 +776,11 @@ const clientSideFilteredItems = computed<T[]>(() => {
             // `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.
+            // Both lookups are dot-path aware, so a nested payload filters (#121).
             const itemValue =
-                field && key in (item as any)
-                    ? (item as any)[key]
-                    : (item as any)[field?.key ?? key];
+                field && hasFieldValue(item, key)
+                    ? fieldValueOf(item, key)
+                    : fieldValueOf(item, field?.key ?? key);
 
             // The "no value" option (e.g. Unassigned) is the one filter that
             // MATCHES an absent value rather than failing on it.
@@ -1279,13 +834,16 @@ const clientSideSortedItems = computed<T[]>(() => {
     const direction = order === 'desc' ? -1 : 1;
 
     return items.sort((a, b) => {
-        const aVal = (a as any)[key];
-        const bVal = (b as any)[key];
+        // Dot-path aware, so `paid_by.card` sorts a nested payload (#121).
+        const aVal = fieldValueOf(a, key);
+        const bVal = fieldValueOf(b, key);
 
         // Handle null/undefined
-        if (aVal == null && bVal == null) return 0;
-        if (aVal == null) return direction;
-        if (bVal == null) return -direction;
+        const aEmpty = aVal === null || aVal === undefined;
+        const bEmpty = bVal === null || bVal === undefined;
+        if (aEmpty && bEmpty) return 0;
+        if (aEmpty) return direction;
+        if (bEmpty) return -direction;
 
         // Numeric comparison
         if (typeof aVal === 'number' && typeof bVal === 'number') {
@@ -1300,6 +858,54 @@ const clientSideSortedItems = computed<T[]>(() => {
 // API mode filter values (extracted from responses)
 const apiFilterValues = ref<Record<string, string[]>>({});
 
+/*
+ * Resolving a field's value from a row, dot-path aware (#121).
+ *
+ * A key containing a dot (`paid_by.card`) was unusable. Two layers disagreed:
+ * bootstrap-vue-next's `mapItem` UN-flattens any item key containing a dot
+ * (`{'paid_by.card': v}` becomes `{paid_by: {card: v}}`) and then its cell reads
+ * `item['paid_by.card']` FLAT and gets undefined — so bvn renders a dotted key
+ * as an empty cell in BOTH payload shapes. Meanwhile our own client-side sort
+ * and filter also read flat, which a NESTED payload (what Laravel serialises for
+ * a relation) never satisfies. Consumers worked around it by flattening every
+ * nested key to an `_x` alias in each client-side port.
+ *
+ * LITERAL key first, then dot-path. That single order covers every shape:
+ * an ordinary key (`name`), a dots-flat payload (the literal `paid_by.card`
+ * key), and a nested payload (walk `paid_by` -> `card`). It also means bvn's
+ * un-flattening is harmless rather than hostile — mapItem normalises flat to
+ * nested, and the path read finds it either way.
+ */
+const fieldValueOf = (item: unknown, key: string): any => {
+    if (item === null || item === undefined) return undefined;
+    if (Object.prototype.hasOwnProperty.call(item, key)) {
+        return (item as Record<string, any>)[key];
+    }
+    return getByPath(item as Record<string, any>, key);
+};
+
+/*
+ * Whether a row carries a value for `key` at all — presence, not truthiness.
+ * Mirrors the `key in item` check this replaced, extended to dot paths.
+ */
+const hasFieldValue = (item: unknown, key: string): boolean => {
+    if (item === null || item === undefined) return false;
+    if (Object.prototype.hasOwnProperty.call(item, key)) return true;
+    return getByPath(item as Record<string, any>, key) !== undefined;
+};
+
+/*
+ * Dotted-key columns DXTable must render itself, because bvn renders them empty
+ * (see `fieldValueOf`). A consumer's own `cell(<key>)` slot always wins — it is
+ * forwarded separately, and declaring the same slot name twice would clobber it.
+ *
+ * A FUNCTION, not a computed, for the same reason as `forwardableSlotNames`:
+ * `useSlots()` returns an object Vue mutates in place with nothing to track, so
+ * a computed over its keys is captured on first render and never updates (#114).
+ */
+const dottedCellFields = (slots: Record<string, unknown>): TableField[] =>
+    props.fields.filter((field) => field.key.includes('.') && !slots[`cell(${field.key})`]);
+
 // 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`.
@@ -1713,6 +1319,62 @@ const handleApiPageChange = (page: number) => {
     // BTable should automatically call provider when currentPage prop changes
 };
 
+/*
+ * The per-mode props for the ONE inner `<DTable>` (#123). DXTable used to carry
+ * three near-identical `<DTable>` blocks — provider / client-side / inertia —
+ * differing only in these few bindings, so every table fix had to be written
+ * three times and could silently miss a mode. This reproduces each old block's
+ * bindings EXACTLY (a faithful collapse, not a behaviour change):
+ *
+ * - provider: BTable drives its own pagination, so it needs `provider`,
+ *   `currentPage` and `perPage`; `busy` is the raw prop (two-way with BTable's
+ *   provider loading via `@update:busy`).
+ * - client-side: rows are pre-sliced by `clientSidePaginatedItems`, and local
+ *   sorting is off (we sort in `clientSideSortedItems`).
+ * - inertia: server-paginated `items`, local sorting off, `busy` is
+ *   `effectiveBusy` (the `loading` prop in this mode).
+ *
+ * A key absent from the returned object is simply not bound, which is what the
+ * original blocks did (e.g. non-provider modes never set `provider`/`currentPage`,
+ * so BTable falls back to `items` and its own page defaults).
+ */
+const tableModeBindings = computed<Record<string, unknown>>(() => {
+    if (isProviderMode.value) {
+        return {
+            provider: effectiveProvider.value,
+            currentPage: apiCurrentPage.value,
+            perPage: effectivePerPage.value,
+            busy: props.busy,
+        };
+    }
+    if (isClientSideMode.value) {
+        return { items: clientSidePaginatedItems.value, noLocalSorting: true };
+    }
+    // inertia
+    return { items: props.items, noLocalSorting: true, busy: effectiveBusy.value };
+});
+
+/*
+ * The pagination metadata the single footer renders, by mode (#123). Null means
+ * no footer: only provider mode has that case (a custom provider with no
+ * `pagination` prop). Client-side always has a computed object; inertia's
+ * `pagination` prop carries a default object, so both always render a footer —
+ * matching the three original per-mode `v-if`s exactly.
+ */
+const activePagination = computed<PaginationData | null>(() => {
+    if (isClientSideMode.value) return clientSidePagination.value;
+    if (isInertiaMode.value) return props.pagination;
+    if (isProviderMode.value) return providerPagination.value;
+    return null;
+});
+
+// Route the footer's page-change to the right per-mode handler.
+const handleActivePageChange = (page: number) => {
+    if (isClientSideMode.value) return handleClientSidePageChange(page);
+    if (isProviderMode.value) return handleApiPageChange(page);
+    return handlePageChange(page); // inertia
+};
+
 const handleSortChange = (sortBy: BTableSortBy[]) => {
     // ENFORCE single-column sorting: keep only the last clicked column
     // BTable may send multiple columns despite multisort: false
@@ -1855,6 +1517,7 @@ const handleFilterChange = (fieldKey: string, value: string) => {
                 {
                     page: 1, // Reset to first page when filtering
                     filters: newFilters,
+                    perPage: effectivePerPage.value,
                     ...sortParams(effectiveSortBy.value),
                 },
                 { preserveState: true }
@@ -1887,121 +1550,6 @@ const refresh = () => {
     }
 };
 
-// Edit Modal State
-const showEditModal = ref(false);
-
-// Bumped on every modal open (edit or create) to key the DXForm subtree, so
-// each record gets fresh DXField instances. NOT bumped by the showUrl fetch,
-// which reseeds the SAME record — remounting there would discard edits the
-// user has already made while the fetch was in flight.
-const editFormInstanceKey = ref(0);
-const selectedItem = ref<T | null>(null);
-const editForm = ref<any>(null);
-const activeTabIndex = ref(0);
-const isCreateMode = ref(false);
-
-// Which modal action is in flight, so the Save and Delete buttons show their
-// own loading label independently. `editForm.processing` is shared by every
-// request the form makes, so it can't tell Save from Delete on its own.
-const pendingAction = ref<'save' | 'delete' | null>(null);
-
-// True while the edit modal is fetching the full record via `showUrl`.
-const editLoading = ref(false);
-
-// Monotonic token so a slow fetch for a previously-opened row can't overwrite
-// the form after the user has since opened a different row.
-let editFetchToken = 0;
-
-// Toast (may not be available in test environment)
-let createToast: ((obj: any) => any) | undefined;
-try {
-    const toast = useToast();
-    createToast = toast.create;
-} catch (e) {
-    // BApp not available (test environment or missing setup)
-    createToast = undefined;
-}
-
-// The edit/create form rendering is delegated to DXForm, which
-// owns field/tab visibility, dynamic labels/hints, conditional fields,
-// and auto-switching to the first tab with a validation error.
-
-// 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.
-/*
- * Seeding an EDIT form from a row (#117).
- *
- * `row[key] ?? field.default` is wrong: it can't tell "the row has no such key"
- * from "the row's value IS null", so an explicitly-null column gets overwritten
- * by the field's default — a value the user never saw, on a field they may not
- * even be able to see. Presence, not nullishness, decides.
- */
-const seedValueFor = (field: any, row: T): any => {
-    if (Object.prototype.hasOwnProperty.call(row as any, field.key)) {
-        return (row as any)[field.key];
-    }
-    return field.default ?? '';
-};
-
-/*
- * Whether a field is currently VISIBLE, by the same rule DXForm renders by
- * (`when` + the legacy `show`), against the same model (context + live data).
- * Kept in step with DXForm.isFieldVisible.
- */
-const editPredicateModel = computed(() => ({
-    ...((selectedItem.value as any) ?? {}),
-    ...(editForm.value?.data ?? {}),
-}));
-
-const isEditFieldVisible = (field: any): boolean => {
-    const when = field.when;
-    const whenOk =
-        when === undefined
-            ? true
-            : typeof when === 'function'
-              ? when(editPredicateModel.value)
-              : when;
-    const showOk = field.show ? field.show() : true;
-    return whenOk && showOk;
-};
-
-// 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) =>
-                        // Presentational: lays the form out, holds no data (#110).
-                        field.submit === false ||
-                        // Hidden by `when` at submit time (#117). Submitting a field
-                        // the user cannot see is a silent write — and with `default`
-                        // set it writes a value they never chose. Omitting the key
-                        // leaves the stored value alone.
-                        !isEditFieldVisible(field),
-                )
-                .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();
-
 /*
  * Slot forwarding to the inner table.
  *
@@ -2063,8 +1611,17 @@ const isTableSlot = (name: string) =>
 const forwardableSlotNames = (slots: Record<string, unknown>): string[] =>
     Object.keys(slots).filter((name) => isTableSlot(name));
 
-const tableSlotSignature = (slots: Record<string, unknown>): string =>
-    Object.keys(slots).filter(isTableSlot).sort().join('|');
+const tableSlotSignature = (slots: Record<string, unknown>): string => {
+    // DXTable's OWN dotted-cell slots count too (#121). bvn captures its cell
+    // slot set at mount (#114), so a dotted-key column that appears LATER —
+    // data-driven columns resolved after a fetch — adds a `cell(...)` slot bvn
+    // ignores, and the cell renders empty. Folding the dotted-cell field keys
+    // into the signature remounts the inner table when that set changes, exactly
+    // as it does for a consumer's late `cell(...)` slot.
+    const consumerSlots = Object.keys(slots).filter(isTableSlot);
+    const dottedCellSlots = dottedCellFields(slots).map((field) => `cell(${field.key})`);
+    return [...consumerSlots, ...dottedCellSlots].sort().join('|');
+};
 
 /*
  * The template iterates `$slots` DIRECTLY rather than a computed over
@@ -2089,28 +1646,6 @@ const tablePassthroughProps = computed(() => ({
             : `No ${pluralItemName.value} found`),
     expandedItems: props.expandedItems,
 }));
-const editFieldKeys = computed<string[]>(() =>
-    (props.editFields ?? []).map((field: any) => field.key),
-);
-const tabKeys = computed<string[]>(() =>
-    (props.editTabs ?? []).map((tab) => tab.key),
-);
-const editValueSlotKeys = computed(() =>
-    editFieldKeys.value.filter((key) => !!tableSlots[`edit-value(${key})`]),
-);
-const editSpanSlotKeys = computed(() =>
-    editFieldKeys.value.filter((key) => !!tableSlots[`edit-span(${key})`]),
-);
-const tabContentSlotKeys = computed(() =>
-    tabKeys.value.filter((key) => !!tableSlots[`tab-content(${key})`]),
-);
-const tabBeforeSlotKeys = computed(() =>
-    tabKeys.value.filter((key) => !!tableSlots[`tab-before(${key})`]),
-);
-const tabAfterSlotKeys = computed(() =>
-    tabKeys.value.filter((key) => !!tableSlots[`tab-after(${key})`]),
-);
-
 // Computed: Singular and plural item names
 const singularItemName = computed(() => props.itemName);
 const pluralItemName = computed(() => pluralize(props.itemName));
@@ -2120,21 +1655,49 @@ const pluralItemName = computed(() => pluralize(props.itemName));
 // only had a header to host the button loses the empty header too.
 const showsCreateButton = computed(() => Boolean(props.createUrl) && props.showCreateButton);
 
-// Computed: Modal title (supports function)
-const computedModalTitle = computed(() => {
-    if (isCreateMode.value) {
-        return `New ${singularItemName.value}`;
-    }
-    if (!selectedItem.value) {
-        return `Edit ${singularItemName.value}`;
-    }
-    if (!props.editModalTitle) {
-        return `Edit ${singularItemName.value}`;
-    }
-    return typeof props.editModalTitle === 'function'
-        ? props.editModalTitle(selectedItem.value)
-        : props.editModalTitle;
+// The create/edit/delete concern — modal state, form seeding, submission,
+// toasts, and the edit-modal slot-key computeds — lives in a composable (#129).
+// DXTable passes the editor props (structurally assignable), its `emit`, and the
+// one seam back into the table: a `refresh` callback run after a successful op.
+// The row→modal bridge stays in `handleRowClick` below (it emits `rowClicked`
+// regardless of whether the modal opens).
+const editor = useResourceEditor<T>(props, emit, {
+    refresh,
+    singularItemName,
 });
+const {
+    showEditModal,
+    editForm,
+    editFormInstanceKey,
+    activeTabIndex,
+    selectedItem,
+    isCreateMode,
+    pendingAction,
+    editLoading,
+    computedModalTitle,
+} = editor;
+
+// Template-facing aliases so the modal buttons keep their historic names.
+const handleCreateNew = editor.openCreate;
+const handleEditSave = editor.save;
+const handleEditCancel = editor.cancel;
+const handleDelete = editor.remove;
+
+// The consumer's edit-modal slots, forwarded verbatim to DXTableEditorModal
+// (which maps them onto DXForm). A FUNCTION over `$slots`, not a computed, for
+// the same reason as `forwardableSlotNames` — `useSlots()` is mutated in place
+// with nothing to track, so a computed captures the first render's set (#114).
+const EDIT_MODAL_SLOT_PREFIXES = [
+    'edit-value(',
+    'edit-span(',
+    'tab-content(',
+    'tab-before(',
+    'tab-after(',
+];
+const editModalSlotNames = (slots: Record<string, unknown>): string[] =>
+    Object.keys(slots).filter((name) =>
+        EDIT_MODAL_SLOT_PREFIXES.some((prefix) => name.startsWith(prefix)),
+    );
 
 // Helper: Get current sort state for a field
 const getFieldSortState = (fieldKey: string) => {
@@ -2142,327 +1705,16 @@ const getFieldSortState = (fieldKey: string) => {
     return currentSort?.order || null;
 };
 
-// Handle row click for editing
+// Handle row click. Emits `rowClicked` regardless (the seam consumers listen
+// on), then asks the editor to open — a no-op unless `editFields` are set.
 const handleRowClick = (item: T, index: number, event: MouseEvent) => {
     // A row the consumer marked non-actionable doesn't look clickable, so it
     // must not BE clickable either — otherwise a click that looks dead quietly
     // navigates or opens the modal (#115).
     if (props.rowClickable && !props.rowClickable(item, index)) return;
 
-    // Always emit rowClicked for custom handling
     emit('rowClicked', item, index, event);
-
-    // If editFields provided, open edit modal
-    if (props.editFields && props.editFields.length > 0) {
-        // Set selected item FIRST before any rendering
-        isCreateMode.value = false;
-        selectedItem.value = item;
-
-        // Reset to first tab
-        activeTabIndex.value = 0;
-
-        // Initialize form with item data. `useForm` is statically imported, so
-        // seeding is synchronous — no interleaving between successive row opens.
-        if (!editForm.value) {
-            const formData: Record<string, any> = {};
-            // 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] = seedValueFor(field, item);
-            });
-            editForm.value = useForm(formData);
-        } else {
-            // Update existing form
-            submittableEditFields.value.forEach(field => {
-                editForm.value.data[field.key] = seedValueFor(field, item);
-            });
-            editForm.value.clearErrors();
-        }
-
-        // Open modal
-        editFormInstanceKey.value++;
-        showEditModal.value = true;
-
-        // Optionally replace the row-seeded data with the full record.
-        if (props.showUrl) void fetchFullRecordForEdit(item);
-    }
-};
-
-// Fetch the full record for the edit modal and re-seed the form from it. The
-// form is already showing row data; this fills in fields the list row omitted.
-const fetchFullRecordForEdit = async (item: T) => {
-    const itemId = (item as any).id;
-    if (itemId === undefined || itemId === null) return;
-
-    const token = ++editFetchToken;
-    editLoading.value = true;
-    try {
-        const url = props.showUrl!.replace(':id', String(itemId));
-        const response = await axios.get(url);
-        // Superseded by a newer row-open — discard.
-        if (token !== editFetchToken) return;
-
-        const record = response.data?.data ?? response.data;
-        if (record && editForm.value) {
-            submittableEditFields.value.forEach(field => {
-                if (Object.prototype.hasOwnProperty.call(record, field.key)) {
-                    editForm.value.data[field.key] = record[field.key];
-                }
-            });
-            // Widen selectedItem so predicates / the delete guard see full data.
-            selectedItem.value = { ...(selectedItem.value as any), ...record };
-        }
-    } catch (error: any) {
-        if (token !== editFetchToken) return;
-        const message =
-            error?.response?.data?.message ??
-            error?.message ??
-            'Failed to load the full record.';
-        createToast?.({
-            title: 'Error',
-            body: message,
-            variant: 'danger',
-            modelValue: 5000,
-        });
-    } finally {
-        if (token === editFetchToken) editLoading.value = false;
-    }
-};
-
-// Handle "New" button click
-const handleCreateNew = () => {
-    if (!props.editFields || props.editFields.length === 0) return;
-
-    isCreateMode.value = true;
-    selectedItem.value = null;
-    activeTabIndex.value = 0;
-
-    // Supersede any in-flight row-open fetch so a slow showUrl fetch from an
-    // earlier edit can't seed over this create.
-    editFetchToken++;
-    editLoading.value = false;
-
-    if (!editForm.value) {
-        const formData: Record<string, any> = {};
-        submittableEditFields.value.forEach(field => {
-            formData[field.key] = field.default ?? '';
-        });
-        editForm.value = useForm(formData);
-    } else {
-        // Reset existing form to defaults
-        submittableEditFields.value.forEach(field => {
-            editForm.value.data[field.key] = field.default ?? '';
-        });
-        editForm.value.clearErrors();
-    }
-    editFormInstanceKey.value++;
-    showEditModal.value = true;
-};
-
-// Handle save from edit modal
-const handleEditSave = async () => {
-    if (!editForm.value) return;
-
-    pendingAction.value = 'save';
-    try {
-        await performSave();
-    } finally {
-        pendingAction.value = null;
-    }
-};
-
-const performSave = async () => {
-    // Create mode: POST to createUrl
-    if (isCreateMode.value && props.createUrl) {
-        try {
-            await editForm.value.post(props.createUrl, {
-                transform: stripNonSubmittedFields,
-                onSuccess: (data: any) => {
-                    createToast?.({
-                        title: 'Success',
-                        body: `${singularItemName.value} created successfully`,
-                        variant: 'success',
-                        modelValue: 3000,
-                    });
-
-                    emit('rowCreated', data?.data ?? data, data);
-                    showEditModal.value = false;
-                    selectedItem.value = null;
-                    isCreateMode.value = false;
-
-                    refresh();
-                },
-                onError: (errors: any) => {
-                    let errorMessage = 'Failed to create. Please check the form for errors.';
-                    if (errors && typeof errors === 'object') {
-                        const firstError = Object.values(errors).flat()[0];
-                        if (typeof firstError === 'string') {
-                            errorMessage = firstError;
-                        }
-                    }
-
-                    createToast?.({
-                        title: 'Error',
-                        body: errorMessage,
-                        variant: 'danger',
-                        modelValue: 5000,
-                    });
-
-                    // DXForm switches to the first errored tab via its
-                    // own watcher on editForm.errors.
-                    emit('createError', errors);
-                }
-            });
-        } catch (error) {
-            emit('createError', error);
-        }
-        return;
-    }
-
-    // Edit mode: PUT to editUrl
-    if (!selectedItem.value) return;
-
-    try {
-        // If editUrl provided, handle API call internally
-        if (props.editUrl) {
-            const itemId = (selectedItem.value as any).id;
-            const url = props.editUrl.replace(':id', itemId);
-
-            await editForm.value.put(url, {
-                transform: stripNonSubmittedFields,
-                onSuccess: (data: any) => {
-                    // Show success toast
-                    createToast?.({
-                        title: 'Success',
-                        body: `${singularItemName.value} updated successfully`,
-                        variant: 'success',
-                        modelValue: 3000, // Auto-dismiss after 3 seconds
-                    });
-
-                    emit('rowUpdated', selectedItem.value as T, data);
-                    showEditModal.value = false;
-                    selectedItem.value = null;
-
-                    // Refresh table data to show updated values
-                    refresh();
-                },
-                onError: (errors: any) => {
-                    // Extract first error message for toast
-                    let errorMessage = 'Failed to update. Please check the form for errors.';
-                    if (errors && typeof errors === 'object') {
-                        const firstError = Object.values(errors).flat()[0];
-                        if (typeof firstError === 'string') {
-                            errorMessage = firstError;
-                        }
-                    }
-
-                    // Show error toast with specific message
-                    createToast?.({
-                        title: 'Error',
-                        body: errorMessage,
-                        variant: 'danger',
-                        modelValue: 5000, // Auto-dismiss after 5 seconds
-                    });
-
-                    // DXForm switches to the first errored tab via its
-                    // own watcher on editForm.errors.
-                    emit('editError', selectedItem.value as T, errors);
-                }
-            });
-        } else {
-            // No editUrl - just emit event for custom handling
-            emit('rowUpdated', selectedItem.value as T, editForm.value.data);
-            showEditModal.value = false;
-            selectedItem.value = null;
-        }
-    } catch (error) {
-        emit('editError', selectedItem.value as T, error);
-    }
-};
-
-// Handle edit modal close
-const handleEditCancel = () => {
-    showEditModal.value = false;
-    selectedItem.value = null;
-    isCreateMode.value = false;
-    activeTabIndex.value = 0; // Reset tab for next time
-    // Abandon any in-flight showUrl fetch so it can't seed a closed modal.
-    editFetchToken++;
-    editLoading.value = false;
-    if (editForm.value) {
-        editForm.value.clearErrors();
-    }
-};
-
-// Handle delete from edit modal
-const handleDelete = async () => {
-    if (!editForm.value || !selectedItem.value || !props.deleteUrl) return;
-    // Don't evaluate the guard until the full record has loaded (showUrl) — it
-    // may depend on fields the thin list row doesn't carry.
-    if (editLoading.value) return;
-
-    // Delete guard: a non-null message means this item can't be deleted — show
-    // it immediately and skip the confirm and the request entirely.
-    const guardMessage = props.deleteGuard?.(selectedItem.value as T);
-    if (guardMessage) {
-        createToast?.({
-            title: 'Cannot delete',
-            body: guardMessage,
-            variant: 'danger',
-            modelValue: 5000,
-        });
-        return;
-    }
-
-    // Confirm deletion
-    const itemName = (selectedItem.value as any).name || (selectedItem.value as any).title || singularItemName.value;
-    const confirmed = window.confirm(`Are you sure you want to delete "${itemName}"? This action cannot be undone.`);
-
-    if (!confirmed) return;
-
-    pendingAction.value = 'delete';
-    try {
-        const itemId = (selectedItem.value as any).id;
-        const url = props.deleteUrl.replace(':id', itemId);
-
-        await editForm.value.delete(url, {
-            onSuccess: (data: any) => {
-                // Show success toast
-                createToast?.({
-                    title: 'Success',
-                    body: `${singularItemName.value} deleted successfully`,
-                    variant: 'success',
-                    modelValue: 3000, // Auto-dismiss after 3 seconds
-                });
-
-                emit('rowDeleted', selectedItem.value as T, data);
-                showEditModal.value = false;
-                selectedItem.value = null;
-
-                // Refresh table data to remove deleted item
-                refresh();
-            },
-            onError: (error: any) => {
-                // Extract error message from server response
-                const errorData = error?.response?.data ?? error?.data ?? error;
-                const errorMessage = errorData?.message ?? 'Failed to delete. Please try again.';
-
-                // Show error toast with server message
-                createToast?.({
-                    title: 'Error',
-                    body: errorMessage,
-                    variant: 'danger',
-                    modelValue: 5000, // Auto-dismiss after 5 seconds
-                });
-
-                emit('deleteError', selectedItem.value as T, error);
-            }
-        });
-    } catch (error) {
-        emit('deleteError', selectedItem.value as T, error);
-    } finally {
-        pendingAction.value = null;
-    }
+    editor.openEdit(item);
 };
 
 defineExpose({
@@ -2487,21 +1739,4 @@ defineExpose({
 :deep(tbody tr.dx-row-actionable:hover) {
     background-color: var(--bs-table-hover-bg);
 }
-
-/* Improve pagination button sizing to match form controls */
-:deep(.pagination) {
-    margin-bottom: 0;
-}
-
-:deep(.pagination-sm .page-link) {
-    min-width: 2.25rem;
-    height: auto;
-}
-
-/* Make disabled pagination buttons more subtle */
-:deep(.pagination .page-item.disabled .page-link) {
-    background-color: transparent;
-    border-color: transparent;
-    opacity: 0.3;
-}
 </style>