@zvndev/yable-react 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,10 +1,41 @@
 import { canCellEnterEditMode, functionalUpdate, createTable, getDefaultLocale, getFirstKeyboardCell, getResolvedFocusedCell, detectCellChanges } from '@zvndev/yable-core';
 export { CommitError, FormulaEngine, FormulaError, PivotEngine, UndoStack, aggregationFns, createColumnHelper, createLocale, createUndoRedoIntegration, en, filterFns, formulaFunctions, functionalUpdate, generatePivotColumnDefs, getDefaultLocale, getInitialPivotState, getPivotRowModel, resetLocale, setDefaultLocale, sortingFns } from '@zvndev/yable-core';
-import React3, { createContext, useCallback, useMemo, useState, useRef, useEffect, useContext } from 'react';
+import React3, { createContext, useCallback, useMemo, useContext, useState, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getInitialRowDragState, moveRow } from '@zvndev/yable-core/features/rowDragging';
 
 // src/index.ts
+var YableContext = createContext({});
+function useYableDefaults() {
+  return useContext(YableContext);
+}
+function YableProvider({
+  children,
+  defaultColumnDef,
+  striped,
+  stickyHeader,
+  bordered,
+  compact,
+  theme,
+  direction,
+  ariaLabel
+}) {
+  const tableProps = {};
+  if (striped !== void 0) tableProps.striped = striped;
+  if (stickyHeader !== void 0) tableProps.stickyHeader = stickyHeader;
+  if (bordered !== void 0) tableProps.bordered = bordered;
+  if (compact !== void 0) tableProps.compact = compact;
+  if (theme !== void 0) tableProps.theme = theme;
+  if (direction !== void 0) tableProps.direction = direction;
+  if (ariaLabel !== void 0) tableProps.ariaLabel = ariaLabel;
+  const value = {
+    tableProps: Object.keys(tableProps).length > 0 ? tableProps : void 0,
+    defaultColumnDef
+  };
+  return /* @__PURE__ */ jsx(YableContext.Provider, { value, children });
+}
+
+// src/useTable.ts
 function shallowEqual(a, b) {
   if (a === b) return true;
   const keysA = Object.keys(a);
@@ -17,6 +48,17 @@ function shallowEqual(a, b) {
   return true;
 }
 function useTable(options) {
+  const providerDefaults = useYableDefaults();
+  const optionsWithDefaults = useMemo(() => {
+    if (!providerDefaults.defaultColumnDef) return options;
+    return {
+      ...options,
+      defaultColumnDef: {
+        ...providerDefaults.defaultColumnDef,
+        ...options.defaultColumnDef
+      }
+    };
+  }, [options, providerDefaults.defaultColumnDef]);
   const [state, setState] = useState(() => ({
     sorting: [],
     columnFilters: [],
@@ -56,14 +98,14 @@ function useTable(options) {
   }));
   const stateRef = useRef(state);
   stateRef.current = state;
-  const prevOptionsRef = useRef(options);
+  const prevOptionsRef = useRef(optionsWithDefaults);
   const stableOptions = useMemo(() => {
-    if (shallowEqual(prevOptionsRef.current, options)) {
+    if (shallowEqual(prevOptionsRef.current, optionsWithDefaults)) {
       return prevOptionsRef.current;
     }
-    prevOptionsRef.current = options;
-    return options;
-  }, [options]);
+    prevOptionsRef.current = optionsWithDefaults;
+    return optionsWithDefaults;
+  }, [optionsWithDefaults]);
   const onStateChangeRef = useRef(options.onStateChange);
   onStateChangeRef.current = options.onStateChange;
   const resolvedState = useMemo(
@@ -73,17 +115,14 @@ function useTable(options) {
     }),
     [state, stableOptions.state]
   );
-  const onStateChange = useCallback(
-    (updater) => {
-      const latest = onStateChangeRef.current;
-      if (latest) {
-        latest(updater);
-      } else {
-        setState((prev) => functionalUpdate(updater, prev));
-      }
-    },
-    []
-  );
+  const onStateChange = useCallback((updater) => {
+    const latest = onStateChangeRef.current;
+    if (latest) {
+      latest(updater);
+    } else {
+      setState((prev) => functionalUpdate(updater, prev));
+    }
+  }, []);
   const resolvedOptions = useMemo(
     () => ({
       ...stableOptions,
@@ -96,12 +135,14 @@ function useTable(options) {
   if (!tableRef.current) {
     tableRef.current = createTable(resolvedOptions);
   } else {
-    tableRef.current.setOptions((prev) => ({
-      ...prev,
-      ...resolvedOptions,
-      state: resolvedState,
-      onStateChange
-    }));
+    tableRef.current.setOptions(
+      (prev) => ({
+        ...prev,
+        ...resolvedOptions,
+        state: resolvedState,
+        onStateChange
+      })
+    );
   }
   useEffect(() => {
     return () => {
@@ -112,6 +153,122 @@ function useTable(options) {
   }, []);
   return tableRef.current;
 }
+var DEFAULT_PERSISTED_KEYS = [
+  "columnVisibility",
+  "columnOrder",
+  "columnSizing",
+  "columnPinning"
+];
+function resolveStorage(custom) {
+  if (custom) return custom;
+  if (typeof window !== "undefined") {
+    try {
+      return window.localStorage;
+    } catch {
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function pick(obj, keys) {
+  const result = {};
+  for (const k of keys) {
+    if (k in obj) {
+      result[k] = obj[k];
+    }
+  }
+  return result;
+}
+function readState(storage, key, version, persistedKeys) {
+  if (!storage) return {};
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return {};
+    const envelope = JSON.parse(raw);
+    if (envelope.version !== version) {
+      storage.removeItem(key);
+      return {};
+    }
+    return pick(envelope.state, persistedKeys);
+  } catch {
+    if (typeof console !== "undefined") {
+      console.warn(`[yable] Failed to read persisted state for key "${key}"`);
+    }
+    return {};
+  }
+}
+function writeState(storage, key, version, state) {
+  if (!storage) return;
+  try {
+    const envelope = { version, state };
+    storage.setItem(key, JSON.stringify(envelope));
+  } catch {
+    if (typeof console !== "undefined") {
+      console.warn(`[yable] Failed to persist state for key "${key}" (storage may be full)`);
+    }
+  }
+}
+function useTablePersistence(options) {
+  const {
+    key,
+    persistedKeys = DEFAULT_PERSISTED_KEYS,
+    debounce: debounceMs = 100,
+    version = 0,
+    storage: customStorage
+  } = options;
+  const storage = useMemo(() => resolveStorage(customStorage), [customStorage]);
+  const initialState = useMemo(
+    () => readState(storage, key, version, persistedKeys),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally read only on mount
+    []
+  );
+  const [state, setState] = useState(initialState);
+  const timerRef = useRef(null);
+  const keyRef = useRef(key);
+  keyRef.current = key;
+  const versionRef = useRef(version);
+  versionRef.current = version;
+  const persistedKeysRef = useRef(persistedKeys);
+  persistedKeysRef.current = persistedKeys;
+  const debounceRef = useRef(debounceMs);
+  debounceRef.current = debounceMs;
+  const storageRef = useRef(storage);
+  storageRef.current = storage;
+  const onStateChange = useCallback((updater) => {
+    setState((prev) => {
+      const next = functionalUpdate(updater, prev);
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        const sliced = pick(
+          next,
+          persistedKeysRef.current
+        );
+        writeState(storageRef.current, keyRef.current, versionRef.current, sliced);
+        timerRef.current = null;
+      }, debounceRef.current);
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const clearPersistedState = useCallback(() => {
+    const s = storageRef.current;
+    if (s) {
+      try {
+        s.removeItem(keyRef.current);
+      } catch {
+      }
+    }
+  }, []);
+  return { initialState, state, onStateChange, clearPersistedState };
+}
 var EMPTY_RESULT = {
   virtualRows: [],
   totalHeight: 0,
@@ -125,11 +282,14 @@ function useVirtualization({
   overscan = 5,
   estimateRowHeight: _estimateRowHeight,
   pretextHeights,
-  pretextPrefixSums
+  pretextPrefixSums,
+  columnSizingHash
 }) {
   const hasPretextHeights = !!(pretextHeights && pretextPrefixSums && pretextHeights.length >= totalRows);
   const isFixedHeight = typeof rowHeight === "number" && !hasPretextHeights;
   const heightCacheRef = useRef(/* @__PURE__ */ new Map());
+  const heightCacheVersionRef = useRef(0);
+  const [heightCacheVersion, setHeightCacheVersion] = useState(0);
   const getRowHeight = useCallback(
     (index) => {
       if (hasPretextHeights) return pretextHeights[index];
@@ -140,7 +300,9 @@ function useVirtualization({
       heightCacheRef.current.set(index, height);
       return height;
     },
-    [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights]
+    // heightCacheVersion forces a new callback identity after cache invalidation
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights, heightCacheVersion]
   );
   const [scrollState, setScrollState] = useState({ scrollTop: 0, containerHeight: 0 });
   const rafRef = useRef(null);
@@ -193,6 +355,18 @@ function useVirtualization({
       heightCacheRef.current.clear();
     }
   }, [totalRows, isFixedHeight]);
+  useEffect(() => {
+    if (!isFixedHeight && columnSizingHash !== void 0) {
+      heightCacheRef.current.clear();
+      heightCacheVersionRef.current += 1;
+      setHeightCacheVersion(heightCacheVersionRef.current);
+    }
+  }, [columnSizingHash]);
+  const invalidateRowHeights = useCallback(() => {
+    heightCacheRef.current.clear();
+    heightCacheVersionRef.current += 1;
+    setHeightCacheVersion(heightCacheVersionRef.current);
+  }, []);
   const scrollTo = useCallback(
     (index) => {
       const container = containerRef.current;
@@ -210,7 +384,15 @@ function useVirtualization({
         container.scrollTop = offset;
       }
     },
-    [containerRef, totalRows, rowHeight, isFixedHeight, getRowHeight, hasPretextHeights, pretextPrefixSums]
+    [
+      containerRef,
+      totalRows,
+      rowHeight,
+      isFixedHeight,
+      getRowHeight,
+      hasPretextHeights,
+      pretextPrefixSums
+    ]
   );
   const totalHeight = useMemo(() => {
     if (totalRows === 0) return 0;
@@ -221,10 +403,18 @@ function useVirtualization({
       total += getRowHeight(i);
     }
     return total;
-  }, [totalRows, rowHeight, isFixedHeight, getRowHeight, hasPretextHeights, pretextPrefixSums]);
+  }, [
+    totalRows,
+    rowHeight,
+    isFixedHeight,
+    getRowHeight,
+    hasPretextHeights,
+    pretextPrefixSums,
+    heightCacheVersion
+  ]);
   const { scrollTop, containerHeight } = scrollState;
   if (totalRows === 0) {
-    return { ...EMPTY_RESULT, scrollTo };
+    return { ...EMPTY_RESULT, scrollTo, invalidateRowHeights };
   }
   if (containerHeight === 0) {
     return {
@@ -232,7 +422,8 @@ function useVirtualization({
       totalHeight,
       startIndex: 0,
       endIndex: 0,
-      scrollTo
+      scrollTo,
+      invalidateRowHeights
     };
   }
   let startIndex = 0;
@@ -264,10 +455,7 @@ function useVirtualization({
   } else if (isFixedHeight) {
     const fixedH = rowHeight;
     startIndex = Math.floor(scrollTop / fixedH);
-    endIndex = Math.min(
-      totalRows - 1,
-      Math.ceil((scrollTop + containerHeight) / fixedH) - 1
-    );
+    endIndex = Math.min(totalRows - 1, Math.ceil((scrollTop + containerHeight) / fixedH) - 1);
   } else {
     let accum = 0;
     let foundStart = false;
@@ -331,7 +519,164 @@ function useVirtualization({
     totalHeight,
     startIndex: overscanStart,
     endIndex: overscanEnd,
-    scrollTo
+    scrollTo,
+    invalidateRowHeights
+  };
+}
+function binarySearchOffsets(offsets, target) {
+  let low = 0;
+  let high = offsets.length - 1;
+  while (low < high) {
+    const mid = low + high >>> 1;
+    if (offsets[mid + 1] <= target) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+  return low;
+}
+function useColumnVirtualization({
+  containerRef,
+  columns,
+  overscan = 2,
+  enabled = true
+}) {
+  const [scrollState, setScrollState] = useState({
+    scrollLeft: 0,
+    containerWidth: 0
+  });
+  const rafRef = useRef(null);
+  const sizes = useMemo(() => columns.map((column) => column.getSize()), [columns]);
+  const offsets = useMemo(() => {
+    const next = new Array(columns.length + 1);
+    next[0] = 0;
+    for (let i = 0; i < columns.length; i++) {
+      next[i + 1] = next[i] + (sizes[i] ?? 0);
+    }
+    return next;
+  }, [columns.length, sizes]);
+  const totalWidth = offsets[offsets.length - 1] ?? 0;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setScrollState({
+      scrollLeft: container.scrollLeft,
+      containerWidth: container.clientWidth
+    });
+    const handleScroll = () => {
+      if (rafRef.current !== null) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const el = containerRef.current;
+        if (!el) return;
+        setScrollState({
+          scrollLeft: el.scrollLeft,
+          containerWidth: el.clientWidth
+        });
+      });
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        setScrollState((prev) => {
+          const nextWidth = el.clientWidth;
+          if (prev.containerWidth === nextWidth && prev.scrollLeft === el.scrollLeft) {
+            return prev;
+          }
+          return {
+            scrollLeft: el.scrollLeft,
+            containerWidth: nextWidth
+          };
+        });
+      });
+      resizeObserver.observe(container);
+    }
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      resizeObserver?.disconnect();
+    };
+  }, [containerRef]);
+  const scrollToIndex = useCallback(
+    (index) => {
+      const container = containerRef.current;
+      if (!container || columns.length === 0) return;
+      const clampedIndex = Math.max(0, Math.min(index, columns.length - 1));
+      container.scrollLeft = offsets[clampedIndex] ?? 0;
+    },
+    [columns.length, containerRef, offsets]
+  );
+  if (!enabled || columns.length === 0) {
+    return {
+      virtualColumns: columns.map((column, index) => ({
+        column,
+        index,
+        start: offsets[index] ?? 0,
+        size: sizes[index] ?? 0
+      })),
+      startOffset: 0,
+      endOffset: 0,
+      totalWidth,
+      visibleWidth: totalWidth,
+      startIndex: 0,
+      endIndex: Math.max(columns.length - 1, 0),
+      isVirtualized: false,
+      scrollToIndex
+    };
+  }
+  const { scrollLeft, containerWidth } = scrollState;
+  if (containerWidth <= 0 || totalWidth <= containerWidth) {
+    return {
+      virtualColumns: columns.map((column, index) => ({
+        column,
+        index,
+        start: offsets[index] ?? 0,
+        size: sizes[index] ?? 0
+      })),
+      startOffset: 0,
+      endOffset: 0,
+      totalWidth,
+      visibleWidth: totalWidth,
+      startIndex: 0,
+      endIndex: Math.max(columns.length - 1, 0),
+      isVirtualized: false,
+      scrollToIndex
+    };
+  }
+  const startIndex = binarySearchOffsets(offsets, scrollLeft);
+  const endBoundary = scrollLeft + containerWidth;
+  const endIndex = binarySearchOffsets(offsets, Math.max(scrollLeft, endBoundary - 1));
+  const overscanStart = Math.max(0, startIndex - overscan);
+  const overscanEnd = Math.min(columns.length - 1, endIndex + overscan);
+  const virtualColumns = [];
+  for (let i = overscanStart; i <= overscanEnd; i++) {
+    virtualColumns.push({
+      column: columns[i],
+      index: i,
+      start: offsets[i] ?? 0,
+      size: sizes[i] ?? 0
+    });
+  }
+  const startOffset = offsets[overscanStart] ?? 0;
+  const visibleWidth = (offsets[overscanEnd + 1] ?? totalWidth) - startOffset;
+  const endOffset = totalWidth - (offsets[overscanEnd + 1] ?? totalWidth);
+  return {
+    virtualColumns,
+    startOffset,
+    endOffset,
+    totalWidth,
+    visibleWidth,
+    startIndex: overscanStart,
+    endIndex: overscanEnd,
+    isVirtualized: true,
+    scrollToIndex
   };
 }
 var pretextPromise = null;
@@ -384,7 +729,12 @@ function usePretextMeasurement({
     }
     prepareTimeRef.current = performance.now() - start;
     return result;
-  }, [pretext, enabled, data, columns.map((c) => `${c.columnId}:${c.font}:${c.fixedHeight ? "F" : "T"}`).join("|")]);
+  }, [
+    pretext,
+    enabled,
+    data,
+    columns.map((c) => `${c.columnId}:${c.font}:${c.fixedHeight ? "F" : "T"}`).join("|")
+  ]);
   const measurement = useMemo(() => {
     if (!pretext || !preparedCells) {
       return { rowHeights: null, prefixSums: null, totalHeight: 0 };
@@ -422,6 +772,7 @@ function usePretextMeasurement({
     return {
       rowHeights,
       prefixSums,
+      // Safe: prefixSums has length data.length + 1, so [data.length] always exists
       totalHeight: prefixSums[data.length]
     };
   }, [pretext, preparedCells, columnWidthsKey, minRowHeight, data.length]);
@@ -686,18 +1037,10 @@ function CellDate({
   if (raw == null) return null;
   const date = raw instanceof Date ? raw : new Date(String(raw));
   if (isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", { className: "yable-cell-date", children: String(raw) });
-  const formatter = useMemo(() => {
-    if (typeof format === "string" && format !== "relative") {
-      return new Intl.DateTimeFormat(locale, {
-        ...PRESETS[format],
-        timeZone: "UTC"
-      });
-    }
-    if (typeof format === "object") {
-      return new Intl.DateTimeFormat(locale, { ...format, timeZone: "UTC" });
-    }
-    return null;
-  }, [format, locale]);
+  const formatter = typeof format === "string" && format !== "relative" ? new Intl.DateTimeFormat(locale, {
+    ...PRESETS[format],
+    timeZone: "UTC"
+  }) : typeof format === "object" ? new Intl.DateTimeFormat(locale, { ...format, timeZone: "UTC" }) : null;
   const formatted = format === "relative" ? formatRelative(date) : formatter ? formatter.format(date) : date.toLocaleDateString(locale);
   return /* @__PURE__ */ jsx("span", { className: `yable-cell-date ${className ?? ""}`, title: date.toISOString(), children: formatted });
 }
@@ -708,8 +1051,14 @@ var measureRecipe9 = {
   padding: 20
 };
 function isSafeUrl(url) {
-  const normalized = String(url).toLowerCase().trim();
-  return !normalized.startsWith("javascript:") && !normalized.startsWith("data:text/html") && !normalized.startsWith("vbscript:");
+  const normalized = String(url).trim();
+  if (/^[/#?]/.test(normalized)) return true;
+  try {
+    const parsed = new URL(normalized, "https://placeholder.invalid");
+    return ["http:", "https:", "mailto:", "tel:"].includes(parsed.protocol);
+  } catch {
+    return false;
+  }
 }
 function CellLink({
   context,
@@ -886,7 +1235,7 @@ function useTableContext() {
   const ctx = useContext(TableContext);
   if (!ctx) {
     throw new Error(
-      "[yable] useTableContext must be used within a <Table> component. Did you forget to pass the `table` prop?"
+      "[yable E001] useTableContext must be used within a <Table> component. Did you forget to pass the `table` prop?"
     );
   }
   return ctx;
@@ -936,12 +1285,234 @@ function SortIndicator({ direction, index }) {
     }
   );
 }
+function formatValue(value) {
+  if (value == null || value === "") return "(empty)";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (value instanceof Date) return value.toISOString();
+  return JSON.stringify(value);
+}
+function SetFilter({ column, className }) {
+  const [open, setOpen] = useState(false);
+  const filterValue = column.getFilterValue();
+  const selectedValues = Array.isArray(filterValue) ? filterValue : filterValue == null || filterValue === "" ? [] : [filterValue];
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const options = Array.from(facetedUniqueValues.entries()).map(([value, count]) => ({
+    value,
+    count,
+    label: formatValue(value)
+  })).sort((a, b) => a.label.localeCompare(b.label));
+  const selectedSet = new Set(selectedValues);
+  const toggleValue = (value) => {
+    const next = new Set(selectedSet);
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+    const nextValues = Array.from(next);
+    column.setFilterValue(nextValues.length > 0 ? nextValues : void 0);
+  };
+  const headerLabel = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["yable-set-filter", className].filter(Boolean).join(" "),
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-set-filter-trigger",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            onClick: () => setOpen((prev) => !prev),
+            style: {
+              width: "100%",
+              minHeight: 28,
+              padding: "4px 8px",
+              border: "1px solid rgba(127, 127, 127, 0.35)",
+              borderRadius: 6,
+              background: "transparent",
+              font: "inherit",
+              textAlign: "left",
+              cursor: "pointer"
+            },
+            children: selectedValues.length > 0 ? `${selectedValues.length} selected` : `Filter ${headerLabel}`
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-label": `${headerLabel} set filter`,
+            className: "yable-set-filter-popover",
+            style: {
+              position: "absolute",
+              insetInlineStart: 0,
+              top: "calc(100% + 4px)",
+              zIndex: 20,
+              width: 220,
+              maxHeight: 240,
+              overflow: "auto",
+              padding: 8,
+              border: "1px solid rgba(127, 127, 127, 0.35)",
+              borderRadius: 8,
+              background: "var(--yable-color-bg, #fff)",
+              boxShadow: "0 10px 30px rgba(0, 0, 0, 0.12)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("strong", { style: { fontSize: 12 }, children: headerLabel }),
+                    selectedValues.length > 0 && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => column.setFilterValue(void 0),
+                        style: {
+                          border: "none",
+                          background: "transparent",
+                          padding: 0,
+                          cursor: "pointer",
+                          fontSize: 12
+                        },
+                        children: "Clear"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": `${headerLabel} options`, children: [
+                options.length === 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.75 }, children: "No values" }),
+                options.map((option) => {
+                  const checked = selectedSet.has(option.value);
+                  return /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        padding: "4px 0",
+                        fontSize: 12
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked,
+                            onChange: () => toggleValue(option.value)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: option.label }),
+                        /* @__PURE__ */ jsx("span", { style: { opacity: 0.6 }, children: option.count })
+                      ]
+                    },
+                    `${option.label}-${option.count}`
+                  );
+                })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function isSetCompatibleValue(value) {
+  return value == null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+function inferFilterVariant(column) {
+  const meta = column.columnDef.meta ?? {};
+  if (meta.filterVariant) return meta.filterVariant;
+  const uniqueValues = column.getFacetedUniqueValues();
+  if (uniqueValues.size > 0 && uniqueValues.size <= 12) {
+    const allValuesSupported = Array.from(uniqueValues.keys()).every(isSetCompatibleValue);
+    if (allValuesSupported) return "set";
+  }
+  return "text";
+}
+function FloatingFilter({ column }) {
+  const variant = inferFilterVariant(column);
+  if (!column.getCanFilter()) {
+    return /* @__PURE__ */ jsx("div", { style: { minHeight: 28 }, "aria-hidden": "true" });
+  }
+  if (variant === "set") {
+    return /* @__PURE__ */ jsx(SetFilter, { column });
+  }
+  const filterValue = column.getFilterValue();
+  const normalizedValue = typeof filterValue === "string" || typeof filterValue === "number" ? String(filterValue) : "";
+  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+  return /* @__PURE__ */ jsx("label", { style: { display: "block" }, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": `Filter ${label}`,
+      className: "yable-floating-filter-input",
+      value: normalizedValue,
+      onChange: (event) => {
+        const nextValue = event.target.value;
+        column.setFilterValue(nextValue === "" ? void 0 : nextValue);
+      },
+      placeholder: `Filter ${label}`,
+      style: {
+        width: "100%",
+        minHeight: 28,
+        padding: "4px 8px",
+        border: "1px solid rgba(127, 127, 127, 0.35)",
+        borderRadius: 6,
+        background: "transparent",
+        font: "inherit"
+      }
+    }
+  ) });
+}
 var DRAG_MIME = "application/yable-column";
 function TableHeader({
-  table
+  table,
+  floatingFilters = false
 }) {
   const headerGroups = table.getHeaderGroups();
-  return /* @__PURE__ */ jsx("thead", { className: "yable-thead", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-header-row", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
+  const visibleColumns = table.getVisibleLeafColumns();
+  return /* @__PURE__ */ jsxs("thead", { className: "yable-thead", children: [
+    headerGroups.map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-header-row", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(HeaderCell, { header, table }, header.id)) }, headerGroup.id)),
+    floatingFilters && visibleColumns.length > 0 && /* @__PURE__ */ jsx("tr", { className: "yable-header-row yable-header-row--filters", children: visibleColumns.map((column) => /* @__PURE__ */ jsx(FloatingFilterCell, { column }, `${column.id}-filter`)) })
+  ] });
+}
+function FloatingFilterCell({
+  column
+}) {
+  const style = useMemo(() => {
+    const next = {
+      width: column.getSize(),
+      minWidth: column.columnDef.minSize,
+      maxWidth: column.columnDef.maxSize,
+      padding: 6,
+      verticalAlign: "top"
+    };
+    const pinned = column.getIsPinned();
+    if (pinned) {
+      next.position = "sticky";
+      if (pinned === "left") {
+        next.left = column.getStart("left");
+      } else {
+        next.right = column.getStart("right");
+      }
+    }
+    return next;
+  }, [column]);
+  return /* @__PURE__ */ jsx("th", { className: "yable-th yable-th--filter", role: "columnheader", style, children: /* @__PURE__ */ jsx(FloatingFilter, { column }) });
 }
 function HeaderCell({
   header,
@@ -995,11 +1566,6 @@ function HeaderCell({
   const handleDragStart = useCallback(
     (e) => {
       if (!canReorder) return;
-      const target = e.target;
-      if (target && target.closest(".yable-resize-handle")) {
-        e.preventDefault();
-        return;
-      }
       e.stopPropagation();
       e.dataTransfer.effectAllowed = "move";
       try {
@@ -1007,8 +1573,9 @@ function HeaderCell({
         e.dataTransfer.setData("text/plain", column.id);
       } catch {
       }
+      table.setColumnDragActive(true);
     },
-    [canReorder, column.id]
+    [canReorder, column.id, table]
   );
   const handleDragOver = useCallback(
     (e) => {
@@ -1030,17 +1597,15 @@ function HeaderCell({
     },
     [canReorder]
   );
-  const handleDragLeave = useCallback(
-    (e) => {
-      const next = e.relatedTarget;
-      if (next && e.currentTarget.contains(next)) return;
-      setDragOver(null);
-    },
-    []
-  );
-  const handleDragEnd = useCallback(() => {
+  const handleDragLeave = useCallback((e) => {
+    const next = e.relatedTarget;
+    if (next && e.currentTarget.contains(next)) return;
     setDragOver(null);
   }, []);
+  const handleDragEnd = useCallback(() => {
+    setDragOver(null);
+    table.setColumnDragActive(false);
+  }, [table]);
   const handleDrop = useCallback(
     (e) => {
       if (!canReorder) return;
@@ -1050,6 +1615,7 @@ function HeaderCell({
       const rect = e.currentTarget.getBoundingClientRect();
       const insertAfter = e.clientX >= rect.left + rect.width / 2;
       setDragOver(null);
+      table.setColumnDragActive(false);
       if (!sourceId || sourceId === column.id) return;
       const state = table.getState();
       const allLeafs = table.getAllLeafColumns();
@@ -1100,24 +1666,24 @@ function HeaderCell({
       "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : canSort ? "none" : void 0,
       role: "columnheader",
       colSpan: header.colSpan,
-      draggable: canReorder || void 0,
       onClick: handleHeaderClick,
-      onDragStart: canReorder ? handleDragStart : void 0,
       onDragOver: canReorder ? handleDragOver : void 0,
       onDragLeave: canReorder ? handleDragLeave : void 0,
-      onDragEnd: canReorder ? handleDragEnd : void 0,
       onDrop: canReorder ? handleDrop : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "yable-th-content", children: [
-          /* @__PURE__ */ jsx("span", { children: headerContent }),
-          canSort && /* @__PURE__ */ jsx(
-            SortIndicator,
-            {
-              direction: sortDirection,
-              index: sortIndex > 0 ? sortIndex : void 0
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "yable-th-content",
+            draggable: canReorder || void 0,
+            onDragStart: canReorder ? handleDragStart : void 0,
+            onDragEnd: canReorder ? handleDragEnd : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: headerContent }),
+              canSort && /* @__PURE__ */ jsx(SortIndicator, { direction: sortDirection, index: sortIndex > 0 ? sortIndex : void 0 })
+            ]
+          }
+        ),
         canResize && /* @__PURE__ */ jsx(
           "div",
           {
@@ -1125,9 +1691,7 @@ function HeaderCell({
             "data-resizing": column.getIsResizing() || void 0,
             onMouseDown: startResize,
             onTouchStart: startResize,
-            onClick: handleResizeClick,
-            draggable: false,
-            onDragStart: (e) => e.preventDefault()
+            onClick: handleResizeClick
           }
         )
       ]
@@ -1241,6 +1805,10 @@ function TableCell({
   const cellStatus = table.getCellStatus(cell.row.id, column.id);
   const cellErrorMessage = table.getCellErrorMessage(cell.row.id, column.id);
   const cellConflictWith = table.getCellConflictWith(cell.row.id, column.id);
+  const selectionRange = table.getCellSelectionRange();
+  const selectionEdges = table.getCellSelectionEdges(rowIndex, columnIndex);
+  const isCellSelected = selectionEdges !== null;
+  const isMultiCellSelection = selectionRange !== null && (selectionRange.start.rowIndex !== selectionRange.end.rowIndex || selectionRange.start.columnIndex !== selectionRange.end.columnIndex);
   const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
   let content;
   const cellDef = column.columnDef.cell;
@@ -1264,23 +1832,17 @@ function TableCell({
   }
   const handleClick = useCallback(
     (e) => {
-      table.setFocusedCell({ rowIndex, columnIndex });
-      const clickTarget = e.target;
-      if (!isInteractiveClickTarget(clickTarget)) {
-        const currentTarget = e.currentTarget;
-        currentTarget.focus({ preventScroll: true });
-      }
       table.events.emit("cell:click", {
         cell,
         row: cell.row,
         column: cell.column,
         event: e.nativeEvent
       });
-      if (canCellEnterEditMode(table, cell.row, column) && !isAlwaysEditable && !isEditing) {
+      if (canCellEnterEditMode(table, cell.row, column) && !isAlwaysEditable && !isEditing && !isMultiCellSelection && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
         table.startEditing(cell.row.id, column.id);
       }
     },
-    [cell, column, columnIndex, isAlwaysEditable, isEditing, rowIndex, table]
+    [cell, column, isAlwaysEditable, isEditing, isMultiCellSelection, table]
   );
   const handleDoubleClick = useCallback(
     (e) => {
@@ -1308,15 +1870,46 @@ function TableCell({
     if (!keyboardNavigationEnabled) return;
     table.setFocusedCell({ rowIndex, columnIndex });
   }, [columnIndex, keyboardNavigationEnabled, rowIndex, table]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      const clickTarget = e.target;
+      if (isInteractiveClickTarget(clickTarget)) return;
+      e.preventDefault();
+      table.setFocusedCell({ rowIndex, columnIndex });
+      table.startCellRangeSelection({ rowIndex, columnIndex }, { extend: e.shiftKey });
+      e.currentTarget.focus({ preventScroll: true });
+    },
+    [columnIndex, rowIndex, table]
+  );
+  const handleMouseEnter = useCallback(() => {
+    if (!table.getState().cellSelection?.isDragging) return;
+    table.updateCellRangeSelection({ rowIndex, columnIndex });
+  }, [columnIndex, rowIndex, table]);
+  const handleMouseUp = useCallback(() => {
+    if (!table.getState().cellSelection?.isDragging) return;
+    table.endCellRangeSelection();
+  }, [table]);
+  const cellClassNameDef = column.columnDef.cellClassName;
+  const userClassName = typeof cellClassNameDef === "function" ? cellClassNameDef(cell.getContext()) : cellClassNameDef;
+  const cellStyleDef = column.columnDef.cellStyle;
+  const userStyle = typeof cellStyleDef === "function" ? cellStyleDef(cell.getContext()) : cellStyleDef;
+  const mergedStyle = userStyle ? { ...style, ...userStyle } : style;
   const classNames = [
     "yable-td",
-    isFocused && "yable-cell--focused"
+    isFocused && "yable-cell--focused",
+    isCellSelected && "yable-cell--selected",
+    selectionEdges?.top && "yable-cell--selection-top",
+    selectionEdges?.right && "yable-cell--selection-right",
+    selectionEdges?.bottom && "yable-cell--selection-bottom",
+    selectionEdges?.left && "yable-cell--selection-left",
+    userClassName
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "td",
     {
       className: classNames,
-      style,
+      style: mergedStyle,
       "data-editing": isEditing || void 0,
       "data-focused": isFocused || void 0,
       "data-pinned": pinned || void 0,
@@ -1324,10 +1917,14 @@ function TableCell({
       "data-column-id": column.id,
       "data-row-index": rowIndex,
       "data-column-index": columnIndex,
+      "data-cell-selected": isCellSelected || void 0,
       "aria-rowindex": rowIndex + 1,
       "aria-colindex": columnIndex + 1,
       role: "gridcell",
       tabIndex: keyboardNavigationEnabled ? isTabStop ? 0 : -1 : void 0,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseUp: handleMouseUp,
       onClick: handleClick,
       onDoubleClick: handleDoubleClick,
       onContextMenu: handleContextMenu,
@@ -1454,12 +2051,17 @@ var CellErrorBoundary = class extends React3.Component {
 };
 function TableBody({
   table,
-  clickableRows
+  clickableRows,
+  colgroup
 }) {
   const rows = table.getRowModel().rows;
   const visibleColumns = table.getVisibleLeafColumns();
   const activeCell = table.getState().editing.activeCell;
   const focusedCell = table.getFocusedCell();
+  const cellSelection = table.getState().cellSelection ?? {
+    range: null,
+    isDragging: false
+  };
   const options = table.options;
   const enableVirtualization = options.enableVirtualization ?? false;
   const scrollContainerRef = useRef(null);
@@ -1468,6 +2070,19 @@ function TableBody({
   const estimateRowHeight = options.estimateRowHeight;
   const pretextHeights = options.pretextHeights ?? null;
   const pretextPrefixSums = options.pretextPrefixSums ?? null;
+  const columnSizing = table.getState().columnSizing;
+  const columnSizingHash = useMemo(() => {
+    const entries = Object.entries(columnSizing);
+    if (entries.length === 0) return 0;
+    let h = 0;
+    for (const [key, value] of entries) {
+      for (let i = 0; i < key.length; i++) {
+        h = h * 31 + key.charCodeAt(i) | 0;
+      }
+      h = h * 31 + (value | 0) | 0;
+    }
+    return h;
+  }, [columnSizing]);
   const { virtualRows, totalHeight } = useVirtualization({
     containerRef: scrollContainerRef,
     totalRows: rows.length,
@@ -1475,8 +2090,21 @@ function TableBody({
     overscan,
     estimateRowHeight,
     pretextHeights,
-    pretextPrefixSums
+    pretextPrefixSums,
+    columnSizingHash
   });
+  const cellSelectionKey = cellSelection.range ? `${cellSelection.range.start.rowIndex}:${cellSelection.range.start.columnIndex}:${cellSelection.range.end.rowIndex}:${cellSelection.range.end.columnIndex}:${cellSelection.isDragging ? "dragging" : "idle"}` : `none:${cellSelection.isDragging ? "dragging" : "idle"}`;
+  useEffect(() => {
+    const handleWindowMouseUp = () => {
+      if (table.getState().cellSelection?.isDragging) {
+        table.endCellRangeSelection();
+      }
+    };
+    window.addEventListener("mouseup", handleWindowMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", handleWindowMouseUp);
+    };
+  }, [table]);
   if (!enableVirtualization) {
     return /* @__PURE__ */ jsx("tbody", { className: "yable-tbody", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
       MemoizedTableRow,
@@ -1490,6 +2118,7 @@ function TableBody({
         activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
         focusedColumnIndex: focusedCell?.rowIndex === rowIndex ? focusedCell.columnIndex : null,
         hasFocusedCell: focusedCell !== null,
+        cellSelectionKey,
         clickable: clickableRows
       },
       row.id
@@ -1498,73 +2127,70 @@ function TableBody({
   const hasPretextData = !!(pretextHeights && pretextPrefixSums);
   const fixedRowHeight = typeof rowHeight === "number" && !hasPretextData ? rowHeight : void 0;
   const containerHeight = hasPretextData ? Math.min(totalHeight, 800) : fixedRowHeight ? Math.min(totalHeight, fixedRowHeight * 20) : 600;
-  return /* @__PURE__ */ jsx("tbody", { className: "yable-tbody", children: /* @__PURE__ */ jsx("tr", { style: { height: 0, padding: 0, border: "none" }, children: /* @__PURE__ */ jsx(
-    "td",
+  return /* @__PURE__ */ jsx("tbody", { className: "yable-tbody", children: /* @__PURE__ */ jsx("tr", { style: { height: 0, padding: 0, border: "none" }, children: /* @__PURE__ */ jsx("td", { style: { height: 0, padding: 0, border: "none" }, colSpan: visibleColumns.length, children: /* @__PURE__ */ jsx(
+    "div",
     {
-      style: { height: 0, padding: 0, border: "none" },
-      colSpan: visibleColumns.length,
+      ref: scrollContainerRef,
+      className: "yable-virtual-scroll-container",
+      style: {
+        overflowY: "auto",
+        height: containerHeight,
+        position: "relative"
+      },
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          ref: scrollContainerRef,
-          className: "yable-virtual-scroll-container",
-          style: {
-            overflowY: "auto",
-            height: containerHeight,
-            position: "relative"
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
+          className: "yable-virtual-spacer",
+          style: { height: totalHeight, position: "relative" },
+          children: /* @__PURE__ */ jsxs(
+            "table",
             {
-              className: "yable-virtual-spacer",
-              style: { height: totalHeight, position: "relative" },
-              children: /* @__PURE__ */ jsx(
-                "table",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    tableLayout: "fixed",
-                    borderCollapse: "collapse"
-                  },
-                  children: /* @__PURE__ */ jsx("tbody", { children: virtualRows.map((vRow) => {
-                    const row = rows[vRow.index];
-                    if (!row) return null;
-                    return /* @__PURE__ */ jsx(
-                      MemoizedTableRow,
-                      {
-                        row,
-                        table,
-                        rowIndex: vRow.index,
-                        visibleColumns,
-                        isSelected: row.getIsSelected(),
-                        isExpanded: row.getIsExpanded(),
-                        activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
-                        focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
-                        hasFocusedCell: focusedCell !== null,
-                        clickable: clickableRows,
-                        virtualStyle: {
-                          position: "absolute",
-                          top: 0,
-                          left: 0,
-                          width: "100%",
-                          height: vRow.size,
-                          transform: `translateY(${vRow.start}px)`
-                        }
-                      },
-                      row.id
-                    );
-                  }) })
-                }
-              )
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                tableLayout: "fixed",
+                borderCollapse: "collapse"
+              },
+              children: [
+                colgroup,
+                /* @__PURE__ */ jsx("tbody", { children: virtualRows.map((vRow) => {
+                  const row = rows[vRow.index];
+                  if (!row) return null;
+                  return /* @__PURE__ */ jsx(
+                    MemoizedTableRow,
+                    {
+                      row,
+                      table,
+                      rowIndex: vRow.index,
+                      visibleColumns,
+                      isSelected: row.getIsSelected(),
+                      isExpanded: row.getIsExpanded(),
+                      activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
+                      focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
+                      hasFocusedCell: focusedCell !== null,
+                      cellSelectionKey,
+                      clickable: clickableRows,
+                      virtualStyle: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: vRow.size,
+                        transform: `translateY(${vRow.start}px)`
+                      }
+                    },
+                    row.id
+                  );
+                }) })
+              ]
             }
           )
         }
       )
     }
-  ) }) });
+  ) }) }) });
 }
 function TableRowInner({
   row,
@@ -1576,10 +2202,12 @@ function TableRowInner({
   activeColumnId,
   focusedColumnIndex,
   hasFocusedCell,
+  cellSelectionKey: _cellSelectionKey,
   clickable,
   virtualStyle
 }) {
-  const visibleCells = row.getVisibleCells();
+  const allCells = row.getAllCells();
+  const visibleCells = visibleColumns.map((column) => allCells.find((cell) => cell.column.id === column.id)).filter((cell) => cell != null);
   const handleClick = useCallback(
     (e) => {
       if (clickable) {
@@ -1609,6 +2237,8 @@ function TableRowInner({
     },
     [table.events, row]
   );
+  const selectionEnabled = Boolean(table.options.enableRowSelection);
+  const expansionEnabled = Boolean(table.options.enableExpanding);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "tr",
@@ -1620,6 +2250,8 @@ function TableRowInner({
         "data-clickable": clickable || void 0,
         "data-row-id": row.id,
         "data-row-index": rowIndex,
+        "aria-selected": selectionEnabled ? isSelected : void 0,
+        "aria-expanded": expansionEnabled ? isExpanded : void 0,
         onClick: handleClick,
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
@@ -1661,6 +2293,7 @@ function areRowPropsEqual(prev, next) {
   if (prev.activeColumnId !== next.activeColumnId) return false;
   if (prev.focusedColumnIndex !== next.focusedColumnIndex) return false;
   if (prev.hasFocusedCell !== next.hasFocusedCell) return false;
+  if (prev.cellSelectionKey !== next.cellSelectionKey) return false;
   if (prev.virtualStyle !== next.virtualStyle) {
     if (!prev.virtualStyle || !next.virtualStyle) return false;
     if (prev.virtualStyle.transform !== next.virtualStyle.transform) return false;
@@ -1670,9 +2303,7 @@ function areRowPropsEqual(prev, next) {
   return true;
 }
 var MemoizedTableRow = React3.memo(TableRowInner, areRowPropsEqual);
-function TableFooter({
-  table
-}) {
+function TableFooter({ table }) {
   const footerGroups = table.getFooterGroups();
   if (!footerGroups.length) return null;
   return /* @__PURE__ */ jsx("tfoot", { className: "yable-tfoot", children: footerGroups.map((footerGroup) => /* @__PURE__ */ jsx("tr", { className: "yable-tr", children: footerGroup.headers.map((header) => {
@@ -2435,11 +3066,11 @@ function ContextMenu({
       }
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
-        const items2 = menuRef.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-        if (!items2 || items2.length === 0) return;
-        const currentIndex = Array.from(items2).findIndex(
-          (el) => el === document.activeElement
+        const items2 = menuRef.current?.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
         );
+        if (!items2 || items2.length === 0) return;
+        const currentIndex = Array.from(items2).findIndex((el) => el === document.activeElement);
         let nextIndex;
         if (e.key === "ArrowDown") {
           nextIndex = currentIndex < items2.length - 1 ? currentIndex + 1 : 0;
@@ -2484,11 +3115,7 @@ function ContextMenu({
         navigator.clipboard?.readText().then((text) => {
           const editing = table.getState().editing;
           if (editing?.activeCell) {
-            table.pasteFromClipboard(
-              text,
-              editing.activeCell.rowId,
-              editing.activeCell.columnId
-            );
+            table.pasteFromClipboard(text, editing.activeCell.rowId, editing.activeCell.columnId);
           }
         }).catch(() => {
         });
@@ -2828,13 +3455,19 @@ function isEditableTarget(element) {
   }
   return element.isContentEditable;
 }
+function filterHeaderGroups(groups, visibleColumnIds) {
+  return groups.map((group) => ({
+    ...group,
+    headers: group.headers.filter((header) => visibleColumnIds.has(header.column.id))
+  })).filter((group) => group.headers.length > 0);
+}
 function Table({
   table,
-  stickyHeader,
-  striped,
-  bordered,
-  compact,
-  theme,
+  stickyHeader: stickyHeaderProp,
+  striped: stripedProp,
+  bordered: borderedProp,
+  compact: compactProp,
+  theme: themeProp,
   clickableRows,
   footer,
   loading,
@@ -2848,19 +3481,32 @@ function Table({
   renderLoading,
   children,
   className,
-  direction,
+  direction: directionProp,
   statusBar,
   statusBarPanels,
   sidebar,
   sidebarPanels = ["columns", "filters"],
   defaultSidebarPanel,
+  floatingFilters,
+  columnVirtualization,
+  columnVirtualizationOverscan,
+  ariaLabel: ariaLabelProp,
   ...rest
 }) {
+  const { tableProps: providerTableProps } = useYableDefaults();
+  const stickyHeader = stickyHeaderProp ?? providerTableProps?.stickyHeader;
+  const striped = stripedProp ?? providerTableProps?.striped;
+  const bordered = borderedProp ?? providerTableProps?.bordered;
+  const compact = compactProp ?? providerTableProps?.compact;
+  const theme = themeProp ?? providerTableProps?.theme;
+  const direction = directionProp ?? providerTableProps?.direction;
+  const ariaLabel = ariaLabelProp ?? providerTableProps?.ariaLabel;
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarPanel, setSidebarPanel] = useState(
     defaultSidebarPanel ?? "columns"
   );
   const containerRef = useRef(null);
+  const horizontalScrollRef = useRef(null);
   const isRtl = direction === "rtl";
   const classNames = [
     "yable",
@@ -2878,8 +3524,86 @@ function Table({
   const hasGlobalFilter = Boolean(table.getState().globalFilter);
   const hasColumnFilters = table.getState().columnFilters.length > 0;
   const isFiltered = hasGlobalFilter || hasColumnFilters;
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const hasPinnedColumns = table.getLeftVisibleLeafColumns().length > 0 || table.getRightVisibleLeafColumns().length > 0;
+  const hasGroupedHeaders = table.getHeaderGroups().length > 1;
+  const canVirtualizeColumns = Boolean(columnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
+  const columnVirtualState = useColumnVirtualization({
+    containerRef: horizontalScrollRef,
+    columns: allVisibleColumns,
+    overscan: columnVirtualizationOverscan ?? 2,
+    enabled: canVirtualizeColumns
+  });
+  const renderTable = useMemo(() => {
+    if (!canVirtualizeColumns || !columnVirtualState.isVirtualized) {
+      return table;
+    }
+    const virtualColumns = columnVirtualState.virtualColumns.map((entry) => entry.column);
+    const visibleColumnIds = new Set(virtualColumns.map((column) => column.id));
+    const next = Object.create(table);
+    next.getVisibleFlatColumns = () => virtualColumns;
+    next.getVisibleLeafColumns = () => virtualColumns;
+    next.getCenterVisibleLeafColumns = () => virtualColumns;
+    next.getLeftVisibleLeafColumns = () => [];
+    next.getRightVisibleLeafColumns = () => [];
+    next.getHeaderGroups = () => filterHeaderGroups(table.getHeaderGroups(), visibleColumnIds);
+    next.getCenterHeaderGroups = () => filterHeaderGroups(table.getCenterHeaderGroups(), visibleColumnIds);
+    next.getFooterGroups = () => filterHeaderGroups(table.getFooterGroups(), visibleColumnIds);
+    next.getCenterFooterGroups = () => filterHeaderGroups(table.getCenterFooterGroups(), visibleColumnIds);
+    return next;
+  }, [
+    canVirtualizeColumns,
+    columnVirtualState.isVirtualized,
+    columnVirtualState.virtualColumns,
+    table
+  ]);
+  const showColumnVirtualizationShell = canVirtualizeColumns;
   const contextMenu = useContextMenu();
   useKeyboardNavigation(table, { containerRef });
+  const [announcement, setAnnouncement] = useState("");
+  const prevSortingRef = useRef(table.getState().sorting);
+  const prevFilterCountRef = useRef(rows.length);
+  const prevHasFiltersRef = useRef(isFiltered);
+  const prevPaginationRef = useRef(table.getState().pagination);
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    const currentSorting = table.getState().sorting;
+    const currentPagination = table.getState().pagination;
+    const currentRowCount = rows.length;
+    const currentIsFiltered = isFiltered;
+    if (JSON.stringify(currentSorting) !== JSON.stringify(prevSortingRef.current)) {
+      prevSortingRef.current = currentSorting;
+      const firstSort = currentSorting[0];
+      if (firstSort) {
+        const column = table.getColumn(firstSort.id);
+        const headerDef = column?.columnDef.header;
+        const columnName = typeof headerDef === "string" ? headerDef : firstSort.id;
+        const direction2 = firstSort.desc ? "descending" : "ascending";
+        setAnnouncement(`Sorted by ${columnName} ${direction2}`);
+        return;
+      }
+    }
+    if (currentRowCount !== prevFilterCountRef.current || currentIsFiltered !== prevHasFiltersRef.current) {
+      prevFilterCountRef.current = currentRowCount;
+      prevHasFiltersRef.current = currentIsFiltered;
+      if (currentIsFiltered) {
+        setAnnouncement(`${currentRowCount} rows after filtering`);
+        return;
+      }
+    }
+    if (JSON.stringify(currentPagination) !== JSON.stringify(prevPaginationRef.current)) {
+      prevPaginationRef.current = currentPagination;
+      const pageCount = table.getPageCount();
+      if (pageCount > 0) {
+        setAnnouncement(`Page ${currentPagination.pageIndex + 1} of ${pageCount}`);
+        return;
+      }
+    }
+  });
   const handleContextMenu = useCallback(
     (e) => {
       e.preventDefault();
@@ -2887,6 +3611,46 @@ function Table({
     },
     [contextMenu, table]
   );
+  const enableRowVirtualization = renderTable.options.enableVirtualization ?? false;
+  const visibleLeafColumns = renderTable.getVisibleLeafColumns();
+  const columnSizing = renderTable.getState().columnSizing;
+  const colgroup = useMemo(() => {
+    if (visibleLeafColumns.length === 0) return null;
+    return /* @__PURE__ */ jsx("colgroup", { children: visibleLeafColumns.map((col) => /* @__PURE__ */ jsx("col", { style: { width: col.getSize() } }, col.id)) });
+  }, [visibleLeafColumns, columnSizing]);
+  const outerTableStyle = useMemo(() => {
+    if (columnVirtualState.isVirtualized) {
+      return {
+        width: columnVirtualState.visibleWidth,
+        minWidth: columnVirtualState.visibleWidth,
+        marginLeft: columnVirtualState.startOffset,
+        tableLayout: "fixed"
+      };
+    }
+    if (enableRowVirtualization) {
+      return { tableLayout: "fixed" };
+    }
+    return void 0;
+  }, [
+    columnVirtualState.isVirtualized,
+    columnVirtualState.visibleWidth,
+    columnVirtualState.startOffset,
+    enableRowVirtualization
+  ]);
+  const tableNode = /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: "yable-table",
+      style: outerTableStyle,
+      "data-column-virtualized": columnVirtualState.isVirtualized || void 0,
+      children: [
+        enableRowVirtualization && colgroup,
+        /* @__PURE__ */ jsx(TableHeader, { table: renderTable, floatingFilters }),
+        /* @__PURE__ */ jsx(TableBody, { table: renderTable, clickableRows, colgroup }),
+        footer && /* @__PURE__ */ jsx(TableFooter, { table: renderTable })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsx(TableProvider, { value: table, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2895,23 +3659,40 @@ function Table({
       "data-theme": theme,
       dir: direction,
       role: "grid",
+      "aria-label": ariaLabel ?? "Data table",
       "aria-rowcount": table.getRowModel().rows.length,
       "aria-colcount": table.getVisibleLeafColumns().length,
       onContextMenu: handleContextMenu,
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "yable-main", children: [
-          /* @__PURE__ */ jsxs("table", { className: "yable-table", children: [
-            /* @__PURE__ */ jsx(TableHeader, { table }),
-            /* @__PURE__ */ jsx(
-              TableBody,
-              {
-                table,
-                clickableRows
-              }
-            ),
-            footer && /* @__PURE__ */ jsx(TableFooter, { table })
-          ] }),
+          showColumnVirtualizationShell ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: horizontalScrollRef,
+              className: "yable-horizontal-scroll-container",
+              style: {
+                overflowX: "auto",
+                overflowY: "visible",
+                maxWidth: "100%",
+                position: "relative"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "yable-horizontal-scroll-inner",
+                  style: {
+                    width: Math.max(columnVirtualState.totalWidth, columnVirtualState.visibleWidth),
+                    minWidth: Math.max(
+                      columnVirtualState.totalWidth,
+                      columnVirtualState.visibleWidth
+                    )
+                  },
+                  children: tableNode
+                }
+              )
+            }
+          ) : tableNode,
           /* @__PURE__ */ jsx(
             LoadingOverlay,
             {
@@ -2952,6 +3733,24 @@ function Table({
             onClose: contextMenu.close,
             table
           }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: "1px",
+              height: "1px",
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap",
+              border: 0
+            },
+            children: announcement
+          }
         )
       ]
     }
@@ -3417,14 +4216,7 @@ function formatDateValue(value, type) {
   return String(value);
 }
 function useClipboard(table, options = {}) {
-  const {
-    enabled = true,
-    containerRef,
-    onCopy,
-    onCut,
-    onPaste,
-    ...clipboardOptions
-  } = options;
+  const { enabled = true, containerRef, onCopy, onCut, onPaste, ...clipboardOptions } = options;
   const handleCopy = useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
@@ -3462,20 +4254,29 @@ function useClipboard(table, options = {}) {
         targetRowId = state.editing.activeCell.rowId;
         targetColumnId = state.editing.activeCell.columnId;
       } else {
-        const selectedRowIds = Object.keys(state.rowSelection || {}).filter(
-          (id) => state.rowSelection[id]
-        );
-        if (selectedRowIds.length > 0) {
-          targetRowId = selectedRowIds[0];
+        const selectedRange = table.getCellSelectionRange();
+        const rows = table.getRowModel().rows;
+        const columns = table.getVisibleLeafColumns();
+        if (selectedRange) {
+          const startRowIndex = Math.min(selectedRange.start.rowIndex, selectedRange.end.rowIndex);
+          const startColumnIndex = Math.min(
+            selectedRange.start.columnIndex,
+            selectedRange.end.columnIndex
+          );
+          targetRowId = rows[startRowIndex]?.id;
+          targetColumnId = columns[startColumnIndex]?.id;
         } else {
-          const rows = table.getRowModel().rows;
-          if (rows.length > 0) {
+          const selectedRowIds = Object.keys(state.rowSelection || {}).filter(
+            (id) => state.rowSelection[id]
+          );
+          if (selectedRowIds.length > 0) {
+            targetRowId = selectedRowIds[0];
+          } else if (rows.length > 0) {
             targetRowId = rows[0].id;
           }
-        }
-        const columns = table.getVisibleLeafColumns();
-        if (columns.length > 0) {
-          targetColumnId = columns[0].id;
+          if (columns.length > 0) {
+            targetColumnId = columns[0].id;
+          }
         }
       }
       if (targetRowId && targetColumnId) {
@@ -4765,7 +5566,7 @@ function sanitizeCSS(css) {
   sanitized = sanitized.replace(/javascript\s*:/gi, "/* javascript: removed */");
   return sanitized;
 }
-function usePrintLayout(table, options = {}) {
+function usePrintLayout(_table, options = {}) {
   const { title, additionalCSS } = options;
   const isPrintingRef = useRef(false);
   const preparePrint = useCallback(() => {
@@ -4802,7 +5603,7 @@ function usePrintLayout(table, options = {}) {
     requestAnimationFrame(() => {
       window.print();
     });
-  }, [table, title, additionalCSS]);
+  }, [title, additionalCSS]);
   return {
     preparePrint,
     isPrinting: isPrintingRef.current
@@ -4853,7 +5654,234 @@ function useTheme(options = {}) {
     containerRef
   };
 }
+function selectColumn(options = {}) {
+  const { id = "_select", size = 40, headerAriaLabel = "Select all rows" } = options;
+  return {
+    id,
+    header: ({ table }) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: table.getIsAllPageRowsSelected(),
+        ref: (el) => {
+          if (el)
+            el.indeterminate = table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected();
+        },
+        onChange: () => table.toggleAllPageRowsSelected(),
+        "aria-label": headerAriaLabel
+      }
+    ),
+    cell: ({ row }) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: row.getIsSelected(),
+        disabled: !row.getCanSelect(),
+        onChange: row.getToggleSelectedHandler(),
+        "aria-label": `Select row`
+      }
+    ),
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    enableHiding: false,
+    lockVisible: true
+  };
+}
+
+// src/presets/rowNumberColumn.tsx
+function rowNumberColumn(options = {}) {
+  const { id = "_rowNumber", header = "#", size = 50, startFrom = 1 } = options;
+  return {
+    id,
+    header,
+    cell: ({ row }) => row.index + startFrom,
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    lockVisible: true
+  };
+}
+function actionsColumn(options) {
+  const { id = "_actions", header = "", size = 100, actions } = options;
+  return {
+    id,
+    header,
+    cell: (ctx) => {
+      const items = typeof actions === "function" ? actions(ctx.row) : actions;
+      return /* @__PURE__ */ jsx("div", { className: "yable-cell-actions", children: items.filter((a) => !a.hidden || !a.hidden(ctx.row)).map((action, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-action-btn",
+          disabled: action.disabled?.(ctx.row),
+          onClick: (e) => {
+            e.stopPropagation();
+            action.onClick(ctx.row);
+          },
+          title: action.label,
+          children: action.icon ?? action.label
+        },
+        i
+      )) });
+    },
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false
+  };
+}
+function expandColumn(options = {}) {
+  const { id = "_expand", size = 40 } = options;
+  return {
+    id,
+    header: () => null,
+    cell: ({ row }) => {
+      if (!row.getCanExpand()) return null;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-expand-btn",
+          onClick: (e) => {
+            e.stopPropagation();
+            row.toggleExpanded();
+          },
+          "aria-expanded": row.getIsExpanded(),
+          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "yable-expand-icon",
+              style: {
+                display: "inline-block",
+                transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 150ms ease"
+              },
+              children: "\u25B6"
+            }
+          )
+        }
+      );
+    },
+    size,
+    enableSorting: false,
+    enableColumnFilter: false,
+    enableResizing: false,
+    enableReorder: false,
+    lockVisible: true
+  };
+}
+function CellStack({ children, gap = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "yable-cell-stack",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap
+      },
+      children
+    }
+  );
+}
+function CellRow({ children, gap = 6, align = "center", justify = "start" }) {
+  const justifyMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "yable-cell-row",
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: align === "baseline" ? "baseline" : align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center",
+        justifyContent: justifyMap[justify] || "flex-start",
+        gap
+      },
+      children
+    }
+  );
+}
+function CellWithIcon({ icon, children, gap = 6, iconSize }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "yable-cell-with-icon",
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "yable-cell-icon",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              ...iconSize ? { width: iconSize, height: iconSize } : {}
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "yable-cell-icon-content", style: { minWidth: 0 }, children })
+      ]
+    }
+  );
+}
+function CellText({
+  children,
+  variant = "primary",
+  bold,
+  truncate,
+  size = "md"
+}) {
+  const fontSizeMap = { sm: "0.75rem", md: "0.875rem", lg: "1rem" };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `yable-cell-text yable-cell-text--${variant}`,
+      style: {
+        fontSize: fontSizeMap[size],
+        fontWeight: bold ? 600 : void 0,
+        color: variant === "secondary" ? "var(--yable-text-secondary, #6b7280)" : variant === "muted" ? "var(--yable-text-muted, #9ca3af)" : void 0,
+        ...truncate ? {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        } : {}
+      },
+      children
+    }
+  );
+}
+
+// src/utils/mergeEditChanges.ts
+function mergeEditChanges(data, changes, getRowId = (_, i) => String(i)) {
+  const changeKeys = Object.keys(changes);
+  if (changeKeys.length === 0) return data;
+  return data.map((row, i) => {
+    const id = getRowId(row, i);
+    const patch = changes[id];
+    return patch ? { ...row, ...patch } : row;
+  });
+}
 
-export { CellBadge, CellBoolean, CellCheckbox, CellCurrency, CellDate, CellDatePicker, CellErrorBoundary, CellInput, CellLink, CellNumeric, CellProgress, CellRating, CellSelect, CellStatus, CellStatusBadge, CellToggle, ColumnsPanel, ContextMenu, ContextMenuItem, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, ExpandIcon, FillHandle, FiltersPanel, FlashCell, GlobalFilter, LoadingOverlay, MasterDetail, NoRowsOverlay, Pagination, PivotConfigPanel, PrintLayout, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, Table, TableBody, TableCell, TableFooter, TableHeader, TableProvider, Tooltip, TreeToggle, getMeasureRecipeForCellType, getRegisteredCellTypes, resolveMeasureRecipe, useAutoMeasurements, useCellFlash, useClipboard, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTableRowHeights, useTheme, useTooltip, useVirtualization };
+export { CellBadge, CellBoolean, CellCheckbox, CellCurrency, CellDate, CellDatePicker, CellErrorBoundary, CellInput, CellLink, CellNumeric, CellProgress, CellRating, CellRow, CellSelect, CellStack, CellStatus, CellStatusBadge, CellText, CellToggle, CellWithIcon, ColumnsPanel, ContextMenu, ContextMenuItem, DEFAULT_TEXT_RECIPE, DragHandle, ErrorBoundary, ExpandIcon, FillHandle, FiltersPanel, FlashCell, FloatingFilter, GlobalFilter, LoadingOverlay, MasterDetail, NoRowsOverlay, Pagination, PivotConfigPanel, PrintLayout, SetFilter, Sidebar, SortIndicator, StatusBar, StatusBarPanelComponent, Table, TableBody, TableCell, TableFooter, TableHeader, TableProvider, Tooltip, TreeToggle, YableProvider, actionsColumn, expandColumn, getMeasureRecipeForCellType, getRegisteredCellTypes, mergeEditChanges, resolveMeasureRecipe, rowNumberColumn, selectColumn, useAutoMeasurements, useCellFlash, useClipboard, useColumnVirtualization, useContextMenu, useFillHandle, useKeyboardNavigation, usePretextMeasurement, usePrintLayout, useRowAnimation, useRowDrag, useTable, useTableContext, useTablePersistence, useTableRowHeights, useTheme, useTooltip, useVirtualization, useYableDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map