elseware-ui 2.15.1 → 2.15.2

package/build/components/data-display/advanced-table/AdvancedTable.d.ts

@@ -9,6 +9,9 @@ export interface AdvancedTableProps<T> {
     isSuccess?: boolean;
     isError?: boolean;
     error?: unknown;
+    onPageChange?: (page: number) => void;
+    onLimitChange?: (limit: number | "All") => void;
+    totalRecords?: number;
 }
-declare function AdvancedTable<T extends Record<string, any>>({ title, columns, data, defaultPageSize, pageSizeOptions, isLoading, isSuccess, isError, error, }: AdvancedTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function AdvancedTable<T extends Record<string, any>>({ title, columns, data, defaultPageSize, pageSizeOptions, isLoading, isSuccess, isError, error, totalRecords, onPageChange, onLimitChange, }: AdvancedTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default AdvancedTable;

package/build/components/data-display/advanced-table/AdvancedTableContent.d.ts

@@ -11,6 +11,9 @@ type AdvancedTableContentProps<T> = {
     data: T[];
     defaultPageSize?: number;
     pageSizeOptions?: (number | "All")[];
+    totalRecords?: number;
+    onPageChange?: (page: number) => void;
+    onLimitChange?: (limit: number | "All") => void;
 };
-export declare function AdvancedTableContent<T extends Record<string, any>>({ title, columns, data, defaultPageSize, pageSizeOptions, }: AdvancedTableContentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AdvancedTableContent<T extends Record<string, any>>({ title, columns, data, defaultPageSize, pageSizeOptions, totalRecords, onPageChange, onLimitChange, }: AdvancedTableContentProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/index.es.js

@@ -7853,7 +7853,7 @@ function AsyncComponentWrapper(_a) {
 }
 
 function AdvancedTableContent(_a) {
-    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c;
+    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, totalRecords = _a.totalRecords, onPageChange = _a.onPageChange, onLimitChange = _a.onLimitChange;
     var _d = useState(""), searchQuery = _d[0], setSearchQuery = _d[1];
     var _e = useState(null), sortKey = _e[0], setSortKey = _e[1];
     var _f = useState("asc"), sortOrder = _f[0], setSortOrder = _f[1];
@@ -7883,18 +7883,23 @@ function AdvancedTableContent(_a) {
             return 0;
         });
     }, [filteredData, sortKey, sortOrder]);
-    // Pagination
-    var totalPages = rowsPerPage === "All" ? 1 : Math.ceil(sortedData.length / rowsPerPage);
-    var paginatedData = rowsPerPage === "All"
+    // BACKEND OR FRONTEND PAGINATION
+    var totalItems = totalRecords !== null && totalRecords !== void 0 ? totalRecords : sortedData.length;
+    var totalPages = rowsPerPage === "All" ? 1 : Math.ceil(totalItems / rowsPerPage);
+    var localPaginatedData = rowsPerPage === "All"
         ? sortedData
         : sortedData.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage);
+    var finalData = totalRecords ? data : localPaginatedData;
+    // EVENTS
     var handlePageChange = function (page) {
         setCurrentPage(page);
+        onPageChange && onPageChange(page);
     };
     var handlePageSizeChange = function (e) {
         var value = e.target.value === "All" ? "All" : parseInt(e.target.value);
         setRowsPerPage(value);
         setCurrentPage(0);
+        onLimitChange && onLimitChange(value);
     };
     var toggleSort = function (key) {
         if (sortKey === key) {
@@ -7909,12 +7914,12 @@ function AdvancedTableContent(_a) {
                                         "px-4 py-3 font-semibold text-gray-700 dark:text-gray-300": true,
                                         "cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700": col.sortable,
                                         "bg-gray-300 dark:bg-gray-600": sortKey === col.key,
-                                    }) }, { children: jsxs("div", __assign$1({ className: "flex items-center gap-1" }, { children: [col.header, col.sortable && sortKey === col.key && (jsx("span", __assign$1({ className: "text-xs" }, { children: sortOrder === "asc" ? "▲" : "▼" })))] })) }), i)); }) }) })), jsxs("tbody", __assign$1({ className: "divide-y divide-gray-200 dark:divide-gray-700" }, { children: [paginatedData.map(function (row, rowIndex) { return (jsx("tr", __assign$1({ className: "hover:bg-gray-50 dark:hover:bg-gray-900 odd:eui-bg-sm even:eui-bg-md" }, { children: columns.map(function (col, colIndex) { return (jsx("td", __assign$1({ className: "px-4 py-1 text-gray-800 dark:text-gray-400" }, { children: col.render(row[col.key], row) }), colIndex)); }) }), rowIndex)); }), paginatedData.length === 0 && (jsx("tr", { children: jsx("td", __assign$1({ colSpan: columns.length, className: "px-4 py-4 text-center text-gray-500" }, { children: "No matching data found." })) }))] }))] })) })), jsxs("div", __assign$1({ className: "flex items-center justify-between mt-4" }, { children: [jsx("select", __assign$1({ value: rowsPerPage, onChange: handlePageSizeChange, className: "px-3 py-2 text-sm border border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-400 dark:border-gray-600" }, { children: pageSizeOptions.map(function (opt, idx) { return (jsxs("option", __assign$1({ value: opt }, { children: ["Show ", opt] }), idx)); }) })), rowsPerPage !== "All" && totalPages > 1 && (jsxs("div", __assign$1({ className: "flex justify-between items-center" }, { children: [jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === 0, onClick: function () { return handlePageChange(currentPage - 1); } }, { children: "<" })), jsxs("span", __assign$1({ className: "px-5 text-sm text-gray-700 dark:text-gray-400" }, { children: ["Page ", currentPage + 1, " of ", totalPages] })), jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === totalPages - 1, onClick: function () { return handlePageChange(currentPage + 1); } }, { children: ">" }))] })))] }))] })));
+                                    }) }, { children: jsxs("div", __assign$1({ className: "flex items-center gap-1" }, { children: [col.header, col.sortable && sortKey === col.key && (jsx("span", __assign$1({ className: "text-xs" }, { children: sortOrder === "asc" ? "▲" : "▼" })))] })) }), i)); }) }) })), jsxs("tbody", __assign$1({ className: "divide-y divide-gray-200 dark:divide-gray-700" }, { children: [finalData.map(function (row, rowIndex) { return (jsx("tr", __assign$1({ className: "hover:bg-gray-50 dark:hover:bg-gray-900 odd:eui-bg-sm even:eui-bg-md" }, { children: columns.map(function (col, colIndex) { return (jsx("td", __assign$1({ className: "px-4 py-1 text-gray-800 dark:text-gray-400" }, { children: col.render(row[col.key], row) }), colIndex)); }) }), rowIndex)); }), finalData.length === 0 && (jsx("tr", { children: jsx("td", __assign$1({ colSpan: columns.length, className: "px-4 py-4 text-center text-gray-500" }, { children: "No matching data found." })) }))] }))] })) })), jsxs("div", __assign$1({ className: "flex items-center justify-between mt-4" }, { children: [jsx("select", __assign$1({ value: rowsPerPage, onChange: handlePageSizeChange, className: "px-3 py-2 text-sm border border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-400 dark:border-gray-600" }, { children: pageSizeOptions.map(function (opt, idx) { return (jsxs("option", __assign$1({ value: opt }, { children: ["Show ", opt] }), idx)); }) })), rowsPerPage !== "All" && totalPages > 1 && (jsxs("div", __assign$1({ className: "flex justify-between items-center" }, { children: [jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === 0, onClick: function () { return handlePageChange(currentPage - 1); } }, { children: "<" })), jsxs("span", __assign$1({ className: "px-5 text-sm text-gray-700 dark:text-gray-400" }, { children: ["Page ", currentPage + 1, " of ", totalPages] })), jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === totalPages - 1, onClick: function () { return handlePageChange(currentPage + 1); } }, { children: ">" }))] })))] }))] })));
 }
 
 function AdvancedTable(_a) {
-    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, isLoading = _a.isLoading, _d = _a.isSuccess, isSuccess = _d === void 0 ? true : _d, isError = _a.isError, error = _a.error;
-    return (jsx("div", { children: jsx(AsyncComponentWrapper, __assign$1({ isLoading: isLoading, isSuccess: isSuccess, isError: isError, error: error }, { children: jsx(AdvancedTableContent, { title: title, columns: columns, data: data, defaultPageSize: defaultPageSize, pageSizeOptions: pageSizeOptions }) })) }));
+    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, isLoading = _a.isLoading, _d = _a.isSuccess, isSuccess = _d === void 0 ? true : _d, isError = _a.isError, error = _a.error, totalRecords = _a.totalRecords, onPageChange = _a.onPageChange, onLimitChange = _a.onLimitChange;
+    return (jsx("div", { children: jsx(AsyncComponentWrapper, __assign$1({ isLoading: isLoading, isSuccess: isSuccess, isError: isError, error: error }, { children: jsx(AdvancedTableContent, { title: title, columns: columns, data: data, defaultPageSize: defaultPageSize, pageSizeOptions: pageSizeOptions, totalRecords: totalRecords, onPageChange: onPageChange, onLimitChange: onLimitChange }) })) }));
 }
 
 var shapes$3 = {

package/build/index.js

@@ -7880,7 +7880,7 @@ function AsyncComponentWrapper(_a) {
 }
 
 function AdvancedTableContent(_a) {
-    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c;
+    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, totalRecords = _a.totalRecords, onPageChange = _a.onPageChange, onLimitChange = _a.onLimitChange;
     var _d = React.useState(""), searchQuery = _d[0], setSearchQuery = _d[1];
     var _e = React.useState(null), sortKey = _e[0], setSortKey = _e[1];
     var _f = React.useState("asc"), sortOrder = _f[0], setSortOrder = _f[1];
@@ -7910,18 +7910,23 @@ function AdvancedTableContent(_a) {
             return 0;
         });
     }, [filteredData, sortKey, sortOrder]);
-    // Pagination
-    var totalPages = rowsPerPage === "All" ? 1 : Math.ceil(sortedData.length / rowsPerPage);
-    var paginatedData = rowsPerPage === "All"
+    // BACKEND OR FRONTEND PAGINATION
+    var totalItems = totalRecords !== null && totalRecords !== void 0 ? totalRecords : sortedData.length;
+    var totalPages = rowsPerPage === "All" ? 1 : Math.ceil(totalItems / rowsPerPage);
+    var localPaginatedData = rowsPerPage === "All"
         ? sortedData
         : sortedData.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage);
+    var finalData = totalRecords ? data : localPaginatedData;
+    // EVENTS
     var handlePageChange = function (page) {
         setCurrentPage(page);
+        onPageChange && onPageChange(page);
     };
     var handlePageSizeChange = function (e) {
         var value = e.target.value === "All" ? "All" : parseInt(e.target.value);
         setRowsPerPage(value);
         setCurrentPage(0);
+        onLimitChange && onLimitChange(value);
     };
     var toggleSort = function (key) {
         if (sortKey === key) {
@@ -7936,12 +7941,12 @@ function AdvancedTableContent(_a) {
                                         "px-4 py-3 font-semibold text-gray-700 dark:text-gray-300": true,
                                         "cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-700": col.sortable,
                                         "bg-gray-300 dark:bg-gray-600": sortKey === col.key,
-                                    }) }, { children: jsxRuntime.jsxs("div", __assign$1({ className: "flex items-center gap-1" }, { children: [col.header, col.sortable && sortKey === col.key && (jsxRuntime.jsx("span", __assign$1({ className: "text-xs" }, { children: sortOrder === "asc" ? "▲" : "▼" })))] })) }), i)); }) }) })), jsxRuntime.jsxs("tbody", __assign$1({ className: "divide-y divide-gray-200 dark:divide-gray-700" }, { children: [paginatedData.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", __assign$1({ className: "hover:bg-gray-50 dark:hover:bg-gray-900 odd:eui-bg-sm even:eui-bg-md" }, { children: columns.map(function (col, colIndex) { return (jsxRuntime.jsx("td", __assign$1({ className: "px-4 py-1 text-gray-800 dark:text-gray-400" }, { children: col.render(row[col.key], row) }), colIndex)); }) }), rowIndex)); }), paginatedData.length === 0 && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", __assign$1({ colSpan: columns.length, className: "px-4 py-4 text-center text-gray-500" }, { children: "No matching data found." })) }))] }))] })) })), jsxRuntime.jsxs("div", __assign$1({ className: "flex items-center justify-between mt-4" }, { children: [jsxRuntime.jsx("select", __assign$1({ value: rowsPerPage, onChange: handlePageSizeChange, className: "px-3 py-2 text-sm border border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-400 dark:border-gray-600" }, { children: pageSizeOptions.map(function (opt, idx) { return (jsxRuntime.jsxs("option", __assign$1({ value: opt }, { children: ["Show ", opt] }), idx)); }) })), rowsPerPage !== "All" && totalPages > 1 && (jsxRuntime.jsxs("div", __assign$1({ className: "flex justify-between items-center" }, { children: [jsxRuntime.jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === 0, onClick: function () { return handlePageChange(currentPage - 1); } }, { children: "<" })), jsxRuntime.jsxs("span", __assign$1({ className: "px-5 text-sm text-gray-700 dark:text-gray-400" }, { children: ["Page ", currentPage + 1, " of ", totalPages] })), jsxRuntime.jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === totalPages - 1, onClick: function () { return handlePageChange(currentPage + 1); } }, { children: ">" }))] })))] }))] })));
+                                    }) }, { children: jsxRuntime.jsxs("div", __assign$1({ className: "flex items-center gap-1" }, { children: [col.header, col.sortable && sortKey === col.key && (jsxRuntime.jsx("span", __assign$1({ className: "text-xs" }, { children: sortOrder === "asc" ? "▲" : "▼" })))] })) }), i)); }) }) })), jsxRuntime.jsxs("tbody", __assign$1({ className: "divide-y divide-gray-200 dark:divide-gray-700" }, { children: [finalData.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", __assign$1({ className: "hover:bg-gray-50 dark:hover:bg-gray-900 odd:eui-bg-sm even:eui-bg-md" }, { children: columns.map(function (col, colIndex) { return (jsxRuntime.jsx("td", __assign$1({ className: "px-4 py-1 text-gray-800 dark:text-gray-400" }, { children: col.render(row[col.key], row) }), colIndex)); }) }), rowIndex)); }), finalData.length === 0 && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", __assign$1({ colSpan: columns.length, className: "px-4 py-4 text-center text-gray-500" }, { children: "No matching data found." })) }))] }))] })) })), jsxRuntime.jsxs("div", __assign$1({ className: "flex items-center justify-between mt-4" }, { children: [jsxRuntime.jsx("select", __assign$1({ value: rowsPerPage, onChange: handlePageSizeChange, className: "px-3 py-2 text-sm border border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-400 dark:border-gray-600" }, { children: pageSizeOptions.map(function (opt, idx) { return (jsxRuntime.jsxs("option", __assign$1({ value: opt }, { children: ["Show ", opt] }), idx)); }) })), rowsPerPage !== "All" && totalPages > 1 && (jsxRuntime.jsxs("div", __assign$1({ className: "flex justify-between items-center" }, { children: [jsxRuntime.jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === 0, onClick: function () { return handlePageChange(currentPage - 1); } }, { children: "<" })), jsxRuntime.jsxs("span", __assign$1({ className: "px-5 text-sm text-gray-700 dark:text-gray-400" }, { children: ["Page ", currentPage + 1, " of ", totalPages] })), jsxRuntime.jsx("button", __assign$1({ className: "px-3 py-1 rounded-full text-sm bg-gray-200 dark:bg-gray-700 disabled:opacity-40", disabled: currentPage === totalPages - 1, onClick: function () { return handlePageChange(currentPage + 1); } }, { children: ">" }))] })))] }))] })));
 }
 
 function AdvancedTable(_a) {
-    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, isLoading = _a.isLoading, _d = _a.isSuccess, isSuccess = _d === void 0 ? true : _d, isError = _a.isError, error = _a.error;
-    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AsyncComponentWrapper, __assign$1({ isLoading: isLoading, isSuccess: isSuccess, isError: isError, error: error }, { children: jsxRuntime.jsx(AdvancedTableContent, { title: title, columns: columns, data: data, defaultPageSize: defaultPageSize, pageSizeOptions: pageSizeOptions }) })) }));
+    var title = _a.title, columns = _a.columns, data = _a.data, _b = _a.defaultPageSize, defaultPageSize = _b === void 0 ? 5 : _b, _c = _a.pageSizeOptions, pageSizeOptions = _c === void 0 ? [5, 10, 100, "All"] : _c, isLoading = _a.isLoading, _d = _a.isSuccess, isSuccess = _d === void 0 ? true : _d, isError = _a.isError, error = _a.error, totalRecords = _a.totalRecords, onPageChange = _a.onPageChange, onLimitChange = _a.onLimitChange;
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AsyncComponentWrapper, __assign$1({ isLoading: isLoading, isSuccess: isSuccess, isError: isError, error: error }, { children: jsxRuntime.jsx(AdvancedTableContent, { title: title, columns: columns, data: data, defaultPageSize: defaultPageSize, pageSizeOptions: pageSizeOptions, totalRecords: totalRecords, onPageChange: onPageChange, onLimitChange: onLimitChange }) })) }));
 }
 
 var shapes$3 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [