@algorithm-shift/design-system 1.2.45 → 1.2.47

package/dist/index.d.mts

@@ -102,6 +102,7 @@ interface TableProps extends ElementProps {
   cellClickEnabled?: (cellData: Record<string, any>, columnId: string) => boolean;
   onCellClick?: (cellData: Record<string, any>, columnId: string) => void;
   getRowSelection?: (rowSelection: Record<string, boolean>) => void;
+  totalRecords?: number;
 }
 
 interface TabsProps extends ElementProps {
@@ -246,7 +247,14 @@ 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, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
+type PaginationMode = 'client' | 'server';
+interface ExtendedTableProps extends TableProps {
+    paginationMode?: PaginationMode;
+    page?: number;
+    itemsPerPage?: number;
+    onPageChange?: (page: number) => void;
+}
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, page, loading, totalRecords, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
 
 interface CustomPaginationProps {
     totalPages: number;

package/dist/index.d.ts

@@ -102,6 +102,7 @@ interface TableProps extends ElementProps {
   cellClickEnabled?: (cellData: Record<string, any>, columnId: string) => boolean;
   onCellClick?: (cellData: Record<string, any>, columnId: string) => void;
   getRowSelection?: (rowSelection: Record<string, boolean>) => void;
+  totalRecords?: number;
 }
 
 interface TabsProps extends ElementProps {
@@ -246,7 +247,14 @@ 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, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
+type PaginationMode = 'client' | 'server';
+interface ExtendedTableProps extends TableProps {
+    paginationMode?: PaginationMode;
+    page?: number;
+    itemsPerPage?: number;
+    onPageChange?: (page: number) => void;
+}
+declare const Table: ({ columns, data, rowActions, className, style, pagination, paginationMode, itemsPerPage, onPageChange, page, loading, totalRecords, ...props }: ExtendedTableProps) => react_jsx_runtime.JSX.Element;
 
 interface CustomPaginationProps {
     totalPages: number;

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");
 
@@ -2278,7 +2281,6 @@ var CustomPagination = ({
 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,22 +2289,40 @@ var Table2 = ({
   className,
   style,
   pagination = false,
+  paginationMode = "client",
   itemsPerPage = 10,
   onPageChange,
+  page,
   loading = false,
+  totalRecords = 0,
   ...props
 }) => {
   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 && rawData.length > 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 > itemsPerPage : rawData.length > itemsPerPage);
+  const handlePageChange = (next) => {
+    if (!isControlled) setInternalPage(next);
+    onPageChange?.(next);
   };
-  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) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+  const totalPages = enablePagination ? Math.max(
+    1,
+    Math.ceil(
+      (paginationMode === "server" ? totalRecords : rawData.length) / itemsPerPage
+    )
+  ) : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `${className || ""} space-y-3`, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       DataTable,
       {
@@ -2316,7 +2336,7 @@ var Table2 = ({
     enablePagination && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Pagination_default,
       {
-        totalPages: Math.ceil(rawData.length / itemsPerPage),
+        totalPages,
         currentPage,
         onPageChange: handlePageChange
       }