@rowakit/table 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -120,6 +120,158 @@ function getRowKey(row, rowKey) {
 function getHeaderLabel(column) {
   return column.header ?? column.id;
 }
+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 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 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.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 renderCell(column, row, isLoading, setConfirmState) {
   switch (column.kind) {
     case "text": {
@@ -169,7 +321,11 @@ function renderCell(column, row, isLoading, setConfirmState) {
       return numValue.toLocaleString();
     }
     case "actions": {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-actions", children: column.actions.map((action) => {
+      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) {
@@ -213,7 +369,10 @@ function RowaKitTable({
   pageSizeOptions = [10, 20, 50],
   rowKey,
   className = "",
-  enableFilters = false
+  enableFilters = false,
+  enableColumnResizing = false,
+  syncToUrl = false,
+  enableSavedViews = false
 }) {
   const [dataState, setDataState] = react.useState({
     state: "idle",
@@ -225,8 +384,100 @@ function RowaKitTable({
     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;
+      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,
+      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]);
   react.useEffect(() => {
     if (!enableFilters) return;
     const activeFilters = {};
@@ -312,10 +563,203 @@ function RowaKitTable({
     }
     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;
+    }
+    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);
+  };
+  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 {
+      }
+    }
+  };
+  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}`);
+        const index = getSavedViewsIndex();
+        const filtered = index.filter((v) => v.name !== name);
+        setSavedViewsIndex(filtered);
+      } catch {
+      }
+    }
+  };
+  const resetTableState = () => {
+    setQuery({
+      page: 1,
+      pageSize: defaultPageSize
+    });
+    setFilters({});
+    setColumnWidths({});
+  };
+  const transformFilterValueForColumn = (column, value) => {
+    if (!value || column?.kind !== "number") {
+      return value;
+    }
+    const numberColumn = column;
+    if (!numberColumn.filterTransform) {
+      return value;
+    }
+    if (value.op === "equals" && typeof value.value === "number") {
+      return {
+        ...value,
+        value: numberColumn.filterTransform(value.value)
+      };
+    }
+    if (value.op === "range" && typeof value.value === "object") {
+      const { from, to } = value.value;
+      return {
+        op: "range",
+        value: {
+          from: from !== void 0 && typeof from === "number" ? numberColumn.filterTransform(from) : from,
+          to: to !== void 0 && typeof to === "number" ? numberColumn.filterTransform(to) : to
+        }
+      };
+    }
+    return value;
+  };
   const handleFilterChange = (field, value) => {
+    const column = columns.find((c) => c.id === field);
+    const transformedValue = transformFilterValueForColumn(column, value);
     setFilters((prev) => ({
       ...prev,
-      [field]: value
+      [field]: transformedValue
     }));
   };
   const handleClearFilter = (field) => {
@@ -335,7 +779,158 @@ function RowaKitTable({
   const canGoPrevious = query.page > 1 && !isLoading;
   const canGoNext = query.page < totalPages && !isLoading;
   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: [
+    enableSavedViews && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-saved-views-group", children: [
+      !showSaveViewForm ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setShowSaveViewForm(true);
+            setSaveViewInput("");
+            setSaveViewError("");
+            setOverwriteConfirmName(null);
+          },
+          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: () => {
+              saveCurrentView(overwriteConfirmName);
+              setShowSaveViewForm(false);
+              setSaveViewInput("");
+              setSaveViewError("");
+              setOverwriteConfirmName(null);
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Overwrite"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setOverwriteConfirmName(null);
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Cancel"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            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("");
+                }
+              }
+            },
+            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: () => {
+              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("");
+              }
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setShowSaveViewForm(false);
+              setSaveViewInput("");
+              setSaveViewError("");
+            },
+            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",
+          {
+            onClick: () => loadSavedView(view.name),
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: view.name
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => deleteSavedView(view.name),
+            className: "rowakit-saved-view-button rowakit-saved-view-button-delete",
+            type: "button",
+            title: "Delete this view",
+            children: "\xD7"
+          }
+        )
+      ] }, view.name)),
+      (hasActiveFilters || query.page > 1 || query.sort) && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: resetTableState,
+          className: "rowakit-saved-view-button",
+          type: "button",
+          children: "Reset"
+        }
+      )
+    ] }),
     hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-filter-controls", children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -345,15 +940,22 @@ function RowaKitTable({
         children: "Clear all filters"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
+    /* @__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",
             {
-              onClick: isSortable ? () => handleSort(String(field)) : void 0,
+              "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) => {
@@ -364,13 +966,27 @@ function RowaKitTable({
               } : void 0,
               "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
               style: {
-                width: column.width ? `${column.width}px` : void 0,
-                textAlign: column.align
+                width: actualWidth != null ? `${actualWidth}px` : void 0,
+                textAlign: column.align,
+                position: isResizable ? "relative" : void 0
               },
-              className: column.truncate ? "rowakit-cell-truncate" : 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))
+                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
@@ -470,6 +1086,51 @@ function RowaKitTable({
             ] }) }, 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: [
+                /* @__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",
             {
@@ -521,12 +1182,14 @@ function RowaKitTable({
               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: column.width ? `${column.width}px` : void 0,
+                  width: actualWidth != null ? `${actualWidth}px` : void 0,
                   textAlign: column.align || (column.kind === "number" ? "right" : void 0)
                 },
                 children: renderCell(column, row, isLoading, setConfirmState)
@@ -631,7 +1294,7 @@ function RowaKitTable({
 var SmartTable = RowaKitTable;
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.4.0";
 
 exports.RowaKitTable = RowaKitTable;
 exports.SmartTable = SmartTable;