next-helios-fe 1.0.2 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-helios-fe",
-  "version": "1.0.2",
-  "description": "fix export data bug in table component",
+  "version": "1.0.3",
+  "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/components/table/index.tsx

@@ -8,6 +8,7 @@ import { Action, type ActionProps } from "./action";
 
 interface TableProps {
   title?: string;
+
   header: {
     title: string;
     key: string;
@@ -16,13 +17,14 @@ interface TableProps {
   data: any[];
   options?: {
     hideToolbar?: boolean;
-    hideNumber?: boolean;
+    hideNumberColumn?: boolean;
     checkbox?: boolean;
     height?: "full" | "fit" | "20" | "40" | "80";
     maxRow?: 10 | 20 | 50 | 100;
     border?: boolean;
   };
   actions?: (e: any) => React.ReactNode;
+  onAddData?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -35,6 +37,7 @@ export const Table: TableComponentProps = ({
   data,
   options,
   actions,
+  onAddData,
 }) => {
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
@@ -70,12 +73,10 @@ export const Table: TableComponentProps = ({
           return item;
         } else if (
           header.some((headerItem) => {
-            if (headerItem.title !== header[1].title) {
-              return item[headerItem.key as keyof typeof item]
-                ?.toString()
-                .toLowerCase()
-                .includes(search.toLowerCase());
-            }
+            return item[headerItem.key as keyof typeof item]
+              ?.toString()
+              .toLowerCase()
+              .includes(search.toLowerCase());
           })
         ) {
           return item;
@@ -132,22 +133,30 @@ export const Table: TableComponentProps = ({
                 }`}
               />
             </button>
-            <input
-              type="search"
-              className="w-full px-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"
-              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;
-                  })
-                );
-              }}
-            />
+            <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>
       );
@@ -186,7 +195,7 @@ export const Table: TableComponentProps = ({
               />
             </td>
           )}
-          {!options?.hideNumber && (
+          {!options?.hideNumberColumn && (
             <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
               {(page - 1) * maxRow + index + 1}
             </td>
@@ -229,6 +238,17 @@ export const Table: TableComponentProps = ({
         <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>
+            )}
             <Dropdown
               trigger={
                 <button
@@ -315,8 +335,8 @@ export const Table: TableComponentProps = ({
                   </div>
                 </th>
               )}
-              {!options?.hideNumber && (
-                <th className="sticky left-0 w-min px-4 py-2 bg-secondary-bg font-medium text-center whitespace-nowrap">
+              {!options?.hideNumberColumn && (
+                <th className="sticky left-0 w-min px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
                   <div className="flex flex-col">
                     <span>NO.</span>
                     <div className="invisible w-0 overflow-hidden">