@rowakit/table 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -105,6 +105,834 @@ var col = {
   actions,
   custom
 };
+function useColumnResizing(columns) {
+  const [columnWidths, setColumnWidths] = react.useState({});
+  const resizeRafRef = react.useRef(null);
+  const resizePendingRef = react.useRef(null);
+  const tableRef = react.useRef(null);
+  const isResizingRef = react.useRef(false);
+  const lastResizeEndTsRef = react.useRef(0);
+  const resizingColIdRef = react.useRef(null);
+  const scheduleColumnWidthUpdate = (colId, width) => {
+    resizePendingRef.current = { colId, width };
+    if (resizeRafRef.current != null) return;
+    resizeRafRef.current = requestAnimationFrame(() => {
+      resizeRafRef.current = null;
+      const pending = resizePendingRef.current;
+      if (!pending) return;
+      handleColumnResize(pending.colId, pending.width);
+    });
+  };
+  const handleColumnResize = (columnId, newWidth) => {
+    const minWidth = columns.find((c) => c.id === columnId)?.minWidth ?? 80;
+    const maxWidth = columns.find((c) => c.id === columnId)?.maxWidth;
+    let finalWidth = Math.max(minWidth, newWidth);
+    if (maxWidth) {
+      finalWidth = Math.min(finalWidth, maxWidth);
+    }
+    if (columnWidths[columnId] === finalWidth) {
+      return;
+    }
+    setColumnWidths((prev) => ({
+      ...prev,
+      [columnId]: finalWidth
+    }));
+  };
+  const autoFitColumnWidth = (columnId) => {
+    const tableEl = tableRef.current;
+    if (!tableEl) return;
+    const th = tableEl.querySelector(`th[data-col-id="${columnId}"]`);
+    if (!th) return;
+    const tds = Array.from(
+      tableEl.querySelectorAll(`td[data-col-id="${columnId}"]`)
+    );
+    const headerW = th.scrollWidth;
+    const cellsMaxW = tds.reduce((max, td) => Math.max(max, td.scrollWidth), 0);
+    const padding = 24;
+    const raw = Math.max(headerW, cellsMaxW) + padding;
+    const colDef = columns.find((c) => c.id === columnId);
+    const minW = colDef?.minWidth ?? 80;
+    const maxW = colDef?.maxWidth ?? 600;
+    const finalW = Math.max(minW, Math.min(raw, maxW));
+    setColumnWidths((prev) => ({ ...prev, [columnId]: finalW }));
+  };
+  const startColumnResize = (e, columnId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.detail === 2) {
+      autoFitColumnWidth(columnId);
+      return;
+    }
+    if (e.pointerType === "mouse" && e.buttons !== 1) {
+      return;
+    }
+    const target = e.currentTarget;
+    const pointerId = e.pointerId;
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+    }
+    isResizingRef.current = true;
+    resizingColIdRef.current = columnId;
+    const startX = e.clientX;
+    const th = target.parentElement;
+    let startWidth = columnWidths[columnId] ?? th.offsetWidth;
+    const MIN_DRAG_WIDTH = 80;
+    if (startWidth < MIN_DRAG_WIDTH) {
+      const nextTh = th.nextElementSibling;
+      if (nextTh && nextTh.offsetWidth >= 50) {
+        startWidth = nextTh.offsetWidth;
+      } else {
+        startWidth = 100;
+      }
+    }
+    document.body.classList.add("rowakit-resizing");
+    const handlePointerMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startX;
+      const newWidth = startWidth + delta;
+      scheduleColumnWidthUpdate(columnId, newWidth);
+    };
+    const cleanupResize = () => {
+      target.removeEventListener("pointermove", handlePointerMove);
+      target.removeEventListener("pointerup", handlePointerUp);
+      target.removeEventListener("pointercancel", handlePointerCancel);
+      document.body.classList.remove("rowakit-resizing");
+      isResizingRef.current = false;
+      resizingColIdRef.current = null;
+      lastResizeEndTsRef.current = Date.now();
+      try {
+        target.releasePointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const handlePointerUp = () => {
+      cleanupResize();
+    };
+    const handlePointerCancel = () => {
+      cleanupResize();
+    };
+    target.addEventListener("pointermove", handlePointerMove);
+    target.addEventListener("pointerup", handlePointerUp);
+    target.addEventListener("pointercancel", handlePointerCancel);
+  };
+  const handleColumnResizeDoubleClick = (e, columnId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    autoFitColumnWidth(columnId);
+  };
+  return {
+    tableRef,
+    columnWidths,
+    setColumnWidths,
+    startColumnResize,
+    handleColumnResizeDoubleClick,
+    isResizingRef,
+    lastResizeEndTsRef,
+    resizingColIdRef
+  };
+}
+function useFetcherState(fetcher, query, setQuery) {
+  const [dataState, setDataState] = react.useState({
+    state: "idle",
+    items: [],
+    total: 0
+  });
+  const requestIdRef = react.useRef(0);
+  react.useEffect(() => {
+    const currentRequestId = ++requestIdRef.current;
+    setDataState((prev) => ({ ...prev, state: "loading" }));
+    fetcher(query).then((result) => {
+      if (currentRequestId !== requestIdRef.current) return;
+      if (result.items.length === 0) {
+        setDataState({
+          state: "empty",
+          items: [],
+          total: result.total
+        });
+        return;
+      }
+      setDataState({
+        state: "success",
+        items: result.items,
+        total: result.total
+      });
+    }).catch((error) => {
+      if (currentRequestId !== requestIdRef.current) return;
+      setDataState({
+        state: "error",
+        items: [],
+        total: 0,
+        error: error instanceof Error ? error.message : "Failed to load data"
+      });
+    });
+  }, [fetcher, query]);
+  const handleRetry = () => {
+    setQuery({ ...query });
+  };
+  return {
+    dataState,
+    setDataState,
+    handleRetry,
+    isLoading: dataState.state === "loading",
+    isError: dataState.state === "error",
+    isEmpty: dataState.state === "empty"
+  };
+}
+function validateViewName(name) {
+  const trimmed = name.trim();
+  if (trimmed.length === 0) {
+    return { valid: false, error: "Name cannot be empty" };
+  }
+  if (trimmed.length > 40) {
+    return { valid: false, error: "Name cannot exceed 40 characters" };
+  }
+  const invalidChars = /[/\\?%*:|"<>\x00-\x1f\x7f]/;
+  if (invalidChars.test(trimmed)) {
+    return { valid: false, error: "Name contains invalid characters" };
+  }
+  return { valid: true };
+}
+function getSavedViewsIndex() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return [];
+  }
+  try {
+    const indexStr = localStorage.getItem("rowakit-views-index");
+    if (indexStr) {
+      const index = JSON.parse(indexStr);
+      if (Array.isArray(index)) {
+        return index;
+      }
+    }
+  } catch {
+  }
+  const rebuilt = [];
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("rowakit-view-")) {
+        const name = key.substring("rowakit-view-".length);
+        rebuilt.push({ name, updatedAt: Date.now() });
+      }
+    }
+  } catch {
+  }
+  return rebuilt;
+}
+function setSavedViewsIndex(index) {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return;
+  }
+  try {
+    localStorage.setItem("rowakit-views-index", JSON.stringify(index));
+  } catch {
+  }
+}
+function loadSavedViewsFromStorage() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return [];
+  }
+  const index = getSavedViewsIndex();
+  const views = [];
+  for (const entry of index) {
+    try {
+      const viewStr = localStorage.getItem(`rowakit-view-${entry.name}`);
+      if (viewStr) {
+        const state = JSON.parse(viewStr);
+        views.push({ name: entry.name, state });
+      }
+    } catch {
+    }
+  }
+  return views;
+}
+function useSavedViews(options) {
+  const [savedViews, setSavedViews] = react.useState([]);
+  const [showSaveViewForm, setShowSaveViewForm] = react.useState(false);
+  const [saveViewInput, setSaveViewInput] = react.useState("");
+  const [saveViewError, setSaveViewError] = react.useState("");
+  const [overwriteConfirmName, setOverwriteConfirmName] = react.useState(null);
+  react.useEffect(() => {
+    if (!options.enableSavedViews) return;
+    setSavedViews(loadSavedViewsFromStorage());
+  }, [options.enableSavedViews]);
+  const saveCurrentView = (name) => {
+    const viewState = {
+      page: options.query.page,
+      pageSize: options.query.pageSize,
+      sort: options.query.sort,
+      filters: options.query.filters,
+      columnWidths: options.enableColumnResizing ? options.columnWidths : void 0
+    };
+    setSavedViews((prev) => {
+      const filtered = prev.filter((v) => v.name !== name);
+      return [...filtered, { name, state: viewState }];
+    });
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        localStorage.setItem(`rowakit-view-${name}`, JSON.stringify(viewState));
+        const index = getSavedViewsIndex();
+        const filtered = index.filter((v) => v.name !== name);
+        filtered.push({ name, updatedAt: Date.now() });
+        setSavedViewsIndex(filtered);
+      } catch {
+      }
+    }
+  };
+  const loadSavedView = (name) => {
+    const view = savedViews.find((v) => v.name === name);
+    if (!view) return;
+    const { state } = view;
+    options.setQuery({
+      page: state.page,
+      pageSize: state.pageSize,
+      sort: state.sort,
+      filters: state.filters
+    });
+    options.setFilters(state.filters ?? {});
+    if (state.columnWidths && options.enableColumnResizing) {
+      options.setColumnWidths(state.columnWidths);
+    }
+  };
+  const deleteSavedView = (name) => {
+    setSavedViews((prev) => prev.filter((v) => v.name !== name));
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        localStorage.removeItem(`rowakit-view-${name}`);
+        const index = getSavedViewsIndex();
+        const filtered = index.filter((v) => v.name !== name);
+        setSavedViewsIndex(filtered);
+      } catch {
+      }
+    }
+  };
+  const resetTableState = () => {
+    options.setQuery({
+      page: 1,
+      pageSize: options.defaultPageSize
+    });
+    options.setFilters({});
+    options.setColumnWidths({});
+  };
+  const shouldShowReset = react.useMemo(() => {
+    if (!options.enableSavedViews) return false;
+    return Boolean(options.query.page > 1 || options.query.sort || options.query.filters && Object.keys(options.query.filters).length > 0);
+  }, [options.enableSavedViews, options.query.page, options.query.sort, options.query.filters]);
+  const openSaveViewForm = () => {
+    setShowSaveViewForm(true);
+    setSaveViewInput("");
+    setSaveViewError("");
+    setOverwriteConfirmName(null);
+  };
+  const cancelSaveViewForm = () => {
+    setShowSaveViewForm(false);
+    setSaveViewInput("");
+    setSaveViewError("");
+    setOverwriteConfirmName(null);
+  };
+  const onSaveViewInputChange = (e) => {
+    setSaveViewInput(e.target.value);
+    setSaveViewError("");
+  };
+  const attemptSave = () => {
+    const validation = validateViewName(saveViewInput);
+    if (!validation.valid) {
+      setSaveViewError(validation.error || "Invalid name");
+      return;
+    }
+    const trimmed = saveViewInput.trim();
+    if (savedViews.some((v) => v.name === trimmed)) {
+      setOverwriteConfirmName(trimmed);
+      return;
+    }
+    saveCurrentView(trimmed);
+    cancelSaveViewForm();
+  };
+  const onSaveViewInputKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    attemptSave();
+  };
+  const confirmOverwrite = () => {
+    if (!overwriteConfirmName) return;
+    saveCurrentView(overwriteConfirmName);
+    cancelSaveViewForm();
+  };
+  const cancelOverwrite = () => {
+    setOverwriteConfirmName(null);
+  };
+  return {
+    savedViews,
+    showSaveViewForm,
+    saveViewInput,
+    saveViewError,
+    overwriteConfirmName,
+    openSaveViewForm,
+    cancelSaveViewForm,
+    onSaveViewInputChange,
+    onSaveViewInputKeyDown,
+    attemptSave,
+    confirmOverwrite,
+    cancelOverwrite,
+    loadSavedView,
+    deleteSavedView,
+    resetTableState,
+    shouldShowReset
+  };
+}
+
+// src/hooks/useSortingState.ts
+function useSortingState(query, setQuery) {
+  const handleSort = (field, isMultiSort = false) => {
+    setQuery((prev) => {
+      const currentSorts = prev.sorts || [];
+      const existingSort = currentSorts.find((s) => s.field === field);
+      if (!isMultiSort) {
+        if (existingSort?.priority === 0) {
+          if (existingSort.direction === "asc") {
+            return {
+              ...prev,
+              sorts: [{ field, direction: "desc", priority: 0 }],
+              page: 1
+            };
+          }
+          const { sorts: _removed, ...rest } = prev;
+          return {
+            ...rest,
+            page: 1
+          };
+        }
+        return {
+          ...prev,
+          sorts: [{ field, direction: "asc", priority: 0 }],
+          page: 1
+        };
+      }
+      if (existingSort) {
+        const newSorts2 = currentSorts.map((s) => {
+          if (s.field === field) {
+            const newDirection = s.direction === "asc" ? "desc" : "asc";
+            return { ...s, direction: newDirection };
+          }
+          return s;
+        });
+        return { ...prev, sorts: newSorts2, page: 1 };
+      }
+      const nextPriority = currentSorts.length;
+      const newSorts = [...currentSorts, { field, direction: "asc", priority: nextPriority }];
+      return { ...prev, sorts: newSorts, page: 1 };
+    });
+  };
+  const getSortIndicator = (field) => {
+    const sorts = query.sorts || [];
+    const sort = sorts.find((s) => s.field === field);
+    if (!sort) {
+      return "";
+    }
+    const directionIcon = sort.direction === "asc" ? " \u2191" : " \u2193";
+    const priorityLabel = sort.priority === 0 ? "" : ` [${sort.priority + 1}]`;
+    return directionIcon + priorityLabel;
+  };
+  const getSortPriority = (field) => {
+    const sorts = query.sorts || [];
+    const sort = sorts.find((s) => s.field === field);
+    return sort ? sort.priority : null;
+  };
+  return { handleSort, getSortIndicator, getSortPriority };
+}
+function parseUrlState(params, defaultPageSize, pageSizeOptions) {
+  const pageStr = params.get("page");
+  let page = 1;
+  if (pageStr) {
+    const parsed = parseInt(pageStr, 10);
+    page = !isNaN(parsed) && parsed >= 1 ? parsed : 1;
+  }
+  const pageSizeStr = params.get("pageSize");
+  let pageSize = defaultPageSize;
+  if (pageSizeStr) {
+    const parsed = parseInt(pageSizeStr, 10);
+    if (!isNaN(parsed) && parsed >= 1) {
+      if (pageSizeOptions && pageSizeOptions.length > 0) {
+        pageSize = pageSizeOptions.includes(parsed) ? parsed : defaultPageSize;
+      } else {
+        pageSize = parsed;
+      }
+    }
+  }
+  const result = { page, pageSize };
+  const sortsStr = params.get("sorts");
+  if (sortsStr) {
+    try {
+      const parsed = JSON.parse(sortsStr);
+      if (Array.isArray(parsed) && parsed.every((s) => typeof s.field === "string" && (s.direction === "asc" || s.direction === "desc") && typeof s.priority === "number")) {
+        result.sorts = parsed;
+      }
+    } catch {
+    }
+  }
+  if (!result.sorts) {
+    const sortField = params.get("sortField");
+    const sortDir = params.get("sortDirection");
+    if (sortField && (sortDir === "asc" || sortDir === "desc")) {
+      result.sort = { field: sortField, direction: sortDir };
+    }
+  }
+  const filtersStr = params.get("filters");
+  if (filtersStr) {
+    try {
+      const parsed = JSON.parse(filtersStr);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        result.filters = parsed;
+      }
+    } catch {
+    }
+  }
+  const widthsStr = params.get("columnWidths");
+  if (widthsStr) {
+    try {
+      const parsed = JSON.parse(widthsStr);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        const widths = {};
+        for (const [key, value] of Object.entries(parsed)) {
+          if (typeof value === "number" && value > 0) {
+            widths[key] = value;
+          }
+        }
+        if (Object.keys(widths).length > 0) {
+          result.columnWidths = widths;
+        }
+      }
+    } catch {
+    }
+  }
+  return result;
+}
+function serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing) {
+  const params = new URLSearchParams();
+  params.set("page", String(query.page));
+  if (query.pageSize !== defaultPageSize) {
+    params.set("pageSize", String(query.pageSize));
+  }
+  if (query.sorts && query.sorts.length > 0) {
+    params.set("sorts", JSON.stringify(query.sorts));
+  } else if (query.sort) {
+    params.set("sortField", query.sort.field);
+    params.set("sortDirection", query.sort.direction);
+  }
+  if (filters && Object.keys(filters).length > 0) {
+    const nonEmptyFilters = Object.fromEntries(
+      Object.entries(filters).filter(([, v]) => v !== void 0)
+    );
+    if (Object.keys(nonEmptyFilters).length > 0) {
+      params.set("filters", JSON.stringify(nonEmptyFilters));
+    }
+  }
+  if (enableColumnResizing && Object.keys(columnWidths).length > 0) {
+    params.set("columnWidths", JSON.stringify(columnWidths));
+  }
+  return params.toString();
+}
+function useUrlSync({
+  syncToUrl,
+  enableColumnResizing,
+  defaultPageSize,
+  pageSizeOptions,
+  columns,
+  query,
+  setQuery,
+  filters,
+  setFilters,
+  columnWidths,
+  setColumnWidths
+}) {
+  const didHydrateUrlRef = react.useRef(false);
+  const didSkipInitialUrlSyncRef = react.useRef(false);
+  const urlSyncDebounceRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!syncToUrl) {
+      didSkipInitialUrlSyncRef.current = false;
+      return;
+    }
+    if (!didSkipInitialUrlSyncRef.current) {
+      didSkipInitialUrlSyncRef.current = true;
+      return;
+    }
+    if (urlSyncDebounceRef.current) {
+      clearTimeout(urlSyncDebounceRef.current);
+      urlSyncDebounceRef.current = null;
+    }
+    const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+    const qs = urlStr ? `?${urlStr}` : "";
+    window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+  }, [
+    query,
+    filters,
+    syncToUrl,
+    enableColumnResizing,
+    defaultPageSize,
+    columnWidths
+  ]);
+  react.useEffect(() => {
+    if (!syncToUrl || !enableColumnResizing) return;
+    if (!didSkipInitialUrlSyncRef.current) return;
+    if (urlSyncDebounceRef.current) {
+      clearTimeout(urlSyncDebounceRef.current);
+    }
+    urlSyncDebounceRef.current = setTimeout(() => {
+      const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+      const qs = urlStr ? `?${urlStr}` : "";
+      window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+      urlSyncDebounceRef.current = null;
+    }, 150);
+    return () => {
+      if (urlSyncDebounceRef.current) {
+        clearTimeout(urlSyncDebounceRef.current);
+        urlSyncDebounceRef.current = null;
+      }
+    };
+  }, [
+    columnWidths,
+    syncToUrl,
+    enableColumnResizing,
+    query,
+    filters,
+    defaultPageSize
+  ]);
+  react.useEffect(() => {
+    if (!syncToUrl) {
+      didHydrateUrlRef.current = false;
+      return;
+    }
+    if (didHydrateUrlRef.current) return;
+    didHydrateUrlRef.current = true;
+    const params = new URLSearchParams(window.location.search);
+    const parsed = parseUrlState(params, defaultPageSize, pageSizeOptions);
+    setQuery({
+      page: parsed.page,
+      pageSize: parsed.pageSize,
+      sort: parsed.sort,
+      sorts: parsed.sorts,
+      filters: parsed.filters
+    });
+    if (parsed.filters) {
+      setFilters(parsed.filters);
+    }
+    if (parsed.columnWidths && enableColumnResizing) {
+      const clamped = {};
+      for (const [colId, rawWidth] of Object.entries(parsed.columnWidths)) {
+        const widthNum = typeof rawWidth === "number" ? rawWidth : Number(rawWidth);
+        if (!Number.isFinite(widthNum)) continue;
+        const colDef = columns.find((c) => c.id === colId);
+        if (!colDef) continue;
+        const minW = colDef.minWidth ?? 80;
+        const maxW = colDef.maxWidth;
+        let finalW = Math.max(minW, widthNum);
+        if (maxW != null) {
+          finalW = Math.min(finalW, maxW);
+        }
+        clamped[colId] = finalW;
+      }
+      setColumnWidths(clamped);
+    }
+  }, [
+    syncToUrl,
+    defaultPageSize,
+    enableColumnResizing,
+    pageSizeOptions,
+    columns,
+    setQuery,
+    setFilters,
+    setColumnWidths
+  ]);
+}
+var FOCUSABLE_SELECTORS = [
+  "button",
+  "[href]",
+  "input",
+  "select",
+  "textarea",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useFocusTrap(ref, options = {}) {
+  const { onEscape, autoFocus = true } = options;
+  const firstFocusableRef = react.useRef(null);
+  const lastFocusableRef = react.useRef(null);
+  react.useEffect(() => {
+    const modalEl = ref.current;
+    if (!modalEl) return;
+    const getFocusableElements = () => {
+      const elements = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTORS));
+      return elements.filter((el) => !el.hasAttribute("disabled") && el.offsetParent !== null);
+    };
+    let focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+    firstFocusableRef.current = focusableElements[0] || null;
+    lastFocusableRef.current = focusableElements[focusableElements.length - 1] || null;
+    if (autoFocus && firstFocusableRef.current) {
+      firstFocusableRef.current.focus();
+    }
+    const handleKeyDown = (e) => {
+      focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+      const activeEl = document.activeElement;
+      const firstEl = focusableElements[0] || null;
+      const lastEl = focusableElements[focusableElements.length - 1] || null;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onEscape?.();
+        return;
+      }
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          if (activeEl === firstEl && lastEl) {
+            e.preventDefault();
+            lastEl.focus();
+          }
+        } else {
+          if (activeEl === lastEl && firstEl) {
+            e.preventDefault();
+            firstEl.focus();
+          }
+        }
+      }
+    };
+    modalEl.addEventListener("keydown", handleKeyDown);
+    return () => {
+      modalEl.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [ref, onEscape, autoFocus]);
+}
+function RowSelectionHeaderCell(props) {
+  const checkboxRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!checkboxRef.current) return;
+    checkboxRef.current.indeterminate = props.indeterminate;
+  }, [props.indeterminate]);
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: checkboxRef,
+      type: "checkbox",
+      "aria-label": "Select all rows",
+      disabled: props.disabled,
+      checked: props.checked,
+      onChange: (e) => props.onChange(e.target.checked)
+    }
+  ) });
+}
+function RowSelectionCell(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "checkbox",
+      "aria-label": `Select row ${props.rowKey}`,
+      disabled: props.disabled,
+      checked: props.checked,
+      onChange: (e) => props.onChange(e.target.checked)
+    }
+  ) });
+}
+function BulkActionBar(props) {
+  if (props.selectedCount <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-bulk-action-bar", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      props.selectedCount,
+      " selected"
+    ] }),
+    props.actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "rowakit-button rowakit-button-secondary",
+        onClick: () => props.onActionClick(action.id),
+        children: action.label
+      },
+      action.id
+    ))
+  ] });
+}
+function downloadBlob(blob, filename) {
+  if (typeof window === "undefined") return;
+  if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+  const url = URL.createObjectURL(blob);
+  try {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.rel = "noopener noreferrer";
+    a.click();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function openUrl(url) {
+  if (typeof window === "undefined") return;
+  if (typeof window.open === "function") {
+    window.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
+  try {
+    window.location.assign(url);
+  } catch {
+  }
+}
+function ExportButton(props) {
+  const [isExporting, setIsExporting] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const onClick = async () => {
+    if (isExporting) return;
+    setIsExporting(true);
+    setError(null);
+    try {
+      const snapshot = { ...props.query };
+      const result = await props.exporter(snapshot);
+      if (result instanceof Blob) {
+        downloadBlob(result, "rowakit-export.csv");
+        return;
+      }
+      openUrl(result.url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Export failed");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-export", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "rowakit-button rowakit-button-secondary",
+        onClick,
+        disabled: isExporting,
+        children: isExporting ? "Exporting\u2026" : "Export CSV"
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-export-error", children: error })
+  ] });
+}
+
+// src/state/selection.ts
+function toggleSelectionKey(selected, key) {
+  if (selected.includes(key)) {
+    return selected.filter((k) => k !== key);
+  }
+  return [...selected, key];
+}
+function isAllSelected(selected, pageKeys) {
+  if (pageKeys.length === 0) return false;
+  return pageKeys.every((k) => selected.includes(k));
+}
+function isIndeterminate(selected, pageKeys) {
+  if (pageKeys.length === 0) return false;
+  const selectedCount = pageKeys.filter((k) => selected.includes(k)).length;
+  return selectedCount > 0 && selectedCount < pageKeys.length;
+}
+function selectAll(pageKeys) {
+  return [...pageKeys];
+}
+function clearSelection() {
+  return [];
+}
 function getRowKey(row, rowKey) {
   if (typeof rowKey === "function") {
     return rowKey(row);
@@ -220,76 +1048,92 @@ function RowaKitTable({
   enableFilters = false,
   enableColumnResizing = false,
   syncToUrl = false,
-  enableSavedViews = false
+  enableSavedViews = false,
+  enableRowSelection = false,
+  onSelectionChange,
+  bulkActions,
+  exporter
 }) {
-  const [dataState, setDataState] = react.useState({
-    state: "idle",
-    items: [],
-    total: 0
-  });
   const [query, setQuery] = react.useState({
     page: 1,
     pageSize: defaultPageSize
   });
   const [filters, setFilters] = react.useState({});
-  const [columnWidths, setColumnWidths] = react.useState({});
-  const resizeRafRef = react.useRef(null);
-  const resizePendingRef = react.useRef(null);
-  const tableRef = react.useRef(null);
-  const [savedViews, setSavedViews] = react.useState([]);
   const [confirmState, setConfirmState] = react.useState(null);
-  const requestIdRef = react.useRef(0);
+  const [selectedKeys, setSelectedKeys] = react.useState([]);
+  const [bulkConfirmState, setBulkConfirmState] = react.useState(null);
+  const confirmModalRef = react.useRef(null);
+  const bulkConfirmModalRef = react.useRef(null);
+  const {
+    tableRef,
+    columnWidths,
+    setColumnWidths,
+    startColumnResize,
+    handleColumnResizeDoubleClick,
+    isResizingRef,
+    lastResizeEndTsRef,
+    resizingColIdRef
+  } = useColumnResizing(columns);
+  useUrlSync({
+    syncToUrl,
+    enableColumnResizing,
+    defaultPageSize,
+    pageSizeOptions,
+    columns,
+    query,
+    setQuery,
+    filters,
+    setFilters,
+    columnWidths,
+    setColumnWidths
+  });
+  const { dataState, handleRetry, isLoading, isError, isEmpty } = useFetcherState(fetcher, query, setQuery);
+  const { handleSort, getSortIndicator } = useSortingState(query, setQuery);
+  const pageRowKeys = dataState.items.map((row) => getRowKey(row, rowKey));
+  const headerChecked = isAllSelected(selectedKeys, pageRowKeys);
+  const headerIndeterminate = isIndeterminate(selectedKeys, pageRowKeys);
   react.useEffect(() => {
-    if (!syncToUrl) return;
-    const params = new URLSearchParams();
-    params.set("page", String(query.page));
-    params.set("pageSize", String(query.pageSize));
-    if (query.sort) {
-      params.set("sortField", query.sort.field);
-      params.set("sortDirection", query.sort.direction);
-    }
-    if (query.filters && Object.keys(query.filters).length > 0) {
-      params.set("filters", JSON.stringify(query.filters));
-    }
-    if (enableColumnResizing && Object.keys(columnWidths).length > 0) {
-      params.set("columnWidths", JSON.stringify(columnWidths));
-    }
-    window.history.replaceState(null, "", `?${params.toString()}`);
-  }, [query, columnWidths, syncToUrl, enableColumnResizing]);
+    if (!enableRowSelection) return;
+    setSelectedKeys(clearSelection());
+  }, [enableRowSelection, query.page, dataState.items]);
   react.useEffect(() => {
-    if (!syncToUrl) return;
-    const params = new URLSearchParams(window.location.search);
-    const page = parseInt(params.get("page") ?? "1", 10);
-    const pageSize = parseInt(params.get("pageSize") ?? String(defaultPageSize), 10);
-    const sortField = params.get("sortField");
-    const sortDirection = params.get("sortDirection");
-    const filtersStr = params.get("filters");
-    const columnWidthsStr = params.get("columnWidths");
-    const newQuery = {
-      page: Math.max(1, page),
-      pageSize: Math.max(1, pageSize)
-    };
-    if (sortField && sortDirection) {
-      newQuery.sort = { field: sortField, direction: sortDirection };
-    }
-    if (filtersStr) {
-      try {
-        const parsedFilters = JSON.parse(filtersStr);
-        if (parsedFilters && typeof parsedFilters === "object") {
-          setFilters(parsedFilters);
-          newQuery.filters = parsedFilters;
-        }
-      } catch {
-      }
-    }
-    if (enableColumnResizing && columnWidthsStr) {
-      try {
-        setColumnWidths(JSON.parse(columnWidthsStr));
-      } catch {
-      }
-    }
-    setQuery(newQuery);
-  }, [syncToUrl, defaultPageSize, enableColumnResizing]);
+    if (!enableRowSelection || !onSelectionChange) return;
+    onSelectionChange(selectedKeys);
+  }, [enableRowSelection, onSelectionChange, selectedKeys]);
+  const {
+    savedViews,
+    showSaveViewForm,
+    saveViewInput,
+    saveViewError,
+    overwriteConfirmName,
+    openSaveViewForm,
+    cancelSaveViewForm,
+    onSaveViewInputChange,
+    onSaveViewInputKeyDown,
+    attemptSave,
+    confirmOverwrite,
+    cancelOverwrite,
+    loadSavedView,
+    deleteSavedView,
+    resetTableState
+  } = useSavedViews({
+    enableSavedViews,
+    enableColumnResizing,
+    defaultPageSize,
+    query,
+    setQuery,
+    setFilters,
+    columnWidths,
+    setColumnWidths
+  });
+  useFocusTrap(confirmModalRef, {
+    onEscape: () => setConfirmState(null),
+    autoFocus: true
+  });
+  useFocusTrap(bulkConfirmModalRef, {
+    onEscape: () => setBulkConfirmState(null),
+    autoFocus: true
+  });
   react.useEffect(() => {
     if (!enableFilters) return;
     const activeFilters = {};
@@ -297,52 +1141,17 @@ function RowaKitTable({
     for (const [field, value] of Object.entries(filters)) {
       if (value !== void 0) {
         activeFilters[field] = value;
-        hasFilters = true;
-      }
-    }
-    const filtersToSend = hasFilters ? activeFilters : void 0;
-    setQuery((prev) => ({
-      ...prev,
-      filters: filtersToSend,
-      page: 1
-      // Reset page to 1 when filters change
-    }));
-  }, [filters, enableFilters]);
-  react.useEffect(() => {
-    const currentRequestId = ++requestIdRef.current;
-    setDataState((prev) => ({ ...prev, state: "loading" }));
-    fetcher(query).then((result) => {
-      if (currentRequestId !== requestIdRef.current) {
-        return;
-      }
-      if (result.items.length === 0) {
-        setDataState({
-          state: "empty",
-          items: [],
-          total: result.total
-        });
-      } else {
-        setDataState({
-          state: "success",
-          items: result.items,
-          total: result.total
-        });
-      }
-    }).catch((error) => {
-      if (currentRequestId !== requestIdRef.current) {
-        return;
+        hasFilters = true;
       }
-      setDataState({
-        state: "error",
-        items: [],
-        total: 0,
-        error: error instanceof Error ? error.message : "Failed to load data"
-      });
-    });
-  }, [fetcher, query]);
-  const handleRetry = () => {
-    setQuery({ ...query });
-  };
+    }
+    const filtersToSend = hasFilters ? activeFilters : void 0;
+    setQuery((prev) => ({
+      ...prev,
+      filters: filtersToSend,
+      page: 1
+      // Reset page to 1 when filters change
+    }));
+  }, [filters, enableFilters]);
   const handlePreviousPage = () => {
     if (query.page > 1) {
       setQuery((prev) => ({ ...prev, page: prev.page - 1 }));
@@ -357,140 +1166,6 @@ function RowaKitTable({
   const handlePageSizeChange = (newPageSize) => {
     setQuery({ ...query, pageSize: newPageSize, page: 1 });
   };
-  const handleSort = (field) => {
-    setQuery((prev) => {
-      if (prev.sort?.field !== field) {
-        return { ...prev, sort: { field, direction: "asc" }, page: 1 };
-      }
-      if (prev.sort.direction === "asc") {
-        return { ...prev, sort: { field, direction: "desc" }, page: 1 };
-      }
-      const { sort: _sort, ...rest } = prev;
-      return { ...rest, page: 1 };
-    });
-  };
-  const getSortIndicator = (field) => {
-    if (!query.sort || query.sort.field !== field) {
-      return "";
-    }
-    return query.sort.direction === "asc" ? " \u2191" : " \u2193";
-  };
-  const scheduleColumnWidthUpdate = (colId, width) => {
-    resizePendingRef.current = { colId, width };
-    if (resizeRafRef.current != null) return;
-    resizeRafRef.current = requestAnimationFrame(() => {
-      resizeRafRef.current = null;
-      const pending = resizePendingRef.current;
-      if (!pending) return;
-      handleColumnResize(pending.colId, pending.width);
-    });
-  };
-  const handleColumnResize = (columnId, newWidth) => {
-    const minWidth = columns.find((c) => c.id === columnId)?.minWidth ?? 80;
-    const maxWidth = columns.find((c) => c.id === columnId)?.maxWidth;
-    let finalWidth = Math.max(minWidth, newWidth);
-    if (maxWidth) {
-      finalWidth = Math.min(finalWidth, maxWidth);
-    }
-    setColumnWidths((prev) => ({
-      ...prev,
-      [columnId]: finalWidth
-    }));
-  };
-  const startColumnResize = (e, columnId) => {
-    e.preventDefault();
-    const startX = e.clientX;
-    const th = e.currentTarget.parentElement;
-    let startWidth = columnWidths[columnId] ?? th.offsetWidth;
-    const MIN_DRAG_WIDTH = 80;
-    if (startWidth < MIN_DRAG_WIDTH) {
-      const nextTh = th.nextElementSibling;
-      if (nextTh && nextTh.offsetWidth >= 50) {
-        startWidth = nextTh.offsetWidth;
-      } else {
-        startWidth = 100;
-      }
-    }
-    document.body.classList.add("rowakit-resizing");
-    const handleMouseMove = (moveEvent) => {
-      const delta = moveEvent.clientX - startX;
-      const newWidth = startWidth + delta;
-      scheduleColumnWidthUpdate(columnId, newWidth);
-    };
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.classList.remove("rowakit-resizing");
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-  const handleColumnResizeDoubleClick = (columnId) => {
-    const tableEl = tableRef.current;
-    if (!tableEl) return;
-    const th = tableEl.querySelector(`th[data-col-id="${columnId}"]`);
-    if (!th) return;
-    const tds = Array.from(tableEl.querySelectorAll(`td[data-col-id="${columnId}"]`));
-    const headerW = th.scrollWidth;
-    const cellsMaxW = tds.reduce((max, td) => Math.max(max, td.scrollWidth), 0);
-    const padding = 24;
-    const raw = Math.max(headerW, cellsMaxW) + padding;
-    const minW = columns.find((c) => c.id === columnId)?.minWidth ?? 80;
-    const maxW = columns.find((c) => c.id === columnId)?.maxWidth ?? 600;
-    const finalW = Math.max(minW, Math.min(raw, maxW));
-    setColumnWidths((prev) => ({ ...prev, [columnId]: finalW }));
-  };
-  const saveCurrentView = (name) => {
-    const viewState = {
-      page: query.page,
-      pageSize: query.pageSize,
-      sort: query.sort,
-      filters: query.filters,
-      columnWidths: enableColumnResizing ? columnWidths : void 0
-    };
-    setSavedViews((prev) => {
-      const filtered = prev.filter((v) => v.name !== name);
-      return [...filtered, { name, state: viewState }];
-    });
-    if (typeof window !== "undefined" && window.localStorage) {
-      try {
-        localStorage.setItem(`rowakit-view-${name}`, JSON.stringify(viewState));
-      } catch {
-      }
-    }
-  };
-  const loadSavedView = (name) => {
-    const view = savedViews.find((v) => v.name === name);
-    if (!view) return;
-    const { state } = view;
-    setQuery({
-      page: state.page,
-      pageSize: state.pageSize,
-      sort: state.sort,
-      filters: state.filters
-    });
-    setFilters(state.filters ?? {});
-    if (state.columnWidths && enableColumnResizing) {
-      setColumnWidths(state.columnWidths);
-    }
-  };
-  const deleteSavedView = (name) => {
-    setSavedViews((prev) => prev.filter((v) => v.name !== name));
-    if (typeof window !== "undefined" && window.localStorage) {
-      try {
-        localStorage.removeItem(`rowakit-view-${name}`);
-      } catch {
-      }
-    }
-  };
-  const resetTableState = () => {
-    setQuery({
-      page: 1,
-      pageSize: defaultPageSize
-    });
-    setFilters({});
-    setColumnWidths({});
-  };
   const transformFilterValueForColumn = (column, value) => {
     if (!value || column?.kind !== "number") {
       return value;
@@ -535,29 +1210,100 @@ function RowaKitTable({
   const handleClearAllFilters = () => {
     setFilters({});
   };
-  const isLoading = dataState.state === "loading";
-  const isError = dataState.state === "error";
-  const isEmpty = dataState.state === "empty";
   const totalPages = Math.ceil(dataState.total / query.pageSize);
   const canGoPrevious = query.page > 1 && !isLoading;
   const canGoNext = query.page < totalPages && !isLoading;
+  const tableColumnCount = columns.length + (enableRowSelection ? 1 : 0);
   const hasActiveFilters = enableFilters && Object.values(filters).some((v) => v !== void 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+  const containerClass = [
+    "rowakit-table",
+    enableColumnResizing ? "rowakit-layout-fixed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+    enableRowSelection && bulkActions && bulkActions.length > 0 && selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      BulkActionBar,
+      {
+        selectedCount: selectedKeys.length,
+        actions: bulkActions,
+        onActionClick: (actionId) => {
+          const action = bulkActions.find((a) => a.id === actionId);
+          if (!action) return;
+          const snapshot = [...selectedKeys];
+          if (action.confirm) {
+            setBulkConfirmState({ action, selectedKeys: snapshot });
+            return;
+          }
+          action.onClick(snapshot);
+        }
+      }
+    ),
+    exporter && /* @__PURE__ */ jsxRuntime.jsx(ExportButton, { exporter, query }),
     enableSavedViews && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-saved-views-group", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      !showSaveViewForm ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          onClick: () => {
-            const name = typeof window !== "undefined" ? window.prompt("Enter view name:") : null;
-            if (name) {
-              saveCurrentView(name);
-            }
-          },
+          onClick: openSaveViewForm,
           className: "rowakit-saved-view-button",
           type: "button",
           children: "Save View"
         }
-      ),
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-save-view-form", children: overwriteConfirmName ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-save-view-confirm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          'View "',
+          overwriteConfirmName,
+          '" already exists. Overwrite?'
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: confirmOverwrite,
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Overwrite"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: cancelOverwrite,
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Cancel"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: saveViewInput,
+            onChange: onSaveViewInputChange,
+            onKeyDown: onSaveViewInputKeyDown,
+            placeholder: "Enter view name...",
+            className: "rowakit-save-view-input"
+          }
+        ),
+        saveViewError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-save-view-error", children: saveViewError }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: attemptSave,
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: cancelSaveViewForm,
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Cancel"
+          }
+        )
+      ] }) }),
       savedViews.map((view) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-saved-view-item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -600,159 +1346,143 @@ function RowaKitTable({
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("table", { ref: tableRef, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
-          const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
-          const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
-          const isResizable = enableColumnResizing && column.kind !== "actions";
-          const actualWidth = columnWidths[column.id] ?? column.width;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "th",
+        /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          enableRowSelection && /* @__PURE__ */ jsxRuntime.jsx(
+            RowSelectionHeaderCell,
             {
-              "data-col-id": column.id,
-              onClick: isSortable ? () => handleSort(String(field)) : void 0,
-              role: isSortable ? "button" : void 0,
-              tabIndex: isSortable ? 0 : void 0,
-              onKeyDown: isSortable ? (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  handleSort(String(field));
+              checked: headerChecked,
+              indeterminate: headerIndeterminate,
+              disabled: isLoading || pageRowKeys.length === 0,
+              onChange: (checked) => {
+                if (checked) {
+                  setSelectedKeys(selectAll(pageRowKeys));
+                } else {
+                  setSelectedKeys(clearSelection());
                 }
-              } : void 0,
-              "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
-              style: {
-                width: actualWidth ? `${actualWidth}px` : void 0,
-                textAlign: column.align,
-                position: isResizable ? "relative" : void 0
-              },
-              className: column.truncate && !isResizable ? "rowakit-cell-truncate" : void 0,
-              children: [
-                getHeaderLabel(column),
-                isSortable && getSortIndicator(String(field)),
-                isResizable && /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "rowakit-column-resize-handle",
-                    onMouseDown: (e) => startColumnResize(e, column.id),
-                    onDoubleClick: () => handleColumnResizeDoubleClick(column.id),
-                    title: "Drag to resize | Double-click to auto-fit content"
-                  }
-                )
-              ]
-            },
-            column.id
-          );
-        }) }),
-        enableFilters && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rowakit-table-filter-row", children: columns.map((column) => {
-          const field = column.kind === "actions" || column.kind === "custom" ? "" : String(column.field);
-          const canFilter = field && column.kind !== "actions";
-          if (!canFilter) {
-            return /* @__PURE__ */ jsxRuntime.jsx("th", {}, column.id);
-          }
-          const filterValue = filters[field];
-          if (column.kind === "badge") {
-            const options = column.map ? Object.keys(column.map) : [];
-            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "select",
-              {
-                className: "rowakit-filter-select",
-                value: filterValue?.op === "equals" ? String(filterValue.value ?? "") : "",
-                onChange: (e) => {
-                  const value = e.target.value;
-                  if (value === "") {
-                    handleClearFilter(field);
-                  } else {
-                    handleFilterChange(field, { op: "equals", value });
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
-                  options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
-                ]
               }
-            ) }, column.id);
-          }
-          if (column.kind === "boolean") {
-            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "select",
+            }
+          ),
+          columns.map((column) => {
+            const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
+            const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
+            const isResizable = enableColumnResizing && column.kind !== "actions";
+            const actualWidth = columnWidths[column.id] ?? column.width;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "th",
               {
-                className: "rowakit-filter-select",
-                value: filterValue?.op === "equals" && typeof filterValue.value === "boolean" ? String(filterValue.value) : "",
-                onChange: (e) => {
-                  const value = e.target.value;
-                  if (value === "") {
-                    handleClearFilter(field);
-                  } else {
-                    handleFilterChange(field, { op: "equals", value: value === "true" });
+                "data-col-id": column.id,
+                onClick: isSortable ? (e) => {
+                  if (isResizingRef.current) return;
+                  if (Date.now() - lastResizeEndTsRef.current < 150) return;
+                  const isMultiSort = e.ctrlKey || e.metaKey;
+                  handleSort(String(field), isMultiSort);
+                } : void 0,
+                role: isSortable ? "button" : void 0,
+                tabIndex: isSortable ? 0 : void 0,
+                onKeyDown: isSortable ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    const isMultiSort = e.shiftKey;
+                    handleSort(String(field), isMultiSort);
                   }
+                } : void 0,
+                "aria-sort": isSortable && (query.sorts?.find((s) => s.field === String(field))?.priority === 0 || query.sort?.field === String(field)) ? (query.sorts?.find((s) => s.field === String(field))?.direction ?? query.sort?.direction) === "asc" ? "ascending" : "descending" : void 0,
+                style: {
+                  width: actualWidth != null ? `${actualWidth}px` : void 0,
+                  textAlign: column.align,
+                  position: isResizable ? "relative" : void 0
                 },
+                className: [
+                  column.truncate ? "rowakit-cell-truncate" : "",
+                  resizingColIdRef.current === column.id ? "resizing" : ""
+                  // PRD-01
+                ].filter(Boolean).join(" ") || void 0,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "True" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "False" })
+                  getHeaderLabel(column),
+                  isSortable && getSortIndicator(String(field)),
+                  isResizable && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "rowakit-column-resize-handle",
+                      onPointerDown: (e) => startColumnResize(e, column.id),
+                      onDoubleClick: (e) => handleColumnResizeDoubleClick(e, column.id),
+                      title: "Drag to resize | Double-click to auto-fit content"
+                    }
+                  )
                 ]
-              }
-            ) }, column.id);
-          }
-          if (column.kind === "date") {
-            const fromValue = filterValue?.op === "range" ? filterValue.value.from ?? "" : "";
-            const toValue = filterValue?.op === "range" ? filterValue.value.to ?? "" : "";
-            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-date-range", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+              },
+              column.id
+            );
+          })
+        ] }),
+        enableFilters && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "rowakit-table-filter-row", children: [
+          enableRowSelection && /* @__PURE__ */ jsxRuntime.jsx("th", {}),
+          columns.map((column) => {
+            const field = column.kind === "actions" || column.kind === "custom" ? "" : String(column.field);
+            const canFilter = field && column.kind !== "actions";
+            if (!canFilter) {
+              return /* @__PURE__ */ jsxRuntime.jsx("th", {}, column.id);
+            }
+            const filterValue = filters[field];
+            if (column.kind === "badge") {
+              const options = column.map ? Object.keys(column.map) : [];
+              return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
                 {
-                  type: "date",
-                  className: "rowakit-filter-input",
-                  placeholder: "From",
-                  value: fromValue,
+                  className: "rowakit-filter-select",
+                  value: filterValue?.op === "equals" ? String(filterValue.value ?? "") : "",
                   onChange: (e) => {
-                    const from = e.target.value || void 0;
-                    const to = toValue || void 0;
-                    if (!from && !to) {
+                    const value = e.target.value;
+                    if (value === "") {
                       handleClearFilter(field);
                     } else {
-                      handleFilterChange(field, { op: "range", value: { from, to } });
+                      handleFilterChange(field, { op: "equals", value });
                     }
-                  }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                    options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+                  ]
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+              ) }, column.id);
+            }
+            if (column.kind === "boolean") {
+              return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
                 {
-                  type: "date",
-                  className: "rowakit-filter-input",
-                  placeholder: "To",
-                  value: toValue,
+                  className: "rowakit-filter-select",
+                  value: filterValue?.op === "equals" && typeof filterValue.value === "boolean" ? String(filterValue.value) : "",
                   onChange: (e) => {
-                    const to = e.target.value || void 0;
-                    const from = fromValue || void 0;
-                    if (!from && !to) {
+                    const value = e.target.value;
+                    if (value === "") {
                       handleClearFilter(field);
                     } else {
-                      handleFilterChange(field, { op: "range", value: { from, to } });
+                      handleFilterChange(field, { op: "equals", value: value === "true" });
                     }
-                  }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "True" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "False" })
+                  ]
                 }
-              )
-            ] }) }, column.id);
-          }
-          const isNumberColumn = column.kind === "number";
-          if (isNumberColumn) {
-            const fromValue = filterValue?.op === "range" ? String(filterValue.value.from ?? "") : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "";
-            const toValue = filterValue?.op === "range" ? String(filterValue.value.to ?? "") : "";
-            const showRangeUI = !filterValue || filterValue.op === "range";
-            if (showRangeUI) {
-              return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-number-range", children: [
+              ) }, column.id);
+            }
+            if (column.kind === "date") {
+              const fromValue = filterValue?.op === "range" ? filterValue.value.from ?? "" : "";
+              const toValue = filterValue?.op === "range" ? filterValue.value.to ?? "" : "";
+              return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-date-range", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
-                    type: "number",
+                    type: "date",
                     className: "rowakit-filter-input",
-                    placeholder: "Min",
+                    placeholder: "From",
                     value: fromValue,
                     onChange: (e) => {
-                      const from = e.target.value ? Number(e.target.value) : void 0;
-                      const to = toValue ? Number(toValue) : void 0;
-                      if (from === void 0 && to === void 0) {
+                      const from = e.target.value || void 0;
+                      const to = toValue || void 0;
+                      if (!from && !to) {
                         handleClearFilter(field);
                       } else {
                         handleFilterChange(field, { op: "range", value: { from, to } });
@@ -763,14 +1493,14 @@ function RowaKitTable({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
-                    type: "number",
+                    type: "date",
                     className: "rowakit-filter-input",
-                    placeholder: "Max",
+                    placeholder: "To",
                     value: toValue,
                     onChange: (e) => {
-                      const to = e.target.value ? Number(e.target.value) : void 0;
-                      const from = fromValue ? Number(fromValue) : void 0;
-                      if (from === void 0 && to === void 0) {
+                      const to = e.target.value || void 0;
+                      const from = fromValue || void 0;
+                      if (!from && !to) {
                         handleClearFilter(field);
                       } else {
                         handleFilterChange(field, { op: "range", value: { from, to } });
@@ -780,39 +1510,85 @@ function RowaKitTable({
                 )
               ] }) }, column.id);
             }
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: isNumberColumn ? "number" : "text",
-              className: "rowakit-filter-input",
-              placeholder: `Filter ${getHeaderLabel(column)}...`,
-              value: filterValue?.op === "contains" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "string" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "",
-              onChange: (e) => {
-                const rawValue = e.target.value;
-                if (rawValue === "") {
-                  handleClearFilter(field);
-                } else if (isNumberColumn) {
-                  const numValue = Number(rawValue);
-                  if (!isNaN(numValue)) {
-                    handleFilterChange(field, { op: "equals", value: numValue });
-                  } else {
+            const isNumberColumn = column.kind === "number";
+            if (isNumberColumn) {
+              const fromValue = filterValue?.op === "range" ? String(filterValue.value.from ?? "") : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "";
+              const toValue = filterValue?.op === "range" ? String(filterValue.value.to ?? "") : "";
+              const showRangeUI = !filterValue || filterValue.op === "range";
+              if (showRangeUI) {
+                return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-number-range", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "number",
+                      className: "rowakit-filter-input",
+                      placeholder: "Min",
+                      value: fromValue,
+                      onChange: (e) => {
+                        const from = e.target.value ? Number(e.target.value) : void 0;
+                        const to = toValue ? Number(toValue) : void 0;
+                        if (from === void 0 && to === void 0) {
+                          handleClearFilter(field);
+                        } else {
+                          handleFilterChange(field, { op: "range", value: { from, to } });
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "number",
+                      className: "rowakit-filter-input",
+                      placeholder: "Max",
+                      value: toValue,
+                      onChange: (e) => {
+                        const to = e.target.value ? Number(e.target.value) : void 0;
+                        const from = fromValue ? Number(fromValue) : void 0;
+                        if (from === void 0 && to === void 0) {
+                          handleClearFilter(field);
+                        } else {
+                          handleFilterChange(field, { op: "range", value: { from, to } });
+                        }
+                      }
+                    }
+                  )
+                ] }) }, column.id);
+              }
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: isNumberColumn ? "number" : "text",
+                className: "rowakit-filter-input",
+                placeholder: `Filter ${getHeaderLabel(column)}...`,
+                value: filterValue?.op === "contains" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "string" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "",
+                onChange: (e) => {
+                  const rawValue = e.target.value;
+                  if (rawValue === "") {
                     handleClearFilter(field);
+                  } else if (isNumberColumn) {
+                    const numValue = Number(rawValue);
+                    if (!isNaN(numValue)) {
+                      handleFilterChange(field, { op: "equals", value: numValue });
+                    } else {
+                      handleClearFilter(field);
+                    }
+                  } else {
+                    handleFilterChange(field, { op: "contains", value: rawValue });
                   }
-                } else {
-                  handleFilterChange(field, { op: "contains", value: rawValue });
                 }
               }
-            }
-          ) }, column.id);
-        }) })
+            ) }, column.id);
+          })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: columns.length, className: "rowakit-table-loading", children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: tableColumnCount, className: "rowakit-table-loading", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-loading-spinner" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." })
         ] }) }),
-        isError && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: columns.length, className: "rowakit-table-error", children: [
+        isError && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: tableColumnCount, className: "rowakit-table-error", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-error-message", children: dataState.error ?? "An error occurred" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -824,29 +1600,42 @@ function RowaKitTable({
             }
           )
         ] }) }),
-        isEmpty && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "rowakit-table-empty", children: "No data" }) }),
+        isEmpty && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: tableColumnCount, className: "rowakit-table-empty", children: "No data" }) }),
         dataState.state === "success" && dataState.items.map((row) => {
           const key = getRowKey(row, rowKey);
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
-            const cellClass = [
-              column.kind === "number" ? "rowakit-cell-number" : "",
-              column.truncate ? "rowakit-cell-truncate" : ""
-            ].filter(Boolean).join(" ") || void 0;
-            const actualWidth = columnWidths[column.id];
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
+          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            enableRowSelection && /* @__PURE__ */ jsxRuntime.jsx(
+              RowSelectionCell,
               {
-                "data-col-id": column.id,
-                className: cellClass,
-                style: {
-                  width: actualWidth ? `${actualWidth}px` : void 0,
-                  textAlign: column.align || (column.kind === "number" ? "right" : void 0)
+                rowKey: key,
+                disabled: isLoading,
+                checked: selectedKeys.includes(key),
+                onChange: () => {
+                  setSelectedKeys((prev) => toggleSelectionKey(prev, key));
+                }
+              }
+            ),
+            columns.map((column) => {
+              const cellClass = [
+                column.kind === "number" ? "rowakit-cell-number" : "",
+                column.truncate ? "rowakit-cell-truncate" : ""
+              ].filter(Boolean).join(" ") || void 0;
+              const actualWidth = columnWidths[column.id] ?? column.width;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  "data-col-id": column.id,
+                  className: cellClass,
+                  style: {
+                    width: actualWidth != null ? `${actualWidth}px` : void 0,
+                    textAlign: column.align || (column.kind === "number" ? "right" : void 0)
+                  },
+                  children: renderCell(column, row, isLoading, setConfirmState)
                 },
-                children: renderCell(column, row, isLoading, setConfirmState)
-              },
-              column.id
-            );
-          }) }, key);
+                column.id
+              );
+            })
+          ] }, key);
         })
       ] })
     ] }),
@@ -901,6 +1690,7 @@ function RowaKitTable({
     confirmState && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: confirmModalRef,
         className: "rowakit-modal-backdrop",
         onClick: () => setConfirmState(null),
         role: "dialog",
@@ -938,13 +1728,51 @@ function RowaKitTable({
           ] })
         ] })
       }
+    ),
+    bulkConfirmState && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: bulkConfirmModalRef,
+        className: "rowakit-modal-backdrop",
+        onClick: () => setBulkConfirmState(null),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "bulk-confirm-dialog-title",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-modal", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "bulk-confirm-dialog-title", className: "rowakit-modal-title", children: bulkConfirmState.action.confirm?.title ?? "Confirm Action" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rowakit-modal-content", children: bulkConfirmState.action.confirm?.description ?? "Are you sure you want to perform this action? This action cannot be undone." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-modal-actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setBulkConfirmState(null),
+                className: "rowakit-button rowakit-button-secondary",
+                type: "button",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  bulkConfirmState.action.onClick(bulkConfirmState.selectedKeys);
+                  setBulkConfirmState(null);
+                },
+                className: "rowakit-button rowakit-button-danger",
+                type: "button",
+                children: "Confirm"
+              }
+            )
+          ] })
+        ] })
+      }
     )
   ] });
 }
 var SmartTable = RowaKitTable;
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.5.0" ;
 
 exports.RowaKitTable = RowaKitTable;
 exports.SmartTable = SmartTable;