@undevy-org/tablewright 0.1.0 → 0.2.0

package/dist/es/components/data-table/AppliedStateChips.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { Button } from "../ui/button.js";
 import { FilterChip } from "./FilterChip.js";
+import { isFilterValueEmpty } from "./filter-values.js";
 import { ColumnFilterPopover } from "./ColumnFilterPopover.js";
 import { CompoundFilterPopover } from "./CompoundFilterPopover.js";
 const DEFAULT_LABELS = {
@@ -9,16 +10,6 @@ const DEFAULT_LABELS = {
   columns: "Columns",
   hiddenCount: (n) => `${n} hidden`
 };
-function isFilterValueEmpty(value) {
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === "string") return value.length === 0;
-  if (typeof value === "object" && value !== null) {
-    const keys = Object.keys(value);
-    if (keys.length === 0) return true;
-    return keys.every((k) => isFilterValueEmpty(value[k]));
-  }
-  return false;
-}
 function AppliedStateChips({
   filters,
   configs,

package/dist/es/components/data-table/ColumnFilterPopover.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
 import { FilterChip } from "./FilterChip.js";
 import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
+import { getStringArray, getNumberRange, getDateRange, isFilterValueEmpty } from "./filter-values.js";
 const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   addValuePlaceholder: "Add value...",
@@ -26,14 +27,18 @@ function formatChipDate(iso) {
   return d.toLocaleDateString(void 0, { day: "2-digit", month: "short" });
 }
 function isEmptyValue(value, type) {
-  if (type === "text") return !Array.isArray(value) || value.length === 0;
-  if (type === "enum") return !Array.isArray(value) || value.length === 0;
-  if (type === "date")
-    return typeof value !== "object" || Array.isArray(value) || !value.from && !value.to;
-  if (type === "number-range")
-    return typeof value !== "object" || Array.isArray(value) || value.from === void 0 && value.to === void 0;
+  if (type === "text" || type === "enum") return isFilterValueEmpty(getStringArray(value));
+  if (type === "date") return isFilterValueEmpty(getDateRange(value));
+  if (type === "number-range") return isFilterValueEmpty(getNumberRange(value));
   return true;
 }
+function dateDraft(value) {
+  const { from = "", to = "" } = getDateRange(value);
+  return { from, to };
+}
+function numberDraft(bound) {
+  return bound !== void 0 ? String(bound) : "";
+}
 function ColumnFilterPopover({
   config,
   filter,
@@ -64,47 +69,36 @@ function ColumnFilterPopover({
     return () => clearTimeout(id);
   }, [requestOpen]);
   const [draftTags, setDraftTags] = useState(
-    Array.isArray(filter.value) && config.type === "text" ? filter.value : []
+    config.type === "text" ? getStringArray(filter.value) : []
   );
   const [draftInput, setDraftInput] = useState("");
-  const [draftEnum, setDraftEnum] = useState(
-    Array.isArray(filter.value) ? filter.value : []
-  );
-  const [draftDate, setDraftDate] = useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) ? {
-      from: String(filter.value.from ?? ""),
-      to: String(filter.value.to ?? "")
-    } : { from: "", to: "" }
-  );
+  const [draftEnum, setDraftEnum] = useState(getStringArray(filter.value));
+  const [draftDate, setDraftDate] = useState(dateDraft(filter.value));
   const [draftNumberFrom, setDraftNumberFrom] = useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.from === "number" ? String(filter.value.from) : ""
-  );
-  const [draftNumberTo, setDraftNumberTo] = useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.to === "number" ? String(filter.value.to) : ""
+    numberDraft(getNumberRange(filter.value).from)
   );
+  const [draftNumberTo, setDraftNumberTo] = useState(numberDraft(getNumberRange(filter.value).to));
+  const resetDrafts = (value) => {
+    setDraftTags(config.type === "text" ? getStringArray(value) : []);
+    setDraftInput("");
+    setDraftEnum(getStringArray(value));
+    setDraftDate(dateDraft(value));
+    const numVal = getNumberRange(value);
+    setDraftNumberFrom(numberDraft(numVal.from));
+    setDraftNumberTo(numberDraft(numVal.to));
+  };
+  const [draftSource, setDraftSource] = useState(filter.value);
+  if (!isOpen && draftSource !== filter.value) {
+    setDraftSource(filter.value);
+    resetDrafts(filter.value);
+  }
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
       if (isEmptyValue(filter.value, config.type)) {
         onRemove();
         return;
       }
-      setDraftTags(Array.isArray(filter.value) && config.type === "text" ? filter.value : []);
-      setDraftInput("");
-      setDraftEnum(Array.isArray(filter.value) ? filter.value : []);
-      setDraftDate(
-        typeof filter.value === "object" && !Array.isArray(filter.value) ? {
-          from: String(filter.value.from ?? ""),
-          to: String(filter.value.to ?? "")
-        } : { from: "", to: "" }
-      );
-      if (typeof filter.value === "object" && !Array.isArray(filter.value)) {
-        const numVal = filter.value;
-        setDraftNumberFrom(typeof numVal.from === "number" ? String(numVal.from) : "");
-        setDraftNumberTo(typeof numVal.to === "number" ? String(numVal.to) : "");
-      } else {
-        setDraftNumberFrom("");
-        setDraftNumberTo("");
-      }
+      resetDrafts(filter.value);
     }
     setIsOpen(nextOpen);
   };
@@ -504,14 +498,14 @@ function ColumnFilterPopover({
       }
       return DEFAULT_LABELS.selectedCount(value.length);
     }
-    if (config.type === "date" && typeof value === "object" && !Array.isArray(value)) {
-      const { from, to } = value;
+    if (config.type === "date") {
+      const { from, to } = getDateRange(value);
       if (from && to) return `${from} — ${to}`;
       if (from) return `${DEFAULT_LABELS.chipFrom} ${from}`;
       if (to) return `${DEFAULT_LABELS.chipTo} ${to}`;
     }
-    if (config.type === "number-range" && typeof value === "object" && !Array.isArray(value)) {
-      const { from, to } = value;
+    if (config.type === "number-range") {
+      const { from, to } = getNumberRange(value);
       if (from !== void 0 && to !== void 0) return `${from}–${to}`;
       if (from !== void 0) return `≥${from}`;
       if (to !== void 0) return `≤${to}`;

package/dist/es/components/data-table/CompoundFilterPopover.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
 import { FilterChip } from "./FilterChip.js";
 import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
+import { getCompoundValue, isFilterValueEmpty, getNumberRange, getStringArray } from "./filter-values.js";
 const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   addPlaceholder: "Add...",
@@ -14,25 +15,10 @@ const DEFAULT_LABELS = {
   statsAllPrefix: "All:",
   statsFilteredPrefix: "Filt:"
 };
-function isCompoundEmpty(value) {
-  if (typeof value !== "object" || Array.isArray(value) || value === null) return true;
-  const obj = value;
-  return Object.keys(obj).every((k) => isSubValueEmpty(obj[k]));
-}
-function isSubValueEmpty(value) {
-  if (value === void 0 || value === null) return true;
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === "string") return value.length === 0;
-  if (typeof value === "object") {
-    const obj = value;
-    return obj.from === void 0 && obj.to === void 0;
-  }
-  return true;
-}
 function initDraft(sub, compound) {
   const val = compound[sub.key];
   if (sub.type === "number-range") {
-    const range = typeof val === "object" && !Array.isArray(val) ? val : {};
+    const range = getNumberRange(val);
     return {
       type: "number-range",
       from: range.from !== void 0 ? String(range.from) : "",
@@ -40,11 +26,11 @@ function initDraft(sub, compound) {
     };
   }
   if (sub.type === "enum") {
-    return { type: "enum", selected: Array.isArray(val) ? val : [] };
+    return { type: "enum", selected: getStringArray(val) };
   }
   return {
     type: "text",
-    tags: Array.isArray(val) ? val : [],
+    tags: getStringArray(val),
     input: ""
   };
 }
@@ -63,9 +49,9 @@ function draftToValue(draft) {
   return all.length > 0 ? all : void 0;
 }
 function formatSubDisplay(sub, val) {
-  if (isSubValueEmpty(val)) return null;
-  if (sub.type === "number-range" && typeof val === "object" && !Array.isArray(val)) {
-    const { from, to } = val;
+  if (isFilterValueEmpty(val)) return null;
+  if (sub.type === "number-range") {
+    const { from, to } = getNumberRange(val);
     const label = sub.label.replace(/\s+/g, " ").split(" ").pop() ?? sub.label;
     if (from !== void 0 && to !== void 0) return `${label}: ${from}–${to}`;
     if (from !== void 0) return `${label}: ≥${from}`;
@@ -99,17 +85,23 @@ function CompoundFilterPopover({
   onRequestOpenHandled
 }) {
   const subFilters = config.subFilters ?? [];
-  const compound = typeof filter.value === "object" && !Array.isArray(filter.value) ? filter.value : {};
+  const compound = getCompoundValue(filter.value);
   const [isOpen, setIsOpen] = useState(false);
   const onRequestOpenHandledRef = useRef(onRequestOpenHandled);
   useEffect(() => {
     onRequestOpenHandledRef.current = onRequestOpenHandled;
   });
-  const [drafts, setDrafts] = useState(() => {
+  const initDrafts = () => {
     const d = {};
     for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
     return d;
-  });
+  };
+  const [drafts, setDrafts] = useState(initDrafts);
+  const [draftSource, setDraftSource] = useState(filter.value);
+  if (!isOpen && draftSource !== filter.value) {
+    setDraftSource(filter.value);
+    setDrafts(initDrafts());
+  }
   useEffect(() => {
     if (!initialOpen) return;
     const id = setTimeout(() => setIsOpen(true), 0);
@@ -125,13 +117,11 @@ function CompoundFilterPopover({
   }, [requestOpen]);
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
-      if (isCompoundEmpty(filter.value)) {
+      if (isFilterValueEmpty(compound)) {
         onRemove();
         return;
       }
-      const d = {};
-      for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
-      setDrafts(d);
+      setDrafts(initDrafts());
     }
     setIsOpen(nextOpen);
   };
@@ -166,7 +156,7 @@ function CompoundFilterPopover({
     });
   };
   const getDisplayValue = () => {
-    if (isCompoundEmpty(filter.value)) return void 0;
+    if (isFilterValueEmpty(compound)) return void 0;
     const parts = [];
     for (const sub of subFilters) {
       const display = formatSubDisplay(sub, compound[sub.key]);

package/dist/es/components/data-table/FilterFormPanel.js

@@ -6,16 +6,8 @@ import { Button } from "../ui/button.js";
 import { ButtonFooter } from "../ui/button-footer.js";
 import { Input } from "../ui/input.js";
 import { Combobox } from "../ui/combobox.js";
+import { isFilterValueEmpty, getDateRange, getNumberRange, getCompoundValue } from "./filter-values.js";
 import { hasActiveManagedFilters } from "./managed-filters.js";
-function isValueEmpty(v) {
-  if (v === void 0) return true;
-  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
-  if (typeof v === "string") return v.length === 0;
-  if (typeof v === "object" && v !== null) {
-    return Object.values(v).every((x) => isValueEmpty(x));
-  }
-  return false;
-}
 function deriveInitialState(fields, filters) {
   const byId = new Map(filters.map((f) => [f.columnId, f.value]));
   const next = {};
@@ -71,7 +63,7 @@ function FilterFormPanel({
     const changes = [];
     for (const id2 of renderableFields) {
       const value = state[id2];
-      if (isValueEmpty(value)) {
+      if (value === void 0 || isFilterValueEmpty(value)) {
         if (activeIds.has(id2)) changes.push({ columnId: id2, action: "remove" });
       } else {
         changes.push({ columnId: id2, action: "set", value });
@@ -85,7 +77,7 @@ function FilterFormPanel({
     onClear(renderableFields);
     touchedRef.current.clear();
   }, [onClear, renderableFields]);
-  const isClearDisabled = !hasActiveManagedFilters(filters, renderableFields) && renderableFields.every((fieldId) => isValueEmpty(state[fieldId]));
+  const isClearDisabled = !hasActiveManagedFilters(filters, renderableFields) && renderableFields.every((fieldId) => isFilterValueEmpty(state[fieldId]));
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -186,12 +178,11 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "date") {
-    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const range = getDateRange(value);
     const update = (key) => (e) => {
       const v = e.target.value;
       const next = { ...range, [key]: v || void 0 };
-      const cleaned = next.from || next.to ? next : void 0;
-      onChange(cleaned);
+      onChange(next.from || next.to ? next : void 0);
     };
     return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
       /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
@@ -220,13 +211,12 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "number-range") {
-    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const range = getNumberRange(value);
     const update = (key) => (e) => {
       const raw = e.target.value;
       const parsed = raw === "" ? void 0 : Number(raw);
       const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
-      const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
-      onChange(cleaned);
+      onChange(next.from !== void 0 || next.to !== void 0 ? next : void 0);
     };
     return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
       /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
@@ -257,11 +247,11 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "compound") {
-    const compound = value && !Array.isArray(value) && typeof value === "object" ? value : {};
-    const updateSub = (subField, next) => {
+    const compound = getCompoundValue(value);
+    const updateSub = (subKey, next) => {
       const rest = { ...compound };
-      delete rest[subField];
-      const merged = next === void 0 || isValueEmpty(next) ? rest : { ...rest, [subField]: next };
+      delete rest[subKey];
+      const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
       onChange(Object.keys(merged).length === 0 ? void 0 : merged);
     };
     const visibleSubs = (config.subFilters ?? []).filter(
@@ -277,7 +267,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
         children: [
           /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
           /* @__PURE__ */ jsx("div", { className: "grid min-w-0 gap-2 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]", children: visibleSubs.map((sub) => {
-            const subValue = compound[sub.field];
+            const subValue = compound[sub.key];
             if (sub.type === "text") {
               const text = Array.isArray(subValue) ? subValue[0] ?? "" : "";
               return /* @__PURE__ */ jsx(
@@ -288,7 +278,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                   value: text,
                   onChange: (e) => {
                     const v = e.target.value;
-                    updateSub(sub.field, v === "" ? void 0 : [v]);
+                    updateSub(sub.key, v === "" ? void 0 : [v]);
                   },
                   className: "h-9 min-w-0"
                 },
@@ -301,7 +291,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                 Combobox,
                 {
                   value: selected || null,
-                  onChange: (v) => updateSub(sub.field, v ? [v] : void 0),
+                  onChange: (v) => updateSub(sub.key, v ? [v] : void 0),
                   options: sub.options ?? [],
                   placeholder: sub.label,
                   triggerAriaLabel: sub.label,
@@ -311,13 +301,18 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
               );
             }
             if (sub.type === "number-range") {
-              const range = subValue && !Array.isArray(subValue) && typeof subValue === "object" ? subValue : {};
+              const range = getNumberRange(subValue);
               const updateRange = (key) => (e) => {
                 const raw = e.target.value;
                 const parsed = raw === "" ? void 0 : Number(raw);
-                const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
-                const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
-                updateSub(sub.field, cleaned);
+                const next = {
+                  ...range,
+                  [key]: Number.isFinite(parsed) ? parsed : void 0
+                };
+                updateSub(
+                  sub.key,
+                  next.from !== void 0 || next.to !== void 0 ? next : void 0
+                );
               };
               return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2", children: [
                 /* @__PURE__ */ jsx(

package/dist/es/components/data-table/filter-values.js

@@ -0,0 +1,36 @@
+function isObjectValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getStringArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+function getDateRange(value) {
+  const range = {};
+  if (!isObjectValue(value)) return range;
+  if (typeof value.from === "string") range.from = value.from;
+  if (typeof value.to === "string") range.to = value.to;
+  return range;
+}
+function getNumberRange(value) {
+  const range = {};
+  if (!isObjectValue(value)) return range;
+  if (typeof value.from === "number") range.from = value.from;
+  if (typeof value.to === "number") range.to = value.to;
+  return range;
+}
+function getCompoundValue(value) {
+  return isObjectValue(value) ? value : {};
+}
+function isFilterValueEmpty(value) {
+  if (value === void 0 || value === null) return true;
+  if (typeof value === "string") return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  return Object.values(value).every((x) => typeof x !== "number" && isFilterValueEmpty(x));
+}
+export {
+  getCompoundValue,
+  getDateRange,
+  getNumberRange,
+  getStringArray,
+  isFilterValueEmpty
+};

package/dist/es/components/data-table/managed-filters.js

@@ -1,3 +1,4 @@
+import { isFilterValueEmpty } from "./filter-values.js";
 function applyManagedChanges(orch, changes) {
   const activeIds = new Set(orch.columnFilters.map((f) => f.columnId));
   for (const change of changes) {
@@ -14,15 +15,6 @@ function clearManagedFilters(orch, managedColumnIds) {
     if (activeIds.has(id)) orch.handleRemoveColumnFilter(id);
   }
 }
-function isFilterValueEmpty(v) {
-  if (v === void 0) return true;
-  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
-  if (typeof v === "string") return v.length === 0;
-  if (typeof v === "object" && v !== null) {
-    return Object.values(v).every((x) => isFilterValueEmpty(x));
-  }
-  return false;
-}
 function hasActiveManagedFilters(filters, managedFieldIds) {
   const managed = new Set(managedFieldIds);
   return filters.some((f) => managed.has(f.columnId) && !isFilterValueEmpty(f.value));

package/dist/es/hooks/useTableOrchestration.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from "react";
 import { useStore } from "zustand";
 import { useColumnResize } from "../components/data-table/hooks/use-column-resize.js";
 import { getVisiblePageNumbers } from "../components/data-table/hooks/use-table-pagination.js";
@@ -6,6 +6,7 @@ import { computeColumnGaps } from "../lib/column-gaps.js";
 import { computeColumnStats } from "../lib/filter-stats.js";
 import { createTableOrchestrationStore, defaultValueForFilter } from "./table-orchestration-store.js";
 const EMPTY_ID_SET = /* @__PURE__ */ new Set();
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useTableOrchestration(config) {
   const {
     rows,
@@ -37,14 +38,14 @@ function useTableOrchestration(config) {
   const requestOpenFilterId = useStore(store, (s) => s.requestOpenFilterId);
   const currentSort = useStore(store, (s) => s.currentSort);
   const columnVisibility = useStore(store, (s) => s.columnVisibility);
-  const page = useStore(store, (s) => s.page);
+  const storedPage = useStore(store, (s) => s.page);
   const rowsPerPage = useStore(store, (s) => s.rowsPerPage);
   const density = useStore(store, (s) => s.density);
   const isRefreshing = useStore(store, (s) => s.isRefreshing);
-  const selectedIds = useStore(store, (s) => s.selectedIds);
+  const storedSelectedIds = useStore(store, (s) => s.selectedIds);
   const activeView = useStore(store, (s) => s.activeView);
   const columnsMenuOpen = useStore(store, (s) => s.columnsMenuOpen);
-  const selectedRowId = useStore(store, (s) => s.selectedRowId);
+  const storedSelectedRowId = useStore(store, (s) => s.selectedRowId);
   const hasPriorities = Boolean(columnPriorities && Object.keys(columnPriorities).length > 0);
   const [isWide, setIsWide] = useState(true);
   const [isCompact, setIsCompact] = useState(false);
@@ -72,7 +73,7 @@ function useTableOrchestration(config) {
     }
     return hidden;
   }, [isWide, columnPriorities]);
-  const selectedIdsRef = useRef(selectedIds);
+  const selectedIdsRef = useRef(storedSelectedIds);
   const headerCheckStateRef = useRef(false);
   const sortState = useMemo(() => {
     if (!currentSort) return {};
@@ -150,7 +151,7 @@ function useTableOrchestration(config) {
           if (s) result[`${columnId}:${sub.key}`] = s;
         }
       } else {
-        const s = computeColumnStats(filteredRows, columnId, cfg);
+        const s = computeColumnStats(filteredRows, cfg.fieldName ?? columnId, cfg);
         if (s) result[columnId] = s;
       }
     }
@@ -175,7 +176,8 @@ function useTableOrchestration(config) {
     return result;
   }, [allColumnFilterStats, filteredColumnFilterStats, filterConfigs]);
   const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
-  const safePage = Math.min(page, totalPages);
+  const safePage = Math.min(storedPage, totalPages);
+  const page = safePage;
   const pageNumbers = useMemo(
     () => getVisiblePageNumbers(safePage, totalPages),
     [safePage, totalPages]
@@ -184,6 +186,21 @@ function useTableOrchestration(config) {
     const start = (safePage - 1) * rowsPerPage;
     return filteredRows.slice(start, start + rowsPerPage);
   }, [filteredRows, rowsPerPage, safePage]);
+  const filteredIdSet = useMemo(
+    () => new Set(filteredRows.map(getRowId)),
+    [filteredRows, getRowId]
+  );
+  const selectedRowId = storedSelectedRowId && filteredIdSet.has(storedSelectedRowId) ? storedSelectedRowId : null;
+  const selectedIds = useMemo(() => {
+    const pruned = new Set([...storedSelectedIds].filter((id) => filteredIdSet.has(id)));
+    return pruned.size === storedSelectedIds.size ? storedSelectedIds : pruned;
+  }, [storedSelectedIds, filteredIdSet]);
+  useIsomorphicLayoutEffect(() => {
+    const state = store.getState();
+    if (state.page !== safePage) state.setPage(safePage);
+    if (state.selectedRowId !== selectedRowId) state.setSelectedRowId(selectedRowId);
+    if (state.selectedIds !== selectedIds) state.setSelectedIds(selectedIds);
+  }, [store, storedPage, safePage, storedSelectedRowId, selectedRowId, storedSelectedIds, selectedIds]);
   const pageIds = useMemo(() => new Set(paginatedRows.map(getRowId)), [paginatedRows, getRowId]);
   const selectedOnPage = useMemo(
     () => [...selectedIds].filter((id) => pageIds.has(id)).length,
@@ -217,23 +234,6 @@ function useTableOrchestration(config) {
   const activeCustomFilterChip = activePreset.customFilterChip ?? null;
   selectedIdsRef.current = selectedIds;
   headerCheckStateRef.current = headerCheckState;
-  if (page !== safePage) {
-    store.getState().setPage(safePage);
-  }
-  if (selectedRowId && !filteredRows.some((row) => getRowId(row) === selectedRowId)) {
-    store.getState().setSelectedRowId(null);
-  }
-  const filteredIdSet = useMemo(
-    () => new Set(filteredRows.map(getRowId)),
-    [filteredRows, getRowId]
-  );
-  const prunedSelectedIds = useMemo(() => {
-    const pruned = new Set([...selectedIds].filter((id) => filteredIdSet.has(id)));
-    return pruned.size === selectedIds.size ? selectedIds : pruned;
-  }, [selectedIds, filteredIdSet]);
-  if (prunedSelectedIds !== selectedIds) {
-    store.getState().setSelectedIds(prunedSelectedIds);
-  }
   const handleSearchSubmit = useCallback(
     (e) => {
       e.preventDefault();

package/dist/es/index.js

@@ -61,6 +61,7 @@ import { AppliedStateChips } from "./components/data-table/AppliedStateChips.js"
 import { FilterFormPanel } from "./components/data-table/FilterFormPanel.js";
 import { FilterFormToggle, useFilterFormOpen } from "./components/data-table/FilterFormToggle.js";
 import { applyManagedChanges, clearManagedFilters, hasActiveManagedFilters } from "./components/data-table/managed-filters.js";
+import { getCompoundValue, getDateRange, getNumberRange, getStringArray, isFilterValueEmpty } from "./components/data-table/filter-values.js";
 import { useTableOrchestration } from "./hooks/useTableOrchestration.js";
 import { createTableOrchestrationStore, defaultValueForFilter } from "./hooks/table-orchestration-store.js";
 import { useRowDragOverride } from "./hooks/useRowDragOverride.js";
@@ -183,8 +184,13 @@ export {
   formatDateParts,
   formatEnumLabel,
   formatLiveTimestamp,
+  getCompoundValue,
+  getDateRange,
+  getNumberRange,
+  getStringArray,
   getVisiblePageNumbers,
   hasActiveManagedFilters,
+  isFilterValueEmpty,
   parsePossibleTimestamp,
   useAppShell,
   useColumnResize,

package/dist/tablewright.cjs

@@ -2703,6 +2703,35 @@ function GroupedColumnToggle({
     }
   );
 }
+function isObjectValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getStringArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+function getDateRange(value) {
+  const range = {};
+  if (!isObjectValue(value)) return range;
+  if (typeof value.from === "string") range.from = value.from;
+  if (typeof value.to === "string") range.to = value.to;
+  return range;
+}
+function getNumberRange(value) {
+  const range = {};
+  if (!isObjectValue(value)) return range;
+  if (typeof value.from === "number") range.from = value.from;
+  if (typeof value.to === "number") range.to = value.to;
+  return range;
+}
+function getCompoundValue(value) {
+  return isObjectValue(value) ? value : {};
+}
+function isFilterValueEmpty(value) {
+  if (value === void 0 || value === null) return true;
+  if (typeof value === "string") return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  return Object.values(value).every((x) => typeof x !== "number" && isFilterValueEmpty(x));
+}
 const DEFAULT_LABELS$2 = {
   searchPlaceholder: "Search...",
   addValuePlaceholder: "Add value...",
@@ -2724,14 +2753,18 @@ function formatChipDate(iso) {
   return d.toLocaleDateString(void 0, { day: "2-digit", month: "short" });
 }
 function isEmptyValue(value, type) {
-  if (type === "text") return !Array.isArray(value) || value.length === 0;
-  if (type === "enum") return !Array.isArray(value) || value.length === 0;
-  if (type === "date")
-    return typeof value !== "object" || Array.isArray(value) || !value.from && !value.to;
-  if (type === "number-range")
-    return typeof value !== "object" || Array.isArray(value) || value.from === void 0 && value.to === void 0;
+  if (type === "text" || type === "enum") return isFilterValueEmpty(getStringArray(value));
+  if (type === "date") return isFilterValueEmpty(getDateRange(value));
+  if (type === "number-range") return isFilterValueEmpty(getNumberRange(value));
   return true;
 }
+function dateDraft(value) {
+  const { from = "", to = "" } = getDateRange(value);
+  return { from, to };
+}
+function numberDraft(bound) {
+  return bound !== void 0 ? String(bound) : "";
+}
 function ColumnFilterPopover({
   config,
   filter,
@@ -2762,47 +2795,36 @@ function ColumnFilterPopover({
     return () => clearTimeout(id);
   }, [requestOpen]);
   const [draftTags, setDraftTags] = React.useState(
-    Array.isArray(filter.value) && config.type === "text" ? filter.value : []
+    config.type === "text" ? getStringArray(filter.value) : []
   );
   const [draftInput, setDraftInput] = React.useState("");
-  const [draftEnum, setDraftEnum] = React.useState(
-    Array.isArray(filter.value) ? filter.value : []
-  );
-  const [draftDate, setDraftDate] = React.useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) ? {
-      from: String(filter.value.from ?? ""),
-      to: String(filter.value.to ?? "")
-    } : { from: "", to: "" }
-  );
+  const [draftEnum, setDraftEnum] = React.useState(getStringArray(filter.value));
+  const [draftDate, setDraftDate] = React.useState(dateDraft(filter.value));
   const [draftNumberFrom, setDraftNumberFrom] = React.useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.from === "number" ? String(filter.value.from) : ""
-  );
-  const [draftNumberTo, setDraftNumberTo] = React.useState(
-    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.to === "number" ? String(filter.value.to) : ""
+    numberDraft(getNumberRange(filter.value).from)
   );
+  const [draftNumberTo, setDraftNumberTo] = React.useState(numberDraft(getNumberRange(filter.value).to));
+  const resetDrafts = (value) => {
+    setDraftTags(config.type === "text" ? getStringArray(value) : []);
+    setDraftInput("");
+    setDraftEnum(getStringArray(value));
+    setDraftDate(dateDraft(value));
+    const numVal = getNumberRange(value);
+    setDraftNumberFrom(numberDraft(numVal.from));
+    setDraftNumberTo(numberDraft(numVal.to));
+  };
+  const [draftSource, setDraftSource] = React.useState(filter.value);
+  if (!isOpen && draftSource !== filter.value) {
+    setDraftSource(filter.value);
+    resetDrafts(filter.value);
+  }
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
       if (isEmptyValue(filter.value, config.type)) {
         onRemove();
         return;
       }
-      setDraftTags(Array.isArray(filter.value) && config.type === "text" ? filter.value : []);
-      setDraftInput("");
-      setDraftEnum(Array.isArray(filter.value) ? filter.value : []);
-      setDraftDate(
-        typeof filter.value === "object" && !Array.isArray(filter.value) ? {
-          from: String(filter.value.from ?? ""),
-          to: String(filter.value.to ?? "")
-        } : { from: "", to: "" }
-      );
-      if (typeof filter.value === "object" && !Array.isArray(filter.value)) {
-        const numVal = filter.value;
-        setDraftNumberFrom(typeof numVal.from === "number" ? String(numVal.from) : "");
-        setDraftNumberTo(typeof numVal.to === "number" ? String(numVal.to) : "");
-      } else {
-        setDraftNumberFrom("");
-        setDraftNumberTo("");
-      }
+      resetDrafts(filter.value);
     }
     setIsOpen(nextOpen);
   };
@@ -3202,14 +3224,14 @@ function ColumnFilterPopover({
       }
       return DEFAULT_LABELS$2.selectedCount(value.length);
     }
-    if (config.type === "date" && typeof value === "object" && !Array.isArray(value)) {
-      const { from, to } = value;
+    if (config.type === "date") {
+      const { from, to } = getDateRange(value);
       if (from && to) return `${from} — ${to}`;
       if (from) return `${DEFAULT_LABELS$2.chipFrom} ${from}`;
       if (to) return `${DEFAULT_LABELS$2.chipTo} ${to}`;
     }
-    if (config.type === "number-range" && typeof value === "object" && !Array.isArray(value)) {
-      const { from, to } = value;
+    if (config.type === "number-range") {
+      const { from, to } = getNumberRange(value);
       if (from !== void 0 && to !== void 0) return `${from}–${to}`;
       if (from !== void 0) return `≥${from}`;
       if (to !== void 0) return `≤${to}`;
@@ -3250,25 +3272,10 @@ const DEFAULT_LABELS$1 = {
   statsAllPrefix: "All:",
   statsFilteredPrefix: "Filt:"
 };
-function isCompoundEmpty(value) {
-  if (typeof value !== "object" || Array.isArray(value) || value === null) return true;
-  const obj = value;
-  return Object.keys(obj).every((k) => isSubValueEmpty(obj[k]));
-}
-function isSubValueEmpty(value) {
-  if (value === void 0 || value === null) return true;
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === "string") return value.length === 0;
-  if (typeof value === "object") {
-    const obj = value;
-    return obj.from === void 0 && obj.to === void 0;
-  }
-  return true;
-}
 function initDraft(sub, compound) {
   const val = compound[sub.key];
   if (sub.type === "number-range") {
-    const range = typeof val === "object" && !Array.isArray(val) ? val : {};
+    const range = getNumberRange(val);
     return {
       type: "number-range",
       from: range.from !== void 0 ? String(range.from) : "",
@@ -3276,11 +3283,11 @@ function initDraft(sub, compound) {
     };
   }
   if (sub.type === "enum") {
-    return { type: "enum", selected: Array.isArray(val) ? val : [] };
+    return { type: "enum", selected: getStringArray(val) };
   }
   return {
     type: "text",
-    tags: Array.isArray(val) ? val : [],
+    tags: getStringArray(val),
     input: ""
   };
 }
@@ -3299,9 +3306,9 @@ function draftToValue(draft) {
   return all.length > 0 ? all : void 0;
 }
 function formatSubDisplay(sub, val) {
-  if (isSubValueEmpty(val)) return null;
-  if (sub.type === "number-range" && typeof val === "object" && !Array.isArray(val)) {
-    const { from, to } = val;
+  if (isFilterValueEmpty(val)) return null;
+  if (sub.type === "number-range") {
+    const { from, to } = getNumberRange(val);
     const label = sub.label.replace(/\s+/g, " ").split(" ").pop() ?? sub.label;
     if (from !== void 0 && to !== void 0) return `${label}: ${from}–${to}`;
     if (from !== void 0) return `${label}: ≥${from}`;
@@ -3335,17 +3342,23 @@ function CompoundFilterPopover({
   onRequestOpenHandled
 }) {
   const subFilters = config.subFilters ?? [];
-  const compound = typeof filter.value === "object" && !Array.isArray(filter.value) ? filter.value : {};
+  const compound = getCompoundValue(filter.value);
   const [isOpen, setIsOpen] = React.useState(false);
   const onRequestOpenHandledRef = React.useRef(onRequestOpenHandled);
   React.useEffect(() => {
     onRequestOpenHandledRef.current = onRequestOpenHandled;
   });
-  const [drafts, setDrafts] = React.useState(() => {
+  const initDrafts = () => {
     const d = {};
     for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
     return d;
-  });
+  };
+  const [drafts, setDrafts] = React.useState(initDrafts);
+  const [draftSource, setDraftSource] = React.useState(filter.value);
+  if (!isOpen && draftSource !== filter.value) {
+    setDraftSource(filter.value);
+    setDrafts(initDrafts());
+  }
   React.useEffect(() => {
     if (!initialOpen) return;
     const id = setTimeout(() => setIsOpen(true), 0);
@@ -3361,13 +3374,11 @@ function CompoundFilterPopover({
   }, [requestOpen]);
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
-      if (isCompoundEmpty(filter.value)) {
+      if (isFilterValueEmpty(compound)) {
         onRemove();
         return;
       }
-      const d = {};
-      for (const sub of subFilters) d[sub.key] = initDraft(sub, compound);
-      setDrafts(d);
+      setDrafts(initDrafts());
     }
     setIsOpen(nextOpen);
   };
@@ -3402,7 +3413,7 @@ function CompoundFilterPopover({
     });
   };
   const getDisplayValue = () => {
-    if (isCompoundEmpty(filter.value)) return void 0;
+    if (isFilterValueEmpty(compound)) return void 0;
     const parts = [];
     for (const sub of subFilters) {
       const display = formatSubDisplay(sub, compound[sub.key]);
@@ -3744,16 +3755,6 @@ const DEFAULT_LABELS = {
   columns: "Columns",
   hiddenCount: (n) => `${n} hidden`
 };
-function isFilterValueEmpty$1(value) {
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === "string") return value.length === 0;
-  if (typeof value === "object" && value !== null) {
-    const keys = Object.keys(value);
-    if (keys.length === 0) return true;
-    return keys.every((k) => isFilterValueEmpty$1(value[k]));
-  }
-  return false;
-}
 function AppliedStateChips({
   filters,
   configs,
@@ -3799,7 +3800,7 @@ function AppliedStateChips({
     filters.map((filter) => {
       const filterConfig = configs[filter.columnId];
       if (!filterConfig) return null;
-      const isEmpty = isFilterValueEmpty$1(filter.value);
+      const isEmpty = isFilterValueEmpty(filter.value);
       if (filterConfig.type === "compound") {
         return /* @__PURE__ */ jsxRuntime.jsx(
           CompoundFilterPopover,
@@ -3859,28 +3860,10 @@ function clearManagedFilters(orch, managedColumnIds) {
     if (activeIds.has(id)) orch.handleRemoveColumnFilter(id);
   }
 }
-function isFilterValueEmpty(v) {
-  if (v === void 0) return true;
-  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
-  if (typeof v === "string") return v.length === 0;
-  if (typeof v === "object" && v !== null) {
-    return Object.values(v).every((x) => isFilterValueEmpty(x));
-  }
-  return false;
-}
 function hasActiveManagedFilters(filters, managedFieldIds) {
   const managed = new Set(managedFieldIds);
   return filters.some((f) => managed.has(f.columnId) && !isFilterValueEmpty(f.value));
 }
-function isValueEmpty(v) {
-  if (v === void 0) return true;
-  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
-  if (typeof v === "string") return v.length === 0;
-  if (typeof v === "object" && v !== null) {
-    return Object.values(v).every((x) => isValueEmpty(x));
-  }
-  return false;
-}
 function deriveInitialState(fields, filters) {
   const byId = new Map(filters.map((f) => [f.columnId, f.value]));
   const next = {};
@@ -3936,7 +3919,7 @@ function FilterFormPanel({
     const changes = [];
     for (const id2 of renderableFields) {
       const value = state[id2];
-      if (isValueEmpty(value)) {
+      if (value === void 0 || isFilterValueEmpty(value)) {
         if (activeIds.has(id2)) changes.push({ columnId: id2, action: "remove" });
       } else {
         changes.push({ columnId: id2, action: "set", value });
@@ -3950,7 +3933,7 @@ function FilterFormPanel({
     onClear(renderableFields);
     touchedRef.current.clear();
   }, [onClear, renderableFields]);
-  const isClearDisabled = !hasActiveManagedFilters(filters, renderableFields) && renderableFields.every((fieldId) => isValueEmpty(state[fieldId]));
+  const isClearDisabled = !hasActiveManagedFilters(filters, renderableFields) && renderableFields.every((fieldId) => isFilterValueEmpty(state[fieldId]));
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -4051,12 +4034,11 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "date") {
-    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const range = getDateRange(value);
     const update = (key) => (e) => {
       const v = e.target.value;
       const next = { ...range, [key]: v || void 0 };
-      const cleaned = next.from || next.to ? next : void 0;
-      onChange(cleaned);
+      onChange(next.from || next.to ? next : void 0);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
@@ -4085,13 +4067,12 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "number-range") {
-    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const range = getNumberRange(value);
     const update = (key) => (e) => {
       const raw = e.target.value;
       const parsed = raw === "" ? void 0 : Number(raw);
       const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
-      const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
-      onChange(cleaned);
+      onChange(next.from !== void 0 || next.to !== void 0 ? next : void 0);
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
@@ -4122,11 +4103,11 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
     ] });
   }
   if (config.type === "compound") {
-    const compound = value && !Array.isArray(value) && typeof value === "object" ? value : {};
-    const updateSub = (subField, next) => {
+    const compound = getCompoundValue(value);
+    const updateSub = (subKey, next) => {
       const rest = { ...compound };
-      delete rest[subField];
-      const merged = next === void 0 || isValueEmpty(next) ? rest : { ...rest, [subField]: next };
+      delete rest[subKey];
+      const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
       onChange(Object.keys(merged).length === 0 ? void 0 : merged);
     };
     const visibleSubs = (config.subFilters ?? []).filter(
@@ -4142,7 +4123,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 gap-2 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]", children: visibleSubs.map((sub) => {
-            const subValue = compound[sub.field];
+            const subValue = compound[sub.key];
             if (sub.type === "text") {
               const text = Array.isArray(subValue) ? subValue[0] ?? "" : "";
               return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4153,7 +4134,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                   value: text,
                   onChange: (e) => {
                     const v = e.target.value;
-                    updateSub(sub.field, v === "" ? void 0 : [v]);
+                    updateSub(sub.key, v === "" ? void 0 : [v]);
                   },
                   className: "h-9 min-w-0"
                 },
@@ -4166,7 +4147,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                 Combobox,
                 {
                   value: selected || null,
-                  onChange: (v) => updateSub(sub.field, v ? [v] : void 0),
+                  onChange: (v) => updateSub(sub.key, v ? [v] : void 0),
                   options: sub.options ?? [],
                   placeholder: sub.label,
                   triggerAriaLabel: sub.label,
@@ -4176,13 +4157,18 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
               );
             }
             if (sub.type === "number-range") {
-              const range = subValue && !Array.isArray(subValue) && typeof subValue === "object" ? subValue : {};
+              const range = getNumberRange(subValue);
               const updateRange = (key) => (e) => {
                 const raw = e.target.value;
                 const parsed = raw === "" ? void 0 : Number(raw);
-                const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
-                const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
-                updateSub(sub.field, cleaned);
+                const next = {
+                  ...range,
+                  [key]: Number.isFinite(parsed) ? parsed : void 0
+                };
+                updateSub(
+                  sub.key,
+                  next.from !== void 0 || next.to !== void 0 ? next : void 0
+                );
               };
               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -4530,6 +4516,7 @@ function createTableOrchestrationStore({
   });
 }
 const EMPTY_ID_SET = /* @__PURE__ */ new Set();
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useTableOrchestration(config) {
   const {
     rows,
@@ -4561,14 +4548,14 @@ function useTableOrchestration(config) {
   const requestOpenFilterId = zustand.useStore(store, (s) => s.requestOpenFilterId);
   const currentSort = zustand.useStore(store, (s) => s.currentSort);
   const columnVisibility = zustand.useStore(store, (s) => s.columnVisibility);
-  const page = zustand.useStore(store, (s) => s.page);
+  const storedPage = zustand.useStore(store, (s) => s.page);
   const rowsPerPage = zustand.useStore(store, (s) => s.rowsPerPage);
   const density = zustand.useStore(store, (s) => s.density);
   const isRefreshing = zustand.useStore(store, (s) => s.isRefreshing);
-  const selectedIds = zustand.useStore(store, (s) => s.selectedIds);
+  const storedSelectedIds = zustand.useStore(store, (s) => s.selectedIds);
   const activeView = zustand.useStore(store, (s) => s.activeView);
   const columnsMenuOpen = zustand.useStore(store, (s) => s.columnsMenuOpen);
-  const selectedRowId = zustand.useStore(store, (s) => s.selectedRowId);
+  const storedSelectedRowId = zustand.useStore(store, (s) => s.selectedRowId);
   const hasPriorities = Boolean(columnPriorities && Object.keys(columnPriorities).length > 0);
   const [isWide, setIsWide] = React.useState(true);
   const [isCompact, setIsCompact] = React.useState(false);
@@ -4596,7 +4583,7 @@ function useTableOrchestration(config) {
     }
     return hidden;
   }, [isWide, columnPriorities]);
-  const selectedIdsRef = React.useRef(selectedIds);
+  const selectedIdsRef = React.useRef(storedSelectedIds);
   const headerCheckStateRef = React.useRef(false);
   const sortState = React.useMemo(() => {
     if (!currentSort) return {};
@@ -4674,7 +4661,7 @@ function useTableOrchestration(config) {
           if (s) result[`${columnId}:${sub.key}`] = s;
         }
       } else {
-        const s = computeColumnStats(filteredRows, columnId, cfg);
+        const s = computeColumnStats(filteredRows, cfg.fieldName ?? columnId, cfg);
         if (s) result[columnId] = s;
       }
     }
@@ -4699,7 +4686,8 @@ function useTableOrchestration(config) {
     return result;
   }, [allColumnFilterStats, filteredColumnFilterStats, filterConfigs]);
   const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
-  const safePage = Math.min(page, totalPages);
+  const safePage = Math.min(storedPage, totalPages);
+  const page = safePage;
   const pageNumbers = React.useMemo(
     () => getVisiblePageNumbers(safePage, totalPages),
     [safePage, totalPages]
@@ -4708,6 +4696,21 @@ function useTableOrchestration(config) {
     const start = (safePage - 1) * rowsPerPage;
     return filteredRows.slice(start, start + rowsPerPage);
   }, [filteredRows, rowsPerPage, safePage]);
+  const filteredIdSet = React.useMemo(
+    () => new Set(filteredRows.map(getRowId)),
+    [filteredRows, getRowId]
+  );
+  const selectedRowId = storedSelectedRowId && filteredIdSet.has(storedSelectedRowId) ? storedSelectedRowId : null;
+  const selectedIds = React.useMemo(() => {
+    const pruned = new Set([...storedSelectedIds].filter((id) => filteredIdSet.has(id)));
+    return pruned.size === storedSelectedIds.size ? storedSelectedIds : pruned;
+  }, [storedSelectedIds, filteredIdSet]);
+  useIsomorphicLayoutEffect(() => {
+    const state = store.getState();
+    if (state.page !== safePage) state.setPage(safePage);
+    if (state.selectedRowId !== selectedRowId) state.setSelectedRowId(selectedRowId);
+    if (state.selectedIds !== selectedIds) state.setSelectedIds(selectedIds);
+  }, [store, storedPage, safePage, storedSelectedRowId, selectedRowId, storedSelectedIds, selectedIds]);
   const pageIds = React.useMemo(() => new Set(paginatedRows.map(getRowId)), [paginatedRows, getRowId]);
   const selectedOnPage = React.useMemo(
     () => [...selectedIds].filter((id) => pageIds.has(id)).length,
@@ -4741,23 +4744,6 @@ function useTableOrchestration(config) {
   const activeCustomFilterChip = activePreset.customFilterChip ?? null;
   selectedIdsRef.current = selectedIds;
   headerCheckStateRef.current = headerCheckState;
-  if (page !== safePage) {
-    store.getState().setPage(safePage);
-  }
-  if (selectedRowId && !filteredRows.some((row) => getRowId(row) === selectedRowId)) {
-    store.getState().setSelectedRowId(null);
-  }
-  const filteredIdSet = React.useMemo(
-    () => new Set(filteredRows.map(getRowId)),
-    [filteredRows, getRowId]
-  );
-  const prunedSelectedIds = React.useMemo(() => {
-    const pruned = new Set([...selectedIds].filter((id) => filteredIdSet.has(id)));
-    return pruned.size === selectedIds.size ? selectedIds : pruned;
-  }, [selectedIds, filteredIdSet]);
-  if (prunedSelectedIds !== selectedIds) {
-    store.getState().setSelectedIds(prunedSelectedIds);
-  }
   const handleSearchSubmit = React.useCallback(
     (e) => {
       e.preventDefault();
@@ -5458,8 +5444,13 @@ exports.displayTimeZone = displayTimeZone;
 exports.formatDateParts = formatDateParts;
 exports.formatEnumLabel = formatEnumLabel;
 exports.formatLiveTimestamp = formatLiveTimestamp;
+exports.getCompoundValue = getCompoundValue;
+exports.getDateRange = getDateRange;
+exports.getNumberRange = getNumberRange;
+exports.getStringArray = getStringArray;
 exports.getVisiblePageNumbers = getVisiblePageNumbers;
 exports.hasActiveManagedFilters = hasActiveManagedFilters;
+exports.isFilterValueEmpty = isFilterValueEmpty;
 exports.parsePossibleTimestamp = parsePossibleTimestamp;
 exports.useAppShell = useAppShell;
 exports.useColumnResize = useColumnResize;

package/dist/types/components/data-table/filter-types.d.ts

@@ -1,9 +1,11 @@
 export type ColumnFilterType = "text" | "enum" | "date" | "number-range" | "compound";
 export interface CompoundSubFilter {
+    /** Sub-filter id: the key of its value inside the compound filter value. */
     key: string;
     type: "text" | "number-range" | "enum";
     label: string;
     badge?: string;
+    /** Row field the sub-filter reads (used for column stats). */
     field: string;
     options?: {
         label: string;
@@ -20,15 +22,19 @@ export interface ColumnFilterConfig {
     }[];
     subFilters?: CompoundSubFilter[];
 }
-export type ActiveFilterValue = string | string[] | {
+export type DateRangeValue = {
     from?: string;
     to?: string;
-} | {
+};
+export type NumberRangeValue = {
     from?: number;
     to?: number;
-} | {
+};
+/** Compound filter value: sub-filter `key` → that sub-filter's value. */
+export type CompoundFilterValue = {
     [key: string]: ActiveFilterValue;
 };
+export type ActiveFilterValue = string | string[] | DateRangeValue | NumberRangeValue | CompoundFilterValue;
 export interface ActiveFilter {
     columnId: string;
     value: ActiveFilterValue;

package/dist/types/components/data-table/filter-values.d.ts

@@ -0,0 +1,16 @@
+import type { ActiveFilterValue, CompoundFilterValue, DateRangeValue, NumberRangeValue } from "./filter-types.js";
+/** Read a text/enum filter value. Non-array values read as `[]`. */
+export declare function getStringArray(value: ActiveFilterValue | undefined): string[];
+/** Read a date filter value. Non-string bounds are dropped. */
+export declare function getDateRange(value: ActiveFilterValue | undefined): DateRangeValue;
+/** Read a number-range filter value. Non-number bounds are dropped. */
+export declare function getNumberRange(value: ActiveFilterValue | undefined): NumberRangeValue;
+/** Read a compound filter value (sub-filter key → value). Non-objects read as `{}`. */
+export declare function getCompoundValue(value: ActiveFilterValue | undefined): CompoundFilterValue;
+/**
+ * True when a filter value constrains nothing: `undefined`, `""`, `[]`, or an
+ * object whose every entry is itself empty (so `{}`, `{ from: undefined }` and
+ * `{ sub: [] }` are empty; `{ from: 0 }` is not). `[""]` is not empty — `""`
+ * can be a real enum option value.
+ */
+export declare function isFilterValueEmpty(value: ActiveFilterValue | undefined): boolean;

package/dist/types/index.d.ts

@@ -70,7 +70,7 @@ export { useScrollActivity } from "./hooks/use-scroll-activity.js";
 export { cn } from "./lib/utils.js";
 export { STYLE_SCOPE } from "./lib/style-scope.js";
 export { PortalContainerContext, usePortalContainer, } from "./context/portal-container-context.js";
-export type { ColumnFilterType, CompoundSubFilter, ColumnFilterConfig, ActiveFilterValue, ActiveFilter, FilterColumnStats, FilterStatsSlice, ColumnGroup, ColumnGap, ViewPreset, } from "./components/data-table/filter-types.js";
+export type { ColumnFilterType, CompoundSubFilter, ColumnFilterConfig, ActiveFilterValue, DateRangeValue, NumberRangeValue, CompoundFilterValue, ActiveFilter, FilterColumnStats, FilterStatsSlice, ColumnGroup, ColumnGap, ViewPreset, } from "./components/data-table/filter-types.js";
 export { GapIndicator, GapCell, GAP_HEADER_ATTR, GAP_CELL_ATTR, } from "./components/data-table/GapIndicator.js";
 export { TimestampCell } from "./components/data-table/TimestampCell.js";
 export { ExpiryTimestampCell } from "./components/data-table/ExpiryTimestampCell.js";
@@ -89,6 +89,7 @@ export { FilterFormToggle, useFilterFormOpen } from "./components/data-table/Fil
 export type { FilterFormToggleProps } from "./components/data-table/FilterFormToggle.js";
 export { applyManagedChanges, clearManagedFilters, hasActiveManagedFilters, } from "./components/data-table/managed-filters.js";
 export type { ManagedFilterChange } from "./components/data-table/managed-filters.js";
+export { getCompoundValue, getDateRange, getNumberRange, getStringArray, isFilterValueEmpty, } from "./components/data-table/filter-values.js";
 export { useTableOrchestration } from "./hooks/useTableOrchestration.js";
 export type { TableOrchestrationConfig, TableOrchestrationReturn, } from "./hooks/useTableOrchestration.js";
 export { createTableOrchestrationStore, defaultValueForFilter, } from "./hooks/table-orchestration-store.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {
@@ -16,7 +16,6 @@
     "provenance": true
   },
   "type": "module",
-  "packageManager": "pnpm@10.28.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,19 +39,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "node scripts/build.mjs",
-    "build:js": "vite build --config vite.lib.config.ts",
-    "build:css": "node scripts/build-css.mjs",
-    "build:types": "tsc -p tsconfig.build.json",
-    "check:render": "node scripts/render-check/run.mjs",
-    "lint": "eslint src .storybook --max-warnings=0",
-    "typecheck": "tsc --project tsconfig.json --noEmit",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "changeset": "changeset",
-    "release": "changeset publish"
-  },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",
     "@types/react": "*",
@@ -110,5 +96,18 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "build:js": "vite build --config vite.lib.config.ts",
+    "build:css": "node scripts/build-css.mjs",
+    "build:types": "tsc -p tsconfig.build.json",
+    "check:render": "node scripts/render-check/run.mjs",
+    "lint": "eslint src .storybook --max-warnings=0",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "release": "changeset publish"
   }
-}
+}