erp-pos-ecommerce-shared 0.2.18 → 0.2.20

package/dist/components.js

@@ -1335,11 +1335,19 @@ var TableHeader = ({
   const bgColor = style.bgColor ?? defaultHeaderBgColor;
   const hoverBg = style.hoverBgColor ?? defaultHeaderHoverBg;
   const hoverText = style.hoverTextColor ?? style.textColor ?? defaultHeaderTextColor;
+  const totalColumnsSize = table.getVisibleLeafColumns().reduce((sum, column) => sum + column.getSize(), 0);
   const getSortIcon = (sortState) => {
     if (sortState === "asc") return SortIconAsc;
     if (sortState === "desc") return SortIconDesc;
     return SortIcon;
   };
+  const getColumnStyle = (size) => {
+    if (!size || totalColumnsSize <= 0) return void 0;
+    return {
+      width: `${size / totalColumnsSize * 100}%`,
+      minWidth: size
+    };
+  };
   const baseButtonStyle = {
     padding: style.padding ?? "4px 10px",
     fontSize: style.fontSize ?? 14,
@@ -1381,26 +1389,34 @@ var TableHeader = ({
       const sortState = header.column.getIsSorted();
       const Icon = canSort ? getSortIcon(sortState) : null;
       const isHovered = hoveredHeaderId === header.id;
-      return /* @__PURE__ */ jsx(Table.Th, { bg: bgColor, style: header.column.columnDef.size ? { width: header.column.columnDef.size, minWidth: header.column.columnDef.size } : void 0, children: /* @__PURE__ */ jsxs(
-        UnstyledButton,
+      return /* @__PURE__ */ jsx(
+        Table.Th,
         {
-          style: {
-            ...baseButtonStyle,
-            color: isHovered ? hoverText : style.textColor ?? defaultHeaderTextColor,
-            backgroundColor: isHovered ? hoverBg : void 0
-          },
-          onClick: header.column.getToggleSortingHandler(),
-          onMouseEnter: () => setHoveredHeaderId(header.id),
-          onMouseLeave: () => setHoveredHeaderId(null),
-          children: [
-            header.isPlaceholder ? null : flexRender(
-              header.column.columnDef.header,
-              header.getContext()
-            ),
-            Icon && /* @__PURE__ */ jsx(Icon, { size: 16 })
-          ]
-        }
-      ) }, header.id);
+          bg: bgColor,
+          style: getColumnStyle(header.column.getSize()),
+          children: /* @__PURE__ */ jsxs(
+            UnstyledButton,
+            {
+              style: {
+                ...baseButtonStyle,
+                color: isHovered ? hoverText : style.textColor ?? defaultHeaderTextColor,
+                backgroundColor: isHovered ? hoverBg : void 0
+              },
+              onClick: header.column.getToggleSortingHandler(),
+              onMouseEnter: () => setHoveredHeaderId(header.id),
+              onMouseLeave: () => setHoveredHeaderId(null),
+              children: [
+                header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                Icon && /* @__PURE__ */ jsx(Icon, { size: 16 })
+              ]
+            }
+          )
+        },
+        header.id
+      );
     }),
     hasActionsColumn && /* @__PURE__ */ jsx(Table.Th, { bg: bgColor })
   ] }, headerGroup.id)) });
@@ -1415,6 +1431,14 @@ var TableBody = ({
   onRowHover
 }) => {
   const [hoveredRowId, setHoveredRowId] = useState(null);
+  const totalColumnsSize = table.getVisibleLeafColumns().reduce((sum, column) => sum + column.getSize(), 0);
+  const getColumnStyle = (size) => {
+    if (!size || totalColumnsSize <= 0) return void 0;
+    return {
+      width: `${size / totalColumnsSize * 100}%`,
+      minWidth: size
+    };
+  };
   return /* @__PURE__ */ jsx(Table.Tbody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(
     Table.Tr,
     {
@@ -1458,7 +1482,7 @@ var TableBody = ({
         row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
           Table.Td,
           {
-            style: cell.column.columnDef.size ? { width: cell.column.columnDef.size, minWidth: cell.column.columnDef.size } : void 0,
+            style: getColumnStyle(cell.column.getSize()),
             onClick: () => onRowClick?.(row.original),
             children: /* @__PURE__ */ jsx(
               Text,