feat: implement resizable table headers in TableEditBetter component

components/tablelist/TableBetter.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Table } from "flowbite-react";
 import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
 import { useLocal } from "@/lib/utils/use-local";
@@ -8,6 +8,8 @@ import { toast } from "sonner";
 import { Loader2, Sticker } from "lucide-react";
 import { getNumber } from "@/lib/utils/getNumber";
 import { formatMoney } from "@/lib/components/form/field/TypeInput";
+import "react-resizable/css/styles.css";
+import { Resizable } from "react-resizable";
 export const TableEditBetter: React.FC<any> = ({
   name,
   column,
@@ -144,7 +146,7 @@ export const TableEditBetter: React.FC<any> = ({
       ? defaultColumns.map((e: any) => {
           return {
             ...e,
-            width: e?.width || "auto",
+            width: e?.width || 150,
           };
         })
       : ([] as any[]);
@@ -241,20 +243,19 @@ export const TableEditBetter: React.FC<any> = ({
                       <tr className={"table-header-tbl"}>
                         {columns.map((col, idx) => {
                           return (
-                            <th
+                            <HeaderColumn
+                              col={col}
                               key={`${col?.accessorKey}_${idx}`}
-                              className={"table-header-tbl capitalize"}
-                              style={{
-                                width:
-                                  col.width === "auto"
-                                    ? "auto"
-                                    : `${col.width}px`,
-                              }}
+                              width={col.width}
+                              height={0}
+                              onResize={(e: any, { size }: any) =>
+                                handleResize(idx, size.width)
+                              }
                             >
                               <div className="flex items-center h-full flex-grow p-2">
                                 <span>{col?.header()}</span>
                               </div>
-                            </th>
+                            </HeaderColumn>
                           );
                         })}
                       </tr>
@@ -336,7 +337,62 @@ export const TableEditBetter: React.FC<any> = ({
     </>
   );
 };
+const HeaderColumn: FC<any> = ({ children, width, height, onResize, col }) => {
+  const [isResizing, setIsResizing] = useState(false);
 
+  const handleResizeStart = () => {
+    setIsResizing(true);
+  };
+
+  const handleResizeStop = () => {
+    setIsResizing(false);
+  };
+
+  return (
+    <Resizable
+      onResizeStart={handleResizeStart}
+      onResizeStop={handleResizeStop}
+      width={width}
+      height={height}
+      onResize={onResize}
+    >
+      <th
+        className="table-header-tbl capitalize relative"
+        style={{ width: col.width }}
+      >
+        {children}
+        <div
+          className={cx(
+            css`
+              position: absolute;
+              right: 0;
+              top: 0;
+              height: 100%;
+              width: 5px;
+              background: transparent;
+              cursor: e-resize;
+              transition: background 0.2s ease;
+
+              &:hover {
+                background: #4a90e2; /* Warna biru saat hover */
+              }
+
+              &:active {
+                background: #357abd; /* Warna biru lebih gelap saat di-resize */
+              }
+
+              ${isResizing &&
+              css`
+                background: #357abd; /* Warna biru lebih gelap saat resize aktif */
+                opacity: 0.8;
+              `}
+            `
+          )}
+        ></div>
+      </th>
+    </Resizable>
+  );
+};
 export const Pagination: React.FC<any> = ({
   onNextPage,
   onPrevPage,

package.json

@@ -1,11 +1,8 @@
 {
-  "name": "julong-flowbite",
-  "version": "0.1.0",
-  "private": true,
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@faker-js/faker": "^9.2.0",
-    "@floating-ui/react": "^0.27.4",
+    "@floating-ui/react": "^0.26.28",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
@@ -50,7 +47,6 @@
     "flowbite": "^2.5.2",
     "flowbite-react": "^0.10.2",
     "js-cookie": "^3.0.5",
-    "julong-flowbite": "file:",
     "lodash.get": "^4.4.2",
     "lodash.uniqby": "^4.7.0",
     "lucide-react": "^0.462.0",

utils/conditionalMPR.ts

@@ -32,7 +32,7 @@ export const showApprovel = (
       column: ["hrd_ho_unit"],
       level: ["Level HRD HO"],
     },
-  ]; // tiga status yang dapat memunculkan approval
+  ];
   const role = {
     head: permision.find((e) => e === "approval-mpr-dept-head"),
     dir: permision.find((e) => e === "approval-mpr-vp"),