@fctc/sme-widget-ui 2.8.0 → 2.8.2

package/dist/index.js

@@ -10776,7 +10776,8 @@ var TableGroup = (props) => {
     groupByList,
     selectedRowKeys,
     setSelectedRowKeys,
-    onClickRow
+    onClickRow,
+    env
   } = props;
   const {
     onExpandChildGroup,
@@ -10903,7 +10904,8 @@ var TableGroup = (props) => {
         groupByList,
         selectedRowKeys,
         setSelectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       }
     )
   ] });
@@ -11112,7 +11114,8 @@ var TableBodyRow = (props) => {
         tableGroupController,
         setSelectedRowKeys,
         selectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -13087,8 +13090,12 @@ var TableHead = (props) => {
     checkedAll,
     onRemoveRow,
     onToggleColumnOptional,
-    env
+    env,
+    table
   } = props;
+  const headerGroups = table.getHeaderGroups();
+  const headerGroup = headerGroups[0];
+  const visibleColumns = columns?.filter((value) => value?.optional !== "hide") ?? [];
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("thead", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "tr",
     {
@@ -13122,7 +13129,9 @@ var TableHead = (props) => {
             )
           }
         ),
-        columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
+        headerGroup?.headers?.map((header, index4) => {
+          const col = visibleColumns[index4];
+          if (!col) return null;
           if (col?.field?.widget === "handle") {
             return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "th",
@@ -13139,12 +13148,15 @@ var TableHead = (props) => {
               "data-type-co": col?.field?.type_co,
               "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606] ${col?.field?.type_co === "buttons" ? "th-buttons" : "th-normal"}`,
+              style: {
+                width: header.getSize()
+              },
               children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
                 "div",
                 {
                   className: `cursor-pointer flex items-center gap-[4px] w-full group relative ${(col?.field?.type === "monetary" || col?.field?.widget === "monetary") && "justify-end"}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "cursor-pointer flex justify-between items-center gap-[4px] w-full max-w-full truncate", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate", children: col.title }) }),
                     col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
                       (0, import_react_dom.createPortal)(
                         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -13199,12 +13211,23 @@ var TableHead = (props) => {
                           )
                         }
                       )
-                    ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: `
+                  column-resizer
+                  ${header.column.getIsResizing() ? "is-resizing" : ""}
+                `
+                      }
+                    )
                   ]
                 }
               )
             },
-            "table-head-" + index4
+            "table-head-" + header.id
           );
         }),
         typeof onRemoveRow === "function" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("th", { className: "relative p-2 w-[35px] th-remove" }),

package/dist/index.mjs

@@ -10649,7 +10649,8 @@ var TableGroup = (props) => {
     groupByList,
     selectedRowKeys,
     setSelectedRowKeys,
-    onClickRow
+    onClickRow,
+    env
   } = props;
   const {
     onExpandChildGroup,
@@ -10776,7 +10777,8 @@ var TableGroup = (props) => {
         groupByList,
         selectedRowKeys,
         setSelectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       }
     )
   ] });
@@ -10985,7 +10987,8 @@ var TableBodyRow = (props) => {
         tableGroupController,
         setSelectedRowKeys,
         selectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ jsx48(
@@ -12960,8 +12963,12 @@ var TableHead = (props) => {
     checkedAll,
     onRemoveRow,
     onToggleColumnOptional,
-    env
+    env,
+    table
   } = props;
+  const headerGroups = table.getHeaderGroups();
+  const headerGroup = headerGroups[0];
+  const visibleColumns = columns?.filter((value) => value?.optional !== "hide") ?? [];
   return /* @__PURE__ */ jsx51("thead", { className: "relative z-10", children: /* @__PURE__ */ jsxs29(
     "tr",
     {
@@ -12995,7 +13002,9 @@ var TableHead = (props) => {
             )
           }
         ),
-        columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
+        headerGroup?.headers?.map((header, index4) => {
+          const col = visibleColumns[index4];
+          if (!col) return null;
           if (col?.field?.widget === "handle") {
             return /* @__PURE__ */ jsx51(
               "th",
@@ -13012,12 +13021,15 @@ var TableHead = (props) => {
               "data-type-co": col?.field?.type_co,
               "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606] ${col?.field?.type_co === "buttons" ? "th-buttons" : "th-normal"}`,
+              style: {
+                width: header.getSize()
+              },
               children: /* @__PURE__ */ jsxs29(
                 "div",
                 {
                   className: `cursor-pointer flex items-center gap-[4px] w-full group relative ${(col?.field?.type === "monetary" || col?.field?.widget === "monetary") && "justify-end"}`,
                   children: [
-                    /* @__PURE__ */ jsx51("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
+                    /* @__PURE__ */ jsx51("div", { className: "cursor-pointer flex justify-between items-center gap-[4px] w-full max-w-full truncate", children: /* @__PURE__ */ jsx51("span", { className: "truncate", children: col.title }) }),
                     col?.field?.help && /* @__PURE__ */ jsxs29(Fragment4, { children: [
                       createPortal(
                         /* @__PURE__ */ jsx51(
@@ -13072,12 +13084,23 @@ var TableHead = (props) => {
                           )
                         }
                       )
-                    ] })
+                    ] }),
+                    /* @__PURE__ */ jsx51(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: `
+                  column-resizer
+                  ${header.column.getIsResizing() ? "is-resizing" : ""}
+                `
+                      }
+                    )
                   ]
                 }
               )
             },
-            "table-head-" + index4
+            "table-head-" + header.id
           );
         }),
         typeof onRemoveRow === "function" && /* @__PURE__ */ jsx51("th", { className: "relative p-2 w-[35px] th-remove" }),

package/dist/widgets.d.mts

@@ -118,6 +118,7 @@ interface TableGroupProps {
     selectedRowKeys?: any;
     setSelectedRowKeys?: (selectedRowKeys: any) => void;
     onClickRow?: any;
+    env?: any;
 }
 declare const TableGroup: (props: TableGroupProps) => JSX.Element;
 
@@ -129,6 +130,7 @@ interface TableHeadProps {
     onToggleColumnOptional?: any;
     onRemoveRow?: any;
     env?: any;
+    table?: any;
 }
 declare const TableHead: (props: TableHeadProps) => JSX.Element;
 

package/dist/widgets.d.ts

@@ -118,6 +118,7 @@ interface TableGroupProps {
     selectedRowKeys?: any;
     setSelectedRowKeys?: (selectedRowKeys: any) => void;
     onClickRow?: any;
+    env?: any;
 }
 declare const TableGroup: (props: TableGroupProps) => JSX.Element;
 
@@ -129,6 +130,7 @@ interface TableHeadProps {
     onToggleColumnOptional?: any;
     onRemoveRow?: any;
     env?: any;
+    table?: any;
 }
 declare const TableHead: (props: TableHeadProps) => JSX.Element;
 

package/dist/widgets.js

@@ -9768,7 +9768,8 @@ var TableGroup = (props) => {
     groupByList,
     selectedRowKeys,
     setSelectedRowKeys,
-    onClickRow
+    onClickRow,
+    env
   } = props;
   const {
     onExpandChildGroup,
@@ -9895,7 +9896,8 @@ var TableGroup = (props) => {
         groupByList,
         selectedRowKeys,
         setSelectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       }
     )
   ] });
@@ -10104,7 +10106,8 @@ var TableBodyRow = (props) => {
         tableGroupController,
         setSelectedRowKeys,
         selectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -12079,8 +12082,12 @@ var TableHead = (props) => {
     checkedAll,
     onRemoveRow,
     onToggleColumnOptional,
-    env
+    env,
+    table
   } = props;
+  const headerGroups = table.getHeaderGroups();
+  const headerGroup = headerGroups[0];
+  const visibleColumns = columns?.filter((value) => value?.optional !== "hide") ?? [];
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("thead", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "tr",
     {
@@ -12114,7 +12121,9 @@ var TableHead = (props) => {
             )
           }
         ),
-        columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
+        headerGroup?.headers?.map((header, index4) => {
+          const col = visibleColumns[index4];
+          if (!col) return null;
           if (col?.field?.widget === "handle") {
             return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "th",
@@ -12131,12 +12140,15 @@ var TableHead = (props) => {
               "data-type-co": col?.field?.type_co,
               "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606] ${col?.field?.type_co === "buttons" ? "th-buttons" : "th-normal"}`,
+              style: {
+                width: header.getSize()
+              },
               children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
                 "div",
                 {
                   className: `cursor-pointer flex items-center gap-[4px] w-full group relative ${(col?.field?.type === "monetary" || col?.field?.widget === "monetary") && "justify-end"}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "cursor-pointer flex justify-between items-center gap-[4px] w-full max-w-full truncate", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate", children: col.title }) }),
                     col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
                       (0, import_react_dom.createPortal)(
                         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -12191,12 +12203,23 @@ var TableHead = (props) => {
                           )
                         }
                       )
-                    ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: `
+                  column-resizer
+                  ${header.column.getIsResizing() ? "is-resizing" : ""}
+                `
+                      }
+                    )
                   ]
                 }
               )
             },
-            "table-head-" + index4
+            "table-head-" + header.id
           );
         }),
         typeof onRemoveRow === "function" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("th", { className: "relative p-2 w-[35px] th-remove" }),

package/dist/widgets.mjs

@@ -9705,7 +9705,8 @@ var TableGroup = (props) => {
     groupByList,
     selectedRowKeys,
     setSelectedRowKeys,
-    onClickRow
+    onClickRow,
+    env
   } = props;
   const {
     onExpandChildGroup,
@@ -9832,7 +9833,8 @@ var TableGroup = (props) => {
         groupByList,
         selectedRowKeys,
         setSelectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       }
     )
   ] });
@@ -10041,7 +10043,8 @@ var TableBodyRow = (props) => {
         tableGroupController,
         setSelectedRowKeys,
         selectedRowKeys,
-        onClickRow
+        onClickRow,
+        env
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ jsx48(
@@ -12016,8 +12019,12 @@ var TableHead = (props) => {
     checkedAll,
     onRemoveRow,
     onToggleColumnOptional,
-    env
+    env,
+    table
   } = props;
+  const headerGroups = table.getHeaderGroups();
+  const headerGroup = headerGroups[0];
+  const visibleColumns = columns?.filter((value) => value?.optional !== "hide") ?? [];
   return /* @__PURE__ */ jsx51("thead", { className: "relative z-10", children: /* @__PURE__ */ jsxs29(
     "tr",
     {
@@ -12051,7 +12058,9 @@ var TableHead = (props) => {
             )
           }
         ),
-        columns?.filter((value) => value?.optional !== "hide")?.map((col, index4) => {
+        headerGroup?.headers?.map((header, index4) => {
+          const col = visibleColumns[index4];
+          if (!col) return null;
           if (col?.field?.widget === "handle") {
             return /* @__PURE__ */ jsx51(
               "th",
@@ -12068,12 +12077,15 @@ var TableHead = (props) => {
               "data-type-co": col?.field?.type_co,
               "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606] ${col?.field?.type_co === "buttons" ? "th-buttons" : "th-normal"}`,
+              style: {
+                width: header.getSize()
+              },
               children: /* @__PURE__ */ jsxs29(
                 "div",
                 {
                   className: `cursor-pointer flex items-center gap-[4px] w-full group relative ${(col?.field?.type === "monetary" || col?.field?.widget === "monetary") && "justify-end"}`,
                   children: [
-                    /* @__PURE__ */ jsx51("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
+                    /* @__PURE__ */ jsx51("div", { className: "cursor-pointer flex justify-between items-center gap-[4px] w-full max-w-full truncate", children: /* @__PURE__ */ jsx51("span", { className: "truncate", children: col.title }) }),
                     col?.field?.help && /* @__PURE__ */ jsxs29(Fragment4, { children: [
                       createPortal(
                         /* @__PURE__ */ jsx51(
@@ -12128,12 +12140,23 @@ var TableHead = (props) => {
                           )
                         }
                       )
-                    ] })
+                    ] }),
+                    /* @__PURE__ */ jsx51(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: `
+                  column-resizer
+                  ${header.column.getIsResizing() ? "is-resizing" : ""}
+                `
+                      }
+                    )
                   ]
                 }
               )
             },
-            "table-head-" + index4
+            "table-head-" + header.id
           );
         }),
         typeof onRemoveRow === "function" && /* @__PURE__ */ jsx51("th", { className: "relative p-2 w-[35px] th-remove" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",