@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

package/dist/esm/components/Table/index.js

@@ -51,10 +51,14 @@ const TableHeader = ({
   ...props
 }) => {
   if (overflowMode === "wrap" && resizable) {
-    console.warn(`"Wrap" overflow mode doesn't work well with resizable table columns. Consider using truncation instead, please!`);
+    console.warn(
+      `"Wrap" overflow mode doesn't work well with resizable table columns. Consider using truncation instead, please!`
+    );
   }
   const isSorted = typeof sortDir === "string";
-  const isInteractive = Boolean(typeof onClick === "function" || isSortable && typeof onSort === "function");
+  const isInteractive = Boolean(
+    typeof onClick === "function" || isSortable && typeof onSort === "function"
+  );
   const resizerRef = useRef(null);
   const onHeaderClick = (e) => {
     if (typeof onClick === "function") {
@@ -83,21 +87,57 @@ const TableHeader = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsxs("th", { ...props, className: cn(headerVariants({
-    size,
-    resizable
-  }), className), children: [
-    /* @__PURE__ */ jsxs("div", { onClick: onHeaderClick, className: cn(styles["table__header-content"], isInteractive && styles["table__header-content_interactive"]), children: [
-      isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsx(SvgImage, { name: "arrow-down", size: "sm", className: cn(sortIconVariants({
-        dir: sortDir
-      })) }),
-      label,
-      isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsx(SvgImage, { name: "arrow-down", size: "sm", className: cn(sortIconVariants({
-        dir: sortDir
-      })) })
-    ] }),
-    showResizer && /* @__PURE__ */ jsx("div", { ref: resizerRef, onMouseDown: onResizeStart, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${typeof label === "string" ? label : "column"}`, tabIndex: 0, onKeyDown: onResizerKeyDown, className: cn(styles.table__resizer) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ...props,
+      className: cn(headerVariants({ size, resizable }), className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: onHeaderClick,
+            className: cn(
+              styles["table__header-content"],
+              isInteractive && styles["table__header-content_interactive"]
+            ),
+            children: [
+              isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsx(
+                SvgImage,
+                {
+                  name: "arrow-down",
+                  size: "sm",
+                  className: cn(sortIconVariants({ dir: sortDir }))
+                }
+              ),
+              label,
+              isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsx(
+                SvgImage,
+                {
+                  name: "arrow-down",
+                  size: "sm",
+                  className: cn(sortIconVariants({ dir: sortDir }))
+                }
+              )
+            ]
+          }
+        ),
+        showResizer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: resizerRef,
+            onMouseDown: onResizeStart,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": `Resize ${typeof label === "string" ? label : "column"}`,
+            tabIndex: 0,
+            onKeyDown: onResizerKeyDown,
+            className: cn(styles.table__resizer)
+          }
+        )
+      ]
+    }
+  );
 };
 const Thead = ({
   headers,
@@ -125,19 +165,60 @@ const Thead = ({
       headers.map((headerProps, index) => {
         const headerLabel = typeof headerProps.label === "string" ? headerProps.label : `__index_${index}`;
         const widthFromMap = columnWidths?.get(headerLabel);
-        return /* @__PURE__ */ jsx("col", { width: resizableColumns && widthFromMap && index < headers.length - 1 ? `${widthFromMap}px` : headerProps.width }, `header-col-${index}`);
+        return /* @__PURE__ */ jsx(
+          "col",
+          {
+            width: resizableColumns && widthFromMap && index < headers.length - 1 ? `${widthFromMap}px` : headerProps.width
+          },
+          `header-col-${index}`
+        );
       }),
       actionsList.length > 0 && /* @__PURE__ */ jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
-    /* @__PURE__ */ jsx("thead", { ref: theadRef, className: cn(styles.table__thead), children: /* @__PURE__ */ jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsx("th", { "aria-label": "Select column", className: cn(headerVariants({
-        size
-      })), children: /* @__PURE__ */ jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
-      headers.map((headerProps, index) => /* @__PURE__ */ jsx(TableHeader, { onSort: onSort(headerProps, index), size, resizable: resizableColumns, showResizer: resizableColumns && index < headers.length - 1, onResizeStart: onResizeStart?.(index), onKeyboardResize: onKeyboardResize?.(index), ...headerProps }, `table-header-${index}`)),
-      actionsList.length > 0 && /* @__PURE__ */ jsx("th", { "aria-label": "Actions", className: cn(headerVariants({
-        size
-      })) })
-    ] }) })
+    /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref: theadRef,
+        className: cn(styles.table__thead),
+        children: /* @__PURE__ */ jsxs("tr", { children: [
+          isSelectable && /* @__PURE__ */ jsx(
+            "th",
+            {
+              "aria-label": "Select column",
+              className: cn(headerVariants({ size })),
+              children: /* @__PURE__ */ jsx(
+                SelectAllCheckbox,
+                {
+                  onCheckedChange: onSelectAll,
+                  rows,
+                  selectedIds
+                }
+              )
+            }
+          ),
+          headers.map((headerProps, index) => /* @__PURE__ */ jsx(
+            TableHeader,
+            {
+              onSort: onSort(headerProps, index),
+              size,
+              resizable: resizableColumns,
+              showResizer: resizableColumns && index < headers.length - 1,
+              onResizeStart: onResizeStart?.(index),
+              onKeyboardResize: onKeyboardResize?.(index),
+              ...headerProps
+            },
+            `table-header-${index}`
+          )),
+          actionsList.length > 0 && /* @__PURE__ */ jsx(
+            "th",
+            {
+              "aria-label": "Actions",
+              className: cn(headerVariants({ size }))
+            }
+          )
+        ] })
+      }
+    )
   ] });
 };
 const rowVariants = cva(styles.table__row, {
@@ -211,43 +292,98 @@ const TableBodyRow = ({
 }) => {
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
-  const rowStyle = useMemo(() => ({
-    ...rowHeight ? {
-      "--table-row-height": rowHeight
-    } : {},
-    ...style
-  }), [rowHeight, style]);
-  return /* @__PURE__ */ jsxs("tr", { style: rowStyle, ...rowProps, className: cn(rowVariants({
-    isSelectable,
-    isActive,
-    isDisabled: isDeleted || isDisabled,
-    showActions: isDeletable || isEditable
-  }), className), children: [
-    isSelectable && /* @__PURE__ */ jsx("td", { className: cn(selectDataVariants({
-      size
-    })), children: /* @__PURE__ */ jsx(Checkbox, { checked: isIndeterminate ? "indeterminate" : isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
-    items.map(({
-      label,
-      overflowMode,
-      className: cellClassName,
-      ...cellProps
-    }, cellIndex) => /* @__PURE__ */ jsxs("td", { ...cellProps, className: cn(cellVariants({
-      size
-    }), cellClassName), children: [
-      headers[cellIndex] && /* @__PURE__ */ jsx("div", { className: cn(styles["table__mobile-header"]), children: headers[cellIndex].label }),
-      /* @__PURE__ */ jsx(Cell, { label, overflowMode: overflowMode ?? headers[cellIndex]?.overflowMode })
-    ] }, `table-cell-${cellIndex}`)),
-    actionsList.length > 0 && /* @__PURE__ */ jsx("td", { className: cn(actionsCellVariants({
-      size
-    })), children: /* @__PURE__ */ jsxs("div", { className: cn(styles.table__actions), children: [
-      actionsList.includes("editAction") && /* @__PURE__ */ jsx(IconButton, { type: "ghost", htmlType: "button", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit", className: cn(styles["table__edit-button"]) }),
-      actionsList.includes("deleteAction") && /* @__PURE__ */ jsx(IconButton, { disabled: isDisabled || !isDeletable, type: "ghost", htmlType: "button", icon: "cross", onClick: onDelete, "data-testid": "table-row-delete", className: cn(styles["table__close-button"], isDeleted && styles["table__close-button_deleted"]) })
-    ] }) })
-  ] });
+  const rowStyle = useMemo(
+    () => ({
+      ...rowHeight ? { "--table-row-height": rowHeight } : {},
+      ...style
+    }),
+    [rowHeight, style]
+  );
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      style: rowStyle,
+      ...rowProps,
+      className: cn(
+        rowVariants({
+          isSelectable,
+          isActive,
+          isDisabled: isDeleted || isDisabled,
+          showActions: isDeletable || isEditable
+        }),
+        className
+      ),
+      children: [
+        isSelectable && /* @__PURE__ */ jsx("td", { className: cn(selectDataVariants({ size })), children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isIndeterminate ? "indeterminate" : isSelected,
+            onCheckedChange: onSelect,
+            disabled: isDisabled || isDeleted
+          }
+        ) }),
+        items.map(
+          ({ label, overflowMode, className: cellClassName, ...cellProps }, cellIndex) => /* @__PURE__ */ jsxs(
+            "td",
+            {
+              ...cellProps,
+              className: cn(cellVariants({ size }), cellClassName),
+              children: [
+                headers[cellIndex] && /* @__PURE__ */ jsx("div", { className: cn(styles["table__mobile-header"]), children: headers[cellIndex].label }),
+                /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    label,
+                    overflowMode: overflowMode ?? headers[cellIndex]?.overflowMode
+                  }
+                )
+              ]
+            },
+            `table-cell-${cellIndex}`
+          )
+        ),
+        actionsList.length > 0 && /* @__PURE__ */ jsx("td", { className: cn(actionsCellVariants({ size })), children: /* @__PURE__ */ jsxs("div", { className: cn(styles.table__actions), children: [
+          actionsList.includes("editAction") && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "ghost",
+              htmlType: "button",
+              disabled: isDisabled || isDeleted || !isEditable,
+              icon: "pencil",
+              onClick: onEdit,
+              "data-testid": "table-row-edit",
+              className: cn(styles["table__edit-button"])
+            }
+          ),
+          actionsList.includes("deleteAction") && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              disabled: isDisabled || !isDeletable,
+              type: "ghost",
+              htmlType: "button",
+              icon: "cross",
+              onClick: onDelete,
+              "data-testid": "table-row-delete",
+              className: cn(
+                styles["table__close-button"],
+                isDeleted && styles["table__close-button_deleted"]
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 };
 const LoadingData = () => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "loading-animated", size: "sm" }),
+    /* @__PURE__ */ jsx(
+      SvgImage,
+      {
+        name: "loading-animated",
+        size: "sm"
+      }
+    ),
     /* @__PURE__ */ jsx(Text, { size: "sm", children: "Loading data" })
   ] });
 };
@@ -257,221 +393,287 @@ const CustomTableRow = ({
   colSpan,
   size
 }) => {
-  return /* @__PURE__ */ jsx("tr", { className: cn(rowVariants({})), children: /* @__PURE__ */ jsx("td", { colSpan, className: cn(cellVariants({
-    size
-  }), styles["table__spanned-data"]), children: /* @__PURE__ */ jsx("div", { className: cn(styles["table__custom-message"]), children: loading ? /* @__PURE__ */ jsx(LoadingData, {}) : noDataMessage ?? "No Data available" }) }) });
+  return /* @__PURE__ */ jsx("tr", { className: cn(rowVariants({})), children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      colSpan,
+      className: cn(cellVariants({ size }), styles["table__spanned-data"]),
+      children: /* @__PURE__ */ jsx("div", { className: cn(styles["table__custom-message"]), children: loading ? /* @__PURE__ */ jsx(LoadingData, {}) : noDataMessage ?? "No Data available" })
+    }
+  ) });
 };
 const MIN_COLUMN_WIDTH = 120;
-const Table = forwardRef(({
-  headers,
-  rows,
-  isSelectable,
-  selectedIds = [],
-  onSelect,
-  onDelete,
-  onEdit,
-  onSort,
-  loading,
-  noDataMessage,
-  size = "sm",
-  showHeader = true,
-  rowHeight,
-  resizableColumns,
-  mobileLayout = "list",
-  className,
-  ...props
-}, ref) => {
-  const isDeletable = typeof onDelete === "function";
-  const isEditable = typeof onEdit === "function";
-  const [columnWidths, setColumnWidths] = useState(null);
-  const theadRef = useRef(null);
-  useLayoutEffect(() => {
-    if (!resizableColumns || columnWidths !== null || !theadRef.current) {
-      return;
-    }
-    const headerCells = theadRef.current.querySelectorAll("th");
-    const widths = /* @__PURE__ */ new Map();
-    const startIndex = isSelectable ? 1 : 0;
-    const endIndex = headerCells.length - (isDeletable || isEditable ? 1 : 0);
-    let headerIndex = 0;
-    for (let i = startIndex; i < endIndex; i++) {
-      const header = headers[headerIndex];
-      if (header) {
-        const key = typeof header.label === "string" ? header.label : `__index_${headerIndex}`;
-        widths.set(key, headerCells[i].getBoundingClientRect().width);
+const Table = forwardRef(
+  ({
+    headers,
+    rows,
+    isSelectable,
+    selectedIds = [],
+    onSelect,
+    onDelete,
+    onEdit,
+    onSort,
+    loading,
+    noDataMessage,
+    size = "sm",
+    showHeader = true,
+    rowHeight,
+    resizableColumns,
+    mobileLayout = "list",
+    className,
+    ...props
+  }, ref) => {
+    const isDeletable = typeof onDelete === "function";
+    const isEditable = typeof onEdit === "function";
+    const [columnWidths, setColumnWidths] = useState(null);
+    const theadRef = useRef(null);
+    useLayoutEffect(() => {
+      if (!resizableColumns || columnWidths !== null || !theadRef.current) {
+        return;
       }
-      headerIndex++;
-    }
-    if (widths.size === headers.length) {
-      setColumnWidths(widths);
-    }
-  }, [resizableColumns, columnWidths, isSelectable, isDeletable, isEditable]);
-  const headerKey = useMemo(() => headers.map((h, i) => typeof h.label === "string" ? h.label : `__index_${i}`).join(","), [headers]);
-  useEffect(() => {
-    setColumnWidths(null);
-  }, [headerKey]);
-  const resizeStateRef = useRef({
-    isResizing: false,
-    columnLabel: null,
-    nextColumnLabel: null,
-    startX: 0,
-    startWidth: 0,
-    nextStartWidth: 0
-  });
-  const onMouseMove = useCallback((e) => {
-    if (!resizeStateRef.current.isResizing) {
-      return;
-    }
-    const {
-      columnLabel,
-      nextColumnLabel,
-      startX,
-      startWidth,
-      nextStartWidth
-    } = resizeStateRef.current;
-    if (!columnLabel || !nextColumnLabel) {
-      return;
-    }
-    const diff = e.clientX - startX;
-    const newWidth = startWidth + diff;
-    const newNextWidth = nextStartWidth - diff;
-    if (Number.isNaN(newWidth) || Number.isNaN(newNextWidth)) {
-      console.warn("Unexpected computed values for resize width", {
-        newWidth,
-        newNextWidth
-      });
-      return;
-    }
-    if (newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH) {
-      setColumnWidths((prev) => {
-        if (!prev) {
-          return prev;
+      const headerCells = theadRef.current.querySelectorAll("th");
+      const widths = /* @__PURE__ */ new Map();
+      const startIndex = isSelectable ? 1 : 0;
+      const endIndex = headerCells.length - (isDeletable || isEditable ? 1 : 0);
+      let headerIndex = 0;
+      for (let i = startIndex; i < endIndex; i++) {
+        const header = headers[headerIndex];
+        if (header) {
+          const key = typeof header.label === "string" ? header.label : `__index_${headerIndex}`;
+          widths.set(key, headerCells[i].getBoundingClientRect().width);
         }
-        const updated = new Map(prev);
-        updated.set(columnLabel, newWidth);
-        updated.set(nextColumnLabel, newNextWidth);
-        return updated;
-      });
-    }
-  }, []);
-  const onMouseUp = useCallback(() => {
-    resizeStateRef.current.isResizing = false;
-  }, []);
-  useEffect(() => {
-    if (!resizableColumns) {
-      return;
-    }
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+        headerIndex++;
+      }
+      if (widths.size === headers.length) {
+        setColumnWidths(widths);
+      }
+    }, [resizableColumns, columnWidths, isSelectable, isDeletable, isEditable]);
+    const headerKey = useMemo(
+      () => headers.map((h, i) => typeof h.label === "string" ? h.label : `__index_${i}`).join(","),
+      [headers]
+    );
+    useEffect(() => {
+      setColumnWidths(null);
+    }, [headerKey]);
+    const resizeStateRef = useRef({
+      isResizing: false,
+      columnLabel: null,
+      nextColumnLabel: null,
+      startX: 0,
+      startWidth: 0,
+      nextStartWidth: 0
+    });
+    const onMouseMove = useCallback((e) => {
+      if (!resizeStateRef.current.isResizing) {
+        return;
+      }
+      const { columnLabel, nextColumnLabel, startX, startWidth, nextStartWidth } = resizeStateRef.current;
+      if (!columnLabel || !nextColumnLabel) {
+        return;
+      }
+      const diff = e.clientX - startX;
+      const newWidth = startWidth + diff;
+      const newNextWidth = nextStartWidth - diff;
+      if (Number.isNaN(newWidth) || Number.isNaN(newNextWidth)) {
+        console.warn("Unexpected computed values for resize width", {
+          newWidth,
+          newNextWidth
+        });
+        return;
+      }
+      if (newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH) {
+        setColumnWidths((prev) => {
+          if (!prev) {
+            return prev;
+          }
+          const updated = new Map(prev);
+          updated.set(columnLabel, newWidth);
+          updated.set(nextColumnLabel, newNextWidth);
+          return updated;
+        });
+      }
+    }, []);
+    const onMouseUp = useCallback(() => {
+      resizeStateRef.current.isResizing = false;
+    }, []);
+    useEffect(() => {
+      if (!resizableColumns) {
+        return;
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+    }, [resizableColumns, onMouseMove, onMouseUp]);
+    const handleResizeStart = useCallback(
+      (columnIndex) => (e) => {
+        e.preventDefault();
+        if (!columnWidths) {
+          return;
+        }
+        const currentHeader = headers[columnIndex];
+        const nextHeader = headers[columnIndex + 1];
+        if (!currentHeader || !nextHeader) {
+          return;
+        }
+        const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
+        const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
+        const startWidth = columnWidths.get(currentLabel);
+        const nextStartWidth = columnWidths.get(nextLabel);
+        if (startWidth === void 0 || nextStartWidth === void 0) {
+          return;
+        }
+        resizeStateRef.current = {
+          isResizing: true,
+          columnLabel: currentLabel,
+          nextColumnLabel: nextLabel,
+          startX: e.clientX,
+          startWidth,
+          nextStartWidth
+        };
+      },
+      [headers, columnWidths]
+    );
+    const onRowSelect = (id) => (checked) => {
+      if (typeof onSelect == "function") {
+        const selectedItems = rows.flatMap((row, index) => {
+          if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
+            return {
+              item: row,
+              index
+            };
+          }
+          return [];
+        });
+        onSelect(selectedItems);
+      }
     };
-  }, [resizableColumns, onMouseMove, onMouseUp]);
-  const handleResizeStart = useCallback((columnIndex) => (e) => {
-    e.preventDefault();
-    if (!columnWidths) {
-      return;
+    const hasRows = rows.length > 0;
+    const actionsList = [];
+    if (isDeletable) {
+      actionsList.push("deleteAction");
     }
-    const currentHeader = headers[columnIndex];
-    const nextHeader = headers[columnIndex + 1];
-    if (!currentHeader || !nextHeader) {
-      return;
-    }
-    const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
-    const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
-    const startWidth = columnWidths.get(currentLabel);
-    const nextStartWidth = columnWidths.get(nextLabel);
-    if (startWidth === void 0 || nextStartWidth === void 0) {
-      return;
+    if (isEditable) {
+      actionsList.push("editAction");
     }
-    resizeStateRef.current = {
-      isResizing: true,
-      columnLabel: currentLabel,
-      nextColumnLabel: nextLabel,
-      startX: e.clientX,
-      startWidth,
-      nextStartWidth
-    };
-  }, [headers, columnWidths]);
-  const onRowSelect = (id) => (checked) => {
-    if (typeof onSelect == "function") {
-      const selectedItems = rows.flatMap((row, index) => {
-        if (id === row.id && checked || selectedIds.includes(row.id) && id !== row.id) {
-          return {
-            item: row,
-            index
-          };
+    const onKeyboardResize = useCallback(
+      (columnIndex) => (_e, direction) => {
+        if (!columnWidths) {
+          return;
         }
-        return [];
-      });
-      onSelect(selectedItems);
-    }
-  };
-  const hasRows = rows.length > 0;
-  const actionsList = [];
-  if (isDeletable) {
-    actionsList.push("deleteAction");
-  }
-  if (isEditable) {
-    actionsList.push("editAction");
-  }
-  const onKeyboardResize = useCallback((columnIndex) => (_e, direction) => {
-    if (!columnWidths) {
-      return;
-    }
-    const currentHeader = headers[columnIndex];
-    const nextHeader = headers[columnIndex + 1];
-    if (!currentHeader || !nextHeader) {
-      return;
-    }
-    const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
-    const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
-    const increment = 2;
-    const multiplier = direction === "right" ? 1 : -1;
-    const diff = increment * multiplier;
-    const currentWidth = columnWidths.get(currentLabel);
-    const nextWidth = columnWidths.get(nextLabel);
-    if (currentWidth === void 0 || nextWidth === void 0) {
-      return;
-    }
-    const newWidth = currentWidth + diff;
-    const newNextWidth = nextWidth - diff;
-    const shouldUpdateColumnWidth = newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH;
-    if (!shouldUpdateColumnWidth) {
-      return;
-    }
-    setColumnWidths((prev) => {
-      if (!prev) {
-        return prev;
+        const currentHeader = headers[columnIndex];
+        const nextHeader = headers[columnIndex + 1];
+        if (!currentHeader || !nextHeader) {
+          return;
+        }
+        const currentLabel = typeof currentHeader.label === "string" ? currentHeader.label : `__index_${columnIndex}`;
+        const nextLabel = typeof nextHeader.label === "string" ? nextHeader.label : `__index_${columnIndex + 1}`;
+        const increment = 2;
+        const multiplier = direction === "right" ? 1 : -1;
+        const diff = increment * multiplier;
+        const currentWidth = columnWidths.get(currentLabel);
+        const nextWidth = columnWidths.get(nextLabel);
+        if (currentWidth === void 0 || nextWidth === void 0) {
+          return;
+        }
+        const newWidth = currentWidth + diff;
+        const newNextWidth = nextWidth - diff;
+        const shouldUpdateColumnWidth = newWidth >= MIN_COLUMN_WIDTH && newNextWidth >= MIN_COLUMN_WIDTH;
+        if (!shouldUpdateColumnWidth) {
+          return;
+        }
+        setColumnWidths((prev) => {
+          if (!prev) {
+            return prev;
+          }
+          const updated = new Map(prev);
+          updated.set(currentLabel, newWidth);
+          updated.set(nextLabel, newNextWidth);
+          return updated;
+        });
+      },
+      [columnWidths, headers]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-mobile-layout": mobileLayout,
+        className: cn(styles.table),
+        children: [
+          hasRows && showHeader && /* @__PURE__ */ jsx("div", { className: cn(styles["table__mobile-actions"]), children: isSelectable && /* @__PURE__ */ jsx(
+            SelectAllCheckbox,
+            {
+              label: "Select All",
+              onCheckedChange: onSelect,
+              rows,
+              selectedIds
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: cn(styles.table__wrapper), children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              ref,
+              ...props,
+              className: cn(styles["table__table"], className),
+              children: [
+                showHeader && /* @__PURE__ */ jsx(
+                  Thead,
+                  {
+                    headers,
+                    isSelectable,
+                    onSelectAll: onSelect,
+                    actionsList,
+                    onSort,
+                    size,
+                    rows,
+                    selectedIds,
+                    resizableColumns,
+                    columnWidths: resizableColumns ? columnWidths : void 0,
+                    onResizeStart: resizableColumns ? handleResizeStart : void 0,
+                    theadRef,
+                    onKeyboardResize: resizableColumns ? onKeyboardResize : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsxs("tbody", { className: cn(styles.table__tbody), children: [
+                  (loading || !hasRows) && /* @__PURE__ */ jsx(
+                    CustomTableRow,
+                    {
+                      colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0),
+                      loading,
+                      noDataMessage,
+                      size
+                    }
+                  ),
+                  rows.map(({ id, ...rowProps }, rowIndex) => /* @__PURE__ */ jsx(
+                    TableBodyRow,
+                    {
+                      headers,
+                      isSelectable,
+                      isSelected: selectedIds?.includes(id),
+                      onSelect: onRowSelect(id),
+                      actionsList,
+                      onDelete: isDeletable ? () => onDelete(
+                        { id, ...rowProps, isDeleted: !rowProps.isDeleted },
+                        rowIndex
+                      ) : void 0,
+                      onEdit: isEditable ? () => onEdit({ id, ...rowProps }, rowIndex) : void 0,
+                      size,
+                      rowHeight,
+                      ...rowProps
+                    },
+                    `table-body-row-${rowIndex}`
+                  ))
+                ] })
+              ]
+            }
+          ) })
+        ]
       }
-      const updated = new Map(prev);
-      updated.set(currentLabel, newWidth);
-      updated.set(nextLabel, newNextWidth);
-      return updated;
-    });
-  }, [columnWidths, headers]);
-  return /* @__PURE__ */ jsxs("div", { "data-mobile-layout": mobileLayout, className: cn(styles.table), children: [
-    hasRows && showHeader && /* @__PURE__ */ jsx("div", { className: cn(styles["table__mobile-actions"]), children: isSelectable && /* @__PURE__ */ jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
-    /* @__PURE__ */ jsx("div", { className: cn(styles.table__wrapper), children: /* @__PURE__ */ jsxs("table", { ref, ...props, className: cn(styles["table__table"], className), children: [
-      showHeader && /* @__PURE__ */ jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size, rows, selectedIds, resizableColumns, columnWidths: resizableColumns ? columnWidths : void 0, onResizeStart: resizableColumns ? handleResizeStart : void 0, theadRef, onKeyboardResize: resizableColumns ? onKeyboardResize : void 0 }),
-      /* @__PURE__ */ jsxs("tbody", { className: cn(styles.table__tbody), children: [
-        (loading || !hasRows) && /* @__PURE__ */ jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size }),
-        rows.map(({
-          id,
-          ...rowProps
-        }, rowIndex) => /* @__PURE__ */ jsx(TableBodyRow, { headers, isSelectable, isSelected: selectedIds?.includes(id), onSelect: onRowSelect(id), actionsList, onDelete: isDeletable ? () => onDelete({
-          id,
-          ...rowProps,
-          isDeleted: !rowProps.isDeleted
-        }, rowIndex) : void 0, onEdit: isEditable ? () => onEdit({
-          id,
-          ...rowProps
-        }, rowIndex) : void 0, size, rowHeight, ...rowProps }, `table-body-row-${rowIndex}`))
-      ] })
-    ] }) })
-  ] });
-});
+    );
+  }
+);
 const SelectAllCheckbox = ({
   rows,
   selectedIds,
@@ -479,10 +681,7 @@ const SelectAllCheckbox = ({
   ...checkboxProps
 }) => {
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
-  const {
-    checked,
-    disabled
-  } = useMemo(() => {
+  const { checked, disabled } = useMemo(() => {
     let areAllChecked = true;
     let maybeIndeterminate = false;
     let disabled2 = true;
@@ -520,7 +719,15 @@ const SelectAllCheckbox = ({
     }, []);
     onCheckedChange(newSelectedRows);
   };
-  return /* @__PURE__ */ jsx(Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked,
+      disabled,
+      onCheckedChange: handleCheckedChange,
+      ...checkboxProps
+    }
+  );
 };
 const Cell = ({
   label,