@undevy-org/tablewright 0.2.1 → 0.3.0

package/dist/tablewright.cjs

@@ -4271,90 +4271,6 @@ function FilterFormToggle({
     }
   );
 }
-function computeColumnGaps(orderedColumnIds, columnVisibility) {
-  const gaps = [];
-  let lastVisibleId = null;
-  let pendingHidden = [];
-  for (const columnId of orderedColumnIds) {
-    if (columnVisibility[columnId] === false) {
-      pendingHidden.push(columnId);
-    } else {
-      if (pendingHidden.length > 0) {
-        gaps.push({ afterColumnId: lastVisibleId, hiddenIds: pendingHidden });
-        pendingHidden = [];
-      }
-      lastVisibleId = columnId;
-    }
-  }
-  if (pendingHidden.length > 0) {
-    gaps.push({ afterColumnId: lastVisibleId, hiddenIds: pendingHidden });
-  }
-  return gaps;
-}
-function getField(row, fieldName) {
-  return row[fieldName];
-}
-function computeColumnStats(rows, fieldName, config) {
-  switch (config.type) {
-    case "number-range": {
-      let min = Infinity;
-      let max = -Infinity;
-      for (const row of rows) {
-        const val = getField(row, fieldName);
-        if (typeof val === "number" && Number.isFinite(val)) {
-          if (val < min) min = val;
-          if (val > max) max = val;
-        }
-      }
-      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
-      return { type: "number-range", min, max };
-    }
-    case "text": {
-      const seen = /* @__PURE__ */ new Set();
-      const samples = [];
-      for (const row of rows) {
-        const val = getField(row, fieldName);
-        if (typeof val === "string" && val.length > 0) {
-          if (!seen.has(val)) {
-            seen.add(val);
-            if (samples.length < 3) samples.push(val);
-          }
-        }
-      }
-      if (seen.size === 0) return null;
-      return { type: "text", samples, totalUnique: seen.size };
-    }
-    case "date": {
-      const valueField = `${fieldName}Value`;
-      let min = Infinity;
-      let max = -Infinity;
-      for (const row of rows) {
-        const val = getField(row, valueField);
-        if (typeof val === "number" && val > 0) {
-          if (val < min) min = val;
-          if (val > max) max = val;
-        }
-      }
-      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
-      const toDateStr = (ts) => new Date(ts).toISOString().slice(0, 10);
-      return { type: "date", min: toDateStr(min), max: toDateStr(max) };
-    }
-    case "enum": {
-      const counts = {};
-      if (config.options) {
-        for (const opt of config.options) counts[opt.value] = 0;
-      }
-      for (const row of rows) {
-        const val = getField(row, fieldName);
-        const key = typeof val === "boolean" ? String(val) : typeof val === "string" ? val : null;
-        if (key !== null && key in counts) counts[key]++;
-      }
-      return { type: "enum", counts };
-    }
-    default:
-      return null;
-  }
-}
 const CUSTOM_VIEW_KEY = "custom";
 const defaultValueForFilter = (cfg) => {
   if (cfg.type === "compound") return {};
@@ -4515,209 +4431,134 @@ function createTableOrchestrationStore({
     };
   });
 }
-const EMPTY_ID_SET = /* @__PURE__ */ new Set();
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-function useTableOrchestration(config) {
-  const {
-    rows,
-    filterConfigs,
-    columnMeta,
-    toggleableColumnIds,
-    rowsPerPageOptions,
-    viewPresets,
-    defaultViewKey,
-    columnGroups,
-    initialColumnVisibility,
-    initialColumnWidths,
-    columnPriorities,
-    wideBreakpoint = 1280,
-    compactBreakpoint = 768
-  } = config;
-  const { getRowId, filterRow, getSortValue, getSearchText } = config;
-  const [store] = React.useState(
-    () => createTableOrchestrationStore({
-      defaultViewKey,
-      initialColumnVisibility,
-      initialRowsPerPage: rowsPerPageOptions[0]
-    })
-  );
-  const searchInput = zustand.useStore(store, (s) => s.searchInput);
-  const searchQuery = zustand.useStore(store, (s) => s.searchQuery);
-  const columnFilters = zustand.useStore(store, (s) => s.columnFilters);
-  const newestFilterColumnId = zustand.useStore(store, (s) => s.newestFilterColumnId);
-  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 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 storedSelectedIds = zustand.useStore(store, (s) => s.selectedIds);
-  const activeView = zustand.useStore(store, (s) => s.activeView);
-  const columnsMenuOpen = zustand.useStore(store, (s) => s.columnsMenuOpen);
-  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);
-  React.useEffect(() => {
-    if (!hasPriorities || typeof window === "undefined") return;
-    const mql = window.matchMedia(`(min-width: ${wideBreakpoint}px)`);
-    const onChange = (e) => setIsWide(e.matches);
-    setIsWide(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [hasPriorities, wideBreakpoint]);
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(`(max-width: ${compactBreakpoint - 1}px)`);
-    const onChange = (e) => setIsCompact(e.matches);
-    setIsCompact(mql.matches);
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [compactBreakpoint]);
-  const responsiveHiddenColumnIds = React.useMemo(() => {
-    if (isWide || !columnPriorities) return EMPTY_ID_SET;
-    const hidden = /* @__PURE__ */ new Set();
-    for (const [id, priority] of Object.entries(columnPriorities)) {
-      if (priority === 3) hidden.add(id);
-    }
-    return hidden;
-  }, [isWide, columnPriorities]);
-  const selectedIdsRef = React.useRef(storedSelectedIds);
-  const headerCheckStateRef = React.useRef(false);
-  const sortState = React.useMemo(() => {
-    if (!currentSort) return {};
-    return { [currentSort.columnId]: currentSort.direction };
-  }, [currentSort]);
-  const { widths, onPointerDown, setWidths } = useColumnResize(columnMeta, initialColumnWidths);
-  const activePreset = React.useMemo(() => {
-    if (activeView === "custom") {
-      return {
-        key: "custom",
-        label: "Custom",
-        filters: [],
-        sort: null,
-        columnVisibility: {}
-      };
-    }
-    return viewPresets.find((v) => v.key === activeView) ?? viewPresets[0];
-  }, [activeView, viewPresets]);
-  const allColumnFilterStats = React.useMemo(() => {
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const s = computeColumnStats(rows, sub.field, {
-            type: sub.type,
-            label: sub.label,
-            options: sub.options
-          });
-          if (s) result[`${columnId}:${sub.key}`] = s;
+function getField(row, fieldName) {
+  return row[fieldName];
+}
+function computeColumnStats(rows, fieldName, config) {
+  switch (config.type) {
+    case "number-range": {
+      let min = Infinity;
+      let max = -Infinity;
+      for (const row of rows) {
+        const val = getField(row, fieldName);
+        if (typeof val === "number" && Number.isFinite(val)) {
+          if (val < min) min = val;
+          if (val > max) max = val;
         }
-      } else {
-        const s = computeColumnStats(rows, cfg.fieldName ?? columnId, cfg);
-        if (s) result[columnId] = s;
       }
+      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+      return { type: "number-range", min, max };
     }
-    return result;
-  }, [rows, filterConfigs]);
-  const filteredRows = React.useMemo(() => {
-    const search = searchQuery.trim().toLowerCase();
-    const filtered = rows.filter((row) => {
-      if (activePreset.customFilter && !activePreset.customFilter(row)) return false;
-      if (search.length > 0 && !getSearchText(row).includes(search)) return false;
-      return columnFilters.every((filter) => filterRow(row, filter));
-    });
-    if (!currentSort) return filtered;
-    const { columnId, direction } = currentSort;
-    return [...filtered].sort((a, b) => {
-      const aVal = getSortValue(a, columnId);
-      const bVal = getSortValue(b, columnId);
-      if (aVal < bVal) return direction === "asc" ? -1 : 1;
-      if (aVal > bVal) return direction === "asc" ? 1 : -1;
-      return 0;
-    });
-  }, [
-    rows,
-    searchQuery,
-    columnFilters,
-    currentSort,
-    activePreset,
-    getSearchText,
-    filterRow,
-    getSortValue
-  ]);
-  const filteredColumnFilterStats = React.useMemo(() => {
-    if (columnFilters.length === 0 && searchQuery.trim().length === 0) return null;
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const s = computeColumnStats(filteredRows, sub.field, {
-            type: sub.type,
-            label: sub.label,
-            options: sub.options
-          });
-          if (s) result[`${columnId}:${sub.key}`] = s;
+    case "text": {
+      const seen = /* @__PURE__ */ new Set();
+      const samples = [];
+      for (const row of rows) {
+        const val = getField(row, fieldName);
+        if (typeof val === "string" && val.length > 0) {
+          if (!seen.has(val)) {
+            seen.add(val);
+            if (samples.length < 3) samples.push(val);
+          }
         }
-      } else {
-        const s = computeColumnStats(filteredRows, cfg.fieldName ?? columnId, cfg);
-        if (s) result[columnId] = s;
       }
+      if (seen.size === 0) return null;
+      return { type: "text", samples, totalUnique: seen.size };
     }
-    return result;
-  }, [filteredRows, filterConfigs, columnFilters, searchQuery]);
-  const columnFilterStats = React.useMemo(() => {
-    const result = {};
-    for (const [columnId, cfg] of Object.entries(filterConfigs)) {
-      if (cfg.type === "compound" && cfg.subFilters) {
-        for (const sub of cfg.subFilters) {
-          const key = `${columnId}:${sub.key}`;
-          const all = allColumnFilterStats[key];
-          if (!all) continue;
-          result[key] = { all, filtered: filteredColumnFilterStats?.[key] ?? null };
+    case "date": {
+      const valueField = `${fieldName}Value`;
+      let min = Infinity;
+      let max = -Infinity;
+      for (const row of rows) {
+        const val = getField(row, valueField);
+        if (typeof val === "number" && val > 0) {
+          if (val < min) min = val;
+          if (val > max) max = val;
         }
-      } else {
-        const all = allColumnFilterStats[columnId];
-        if (!all) continue;
-        result[columnId] = { all, filtered: filteredColumnFilterStats?.[columnId] ?? null };
       }
+      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+      const toDateStr = (ts) => new Date(ts).toISOString().slice(0, 10);
+      return { type: "date", min: toDateStr(min), max: toDateStr(max) };
     }
-    return result;
-  }, [allColumnFilterStats, filteredColumnFilterStats, filterConfigs]);
-  const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
-  const safePage = Math.min(storedPage, totalPages);
-  const page = safePage;
-  const pageNumbers = React.useMemo(
-    () => getVisiblePageNumbers(safePage, totalPages),
-    [safePage, totalPages]
-  );
-  const paginatedRows = React.useMemo(() => {
-    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,
-    [selectedIds, pageIds]
+    case "enum": {
+      const counts = {};
+      if (config.options) {
+        for (const opt of config.options) counts[opt.value] = 0;
+      }
+      for (const row of rows) {
+        const val = getField(row, fieldName);
+        const key = typeof val === "boolean" ? String(val) : typeof val === "string" ? val : null;
+        if (key !== null && key in counts) counts[key]++;
+      }
+      return { type: "enum", counts };
+    }
+    default:
+      return null;
+  }
+}
+function computeFilterStats(rows, filterConfigs) {
+  const result = {};
+  for (const [columnId, cfg] of Object.entries(filterConfigs)) {
+    if (cfg.type === "compound" && cfg.subFilters) {
+      for (const sub of cfg.subFilters) {
+        const s = computeColumnStats(rows, sub.field, {
+          type: sub.type,
+          label: sub.label,
+          options: sub.options
+        });
+        if (s) result[`${columnId}:${sub.key}`] = s;
+      }
+    } else {
+      const s = computeColumnStats(rows, cfg.fieldName ?? columnId, cfg);
+      if (s) result[columnId] = s;
+    }
+  }
+  return result;
+}
+function useColumnFilterStats(rows, filteredRows, filterConfigs, isFiltered) {
+  const allStats = React.useMemo(() => computeFilterStats(rows, filterConfigs), [rows, filterConfigs]);
+  const filteredStats = React.useMemo(
+    () => isFiltered ? computeFilterStats(filteredRows, filterConfigs) : null,
+    [filteredRows, filterConfigs, isFiltered]
   );
-  const allOnPageSelected = pageIds.size > 0 && selectedOnPage === pageIds.size;
-  const headerCheckState = allOnPageSelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
+  return React.useMemo(() => {
+    const result = {};
+    for (const [key, all] of Object.entries(allStats)) {
+      result[key] = { all, filtered: filteredStats?.[key] ?? null };
+    }
+    return result;
+  }, [allStats, filteredStats]);
+}
+function gapColumnId(afterColumnId) {
+  return `__gap_after_${afterColumnId ?? "start"}`;
+}
+function computeColumnGaps(orderedColumnIds, columnVisibility) {
+  const gaps = [];
+  let lastVisibleId = null;
+  let pendingHidden = [];
+  for (const columnId of orderedColumnIds) {
+    if (columnVisibility[columnId] === false) {
+      pendingHidden.push(columnId);
+    } else {
+      if (pendingHidden.length > 0) {
+        gaps.push({ afterColumnId: lastVisibleId, hiddenIds: pendingHidden });
+        pendingHidden = [];
+      }
+      lastVisibleId = columnId;
+    }
+  }
+  if (pendingHidden.length > 0) {
+    gaps.push({ afterColumnId: lastVisibleId, hiddenIds: pendingHidden });
+  }
+  return gaps;
+}
+const GAP_WIDTH = 32;
+function useColumnGaps({
+  columnGroups,
+  toggleableColumnIds,
+  columnVisibility,
+  columnMeta,
+  widths
+}) {
   const columnGaps = React.useMemo(
     () => columnGroups ? computeColumnGaps(toggleableColumnIds, columnVisibility) : [],
     [columnGroups, toggleableColumnIds, columnVisibility]
@@ -4725,25 +4566,56 @@ function useTableOrchestration(config) {
   const extendedColumnMeta = React.useMemo(() => {
     if (columnGaps.length === 0) return columnMeta;
     const meta = { ...columnMeta };
-    for (const gap of columnGaps) {
-      meta[`__gap_after_${gap.afterColumnId ?? "start"}`] = { minW: 32 };
-    }
+    for (const gap of columnGaps) meta[gapColumnId(gap.afterColumnId)] = { minW: GAP_WIDTH };
     return meta;
   }, [columnGaps, columnMeta]);
   const extendedWidths = React.useMemo(() => {
     if (columnGaps.length === 0) return widths;
     const merged = { ...widths };
-    for (const gap of columnGaps) {
-      merged[`__gap_after_${gap.afterColumnId ?? "start"}`] = 32;
-    }
+    for (const gap of columnGaps) merged[gapColumnId(gap.afterColumnId)] = GAP_WIDTH;
     return merged;
   }, [widths, columnGaps]);
-  const hiddenColumnsCount = React.useMemo(() => {
-    return toggleableColumnIds.filter((id) => columnVisibility[id] === false).length;
-  }, [toggleableColumnIds, columnVisibility]);
-  const activeCustomFilterChip = activePreset.customFilterChip ?? null;
-  selectedIdsRef.current = selectedIds;
-  headerCheckStateRef.current = headerCheckState;
+  return { columnGaps, extendedColumnMeta, extendedWidths };
+}
+function useFilteredRows({
+  rows,
+  activePreset,
+  searchQuery,
+  columnFilters,
+  currentSort,
+  filterRow,
+  getSearchText,
+  getSortValue
+}) {
+  return React.useMemo(() => {
+    const search = searchQuery.trim().toLowerCase();
+    const filtered = rows.filter((row) => {
+      if (activePreset.customFilter && !activePreset.customFilter(row)) return false;
+      if (search.length > 0 && !getSearchText(row).includes(search)) return false;
+      return columnFilters.every((filter) => filterRow(row, filter));
+    });
+    if (!currentSort) return filtered;
+    const { columnId, direction } = currentSort;
+    return [...filtered].sort((a, b) => {
+      const aVal = getSortValue(a, columnId);
+      const bVal = getSortValue(b, columnId);
+      if (aVal < bVal) return direction === "asc" ? -1 : 1;
+      if (aVal > bVal) return direction === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [rows, searchQuery, columnFilters, currentSort, activePreset, getSearchText, filterRow, getSortValue]);
+}
+function useOrchestrationActions({
+  store,
+  viewPresets,
+  filterConfigs,
+  columnMeta,
+  setWidths,
+  defaultViewKey,
+  paginatedRows,
+  allOnPageSelected,
+  getRowId
+}) {
   const handleSearchSubmit = React.useCallback(
     (e) => {
       e.preventDefault();
@@ -4879,6 +4751,234 @@ function useTableOrchestration(config) {
     (v) => store.getState().setSelectedRowId(v),
     [store]
   );
+  return {
+    handleSearchSubmit,
+    handleHeaderSort,
+    handleViewChange,
+    handleAddColumnFilter,
+    handleOpenExistingFilter,
+    handleRequestOpenHandled,
+    handleRemoveColumnFilter,
+    handleChangeColumnFilter,
+    handleSetColumnFilter,
+    handleHeaderFilterClick,
+    handleHideColumn,
+    handleResetColumns,
+    handleRemoveSort,
+    handleRemoveCustomFilter,
+    handleClearAll,
+    handleRefresh,
+    handleToggleRowSelection,
+    handleToggleHeaderCheck,
+    handleExpandRow,
+    handleExpandGap,
+    handlePageChange,
+    handleRowsPerPageChange,
+    setSearchInput,
+    setColumnVisibility,
+    setDensity,
+    setSelectedIds,
+    setColumnsMenuOpen,
+    setSelectedRowId
+  };
+}
+const EMPTY_ID_SET = /* @__PURE__ */ new Set();
+function useResponsiveColumns(columnPriorities, wideBreakpoint, compactBreakpoint) {
+  const hasPriorities = Boolean(columnPriorities && Object.keys(columnPriorities).length > 0);
+  const [isWide, setIsWide] = React.useState(true);
+  const [isCompact, setIsCompact] = React.useState(false);
+  React.useEffect(() => {
+    if (!hasPriorities || typeof window === "undefined") return;
+    const mql = window.matchMedia(`(min-width: ${wideBreakpoint}px)`);
+    const onChange = (e) => setIsWide(e.matches);
+    setIsWide(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [hasPriorities, wideBreakpoint]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-width: ${compactBreakpoint - 1}px)`);
+    const onChange = (e) => setIsCompact(e.matches);
+    setIsCompact(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [compactBreakpoint]);
+  const responsiveHiddenColumnIds = React.useMemo(() => {
+    if (isWide || !columnPriorities) return EMPTY_ID_SET;
+    const hidden = /* @__PURE__ */ new Set();
+    for (const [id, priority] of Object.entries(columnPriorities)) {
+      if (priority === 3) hidden.add(id);
+    }
+    return hidden;
+  }, [isWide, columnPriorities]);
+  return { responsiveHiddenColumnIds, isCompact };
+}
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useTableOrchestration(config) {
+  const {
+    rows,
+    filterConfigs,
+    columnMeta,
+    toggleableColumnIds,
+    rowsPerPageOptions,
+    viewPresets,
+    defaultViewKey,
+    columnGroups,
+    initialColumnVisibility,
+    initialColumnWidths,
+    columnPriorities,
+    wideBreakpoint = 1280,
+    compactBreakpoint = 768
+  } = config;
+  const { getRowId, filterRow, getSortValue, getSearchText } = config;
+  const [store] = React.useState(
+    () => createTableOrchestrationStore({
+      defaultViewKey,
+      initialColumnVisibility,
+      initialRowsPerPage: rowsPerPageOptions[0]
+    })
+  );
+  const searchInput = zustand.useStore(store, (s) => s.searchInput);
+  const searchQuery = zustand.useStore(store, (s) => s.searchQuery);
+  const columnFilters = zustand.useStore(store, (s) => s.columnFilters);
+  const newestFilterColumnId = zustand.useStore(store, (s) => s.newestFilterColumnId);
+  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 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 storedSelectedIds = zustand.useStore(store, (s) => s.selectedIds);
+  const activeView = zustand.useStore(store, (s) => s.activeView);
+  const columnsMenuOpen = zustand.useStore(store, (s) => s.columnsMenuOpen);
+  const storedSelectedRowId = zustand.useStore(store, (s) => s.selectedRowId);
+  const { responsiveHiddenColumnIds, isCompact } = useResponsiveColumns(
+    columnPriorities,
+    wideBreakpoint,
+    compactBreakpoint
+  );
+  const selectedIdsRef = React.useRef(storedSelectedIds);
+  const headerCheckStateRef = React.useRef(false);
+  const sortState = React.useMemo(() => {
+    if (!currentSort) return {};
+    return { [currentSort.columnId]: currentSort.direction };
+  }, [currentSort]);
+  const { widths, onPointerDown, setWidths } = useColumnResize(columnMeta, initialColumnWidths);
+  const activePreset = React.useMemo(() => {
+    if (activeView === "custom") {
+      return {
+        key: "custom",
+        label: "Custom",
+        filters: [],
+        sort: null,
+        columnVisibility: {}
+      };
+    }
+    return viewPresets.find((v) => v.key === activeView) ?? viewPresets[0];
+  }, [activeView, viewPresets]);
+  const filteredRows = useFilteredRows({
+    rows,
+    activePreset,
+    searchQuery,
+    columnFilters,
+    currentSort,
+    filterRow,
+    getSearchText,
+    getSortValue
+  });
+  const columnFilterStats = useColumnFilterStats(
+    rows,
+    filteredRows,
+    filterConfigs,
+    columnFilters.length > 0 || searchQuery.trim().length > 0
+  );
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
+  const safePage = Math.min(storedPage, totalPages);
+  const page = safePage;
+  const pageNumbers = React.useMemo(
+    () => getVisiblePageNumbers(safePage, totalPages),
+    [safePage, totalPages]
+  );
+  const paginatedRows = React.useMemo(() => {
+    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,
+    [selectedIds, pageIds]
+  );
+  const allOnPageSelected = pageIds.size > 0 && selectedOnPage === pageIds.size;
+  const headerCheckState = allOnPageSelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
+  const { columnGaps, extendedColumnMeta, extendedWidths } = useColumnGaps({
+    columnGroups,
+    toggleableColumnIds,
+    columnVisibility,
+    columnMeta,
+    widths
+  });
+  const hiddenColumnsCount = React.useMemo(() => {
+    return toggleableColumnIds.filter((id) => columnVisibility[id] === false).length;
+  }, [toggleableColumnIds, columnVisibility]);
+  const activeCustomFilterChip = activePreset.customFilterChip ?? null;
+  selectedIdsRef.current = selectedIds;
+  headerCheckStateRef.current = headerCheckState;
+  const {
+    handleSearchSubmit,
+    handleHeaderSort,
+    handleViewChange,
+    handleAddColumnFilter,
+    handleOpenExistingFilter,
+    handleRequestOpenHandled,
+    handleRemoveColumnFilter,
+    handleChangeColumnFilter,
+    handleSetColumnFilter,
+    handleHeaderFilterClick,
+    handleHideColumn,
+    handleResetColumns,
+    handleRemoveSort,
+    handleRemoveCustomFilter,
+    handleClearAll,
+    handleRefresh,
+    handleToggleRowSelection,
+    handleToggleHeaderCheck,
+    handleExpandRow,
+    handleExpandGap,
+    handlePageChange,
+    handleRowsPerPageChange,
+    setSearchInput,
+    setColumnVisibility,
+    setDensity,
+    setSelectedIds,
+    setColumnsMenuOpen,
+    setSelectedRowId
+  } = useOrchestrationActions({
+    store,
+    viewPresets,
+    filterConfigs,
+    columnMeta,
+    setWidths,
+    defaultViewKey,
+    paginatedRows,
+    allOnPageSelected,
+    getRowId
+  });
   const getSelectedIds = React.useCallback(() => selectedIdsRef.current, []);
   const getHeaderCheckState = React.useCallback(() => headerCheckStateRef.current, []);
   return {
@@ -5444,6 +5544,7 @@ exports.displayTimeZone = displayTimeZone;
 exports.formatDateParts = formatDateParts;
 exports.formatEnumLabel = formatEnumLabel;
 exports.formatLiveTimestamp = formatLiveTimestamp;
+exports.gapColumnId = gapColumnId;
 exports.getCompoundValue = getCompoundValue;
 exports.getDateRange = getDateRange;
 exports.getNumberRange = getNumberRange;