@rowakit/table 0.2.2 → 0.3.0

package/dist/index.js

@@ -167,7 +167,11 @@ function renderCell(column, row, isLoading, setConfirmState) {
       return numValue.toLocaleString();
     }
     case "actions": {
-      return /* @__PURE__ */ jsx("div", { className: "rowakit-table-actions", children: column.actions.map((action) => {
+      const columnWithActions = column;
+      if (!Array.isArray(columnWithActions.actions)) {
+        return null;
+      }
+      return /* @__PURE__ */ 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) {
@@ -211,7 +215,10 @@ function RowaKitTable({
   pageSizeOptions = [10, 20, 50],
   rowKey,
   className = "",
-  enableFilters = false
+  enableFilters = false,
+  enableColumnResizing = false,
+  syncToUrl = false,
+  enableSavedViews = false
 }) {
   const [dataState, setDataState] = useState({
     state: "idle",
@@ -223,8 +230,64 @@ function RowaKitTable({
     pageSize: defaultPageSize
   });
   const [filters, setFilters] = useState({});
+  const [columnWidths, setColumnWidths] = useState({});
+  const resizeRafRef = useRef(null);
+  const resizePendingRef = useRef(null);
+  const tableRef = useRef(null);
+  const [savedViews, setSavedViews] = useState([]);
   const [confirmState, setConfirmState] = useState(null);
   const requestIdRef = useRef(0);
+  useEffect(() => {
+    if (!syncToUrl) return;
+    const params = new URLSearchParams();
+    params.set("page", String(query.page));
+    params.set("pageSize", String(query.pageSize));
+    if (query.sort) {
+      params.set("sortField", query.sort.field);
+      params.set("sortDirection", query.sort.direction);
+    }
+    if (query.filters && Object.keys(query.filters).length > 0) {
+      params.set("filters", JSON.stringify(query.filters));
+    }
+    if (enableColumnResizing && Object.keys(columnWidths).length > 0) {
+      params.set("columnWidths", JSON.stringify(columnWidths));
+    }
+    window.history.replaceState(null, "", `?${params.toString()}`);
+  }, [query, columnWidths, syncToUrl, enableColumnResizing]);
+  useEffect(() => {
+    if (!syncToUrl) return;
+    const params = new URLSearchParams(window.location.search);
+    const page = parseInt(params.get("page") ?? "1", 10);
+    const pageSize = parseInt(params.get("pageSize") ?? String(defaultPageSize), 10);
+    const sortField = params.get("sortField");
+    const sortDirection = params.get("sortDirection");
+    const filtersStr = params.get("filters");
+    const columnWidthsStr = params.get("columnWidths");
+    const newQuery = {
+      page: Math.max(1, page),
+      pageSize: Math.max(1, pageSize)
+    };
+    if (sortField && sortDirection) {
+      newQuery.sort = { field: sortField, direction: sortDirection };
+    }
+    if (filtersStr) {
+      try {
+        const parsedFilters = JSON.parse(filtersStr);
+        if (parsedFilters && typeof parsedFilters === "object") {
+          setFilters(parsedFilters);
+          newQuery.filters = parsedFilters;
+        }
+      } catch {
+      }
+    }
+    if (enableColumnResizing && columnWidthsStr) {
+      try {
+        setColumnWidths(JSON.parse(columnWidthsStr));
+      } catch {
+      }
+    }
+    setQuery(newQuery);
+  }, [syncToUrl, defaultPageSize, enableColumnResizing]);
   useEffect(() => {
     if (!enableFilters) return;
     const activeFilters = {};
@@ -310,10 +373,154 @@ 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);
+    }
+    setColumnWidths((prev) => ({
+      ...prev,
+      [columnId]: finalWidth
+    }));
+  };
+  const startColumnResize = (e, columnId) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const th = e.currentTarget.parentElement;
+    let startWidth = columnWidths[columnId] ?? th.offsetWidth;
+    const MIN_DRAG_WIDTH = 80;
+    if (startWidth < MIN_DRAG_WIDTH) {
+      const nextTh = th.nextElementSibling;
+      if (nextTh && nextTh.offsetWidth >= 50) {
+        startWidth = nextTh.offsetWidth;
+      } else {
+        startWidth = 100;
+      }
+    }
+    document.body.classList.add("rowakit-resizing");
+    const handleMouseMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startX;
+      const newWidth = startWidth + delta;
+      scheduleColumnWidthUpdate(columnId, newWidth);
+    };
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.classList.remove("rowakit-resizing");
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleColumnResizeDoubleClick = (columnId) => {
+    const tableEl = tableRef.current;
+    if (!tableEl) return;
+    const th = tableEl.querySelector(`th[data-col-id="${columnId}"]`);
+    if (!th) return;
+    const tds = Array.from(tableEl.querySelectorAll(`td[data-col-id="${columnId}"]`));
+    const headerW = th.scrollWidth;
+    const cellsMaxW = tds.reduce((max, td) => Math.max(max, td.scrollWidth), 0);
+    const padding = 24;
+    const raw = Math.max(headerW, cellsMaxW) + padding;
+    const minW = columns.find((c) => c.id === columnId)?.minWidth ?? 80;
+    const maxW = columns.find((c) => c.id === columnId)?.maxWidth ?? 600;
+    const finalW = Math.max(minW, Math.min(raw, maxW));
+    setColumnWidths((prev) => ({ ...prev, [columnId]: finalW }));
+  };
+  const saveCurrentView = (name) => {
+    const viewState = {
+      page: query.page,
+      pageSize: query.pageSize,
+      sort: query.sort,
+      filters: query.filters,
+      columnWidths: enableColumnResizing ? columnWidths : void 0
+    };
+    setSavedViews((prev) => {
+      const filtered = prev.filter((v) => v.name !== name);
+      return [...filtered, { name, state: viewState }];
+    });
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        localStorage.setItem(`rowakit-view-${name}`, JSON.stringify(viewState));
+      } catch {
+      }
+    }
+  };
+  const loadSavedView = (name) => {
+    const view = savedViews.find((v) => v.name === name);
+    if (!view) return;
+    const { state } = view;
+    setQuery({
+      page: state.page,
+      pageSize: state.pageSize,
+      sort: state.sort,
+      filters: state.filters
+    });
+    setFilters(state.filters ?? {});
+    if (state.columnWidths && enableColumnResizing) {
+      setColumnWidths(state.columnWidths);
+    }
+  };
+  const deleteSavedView = (name) => {
+    setSavedViews((prev) => prev.filter((v) => v.name !== name));
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        localStorage.removeItem(`rowakit-view-${name}`);
+      } catch {
+      }
+    }
+  };
+  const resetTableState = () => {
+    setQuery({
+      page: 1,
+      pageSize: defaultPageSize
+    });
+    setFilters({});
+    setColumnWidths({});
+  };
+  const transformFilterValueForColumn = (column, value) => {
+    if (!value || column?.kind !== "number") {
+      return value;
+    }
+    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) => {
@@ -334,6 +541,52 @@ function RowaKitTable({
   const canGoNext = query.page < totalPages && !isLoading;
   const hasActiveFilters = enableFilters && Object.values(filters).some((v) => v !== void 0);
   return /* @__PURE__ */ jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+    enableSavedViews && /* @__PURE__ */ jsxs("div", { className: "rowakit-saved-views-group", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            const name = typeof window !== "undefined" ? window.prompt("Enter view name:") : null;
+            if (name) {
+              saveCurrentView(name);
+            }
+          },
+          className: "rowakit-saved-view-button",
+          type: "button",
+          children: "Save View"
+        }
+      ),
+      savedViews.map((view) => /* @__PURE__ */ jsxs("div", { className: "rowakit-saved-view-item", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => loadSavedView(view.name),
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: view.name
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(
+        "button",
+        {
+          onClick: resetTableState,
+          className: "rowakit-saved-view-button",
+          type: "button",
+          children: "Reset"
+        }
+      )
+    ] }),
     hasActiveFilters && /* @__PURE__ */ jsx("div", { className: "rowakit-table-filter-controls", children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -343,14 +596,17 @@ function RowaKitTable({
         children: "Clear all filters"
       }
     ) }),
-    /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsxs("table", { ref: tableRef, children: [
       /* @__PURE__ */ jsxs("thead", { children: [
         /* @__PURE__ */ 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__ */ jsxs(
             "th",
             {
+              "data-col-id": column.id,
               onClick: isSortable ? () => handleSort(String(field)) : void 0,
               role: isSortable ? "button" : void 0,
               tabIndex: isSortable ? 0 : void 0,
@@ -362,13 +618,23 @@ 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 ? `${actualWidth}px` : void 0,
+                textAlign: column.align,
+                position: isResizable ? "relative" : void 0
               },
-              className: column.truncate ? "rowakit-cell-truncate" : void 0,
+              className: column.truncate && !isResizable ? "rowakit-cell-truncate" : void 0,
               children: [
                 getHeaderLabel(column),
-                isSortable && getSortIndicator(String(field))
+                isSortable && getSortIndicator(String(field)),
+                isResizable && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rowakit-column-resize-handle",
+                    onMouseDown: (e) => startColumnResize(e, column.id),
+                    onDoubleClick: () => handleColumnResizeDoubleClick(column.id),
+                    title: "Drag to resize | Double-click to auto-fit content"
+                  }
+                )
               ]
             },
             column.id
@@ -468,6 +734,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__ */ jsx("th", { children: /* @__PURE__ */ jsxs("div", { className: "rowakit-filter-number-range", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ jsx("th", { children: /* @__PURE__ */ jsx(
             "input",
             {
@@ -519,12 +830,14 @@ function RowaKitTable({
               column.kind === "number" ? "rowakit-cell-number" : "",
               column.truncate ? "rowakit-cell-truncate" : ""
             ].filter(Boolean).join(" ") || void 0;
+            const actualWidth = columnWidths[column.id];
             return /* @__PURE__ */ jsx(
               "td",
               {
+                "data-col-id": column.id,
                 className: cellClass,
                 style: {
-                  width: column.width ? `${column.width}px` : void 0,
+                  width: actualWidth ? `${actualWidth}px` : void 0,
                   textAlign: column.align || (column.kind === "number" ? "right" : void 0)
                 },
                 children: renderCell(column, row, isLoading, setConfirmState)