next-helios-fe 1.4.31 → 1.4.32

package/package.json

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

package/src/components/table/index.tsx

@@ -377,7 +377,7 @@ export const Table: TableComponentProps = ({
       return (
         <tr key={item.id}>
           {checkbox && (
-            <td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
+            <td className="sticky left-0 w-8 px-4 py-1 bg-secondary-bg">
               <Form.Checkbox
                 options={{ disableHover: true }}
                 checked={
@@ -398,7 +398,7 @@ export const Table: TableComponentProps = ({
             </td>
           )}
           {!options?.hideNumberColumn && (
-            <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
+            <td className="sticky left-0 px-4 py-1 bg-secondary-bg text-center">
               {(page - 1) * maxRow + index + 1}
             </td>
           )}
@@ -409,7 +409,7 @@ export const Table: TableComponentProps = ({
                 return (
                   <td
                     key={headerItem.key}
-                    className="px-4 py-1 border-b bg-secondary-bg whitespace-nowrap"
+                    className="px-4 py-1 bg-secondary-bg whitespace-nowrap"
                   >
                     {headerItem.render(item)}
                   </td>
@@ -418,7 +418,7 @@ export const Table: TableComponentProps = ({
                 return (
                   <td
                     key={headerItem.key}
-                    className="px-4 py-1 border-b bg-secondary-bg whitespace-nowrap"
+                    className="px-4 py-1 bg-secondary-bg whitespace-nowrap"
                   >
                     {item[headerItem.key as keyof typeof item]}
                   </td>
@@ -426,7 +426,7 @@ export const Table: TableComponentProps = ({
               }
             })}
           {actionColumn && (
-            <td className="sticky right-0 px-4 py-1 border-b bg-secondary-bg text-center">
+            <td className="sticky right-0 px-4 py-1 bg-secondary-bg text-center">
               {actionColumn(item)}
             </td>
           )}
@@ -450,7 +450,7 @@ export const Table: TableComponentProps = ({
           <div className="flex items-center gap-4">
             {options?.toolbar?.customTool &&
               options?.toolbar?.customTool?.length !== 0 &&
-              options?.toolbar?.customTool.map((item) => {
+              options?.toolbar?.customTool.map((item, index) => {
                 const variant =
                   item.variant === "secondary"
                     ? "bg-secondary hover:bg-secondary-dark"
@@ -464,6 +464,7 @@ export const Table: TableComponentProps = ({
 
                 return (
                   <button
+                    key={index}
                     type="button"
                     className={`p-1.5 rounded-full text-white active:opacity-70 active:duration-300 active:ease-out ${variant}`}
                     onClick={(e) => {
@@ -556,8 +557,8 @@ export const Table: TableComponentProps = ({
           options?.border && "border rounded-md"
         }`}
       >
-        <table className="w-full text-sm overflow-x-auto">
-          <thead className="sticky top-0 z-10 border-b">
+        <table className="w-full divide-y text-sm overflow-x-auto">
+          <thead className="sticky top-0 z-10">
             <tr>
               {checkbox && (
                 <th className="sticky left-0 w-8 px-4 py-2 bg-secondary-bg">
@@ -636,7 +637,7 @@ export const Table: TableComponentProps = ({
               )}
             </tr>
           </thead>
-          <tbody>{dataArr}</tbody>
+          <tbody className="divide-y">{dataArr}</tbody>
         </table>
       </div>
       {options?.toolbar?.pagination?.show !== false && (