next-helios-fe 1.1.14 → 1.1.15

package/package.json

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

package/src/components/table/index.tsx

@@ -18,7 +18,24 @@ interface TableProps {
     [key: string]: any;
   }[];
   options?: {
-    hideToolbar?: boolean;
+    toolbar?: {
+      addData?: {
+        show?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+      };
+      search?: {
+        show?: boolean;
+      };
+      filter?: {
+        show?: boolean;
+      };
+      export?: {
+        show?: boolean;
+      };
+      pagination?: {
+        show?: boolean;
+      };
+    };
     hideNumberColumn?: boolean;
     enableBorder?: boolean;
     maxRow?: 10 | 20 | 50 | 100;
@@ -36,8 +53,7 @@ interface TableProps {
       }[]
     ) => void;
   };
-  actions?: (e: any) => React.ReactNode;
-  onAddData?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  actionColumn?: (e: any) => React.ReactNode;
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -50,8 +66,7 @@ export const Table: TableComponentProps = ({
   data,
   options,
   checkbox,
-  actions,
-  onAddData,
+  actionColumn,
 }) => {
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
@@ -260,9 +275,9 @@ export const Table: TableComponentProps = ({
                 );
               }
             })}
-          {actions && (
+          {actionColumn && (
             <td className="px-4 py-1 border-b bg-secondary-bg text-center">
-              {actions(item)}
+              {actionColumn(item)}
             </td>
           )}
         </tr>
@@ -271,21 +286,22 @@ export const Table: TableComponentProps = ({
 
   return (
     <div className="flex flex-col gap-6 h-full">
-      {!options?.hideToolbar && (
-        <div className="flex justify-between items-center gap-4 w-full h-fit">
-          <span className="text-lg">{title}</span>
-          <div className="flex items-center gap-4">
-            {onAddData && (
-              <button
-                type="button"
-                className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
-                onClick={(e) => {
-                  onAddData && onAddData(e);
-                }}
-              >
-                <Icon icon="ic:round-plus" className="text-2xl" />
-              </button>
-            )}
+      <div className="flex justify-between items-center gap-4 w-full h-fit">
+        <span className="text-lg">{title}</span>
+        <div className="flex items-center gap-4">
+          {options?.toolbar?.addData?.show !== false && (
+            <button
+              type="button"
+              className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
+              onClick={(e) => {
+                options?.toolbar?.addData?.onClick &&
+                  options?.toolbar?.addData?.onClick(e);
+              }}
+            >
+              <Icon icon="ic:round-plus" className="text-2xl" />
+            </button>
+          )}
+          {options?.toolbar?.filter?.show !== false && (
             <Dropdown
               trigger={
                 <button
@@ -319,6 +335,8 @@ export const Table: TableComponentProps = ({
                 );
               })}
             </Dropdown>
+          )}
+          {options?.toolbar?.search?.show !== false && (
             <Form.Search
               options={{ width: "fit" }}
               placeholder="search.."
@@ -327,6 +345,8 @@ export const Table: TableComponentProps = ({
                 setSearch(e.target.value);
               }}
             />
+          )}
+          {options?.toolbar?.export?.show !== false && (
             <Button
               type="button"
               options={{ variant: "primary", width: "fit" }}
@@ -339,9 +359,9 @@ export const Table: TableComponentProps = ({
             >
               Export
             </Button>
-          </div>
+          )}
         </div>
-      )}
+      </div>
       <div
         className={`overflow-auto ${height} ${
           options?.enableBorder && "border rounded-md"
@@ -387,7 +407,7 @@ export const Table: TableComponentProps = ({
                 </th>
               )}
               {headerArr}
-              {actions && (
+              {actionColumn && (
                 <th className="w-min px-4 py-2 bg-secondary-bg font-medium text-center">
                   <div className="flex flex-col">
                     <span>Actions</span>
@@ -405,7 +425,7 @@ export const Table: TableComponentProps = ({
           <tbody>{dataArr}</tbody>
         </table>
       </div>
-      {!options?.hideToolbar && (
+      {options?.toolbar?.pagination?.show !== false && (
         <div className="flex justify-between items-end gap-2 w-full h-fit">
           <div className="!text-sm">
             <Form.Select