@omnitend/dashboard-for-laravel 0.25.0 → 0.27.0

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

@@ -44,6 +44,7 @@
                     <DTable
                         v-else-if="isProviderMode"
                         ref="tableRef"
+                        :key="tableSlotSignature($slots)"
                         :provider="effectiveProvider"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -55,6 +56,7 @@
                         :hover="hover"
                         :responsive="responsive"
                         :busy="busy"
+                        :tbody-tr-class="composeRowClass"
                         v-bind="tablePassthroughProps"
                         @update:sort-by="handleSortChange"
                         @update:expanded-items="emit('update:expandedItems', $event)"
@@ -62,9 +64,19 @@
                         @update:busy="handleBusyChange"
                         @row-clicked="handleRowClick"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
@@ -125,12 +137,23 @@
                             </div>
                         </template>
 
+                        <!-- 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="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,
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -144,6 +167,7 @@
                     <!-- Client-Side Mode: Local filtering, sorting, pagination -->
                     <DTable
                         v-else-if="isClientSideMode"
+                        :key="tableSlotSignature($slots)"
                         :items="clientSidePaginatedItems"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -153,14 +177,25 @@
                         :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"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
@@ -221,12 +256,23 @@
                             </div>
                         </template>
 
+                        <!-- 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="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,
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -240,6 +286,7 @@
                     <!-- Inertia Mode: Use items prop -->
                     <DTable
                         v-else-if="isInertiaMode"
+                        :key="tableSlotSignature($slots)"
                         :items="items"
                         :fields="fields"
                         :sort-by="effectiveSortBy"
@@ -250,14 +297,25 @@
                         :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"
                     >
-                        <!-- Inline Filter Row -->
-                        <template v-if="hasFilters" #thead-top>
-                            <tr class="filter-row">
+                        <!-- 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
@@ -318,12 +376,23 @@
                             </div>
                         </template>
 
+                        <!-- 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="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,
                              table-busy/caption/colgroup, thead-sub, top-row, bottom-row.
                              See `isTableSlot` for the two DXTable renders itself. -->
                         <template
-                            v-for="name in forwardedTableSlotNames"
+                            v-for="name in forwardableSlotNames($slots)"
                             :key="name"
                             #[name]="slotProps"
                         >
@@ -641,6 +710,7 @@ import axios from "axios";
 import pluralize from "pluralize";
 import { useToast } from "../../composables/useToast";
 import { useForm } from "../../composables/useForm";
+import { getByPath } from "../../utils/objectPath";
 import DContainer from "../base/DContainer.vue";
 import DRow from "../base/DRow.vue";
 import DCol from "../base/DCol.vue";
@@ -917,6 +987,22 @@ export interface Props<TItem = any> {
      */
     expandedItems?: TItem[];
 
+    /**
+     * Class(es) applied to each row's `<tr>` — a string, or a function of the
+     * row. Use for conditional row styling (a variant, a muted/disabled look)
+     * without reaching into the table's internal DOM from global CSS.
+     */
+    rowClass?: string | ((item: TItem, index: number) => string | string[] | Record<string, boolean>);
+
+    /**
+     * Whether a given row is actionable. Only relevant when rows are clickable
+     * (an `editFields` modal or a `row-clicked` listener). A row this returns
+     * `false` for gets no pointer cursor, no hover highlight, and does not fire
+     * `row-clicked` or open the edit modal — so a row that isn't clickable
+     * doesn't *look* clickable, and a click on it can't quietly do something.
+     */
+    rowClickable?: (item: TItem, index: number) => boolean;
+
     /** Enable client-side filtering, sorting, and pagination on items array */
     clientSide?: boolean;
 }
@@ -1045,10 +1131,30 @@ 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',
-);
+/**
+ * A row is actionable when the table is interactive AND the consumer's
+ * `rowClickable` predicate (if any) says so — a row-clicked table can have rows
+ * that aren't navigable (#115).
+ */
+const isRowActionable = (item: T, index: number): boolean =>
+    rowsAreInteractive.value && (props.rowClickable?.(item, index) ?? true);
+
+/**
+ * The `<tr>` class, composed from the consumer's `rowClass` and our own
+ * actionable marker. The pointer/hover affordance hangs off the marker class
+ * rather than a blanket `tbody tr` rule, so a non-actionable row simply doesn't
+ * get it — which is what let consumers drop their global
+ * `tbody tr:has(.marker)` CSS hack.
+ */
+const composeRowClass = (item: T, index: number) => {
+    const consumerClass =
+        typeof props.rowClass === 'function' ? props.rowClass(item, index) : props.rowClass;
+
+    const classes: any[] = [];
+    if (consumerClass) classes.push(consumerClass);
+    if (isRowActionable(item, index)) classes.push('dx-row-actionable');
+    return classes;
+};
 
 // Internal sortBy state, seeded from the prop when it's an initial value.
 const internalSortBy = ref<BTableSortBy[]>(props.sortBy ? [...props.sortBy] : []);
@@ -1150,10 +1256,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.
@@ -1207,13 +1314,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') {
@@ -1228,6 +1338,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`.
@@ -1414,12 +1572,37 @@ const effectivePerPage = computed(() => {
 // Client-Side Mode: Pagination (requires effectivePerPage)
 // ============================================
 
+/*
+ * The page the client-side view actually renders (#118).
+ *
+ * `clientSideCurrentPage` is only reset on a filter or per-page change, so when
+ * the `items` prop SHRINKS — a consumer refetching a narrower dataset — it can
+ * point past the end of the new set. The pagination metadata below already
+ * clamped for display, but the slice used the raw value, so the pager said
+ * "page 2 of 2" while the table sliced page 6 and rendered zero rows. Both read
+ * from this now, so the view and its pager can't disagree.
+ */
+const clientSideLastPage = computed(() =>
+    Math.max(1, Math.ceil(clientSideFilteredItems.value.length / effectivePerPage.value)),
+);
+
+const clientSidePage = computed(() =>
+    Math.min(Math.max(1, clientSideCurrentPage.value), clientSideLastPage.value),
+);
+
+// Write the clamp back, so the NEXT interaction starts from a real page rather
+// than a stale one. Clamping to the last page (not resetting to 1) keeps the
+// user near where they were.
+watch(clientSideLastPage, (lastPage) => {
+    if (clientSideCurrentPage.value > lastPage) clientSideCurrentPage.value = lastPage;
+});
+
 // Client-side paginated items (final output)
 const clientSidePaginatedItems = computed<T[]>(() => {
     if (!isClientSideMode.value) return [];
 
     const perPage = effectivePerPage.value;
-    const start = (clientSideCurrentPage.value - 1) * perPage;
+    const start = (clientSidePage.value - 1) * perPage;
     const end = start + perPage;
 
     return clientSideSortedItems.value.slice(start, end);
@@ -1430,11 +1613,10 @@ const clientSidePagination = computed<PaginationData>(() => {
     const total = clientSideFilteredItems.value.length;
     const totalUnfiltered = props.items?.length || 0;
     const perPage = effectivePerPage.value;
-    const currentPage = clientSideCurrentPage.value;
-    const lastPage = Math.max(1, Math.ceil(total / perPage));
+    const lastPage = clientSideLastPage.value;
 
-    // Ensure current page is valid
-    const validPage = Math.min(Math.max(1, currentPage), lastPage);
+    // Same clamped page the slice uses — see `clientSidePage` (#118).
+    const validPage = clientSidePage.value;
 
     const from = total > 0 ? (validPage - 1) * perPage + 1 : 0;
     const to = Math.min(validPage * perPage, total);
@@ -1759,6 +1941,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 }
@@ -1833,6 +2016,55 @@ 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.
+/*
+ * A field's own starting value, used to seed a CREATE form and as the fallback
+ * when a row lacks the key (#122).
+ *
+ * `field.default ?? ''` can't express a NULL default: a select whose "none"
+ * option is `value: null` — which is what the column stores — seeds '' instead,
+ * matches no option, and renders blank. Presence, not nullishness, decides here
+ * too, so the create and edit paths agree about the same field.
+ */
+const defaultValueFor = (field: any): any =>
+    Object.prototype.hasOwnProperty.call(field, 'default') ? field.default : '';
+
+/*
+ * 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 defaultValueFor(field);
+};
+
+/*
+ * 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(() =>
@@ -1843,7 +2075,21 @@ const submittableEditFields = computed(() =>
 // 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)),
+    () =>
+        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> => {
@@ -1885,9 +2131,59 @@ const TABLE_SLOT_NAMES = new Set([
 const isTableSlot = (name: string) =>
     TABLE_SLOT_NAMES.has(name) || TABLE_SLOT_PREFIXES.some((prefix) => name.startsWith(prefix));
 
-const forwardedTableSlotNames = computed(() =>
-    Object.keys(tableSlots).filter((name) => isTableSlot(name)),
-);
+/*
+ * The inner table is KEYED on the set of forwarded slot names (#114).
+ *
+ * bootstrap-vue-next's BTable captures its slot set at mount: a `cell(...)` slot
+ * that comes into existence LATER — a consumer whose columns are data-driven and
+ * only known once a fetch resolves — never reaches the cells, and the column
+ * renders raw values as though no cell slot existed. Verified against raw BTable,
+ * so it isn't something our forwarding chain drops.
+ *
+ * Nothing in the forwarding can fix that, so the inner table remounts when the
+ * slot SET changes. Consumers were already remounting to work around it, but at
+ * the DXTable level, which throws away per-page, filters, sort and page — all of
+ * which live out here and now survive. The signature is names-only, so a slot's
+ * CONTENT changing (the common case) doesn't remount anything.
+ *
+ * In provider mode a remount refetches; that only happens when the column set
+ * itself changes, which is already a refetch in practice.
+ */
+/*
+ * A FUNCTION, not a computed: `useSlots()` returns an object Vue mutates in
+ * place with nothing to track, so a computed over its keys is captured on the
+ * first render and never updates — which is what made late `cell(...)` slots
+ * invisible (#114). Called from the template, it re-evaluates every render.
+ *
+ * It also has to EXCLUDE the slots DXTable renders itself: declaring `#thead-top`
+ * here (even rendering nothing into it) would override DXTable's own thead-top
+ * template, silently dropping the filter row and the consumer's banner (#120).
+ */
+const forwardableSlotNames = (slots: Record<string, unknown>): string[] =>
+    Object.keys(slots).filter((name) => isTableSlot(name));
+
+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
+ * `useSlots()`. It has to: `useSlots()` returns an object that Vue MUTATES in
+ * place, with no reactive dependency to track — so a computed over its keys is
+ * captured on first render and never recomputes. A consumer whose `cell(...)`
+ * slots come into existence after a fetch resolves (data-driven columns) got
+ * columns with raw values and no cell templates, and had to remount the whole
+ * table to fix it (#114). Reading `$slots` inside the render function re-reads
+ * the current slot set on every update.
+ */
 
 // Table-level features of the inner BTable, exposed verbatim and bound to all
 // three data modes from one place.
@@ -1956,6 +2252,11 @@ const getFieldSortState = (fieldKey: string) => {
 
 // Handle row click for editing
 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);
 
@@ -1975,13 +2276,13 @@ const handleRowClick = (item: T, index: number, event: MouseEvent) => {
             // 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 ?? '';
+                formData[field.key] = seedValueFor(field, item);
             });
             editForm.value = useForm(formData);
         } else {
             // Update existing form
             submittableEditFields.value.forEach(field => {
-                editForm.value.data[field.key] = (item as any)[field.key] ?? field.default ?? '';
+                editForm.value.data[field.key] = seedValueFor(field, item);
             });
             editForm.value.clearErrors();
         }
@@ -2052,13 +2353,13 @@ const handleCreateNew = () => {
     if (!editForm.value) {
         const formData: Record<string, any> = {};
         submittableEditFields.value.forEach(field => {
-            formData[field.key] = field.default ?? '';
+            formData[field.key] = defaultValueFor(field);
         });
         editForm.value = useForm(formData);
     } else {
         // Reset existing form to defaults
         submittableEditFields.value.forEach(field => {
-            editForm.value.data[field.key] = field.default ?? '';
+            editForm.value.data[field.key] = defaultValueFor(field);
         });
         editForm.value.clearErrors();
     }
@@ -2284,13 +2585,15 @@ defineExpose({
 </script>
 
 <style scoped>
-/* Rows that do something on click look like it — see `rowsAreInteractive`. */
-:deep(tbody tr) {
-    cursor: v-bind(rowCursor);
+/* Rows that do something on click look like it. Hung off a marker class rather
+   than a blanket `tbody tr` rule, so a row the consumer's `rowClickable` says is
+   not actionable simply doesn't get the affordance (#107, #115). */
+:deep(tbody tr.dx-row-actionable) {
+    cursor: pointer;
 }
 
-:deep(tbody tr:hover) {
-    background-color: v-bind(rowHoverBackground);
+:deep(tbody tr.dx-row-actionable:hover) {
+    background-color: var(--bs-table-hover-bg);
 }
 
 /* Improve pagination button sizing to match form controls */

package/resources/js/composables/defineForm.ts

@@ -65,10 +65,22 @@ export function defineForm<const TFields extends readonly FormFieldDefinition[]>
 ): DefineFormReturn<InferFormData<TFields>> {
     type FormData = InferFormData<TFields>;
 
-    // Extract initial data from field definitions
+    // Extract initial data from field definitions.
+    //
+    // #125: `field.default ?? getDefaultValueForType(type)` cannot express a
+    // *null* default — a select whose "none" option is `value: null` (which is
+    // what the column stores) seeded '' (the type default), matched no option,
+    // and rendered blank. This is the same bug #122 fixed in DXTable. Decide on
+    // definedness, not nullishness, so null survives; an absent (or explicitly
+    // `undefined`) default still falls back to the type default rather than
+    // seeding `undefined`, which would drop the key from the JSON payload. This
+    // matches DXRepeater's `!== undefined` rule, so all seeding sites agree.
     const initialData = fieldDefinitions.reduce(
         (acc, field) => {
-            acc[field.key] = field.default ?? getDefaultValueForType(field.type);
+            acc[field.key] =
+                field.default !== undefined
+                    ? field.default
+                    : getDefaultValueForType(field.type);
             return acc;
         },
         {} as Record<string, any>,

package/resources/js/index.ts

@@ -85,7 +85,20 @@ export { default as DProgress } from "./components/base/DProgress.vue";
 export { default as DRow } from "./components/base/DRow.vue";
 export { default as DSpinner } from "./components/base/DSpinner.vue";
 export { default as DTable } from "./components/base/DTable.vue";
-export { default as DTab } from "./components/base/DTab.vue";
+/*
+ * DTab is a RAW RE-EXPORT of BTab, not a wrapper — same exception as
+ * DCarouselSlide above, and for the same reason.
+ *
+ * BTabs decides which tab to activate on mount by scanning its slot vnodes for
+ * the BTab component type (its initial-selection branch is gated on
+ * `tabElementsArray.length > 0`). A wrapper component in between hides that, so
+ * BTabs found no tabs to select and NO pane got `active`/`show`: the nav
+ * rendered and every body was invisible until the user clicked (#119).
+ *
+ * Bisected — BTabs+BTab and DTabs+BTab both activate the first tab; BTabs+DTab
+ * does not. So it is the child wrapper, and only the child, that has to go.
+ */
+export { BTab as DTab } from "bootstrap-vue-next";
 export { default as DTabs } from "./components/base/DTabs.vue";
 export { default as DToast } from "./components/base/DToast.vue";
 export { default as DToaster } from "./components/base/DToaster.vue";