next-helios-fe 1.1.14 → 1.1.16

package/package.json

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

package/src/components/table/index.tsx

@@ -18,7 +18,27 @@ 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;
+      };
+      columnSearch?: {
+        show?: boolean;
+      };
+      pagination?: {
+        show?: boolean;
+      };
+    };
     hideNumberColumn?: boolean;
     enableBorder?: boolean;
     maxRow?: 10 | 20 | 50 | 100;
@@ -36,8 +56,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 +69,7 @@ export const Table: TableComponentProps = ({
   data,
   options,
   checkbox,
-  actions,
-  onAddData,
+  actionColumn,
 }) => {
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
@@ -164,30 +182,32 @@ export const Table: TableComponentProps = ({
                 }`}
               />
             </button>
-            <div className="relative flex items-center">
-              <input
-                type="search"
-                className="w-full ps-6 pe-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
-                placeholder="search.."
-                value={
-                  filter.find((filterItem) => filterItem.key === item.key)
-                    ?.value
-                }
-                onChange={(e) => {
-                  setFilter(
-                    filter.map((filterItem) => {
-                      return filterItem.key === item.key
-                        ? { ...filterItem, value: e.target.value }
-                        : filterItem;
-                    })
-                  );
-                }}
-              />
-              <Icon
-                icon="ic:round-search"
-                className="absolute text-sm text-slate-400"
-              />
-            </div>
+            {options?.toolbar?.columnSearch?.show !== false && (
+              <div className="relative flex items-center">
+                <input
+                  type="search"
+                  className="w-full ps-6 pe-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                  placeholder="search.."
+                  value={
+                    filter.find((filterItem) => filterItem.key === item.key)
+                      ?.value
+                  }
+                  onChange={(e) => {
+                    setFilter(
+                      filter.map((filterItem) => {
+                        return filterItem.key === item.key
+                          ? { ...filterItem, value: e.target.value }
+                          : filterItem;
+                      })
+                    );
+                  }}
+                />
+                <Icon
+                  icon="ic:round-search"
+                  className="absolute text-sm text-slate-400"
+                />
+              </div>
+            )}
           </div>
         </th>
       );
@@ -260,9 +280,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 +291,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 +340,8 @@ export const Table: TableComponentProps = ({
                 );
               })}
             </Dropdown>
+          )}
+          {options?.toolbar?.search?.show !== false && (
             <Form.Search
               options={{ width: "fit" }}
               placeholder="search.."
@@ -327,6 +350,8 @@ export const Table: TableComponentProps = ({
                 setSearch(e.target.value);
               }}
             />
+          )}
+          {options?.toolbar?.export?.show !== false && (
             <Button
               type="button"
               options={{ variant: "primary", width: "fit" }}
@@ -339,9 +364,9 @@ export const Table: TableComponentProps = ({
             >
               Export
             </Button>
-          </div>
+          )}
         </div>
-      )}
+      </div>
       <div
         className={`overflow-auto ${height} ${
           options?.enableBorder && "border rounded-md"
@@ -387,7 +412,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 +430,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