@algorithm-shift/design-system 1.2.46 → 1.2.48

package/dist/index.d.ts

@@ -97,7 +97,6 @@ interface TableProps extends ElementProps {
   data?: Record<string, any>;
   pagination?: boolean;
   itemsPerPage?: number;
-  onPageChange?: (page: number) => void;
   loading?: boolean;
   cellClickEnabled?: (cellData: Record<string, any>, columnId: string) => boolean;
   onCellClick?: (cellData: Record<string, any>, columnId: string) => void;
@@ -247,15 +246,31 @@ declare const DateRange: ({ className, style, ...props }: DateRangeInputProps) =
 
 declare const TextInputGroup: ({ className, style, prepend, append, ...props }: TextInputGroupProps) => react_jsx_runtime.JSX.Element;
 
-declare const Table: ({ columns, data, rowActions, className, style, pagination, itemsPerPage, onPageChange, loading, totalRecords, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
-
-interface CustomPaginationProps {
-    totalPages: number;
-    currentPage: number;
-    onPageChange: (page: number) => void;
-    maxVisiblePages?: number;
+interface PageChangeProps {
+  page: number;
+  itemsPerPage: number;
+}
+
+interface CustomPaginationProps {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (props: PageChangeProps) => void;
+  maxVisiblePages?: number;
+  perPage: number;
+}
+
+type PaginationMode = 'client' | 'server';
+
+interface ExtendedTableProps extends TableProps {
+  paginationMode?: PaginationMode;
+  page?: number;
+  itemsPerPage?: number;
+  onPageChange?: (props: PageChangeProps) => void;
 }
-declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
+
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, page, loading, totalRecords, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
+
+declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, LinkComponent, pathname, canvasMode }: TabsProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -1944,6 +1944,9 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 };
 var TextInputGroup_default = TextInputGroup;
 
+// src/components/DataDisplay/Table/Table.tsx
+var import_react6 = require("react");
+
 // src/components/ui/data-table.tsx
 var import_react_table = require("@tanstack/react-table");
 
@@ -2212,7 +2215,8 @@ var CustomPagination = ({
   totalPages,
   currentPage,
   onPageChange,
-  maxVisiblePages = 5
+  maxVisiblePages = 5,
+  perPage
 }) => {
   const getPageNumbers = () => {
     const pages = [];
@@ -2245,40 +2249,65 @@ var CustomPagination = ({
   };
   const handlePageChange = (page) => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
-      onPageChange(page);
+      onPageChange({
+        page,
+        itemsPerPage: perPage
+      });
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PaginationContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      PaginationPrevious,
-      {
-        onClick: () => handlePageChange(currentPage - 1),
-        className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
-      }
-    ) }),
-    pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      PaginationLink,
-      {
-        onClick: () => handlePageChange(pageNumber),
-        isActive: currentPage === pageNumber,
-        className: "cursor-pointer",
-        children: pageNumber
-      }
-    ) }, index)),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      PaginationNext,
-      {
-        onClick: () => handlePageChange(currentPage + 1),
-        className: currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
-      }
-    ) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col gap-4 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm text-muted-foreground", children: "Items per page:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        Select,
+        {
+          value: String(perPage),
+          onValueChange: (value) => {
+            onPageChange({ page: 1, itemsPerPage: Number(value) });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem, { value: "50", children: "50" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        PaginationPrevious,
+        {
+          onClick: () => handlePageChange(currentPage - 1),
+          className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) }),
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationEllipsis, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        PaginationLink,
+        {
+          onClick: () => handlePageChange(pageNumber),
+          isActive: currentPage === pageNumber,
+          className: "cursor-pointer",
+          children: pageNumber
+        }
+      ) }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        PaginationNext,
+        {
+          onClick: () => handlePageChange(currentPage + 1),
+          className: currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) })
+    ] }) })
+  ] });
 };
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react6 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Table2 = ({
   columns,
@@ -2287,23 +2316,41 @@ var Table2 = ({
   className,
   style,
   pagination = false,
+  paginationMode = "client",
   itemsPerPage = 10,
   onPageChange,
+  page,
   loading = false,
   totalRecords = 0,
   ...props
 }) => {
+  const [perPage, setPerPage] = (0, import_react6.useState)(itemsPerPage);
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = (0, import_react6.useState)(1);
-  const enablePagination = pagination && totalRecords > itemsPerPage;
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-    onPageChange?.(page);
+  const isControlled = typeof page === "number";
+  const [internalPage, setInternalPage] = (0, import_react6.useState)(1);
+  const currentPage = isControlled ? page : internalPage;
+  (0, import_react6.useEffect)(() => {
+    if (isControlled) return;
+    if (currentPage > 1 && !pagination) setInternalPage(1);
+  }, [pagination, isControlled]);
+  const enablePagination = pagination && (paginationMode === "server" ? totalRecords > perPage : rawData.length > perPage);
+  const handlePageChange = ({ page: page2, itemsPerPage: itemsPerPage2 }) => {
+    if (!isControlled) setInternalPage(page2);
+    onPageChange?.({ page: page2, itemsPerPage: itemsPerPage2 });
   };
-  const paginatedData = enablePagination ? rawData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage) : rawData;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `${className} space-y-3`, style, children: [
+  const paginatedData = !enablePagination ? rawData : paginationMode === "server" ? rawData : rawData.slice(
+    (currentPage - 1) * perPage,
+    currentPage * perPage
+  );
+  const totalPages = enablePagination ? Math.max(
+    1,
+    Math.ceil(
+      (paginationMode === "server" ? totalRecords : rawData.length) / perPage
+    )
+  ) : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `${className || ""} space-y-3`, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       DataTable,
       {
@@ -2317,7 +2364,8 @@ var Table2 = ({
     enablePagination && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Pagination_default,
       {
-        totalPages: Math.ceil(totalRecords / itemsPerPage),
+        perPage,
+        totalPages,
         currentPage,
         onPageChange: handlePageChange
       }