next-helios-fe 1.4.14 → 1.4.16

package/package.json

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

package/src/components/table/index.tsx

@@ -113,6 +113,10 @@ export const Table: TableComponentProps = ({
     }
   }, [selected]);
 
+  useEffect(() => {
+    setPage(1);
+  }, [search, filter, categoryFilter]);
+
   useEffect(() => {
     setFilter(
       header.map((item) => {
@@ -125,7 +129,7 @@ export const Table: TableComponentProps = ({
       .map((item) => {
         data
           .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
-          .sort((a, b) => a.localeCompare(b))
+          .sort((a, b) => (a || "").localeCompare(b || ""))
           .filter((value, index, self) => self.indexOf(value) === index)
           .map((value) => {
             if (!categoryFilter.includes(value)) {
@@ -183,7 +187,7 @@ export const Table: TableComponentProps = ({
       })
       ?.filter((item) => {
         return filter.every((filterItem) => {
-          return item[filterItem.key as keyof typeof item]
+          return (item[filterItem.key as keyof typeof item] || "")
             ?.toString()
             ?.toLowerCase()
             ?.includes(filterItem.value.toLowerCase());
@@ -280,7 +284,7 @@ export const Table: TableComponentProps = ({
                         (dataItem) =>
                           dataItem[item.key as keyof typeof dataItem]
                       )
-                      .sort((a, b) => a.localeCompare(b))
+                      .sort((a, b) => (a || "").localeCompare(b || ""))
                       .filter(
                         (value, index, self) => self.indexOf(value) === index
                       )
@@ -646,8 +650,10 @@ export const Table: TableComponentProps = ({
           <span className="hidden md:block text-sm text-slate-400">{`Showing ${
             (page - 1) * maxRow + 1
           } to ${
-            page * maxRow > data.length ? data.length : page * maxRow
-          } of ${data.length} entries`}</span>
+            page * maxRow > filteredData.length
+              ? filteredData.length
+              : page * maxRow
+          } of ${filteredData.length} entries`}</span>
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
@@ -678,29 +684,29 @@ export const Table: TableComponentProps = ({
               ref={paginationRef}
               className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden"
             >
-              {Array.from({ length: Math.ceil(data.length / maxRow) }).map(
-                (_, index) => {
-                  return (
-                    <button
-                      key={index}
-                      id={`pagination-page-${index}`}
-                      type="button"
-                      className="flex justify-center items-center min-w-9 h-9 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
-                      disabled={page === index + 1}
-                      onClick={() => {
-                        setPage(index + 1);
-                      }}
-                    >
-                      {index + 1}
-                    </button>
-                  );
-                }
-              )}
+              {Array.from({
+                length: Math.ceil(filteredData.length / maxRow),
+              }).map((_, index) => {
+                return (
+                  <button
+                    key={index}
+                    id={`pagination-page-${index}`}
+                    type="button"
+                    className="flex justify-center items-center min-w-9 h-9 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                    disabled={page === index + 1}
+                    onClick={() => {
+                      setPage(index + 1);
+                    }}
+                  >
+                    {index + 1}
+                  </button>
+                );
+              })}
             </div>
             <button
               type="button"
               className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
-              disabled={data.length <= page * maxRow}
+              disabled={filteredData.length <= page * maxRow}
               onClick={() => {
                 setPage((prev) => prev + 1);
                 handleOnNextClick();
@@ -711,9 +717,9 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
-              disabled={data.length <= page * maxRow}
+              disabled={filteredData.length <= page * maxRow}
               onClick={() => {
-                setPage(Math.ceil(data.length / maxRow));
+                setPage(Math.ceil(filteredData.length / maxRow));
                 paginationRef.current?.scrollTo({
                   left: paginationRef.current.scrollWidth,
                   behavior: "smooth",