From 53f11cb47a9bce8cf39c5975e72344374a7649b0 Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Fri, 21 Feb 2025 07:55:28 +0700
Subject: [PATCH] feat: implement resizable table headers in TableEditBetter
 component

---
 components/tablelist/TableBetter.tsx | 80 +++++++++++++++++++++++-----
 package.json                         |  6 +--
 utils/conditionalMPR.ts              |  2 +-
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/components/tablelist/TableBetter.tsx b/components/tablelist/TableBetter.tsx
index b1bc3f3..4a58d05 100644
--- a/components/tablelist/TableBetter.tsx
+++ b/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">
+                              <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,
diff --git a/package.json b/package.json
index 70aeabb..ab27856 100644
--- a/package.json
+++ b/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",
diff --git a/utils/conditionalMPR.ts b/utils/conditionalMPR.ts
index 99d42c3..5434731 100644
--- a/utils/conditionalMPR.ts
+++ b/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"),