@rowakit/table 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -105,20 +105,178 @@ var col = {
   actions,
   custom
 };
-function getRowKey(row, rowKey) {
-  if (typeof rowKey === "function") {
-    return rowKey(row);
-  }
-  if (rowKey) {
-    return String(row[rowKey]);
-  }
-  if (row && typeof row === "object" && "id" in row) {
-    return String(row.id);
-  }
-  return String(row);
+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 getHeaderLabel(column) {
-  return column.header ?? column.id;
+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();
@@ -154,10 +312,7 @@ function getSavedViewsIndex() {
       const key = localStorage.key(i);
       if (key?.startsWith("rowakit-view-")) {
         const name = key.substring("rowakit-view-".length);
-        rebuilt.push({
-          name,
-          updatedAt: Date.now()
-        });
+        rebuilt.push({ name, updatedAt: Date.now() });
       }
     }
   } catch {
@@ -184,16 +339,206 @@ function loadSavedViewsFromStorage() {
       const viewStr = localStorage.getItem(`rowakit-view-${entry.name}`);
       if (viewStr) {
         const state = JSON.parse(viewStr);
-        views.push({
-          name: entry.name,
-          state
-        });
+        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;
@@ -214,10 +559,22 @@ function parseUrlState(params, defaultPageSize, pageSizeOptions) {
     }
   }
   const result = { page, pageSize };
-  const sortField = params.get("sortField");
-  const sortDir = params.get("sortDirection");
-  if (sortField && (sortDir === "asc" || sortDir === "desc")) {
-    result.sort = { field: sortField, direction: sortDir };
+  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) {
@@ -255,7 +612,9 @@ function serializeUrlState(query, filters, columnWidths, defaultPageSize, enable
   if (query.pageSize !== defaultPageSize) {
     params.set("pageSize", String(query.pageSize));
   }
-  if (query.sort) {
+  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);
   }
@@ -272,140 +631,22 @@ function serializeUrlState(query, filters, columnWidths, defaultPageSize, enable
   }
   return params.toString();
 }
-function renderCell(column, row, isLoading, setConfirmState) {
-  switch (column.kind) {
-    case "text": {
-      const value = row[column.field];
-      if (column.format) {
-        return column.format(value);
-      }
-      return String(value ?? "");
-    }
-    case "date": {
-      const value = row[column.field];
-      if (column.format) {
-        return column.format(value);
-      }
-      if (value instanceof Date) {
-        return value.toLocaleDateString();
-      }
-      if (typeof value === "string" || typeof value === "number") {
-        return new Date(value).toLocaleDateString();
-      }
-      return "";
-    }
-    case "boolean": {
-      const value = row[column.field];
-      if (column.format) {
-        return column.format(Boolean(value));
-      }
-      return value ? "Yes" : "No";
-    }
-    case "badge": {
-      const value = row[column.field];
-      const valueStr = String(value ?? "");
-      const mapped = column.map?.[valueStr];
-      const label = mapped?.label ?? valueStr;
-      const tone = mapped?.tone ?? "neutral";
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rowakit-badge rowakit-badge-${tone}`, children: label });
-    }
-    case "number": {
-      const value = row[column.field];
-      const numValue = Number(value ?? 0);
-      if (column.format) {
-        if (typeof column.format === "function") {
-          return column.format(numValue, row);
-        }
-        return new Intl.NumberFormat(void 0, column.format).format(numValue);
-      }
-      return numValue.toLocaleString();
-    }
-    case "actions": {
-      const columnWithActions = column;
-      if (!Array.isArray(columnWithActions.actions)) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-actions", children: columnWithActions.actions.map((action) => {
-        const isDisabled = isLoading || action.disabled === true || typeof action.disabled === "function" && action.disabled(row);
-        const handleClick = () => {
-          if (isDisabled || action.loading) {
-            return;
-          }
-          if (action.confirm) {
-            setConfirmState({ action, row });
-          } else {
-            void action.onClick(row);
-          }
-        };
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: handleClick,
-            disabled: isDisabled || action.loading,
-            type: "button",
-            className: "rowakit-button rowakit-button-secondary",
-            children: [
-              action.icon && typeof action.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.icon }) : action.icon,
-              action.label
-            ]
-          },
-          action.id
-        );
-      }) });
-    }
-    case "custom": {
-      return column.render(row);
-    }
-    default: {
-      const _exhaustive = column;
-      return _exhaustive;
-    }
-  }
-}
-function RowaKitTable({
-  fetcher,
+function useUrlSync({
+  syncToUrl,
+  enableColumnResizing,
+  defaultPageSize,
+  pageSizeOptions,
   columns,
-  defaultPageSize = 20,
-  pageSizeOptions = [10, 20, 50],
-  rowKey,
-  className = "",
-  enableFilters = false,
-  enableColumnResizing = false,
-  syncToUrl = false,
-  enableSavedViews = false
+  query,
+  setQuery,
+  filters,
+  setFilters,
+  columnWidths,
+  setColumnWidths
 }) {
-  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 isResizingRef = react.useRef(false);
-  const lastResizeEndTsRef = react.useRef(0);
-  const resizingColIdRef = react.useRef(null);
   const didHydrateUrlRef = react.useRef(false);
   const didSkipInitialUrlSyncRef = react.useRef(false);
   const urlSyncDebounceRef = react.useRef(null);
-  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 (!enableSavedViews) return;
-    const views = loadSavedViewsFromStorage();
-    setSavedViews(views);
-  }, [enableSavedViews]);
-  const [confirmState, setConfirmState] = react.useState(null);
-  const requestIdRef = react.useRef(0);
   react.useEffect(() => {
     if (!syncToUrl) {
       didSkipInitialUrlSyncRef.current = false;
@@ -422,7 +663,14 @@ function RowaKitTable({
     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]);
+  }, [
+    query,
+    filters,
+    syncToUrl,
+    enableColumnResizing,
+    defaultPageSize,
+    columnWidths
+  ]);
   react.useEffect(() => {
     if (!syncToUrl || !enableColumnResizing) return;
     if (!didSkipInitialUrlSyncRef.current) return;
@@ -441,7 +689,14 @@ function RowaKitTable({
         urlSyncDebounceRef.current = null;
       }
     };
-  }, [columnWidths, syncToUrl, enableColumnResizing, query, filters, defaultPageSize]);
+  }, [
+    columnWidths,
+    syncToUrl,
+    enableColumnResizing,
+    query,
+    filters,
+    defaultPageSize
+  ]);
   react.useEffect(() => {
     if (!syncToUrl) {
       didHydrateUrlRef.current = false;
@@ -455,6 +710,7 @@ function RowaKitTable({
       page: parsed.page,
       pageSize: parsed.pageSize,
       sort: parsed.sort,
+      sorts: parsed.sorts,
       filters: parsed.filters
     });
     if (parsed.filters) {
@@ -477,256 +733,438 @@ function RowaKitTable({
       }
       setColumnWidths(clamped);
     }
-  }, [syncToUrl, defaultPageSize, enableColumnResizing, pageSizeOptions, columns]);
+  }, [
+    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(() => {
-    if (!enableFilters) return;
-    const activeFilters = {};
-    let hasFilters = false;
-    for (const [field, value] of Object.entries(filters)) {
-      if (value !== void 0) {
-        activeFilters[field] = value;
-        hasFilters = true;
-      }
+    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 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) {
+    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 (result.items.length === 0) {
-        setDataState({
-          state: "empty",
-          items: [],
-          total: result.total
-        });
-      } else {
-        setDataState({
-          state: "success",
-          items: result.items,
-          total: result.total
-        });
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          if (activeEl === firstEl && lastEl) {
+            e.preventDefault();
+            lastEl.focus();
+          }
+        } else {
+          if (activeEl === lastEl && firstEl) {
+            e.preventDefault();
+            firstEl.focus();
+          }
+        }
       }
-    }).catch((error) => {
-      if (currentRequestId !== requestIdRef.current) {
+    };
+    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;
       }
-      setDataState({
-        state: "error",
-        items: [],
-        total: 0,
-        error: error instanceof Error ? error.message : "Failed to load data"
-      });
-    });
-  }, [fetcher, query]);
-  const handleRetry = () => {
-    setQuery({ ...query });
-  };
-  const handlePreviousPage = () => {
-    if (query.page > 1) {
-      setQuery((prev) => ({ ...prev, page: prev.page - 1 }));
+      openUrl(result.url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Export failed");
+    } finally {
+      setIsExporting(false);
     }
   };
-  const handleNextPage = () => {
-    const totalPages2 = Math.ceil(dataState.total / query.pageSize);
-    if (query.page < totalPages2) {
-      setQuery((prev) => ({ ...prev, page: prev.page + 1 }));
+  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);
+  }
+  if (rowKey) {
+    return String(row[rowKey]);
+  }
+  if (row && typeof row === "object" && "id" in row) {
+    return String(row.id);
+  }
+  return String(row);
+}
+function getHeaderLabel(column) {
+  return column.header ?? column.id;
+}
+function renderCell(column, row, isLoading, setConfirmState) {
+  switch (column.kind) {
+    case "text": {
+      const value = row[column.field];
+      if (column.format) {
+        return column.format(value);
+      }
+      return String(value ?? "");
     }
-  };
-  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 };
+    case "date": {
+      const value = row[column.field];
+      if (column.format) {
+        return column.format(value);
       }
-      if (prev.sort.direction === "asc") {
-        return { ...prev, sort: { field, direction: "desc" }, page: 1 };
+      if (value instanceof Date) {
+        return value.toLocaleDateString();
+      }
+      if (typeof value === "string" || typeof value === "number") {
+        return new Date(value).toLocaleDateString();
       }
-      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);
-    }
-    if (columnWidths[columnId] === finalWidth) {
-      return;
+    case "boolean": {
+      const value = row[column.field];
+      if (column.format) {
+        return column.format(Boolean(value));
+      }
+      return value ? "Yes" : "No";
     }
-    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;
+    case "badge": {
+      const value = row[column.field];
+      const valueStr = String(value ?? "");
+      const mapped = column.map?.[valueStr];
+      const label = mapped?.label ?? valueStr;
+      const tone = mapped?.tone ?? "neutral";
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rowakit-badge rowakit-badge-${tone}`, children: label });
     }
-    if (e.pointerType === "mouse" && e.buttons !== 1) {
-      return;
+    case "number": {
+      const value = row[column.field];
+      const numValue = Number(value ?? 0);
+      if (column.format) {
+        if (typeof column.format === "function") {
+          return column.format(numValue, row);
+        }
+        return new Intl.NumberFormat(void 0, column.format).format(numValue);
+      }
+      return numValue.toLocaleString();
     }
-    const target = e.currentTarget;
-    const pointerId = e.pointerId;
-    try {
-      target.setPointerCapture(pointerId);
-    } catch {
+    case "actions": {
+      const columnWithActions = column;
+      if (!Array.isArray(columnWithActions.actions)) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-actions", children: columnWithActions.actions.map((action) => {
+        const isDisabled = isLoading || action.disabled === true || typeof action.disabled === "function" && action.disabled(row);
+        const handleClick = () => {
+          if (isDisabled || action.loading) {
+            return;
+          }
+          if (action.confirm) {
+            setConfirmState({ action, row });
+          } else {
+            void action.onClick(row);
+          }
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleClick,
+            disabled: isDisabled || action.loading,
+            type: "button",
+            className: "rowakit-button rowakit-button-secondary",
+            children: [
+              action.icon && typeof action.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.icon }) : action.icon,
+              action.label
+            ]
+          },
+          action.id
+        );
+      }) });
     }
-    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;
-      }
+    case "custom": {
+      return column.render(row);
     }
-    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);
-  };
-  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));
-        const index = getSavedViewsIndex();
-        const filtered = index.filter((v) => v.name !== name);
-        filtered.push({ name, updatedAt: Date.now() });
-        setSavedViewsIndex(filtered);
-      } catch {
+    default: {
+      const _exhaustive = column;
+      return _exhaustive;
+    }
+  }
+}
+function RowaKitTable({
+  fetcher,
+  columns,
+  defaultPageSize = 20,
+  pageSizeOptions = [10, 20, 50],
+  rowKey,
+  className = "",
+  enableFilters = false,
+  enableColumnResizing = false,
+  syncToUrl = false,
+  enableSavedViews = false,
+  enableRowSelection = false,
+  onSelectionChange,
+  bulkActions,
+  exporter
+}) {
+  const [query, setQuery] = react.useState({
+    page: 1,
+    pageSize: defaultPageSize
+  });
+  const [filters, setFilters] = react.useState({});
+  const [confirmState, setConfirmState] = react.useState(null);
+  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 (!enableRowSelection) return;
+    setSelectedKeys(clearSelection());
+  }, [enableRowSelection, query.page, dataState.items]);
+  react.useEffect(() => {
+    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 = {};
+    let hasFilters = false;
+    for (const [field, value] of Object.entries(filters)) {
+      if (value !== void 0) {
+        activeFilters[field] = value;
+        hasFilters = true;
       }
     }
-  };
-  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 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 }));
     }
   };
-  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 handleNextPage = () => {
+    const totalPages2 = Math.ceil(dataState.total / query.pageSize);
+    if (query.page < totalPages2) {
+      setQuery((prev) => ({ ...prev, page: prev.page + 1 }));
     }
   };
-  const resetTableState = () => {
-    setQuery({
-      page: 1,
-      pageSize: defaultPageSize
-    });
-    setFilters({});
-    setColumnWidths({});
+  const handlePageSizeChange = (newPageSize) => {
+    setQuery({ ...query, pageSize: newPageSize, page: 1 });
   };
   const transformFilterValueForColumn = (column, value) => {
     if (!value || column?.kind !== "number") {
@@ -772,12 +1210,10 @@ 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);
   const containerClass = [
     "rowakit-table",
@@ -785,16 +1221,29 @@ function RowaKitTable({
     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: [
       !showSaveViewForm ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          onClick: () => {
-            setShowSaveViewForm(true);
-            setSaveViewInput("");
-            setSaveViewError("");
-            setOverwriteConfirmName(null);
-          },
+          onClick: openSaveViewForm,
           className: "rowakit-saved-view-button",
           type: "button",
           children: "Save View"
@@ -808,13 +1257,7 @@ function RowaKitTable({
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => {
-              saveCurrentView(overwriteConfirmName);
-              setShowSaveViewForm(false);
-              setSaveViewInput("");
-              setSaveViewError("");
-              setOverwriteConfirmName(null);
-            },
+            onClick: confirmOverwrite,
             className: "rowakit-saved-view-button",
             type: "button",
             children: "Overwrite"
@@ -823,9 +1266,7 @@ function RowaKitTable({
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => {
-              setOverwriteConfirmName(null);
-            },
+            onClick: cancelOverwrite,
             className: "rowakit-saved-view-button",
             type: "button",
             children: "Cancel"
@@ -837,27 +1278,8 @@ function RowaKitTable({
           {
             type: "text",
             value: saveViewInput,
-            onChange: (e) => {
-              setSaveViewInput(e.target.value);
-              setSaveViewError("");
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                const validation = validateViewName(saveViewInput);
-                if (!validation.valid) {
-                  setSaveViewError(validation.error || "Invalid name");
-                  return;
-                }
-                if (savedViews.some((v) => v.name === saveViewInput.trim())) {
-                  setOverwriteConfirmName(saveViewInput.trim());
-                } else {
-                  saveCurrentView(saveViewInput.trim());
-                  setShowSaveViewForm(false);
-                  setSaveViewInput("");
-                  setSaveViewError("");
-                }
-              }
-            },
+            onChange: onSaveViewInputChange,
+            onKeyDown: onSaveViewInputKeyDown,
             placeholder: "Enter view name...",
             className: "rowakit-save-view-input"
           }
@@ -866,21 +1288,7 @@ function RowaKitTable({
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => {
-              const validation = validateViewName(saveViewInput);
-              if (!validation.valid) {
-                setSaveViewError(validation.error || "Invalid name");
-                return;
-              }
-              if (savedViews.some((v) => v.name === saveViewInput.trim())) {
-                setOverwriteConfirmName(saveViewInput.trim());
-              } else {
-                saveCurrentView(saveViewInput.trim());
-                setShowSaveViewForm(false);
-                setSaveViewInput("");
-                setSaveViewError("");
-              }
-            },
+            onClick: attemptSave,
             className: "rowakit-saved-view-button",
             type: "button",
             children: "Save"
@@ -889,11 +1297,7 @@ function RowaKitTable({
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => {
-              setShowSaveViewForm(false);
-              setSaveViewInput("");
-              setSaveViewError("");
-            },
+            onClick: cancelSaveViewForm,
             className: "rowakit-saved-view-button",
             type: "button",
             children: "Cancel"
@@ -942,167 +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 ? () => {
-                if (isResizingRef.current) return;
-                if (Date.now() - lastResizeEndTsRef.current < 150) return;
-                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 != 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: [
-                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
-          );
-        }) }),
-        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 } });
@@ -1113,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 } });
@@ -1130,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",
@@ -1174,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] ?? column.width;
-            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 != null ? `${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);
         })
       ] })
     ] }),
@@ -1251,6 +1690,7 @@ function RowaKitTable({
     confirmState && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: confirmModalRef,
         className: "rowakit-modal-backdrop",
         onClick: () => setConfirmState(null),
         role: "dialog",
@@ -1288,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.4.0";
+var VERSION = "0.5.0" ;
 
 exports.RowaKitTable = RowaKitTable;
 exports.SmartTable = SmartTable;