next-helios-fe 1.8.141 → 1.8.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.141",
+  "version": "1.8.143",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -435,7 +435,7 @@ export const Table: TableComponentProps = ({
         <th
           key={item.key}
           className={`whitespace-nowrap bg-secondary-bg px-4 py-2 text-left font-medium ${
-            item.type === "date" && "min-w-56"
+            item.type === "date" ? "min-w-56" : "min-w-36"
           }`}
         >
           <div className="flex flex-col">
@@ -788,7 +788,7 @@ export const Table: TableComponentProps = ({
           })}
         {actionColumn &&
           React.Children.toArray(actionColumn()).length !== 0 && (
-            <td className="sticky right-0 w-8 bg-secondary-bg px-4 py-1.5 text-center">
+            <td className="sticky right-0 min-w-8 bg-secondary-bg px-4 py-1.5 text-center">
               {actionColumn(item)}
             </td>
           )}
@@ -797,7 +797,7 @@ export const Table: TableComponentProps = ({
   });
 
   return (
-    <div className="flex h-full flex-col gap-6">
+    <div className="relative flex h-full flex-col gap-6">
       {(title ||
         options?.toolbar?.addData?.show !== false ||
         options?.toolbar?.filter?.show !== false ||
@@ -955,7 +955,7 @@ export const Table: TableComponentProps = ({
         </div>
       )}
       <div
-        className={`flex flex-col overflow-auto ${height} ${
+        className={`flex-1 flex flex-col overflow-auto ${height} ${
           options?.border && "rounded-md border"
         }`}
       >
@@ -1090,7 +1090,7 @@ export const Table: TableComponentProps = ({
               {headerArr}
               {actionColumn &&
                 React.Children.toArray(actionColumn()).length !== 0 && (
-                  <th className="sticky right-0 z-10 w-8 whitespace-nowrap bg-secondary-bg px-4 py-2 text-center font-medium">
+                  <th className="sticky right-0 z-10 min-w-8 whitespace-nowrap bg-secondary-bg px-4 py-2 text-center font-medium">
                     <div className="flex flex-col">
                       <span>Actions</span>
                       {options?.toolbar?.columnSearch?.show !== false && (
@@ -1114,21 +1114,6 @@ export const Table: TableComponentProps = ({
               dataArr}
           </tbody>
         </table>
-        {(loading ||
-          !filteredData ||
-          (dynamicTable?.setValue?.totalData ?? filteredData?.length) ===
-            0) && (
-          <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
-            {loading ? (
-              <Icon
-                icon="mingcute:loading-fill"
-                className="animate-spin text-3xl text-primary"
-              />
-            ) : (
-              <span>No data found</span>
-            )}
-          </div>
-        )}
       </div>
       {options?.toolbar?.pagination?.show !== false && (
         <div className="flex h-fit w-full items-end justify-between gap-2">
@@ -1266,6 +1251,18 @@ export const Table: TableComponentProps = ({
           </div>
         </div>
       )}
+      {(loading || !filteredData || filteredData?.length === 0) && (
+        <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center whitespace-nowrap px-4 py-1.5 text-center pointer-events-none">
+          {loading ? (
+            <Icon
+              icon="mingcute:loading-fill"
+              className="animate-spin text-3xl text-primary"
+            />
+          ) : (
+            <span>No data found</span>
+          )}
+        </div>
+      )}
     </div>
   );
 };