pixelize-design-library 2.2.107 → 2.2.109

package/dist/Components/Table/Components/Pagination.d.ts

@@ -9,6 +9,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
     isServerPagination: boolean;
+    pageSizeOptions?: (number | string)[];
 };
-declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, pageSizeOptions, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -8,16 +8,20 @@ var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var Pagination = function (_a) {
-    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
-    var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
+    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, pageSizeOptions = _a.pageSizeOptions;
+    var computedOptions = pageSizeOptions && pageSizeOptions.length
+        ? pageSizeOptions
+        : (0, table_1.pageSizeCalculation)(dataLength);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
         !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
-            dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
-            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
+            !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
+            computedOptions.map(function (size, index) {
+                return (react_1.default.createElement("option", { key: index, value: size }, String(size)));
+            }))),
         dataLength > 0 && (react_1.default.createElement(react_2.Flex, null,
             react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),

package/dist/Components/Table/Components/useTable.d.ts

@@ -12,8 +12,9 @@ type UseTableProps = {
     noOfRowsPerPage?: number;
     isServerPagination: boolean;
     totalRecords: number;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, }: UseTableProps) => {
     tableData: DataObject[];
     tableContainerStyles: {
         borderRadius: string;

package/dist/Components/Table/Components/useTable.js

@@ -25,7 +25,7 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
 var defaultPageSize = 50;
 var useTable = function (_a) {
-    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
@@ -90,6 +90,9 @@ var useTable = function (_a) {
     var handlePageSizeChange = function (event) {
         var value = Number(event.target.value);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
         setCurrentPage(0);
     };
     var handleSort = (0, react_1.useCallback)(function (field, sort) {

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, tableSettings, filterSidebar }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, tableSettings, filterSidebar }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -54,7 +54,7 @@ function Table(_a) {
         name: "",
         page: "",
         orgId: "",
-    } : _u, _v = _a.paginationMode, paginationMode = _v === void 0 ? "client" : _v, _w = _a.noOfRowsPerPage, noOfRowsPerPage = _w === void 0 ? 50 : _w, _x = _a.totalRecords, totalRecords = _x === void 0 ? 0 : _x, onPagination = _a.onPagination, _y = _a.isTableSettings, isTableSettings = _y === void 0 ? false : _y, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
+    } : _u, _v = _a.paginationMode, paginationMode = _v === void 0 ? "client" : _v, _w = _a.noOfRowsPerPage, noOfRowsPerPage = _w === void 0 ? 50 : _w, _x = _a.totalRecords, totalRecords = _x === void 0 ? 0 : _x, onPagination = _a.onPagination, _y = _a.isTableSettings, isTableSettings = _y === void 0 ? false : _y, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
     // onColumnFilter
     ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -97,6 +97,7 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
+        onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
     }), tableData = _1.tableData, isContent = _1.isContent, isLink = _1.isLink, headerRefs = _1.headerRefs, columnWidths = _1.columnWidths, handleSort = _1.handleSort, handleCheckbox = _1.handleCheckbox, filteredData = _1.filteredData, startRow = _1.startRow, endRow = _1.endRow, selection = _1.selection, columnsSort = _1.columnsSort, currentPage = _1.currentPage, pages = _1.pages, rowsPerPage = _1.rowsPerPage, handlePageSizeChange = _1.handlePageSizeChange, setCurrentPage = _1.setCurrentPage, columnsList = _1.columnsList, handleColumnPreferences = _1.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
@@ -108,7 +109,13 @@ function Table(_a) {
     }, [currentPage, onPagination, noOfRowsPerPage]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
-    var tableMaxH = 500;
+    var estimatedRowHeight = 45;
+    var actualRows = _filteredData.length;
+    var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : 5;
+    var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : 10;
+    var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
+    var dynamicMaxH = Math.min(500, (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight);
+    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : dynamicMaxH;
     return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
         react_1.default.createElement(react_2.Flex, { align: "start" },
             react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.25 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500], style: { height: controlsHeight + tableMaxH } },
@@ -127,7 +134,7 @@ function Table(_a) {
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
-                        react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true })))),
+                        react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true })))),
                 react_1.default.createElement(react_2.TableContainer, { position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
                         '&::-webkit-scrollbar': {
                             width: '6px',

package/dist/Components/Table/TableProps.d.ts

@@ -24,6 +24,11 @@ export type TableProps = {
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    paginationSelectOptions?: (number | string)[];
+    tableMaxHeight?: number;
+    minVisibleRows?: number;
+    maxVisibleRows?: number;
     headerActions?: HeaderActionsProps;
     onGlobalSearch?: (searchVal: string) => void;
     onColumnFilter?: (filters: Record<string, any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.107",
+  "version": "2.2.109",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",