@omnitend/dashboard-for-laravel 0.44.0 → 0.46.0

package/resources/js/components/base/DFormValidFeedback.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { BFormValidFeedback } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BFormValidFeedback v-bind="$attrs">
+    <!-- Dynamically pass through all named slots -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BFormValidFeedback>
+</template>

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

@@ -113,17 +113,29 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, useSlots, useId, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
+<script setup lang="ts" generic="TNavigation extends Navigation = Navigation">
+import { ref, computed, useId, useTemplateRef, watch, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
 import DXDashboardSidebar from './DXDashboardSidebar.vue';
 import DXDashboardNavbar from './DXDashboardNavbar.vue';
 import DContainer from '../base/DContainer.vue';
 import DRow from '../base/DRow.vue';
 import DCol from '../base/DCol.vue';
 import { acquirePageScrollLock, releasePageScrollLock } from '../../utils/pageScrollLock';
-import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign, SidebarVariant } from '../../types/navigation';
-
-const slots = useSlots();
+import type {
+  DashboardSlots,
+  Navigation,
+  NavigationItemOf,
+  NavbarActionsOnMobile,
+  NavbarSearchAlign,
+  SidebarVariant,
+} from '../../types/navigation';
+
+// Typed slots, derived from the children's slot types (see `DashboardSlots`).
+// `TNavigation` is inferred from the `navigation` prop, so
+// `#sidebar-link="{ item }"` has the app's own item keys (see
+// `NavigationItemOf`). Types only: the forwarding below stays dynamic, so it
+// never lists names.
+const slots = defineSlots<DashboardSlots<NavigationItemOf<TNavigation>>>();
 
 // Slot-binding precedence: the forwarded slots bind the child's own slot props
 // FIRST and `toggleSidebar`/`sidebarHidden` after, so ours win a name clash.
@@ -131,9 +143,12 @@ const slots = useSlots();
 // forwarded slot, and a child that later grew a same-named prop must not be
 // able to silently take the guarantee away. No child uses those names today.
 
-interface Props {
+// Declared inline, not as a local `interface Props`: a generic component's
+// emitted declaration names its props type, and a local interface there fails
+// the declaration build (TS4082).
+const props = withDefaults(defineProps<{
   /** Navigation structure for sidebar */
-  navigation: Navigation;
+  navigation: TNavigation;
 
   /** Current URL path for active state */
   currentUrl: string;
@@ -209,9 +224,7 @@ interface Props {
    * If not provided, uses global HTML class approach (for SSR compatibility)
    */
   dashboardId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   title: 'Dashboard',
   pageTitle: '',
   user: null,
@@ -228,13 +241,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const collapsed = ref(false);
 
-// Compute sidebar slots (strip 'sidebar-' prefix)
+// Compute sidebar slots (strip 'sidebar-' prefix). The values are typed as
+// declared slot names so the template's `<slot :name>` type-checks; at runtime
+// any `sidebar-*`/`navbar-*` slot the consumer passes is forwarded.
 const sidebarSlots = computed(() => {
-  const result: Record<string, string> = {};
+  const result: Record<string, keyof DashboardSlots> = {};
   Object.keys(slots).forEach(name => {
     if (name.startsWith('sidebar-')) {
       const strippedName = name.substring(8); // Remove 'sidebar-' prefix
-      result[strippedName] = name;
+      result[strippedName] = name as keyof DashboardSlots;
     }
   });
   return result;
@@ -242,11 +257,11 @@ const sidebarSlots = computed(() => {
 
 // Compute navbar slots (strip 'navbar-' prefix)
 const navbarSlots = computed(() => {
-  const result: Record<string, string> = {};
+  const result: Record<string, keyof DashboardSlots> = {};
   Object.keys(slots).forEach(name => {
     if (name.startsWith('navbar-')) {
       const strippedName = name.substring(7); // Remove 'navbar-' prefix
-      result[strippedName] = name;
+      result[strippedName] = name as keyof DashboardSlots;
     }
   });
   return result;
@@ -352,7 +367,9 @@ const phoneMenuOpen = computed(
 
 const sidebarId = `${useId()}-sidebar`;
 const layoutRef = ref<HTMLElement | null>(null);
-const sidebarComponent = ref<InstanceType<typeof DXDashboardSidebar> | null>(null);
+// A ref to the generic sidebar carries only what it exposes; its root element
+// is the exposed `el`.
+const sidebarInstance = useTemplateRef('sidebarComponent');
 
 const setHidden = (isHidden: boolean): void => {
   hidden.value = isHidden;
@@ -388,8 +405,7 @@ const onSidebarNavigate = (): void => {
   closePhoneMenu();
 };
 
-const sidebarElement = (): HTMLElement | null =>
-  (sidebarComponent.value?.$el as HTMLElement | undefined) ?? null;
+const sidebarElement = (): HTMLElement | null => sidebarInstance.value?.el ?? null;
 
 const onKeydown = (event: KeyboardEvent): void => {
   if (event.key !== 'Escape') return;
@@ -489,6 +505,13 @@ defineExpose({
 
   /** Whether the sidebar is currently hidden. */
   sidebarHidden: computed(() => hidden.value),
+
+  /**
+   * The dashboard's root element (the `.dashboard-layout` `<div>`; `null`
+   * before mount). A template ref to this generic component carries only its
+   * exposed members, so read the DOM node here rather than through `$el`.
+   */
+  el: layoutRef,
 });
 </script>
 

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

@@ -122,7 +122,15 @@ import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
 import DXUserAvatar from "./DXUserAvatar.vue";
-import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
+import type {
+  DashboardNavbarSlots,
+  NavbarActionsOnMobile,
+  NavbarSearchAlign,
+} from "../../types/navigation";
+
+// Typed slots: consumers get autocomplete and slot-prop types, and DXDashboard
+// derives its `navbar-*` slot types from this interface.
+defineSlots<DashboardNavbarSlots>();
 
 const props = withDefaults(
   defineProps<{

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

@@ -165,13 +165,26 @@
   </aside>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="TNavigation extends Navigation = Navigation">
 import { computed, ref, onMounted, watch, nextTick, useId } from 'vue';
-import type { Navigation, NavigationGroup, SidebarVariant } from '../../types/navigation';
+import type {
+  DashboardSidebarSlots,
+  Navigation,
+  NavigationGroup,
+  NavigationItemOf,
+  SidebarVariant,
+} from '../../types/navigation';
+
+// Typed slots: consumers get autocomplete and slot-prop types, and DXDashboard
+// derives its `sidebar-*` slot types from this interface. `TNavigation` is
+// inferred from the `navigation` prop, so an app whose items carry extra keys
+// gets them on the `link` slot's `item` (see `NavigationItemOf`). Types only:
+// nothing at runtime depends on it.
+defineSlots<DashboardSidebarSlots<NavigationItemOf<TNavigation>>>();
 
 const props = withDefaults(defineProps<{
   /** Grouped navigation to render: an array of groups, each with a label and items. */
-  navigation: Navigation;
+  navigation: TNavigation;
   /** The current route URL, used to highlight the matching nav item and open its group. */
   currentUrl: string;
   /** Collapse the rail to an icons-only strip, hiding labels and the brand title. */
@@ -469,6 +482,15 @@ watch(() => props.currentUrl, () => {
 watch(activeGroupIndex, () => {
   openActiveGroup();
 });
+
+defineExpose({
+  /**
+   * The sidebar's root `<aside>` element (`null` before mount). A template ref
+   * to this generic component carries only its exposed members, so read the
+   * DOM node here rather than through `$el`.
+   */
+  el: sidebarRef,
+});
 </script>
 
 <style scoped>

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

@@ -405,7 +405,14 @@ import DXNumericField from "./DXNumericField.vue";
 import DXChoiceField from "./DXChoiceField.vue";
 import { useAsyncOptions } from "../../composables/useAsyncOptions";
 import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
+import type {
+    FieldDefinition,
+    FieldOption,
+    FieldType,
+    LabelCols,
+    MaybeFn,
+} from "../../types";
+import { humaniseErrorKey } from "../../utils/formErrorTargets";
 import { getByPath, setByPath } from "../../utils/objectPath";
 
 // Async to break the DXField <-> DXRepeater circular import.
@@ -619,6 +626,21 @@ function resolveMaybe<TValue>(
     return value;
 }
 
+/** Resolve display TEXT (label, hint, info, switch text) the way
+ *  resolveMaybe does, but a function that throws (a repeater row missing a
+ *  property it reads) gives `undefined` instead of breaking the render (#204).
+ *  Behaviour options (disabled, readonly, plaintext) stay unguarded: no
+ *  fallback for those is safe to guess. */
+function resolveText(
+    value: MaybeFn<string> | undefined,
+): string | undefined {
+    try {
+        return resolveMaybe(value);
+    } catch {
+        return undefined;
+    }
+}
+
 const fieldValue = computed({
     get: () =>
         usePathSemantics.value
@@ -691,13 +713,19 @@ function setValue(value: any): void {
 
 const fieldState = computed(() => props.form.getState(errorKey.value));
 
-const resolvedLabel = computed(
-    () => resolveMaybe(props.field.label) ?? props.field.key,
-);
+// A label function that throws falls back to the humanised key, as the
+// repeater's headers and the error summary do; a missing label still shows
+// the raw key, as it always has.
+const resolvedLabel = computed(() => {
+    if (typeof props.field.label !== "function") {
+        return props.field.label ?? props.field.key;
+    }
+    return resolveText(props.field.label) ?? humaniseErrorKey(props.field.key);
+});
 
-const resolvedHint = computed(() => resolveMaybe(props.field.hint));
+const resolvedHint = computed(() => resolveText(props.field.hint));
 
-const resolvedInfo = computed(() => resolveMaybe(props.field.info));
+const resolvedInfo = computed(() => resolveText(props.field.info));
 
 // ————————————————— switch-list (#160)
 
@@ -763,8 +791,8 @@ const switchModel = computed({
  */
 const switchText = computed(() => {
     const contextual = switchIsOn.value
-        ? resolveMaybe(props.field.textWhenTrue)
-        : resolveMaybe(props.field.textWhenFalse);
+        ? resolveText(props.field.textWhenTrue)
+        : resolveText(props.field.textWhenFalse);
     return contextual ?? resolvedLabel.value;
 });
 

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

@@ -1,12 +1,16 @@
 <template>
+  <!-- The status box is there from the start, holding the loader's space
+       with its contents hidden (theme.scss); the delay only reveals them.
+       Content added to a live region already in the page is announced,
+       where a region inserted with its text can be missed. -->
   <div
-    v-if="isVisible"
-    class="dx-loading text-center text-muted py-5"
+    class="dx-loading py-5"
+    :class="{ 'dx-loading--shown': isVisible }"
     role="status"
     aria-live="polite"
   >
-    <DSpinner variant="primary" aria-hidden="true" />
-    <div class="mt-2">{{ text }}</div>
+    <DSpinner small aria-hidden="true" />
+    <p class="dx-loading__text">{{ text }}</p>
   </div>
 </template>
 
@@ -14,14 +18,20 @@
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import DSpinner from "../base/DSpinner.vue";
 
+// Styles (one line, grey, a slow sweep across the text, a fade-in, contents
+// hidden until `.dx-loading--shown`) are global in theme.scss under
+// `.dx-loading`, with `--dx-loading-*` tokens.
 const props = withDefaults(
   defineProps<{
     text?: string;
+    /** Milliseconds to wait before showing anything. Most loads finish
+     *  sooner, and one that has already taken this long is likely to take
+     *  longer, so a quick load never flashes a loader. */
     delay?: number;
   }>(),
   {
     text: "Loading…",
-    delay: 300,
+    delay: 600,
   },
 );
 
@@ -29,14 +39,11 @@ const isVisible = ref(false);
 let showTimer: ReturnType<typeof setTimeout> | undefined;
 
 onMounted(() => {
-  if (props.delay <= 0) {
-    isVisible.value = true;
-    return;
-  }
-
+  // Always a timer, even for no delay: the empty status box must reach the
+  // page a task before its contents, or the announcement can be missed.
   showTimer = setTimeout(() => {
     isVisible.value = true;
-  }, props.delay);
+  }, Math.max(props.delay, 0));
 });
 
 onBeforeUnmount(() => {

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

@@ -17,15 +17,28 @@
       </div>
     </div>
 
-    <div class="dx-stat-card__value">
-      <!--
-        @slot Override the rendered value.
-        @binding {string} formatted The value formatted per `format`.
-        @binding {string | number} value The raw value prop.
-      -->
-      <slot name="value" :formatted="formattedValue" :value="value">
-        {{ formattedValue }}
-      </slot>
+    <!-- The value's box (#213): a numeric value is fitted to this box's
+         width (utils/statCardFit.ts), so two cards to a phone row shrink a
+         long number instead of wrapping it, while a short one stays full
+         size. It is also a size container, for the CSS baseline used
+         before the fit runs. It wraps the value alone, not the card, so
+         inline-size containment never removes the title's or footer's
+         contribution to the width of a content-sized card. -->
+    <div ref="valueBox" class="dx-stat-card__value-box">
+      <div
+        ref="valueElement"
+        class="dx-stat-card__value"
+        :class="{ 'dx-stat-card__value--numeric': isNumericValue }"
+      >
+        <!--
+          @slot Override the rendered value.
+          @binding {string} formatted The value formatted per `format`.
+          @binding {string | number} value The raw value prop.
+        -->
+        <slot name="value" :formatted="formattedValue" :value="value">
+          {{ formattedValue }}
+        </slot>
+      </div>
     </div>
 
     <div v-if="hasDelta || deltaLabel || $slots.trend" class="dx-stat-card__foot">
@@ -49,9 +62,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onActivated, onBeforeUnmount, onMounted, ref } from "vue";
 import DCard from "../base/DCard.vue";
 import DBadge from "../base/DBadge.vue";
+import { queueFit, registerTarget, unregisterTarget, type FitTarget } from "../../utils/statCardFit";
 
 type StatFormat = "number" | "currency" | "percent";
 type DeltaDirection = "up" | "down" | "neutral";
@@ -114,6 +128,81 @@ const formattedValue = computed<string>(() => {
   return formatNumber(raw, props.format);
 });
 
+// A number, or a string with no letters ("£1,234.56", "42%"): it must never
+// break between digits. Any other string (a URL, a status word) keeps the
+// card's last-resort break so it cannot run out of the card.
+const isNumericValue = computed<boolean>(
+  () => typeof props.value === "number" || !/\p{L}/u.test(props.value),
+);
+
+const valueBox = ref<HTMLElement | null>(null);
+const valueElement = ref<HTMLElement | null>(null);
+let fitTarget: FitTarget | null = null;
+let resizeObserver: ResizeObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
+
+// Browser-only, and onMounted never runs during server rendering, so the
+// server's markup carries the CSS baseline size.
+onMounted(() => {
+  if (!valueBox.value || !valueElement.value) return;
+  const target: FitTarget = {
+    box: valueBox.value,
+    value: valueElement.value,
+    isNumeric: () => isNumericValue.value,
+    fittedBoxWidth: -1,
+  };
+  fitTarget = target;
+  registerTarget(target);
+  // A microtask: after every card in this render has mounted (one batch),
+  // and before the browser paints.
+  queueFit(target, "microtask");
+
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver((entries) => {
+      // Text is never fitted; a change to or from text is a mutation.
+      if (!target.isNumeric()) return;
+      const width = entries[entries.length - 1]!.contentRect.width;
+      // A fit changes the box's height; only a new width needs a new fit.
+      if (Math.abs(width - target.fittedBoxWidth) < 0.01) return;
+      queueFit(target, "frame");
+    });
+    resizeObserver.observe(target.box);
+  }
+
+  // Whatever renders in the value changing (the formatted value, the
+  // numeric class, `value` slot content at any depth) refits. The fit's own
+  // writes (`style` on the value element) are ignored.
+  if (typeof MutationObserver !== "undefined") {
+    mutationObserver = new MutationObserver((records) => {
+      const changed = records.some(
+        (record) => !(record.target === target.value && record.attributeName === "style"),
+      );
+      if (changed) queueFit(target, "microtask");
+    });
+    mutationObserver.observe(target.value, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+    });
+  }
+});
+
+// Back from a deactivated <KeepAlive>: the value or the layout may have
+// changed while it was detached, when no fit could measure it.
+onActivated(() => {
+  if (fitTarget) queueFit(fitTarget, "microtask");
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
+  resizeObserver = null;
+  mutationObserver = null;
+  if (fitTarget) unregisterTarget(fitTarget);
+  fitTarget = null;
+});
+
 const hasDelta = computed(
   () => typeof props.delta === "number" && Number.isFinite(props.delta),
 );
@@ -176,13 +265,67 @@ const formattedDelta = computed<string>(() => {
   flex-shrink: 0;
 }
 
+/*
+ * Inline-size containment means the box's content no longer gives it a
+ * width, so a card sized to its content (a non-growing flex item, an
+ * inline-block, a `col-auto`) would take only its title's width and crush
+ * the value. The intrinsic fallback, 8rem (128px), holds a 7-figure amount
+ * at the 1.125rem floor: "£1,234,567.89" is 6.64em, 119.6px at 18px.
+ */
+.dx-stat-card__value-box {
+  container-type: inline-size;
+  contain-intrinsic-inline-size: 8rem;
+}
+
+/*
+ * The size is the fit's (`--dx-stat-card-fit-size`, set by the script on a
+ * numeric value: 1.75rem unless that overflows the box, then just small
+ * enough, down to 1.125rem). Before the fit has run (server markup, first
+ * paint of hydrated markup, no script) a numeric value uses the baseline
+ * below and any other value 1.75rem; text wraps, so it is never shrunk.
+ * Tabular figures (#215) keep each digit on the same advance: the digits
+ * come from the theme's figures face (`--dx-font-family-figures`, as
+ * `.dx-tabular`), the rest of the value from the body face.
+ */
 .dx-stat-card__value {
-  font-size: 1.75rem;
+  font-size: var(--dx-stat-card-fit-size, 1.75rem);
+  font-family: var(--dx-font-family-figures), var(--bs-body-font-family);
+  font-variant-numeric: tabular-nums;
   font-weight: 700;
   line-height: 1.1;
   color: var(--bs-emphasis-color, var(--bs-body-color));
 }
 
+/*
+ * A numeric value (a number, or a string with no letters) never breaks:
+ * `normal` undoes the card's `word-wrap: break-word`, which split a number
+ * mid-figure when it overflowed. Any other string keeps that last-resort
+ * break, so a long URL wraps inside the card instead of running out of it.
+ */
+.dx-stat-card__value--numeric {
+  overflow-wrap: normal;
+}
+
+/*
+ * The numeric baseline before the fit runs, which never overflows for up
+ * to 7 figures: 1.75rem from a 175px box up, then a line down to the
+ * 1.125rem floor at 8rem (128px). (A plain `16cqi` also reaches 1.75rem at
+ * 175px but cannot hold a 6.64em value under 175px.) The slope is 10px over
+ * 47px, written 0.2128 so it reaches 28px at 175px, never just under. It
+ * sits in `@supports` because the `var()` makes the declaration valid at
+ * parse time: without container units the cqi fallback would be invalid at
+ * computed time and the value would fall to the inherited body size, where
+ * this way such a browser keeps the flat 1.75rem above.
+ */
+@supports (width: 1cqi) {
+  .dx-stat-card__value--numeric {
+    font-size: var(
+      --dx-stat-card-fit-size,
+      clamp(1.125rem, 1.125rem + (100cqi - 8rem) * 0.2128, 1.75rem)
+    );
+  }
+}
+
 .dx-stat-card__foot {
   display: flex;
   align-items: center;

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

@@ -35,10 +35,7 @@
                         {{ error || apiError }}
                     </div>
 
-                    <div v-if="effectiveBusy && !isProviderMode" class="text-center py-5">
-                        <DSpinner variant="primary" />
-                        <p class="mt-2">{{ loadingText }}</p>
-                    </div>
+                    <DXLoading v-if="effectiveBusy && !isProviderMode" :text="loadingText" />
 
                     <!-- One table for all three data modes. The modes differ only
                          in a few bound props, supplied by `tableModeBindings`, so
@@ -50,7 +47,7 @@
                         v-else-if="isProviderMode || isClientSideMode || isInertiaMode"
                         ref="tableRef"
                         :key="activeMode + ':' + tableSlotSignature($slots)"
-                        :fields="fields"
+                        :fields="renderedFields"
                         :sort-by="effectiveSortBy"
                         :multisort="false"
                         :no-sortable-icon="true"
@@ -248,8 +245,10 @@
                          PaginationData; `handleActivePageChange` routes the page
                          event to the right per-mode handler. Previously three
                          byte-identical copies, one per mode. -->
+                    <!-- Not while the loader shows: the count would read "0 items"
+                         before the rows have arrived. -->
                     <DXTablePagination
-                        v-if="activePagination"
+                        v-if="activePagination && !(effectiveBusy && !isProviderMode)"
                         :pagination="activePagination"
                         :per-page="effectivePerPage"
                         :per-page-options="perPageOptions"
@@ -326,7 +325,7 @@ 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 DXLoading from "./DXLoading.vue";
 import DTable from "../base/DTable.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormSelect from "../base/DFormSelect.vue";
@@ -343,7 +342,8 @@ import DXTableEditorModal from "./DXTableEditorModal.vue";
 export type FilterType = 'text' | 'select' | 'select-native' | 'number' | 'date' | false;
 
 export interface FilterOption {
-    value: string;
+    /** Numbers and booleans are accepted and compared as their string form. */
+    value: string | number | boolean | null;
     text: string;
 }
 
@@ -452,6 +452,15 @@ export interface TableField {
      * A number is pixels; a string is used verbatim.
      */
     minWidth?: string | number;
+
+    /**
+     * Render this column's figures tabular (every digit the same width), so
+     * amounts line up down the column: adds the global `.dx-tabular` class to
+     * the column's body cells and its header cell. Composes with the field's
+     * own `tdClass`/`thClass` (string, array, object or `tdClass` function)
+     * rather than replacing them. Default `false`.
+     */
+    tabular?: boolean;
     [key: string]: any;
 }
 
@@ -1382,6 +1391,35 @@ const columnStyleFor = (field: TableField): Record<string, string> | undefined =
 // content-sized default byte-for-byte.
 const fieldsHaveWidths = computed(() => props.fields.some(hasDeclaredWidth));
 
+/*
+ * Tabular columns (#215). A `tabular: true` field gets `.dx-tabular` added
+ * to its `tdClass` and `thClass`, appended to the consumer's own value
+ * (wrapped in an array, or called through when `tdClass` is a function) so
+ * their classes survive. Fields without the flag pass through as the same
+ * objects, so a table using no tabular column renders exactly as before.
+ */
+const TABULAR_CLASS = 'dx-tabular';
+
+const withTabularClass = (consumerClass: unknown): unknown[] =>
+    consumerClass === undefined || consumerClass === null
+        ? [TABULAR_CLASS]
+        : [consumerClass, TABULAR_CLASS];
+
+const renderedFields = computed<TableField[]>(() =>
+    props.fields.map((field) => {
+        if (field.tabular !== true) return field;
+        const consumerTdClass = field.tdClass;
+        return {
+            ...field,
+            tdClass:
+                typeof consumerTdClass === 'function'
+                    ? (...args: unknown[]) => withTabularClass(consumerTdClass(...args))
+                    : withTabularClass(consumerTdClass),
+            thClass: withTabularClass(field.thClass),
+        };
+    }),
+);
+
 // 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`.
@@ -1582,9 +1620,21 @@ const getFieldFilterOptions = (field: TableField): FilterOption[] => {
         options.push({ value: filterNullValueFor(field), text: field.filterNullText });
     }
 
-    // If field has static filterOptions, use those
+    // If field has static filterOptions, use those. Their values are
+    // stringified: options built from records carry numbers (ids) and booleans
+    // (flags), but the filter map, the URL and the row match all speak strings,
+    // and DAutocomplete matches its model to an option by strict equality — so a
+    // raw `1` never re-selected the stored `'1'`, and picking it put a number in
+    // the map that the active-filter check could not `.trim()`.
     if (field.filterOptions && field.filterOptions.length > 0) {
-        return [...options, ...field.filterOptions];
+        return [
+            ...options,
+            ...field.filterOptions.map((option) =>
+                option.value === null || option.value === undefined
+                    ? option
+                    : { ...option, value: String(option.value) },
+            ),
+        ];
     }
 
     // Otherwise, check for server-provided values (keyed by the filter key)