pixelize-design-library 2.2.108 → 2.2.110

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, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, 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, autoFitViewport, tableSettings, filterSidebar }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -54,20 +54,22 @@ 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, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, 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, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
     // onColumnFilter
     ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _z = (0, react_1.useState)({}), columnsSearch = _z[0], setColumnsSearch = _z[1];
+    var tableContainerRef = (0, react_1.useRef)(null);
+    var _0 = (0, react_1.useState)(500), viewportAvailableH = _0[0], setViewportAvailableH = _0[1];
     var isServerPagination = paginationMode === "server";
-    var _0 = (0, usePreferences_1.useGetPreferences)({
+    var _1 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _0.preferences, loading = _0.loading;
+    }), tablePreferencesData = _1.preferences, loading = _1.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -85,7 +87,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _1 = (0, useTable_1.default)({
+    var _2 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -98,7 +100,7 @@ function Table(_a) {
         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;
+    }), tableData = _2.tableData, isContent = _2.isContent, isLink = _2.isLink, headerRefs = _2.headerRefs, columnWidths = _2.columnWidths, handleSort = _2.handleSort, handleCheckbox = _2.handleCheckbox, filteredData = _2.filteredData, startRow = _2.startRow, endRow = _2.endRow, selection = _2.selection, columnsSort = _2.columnsSort, currentPage = _2.currentPage, pages = _2.pages, rowsPerPage = _2.rowsPerPage, handlePageSizeChange = _2.handlePageSizeChange, setCurrentPage = _2.setCurrentPage, columnsList = _2.columnsList, handleColumnPreferences = _2.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -110,9 +112,28 @@ function Table(_a) {
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
-    var visibleRowsCount = isServerPagination ? (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 0) : _filteredData.length;
-    var dynamicMaxH = Math.min(500, (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight);
-    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : dynamicMaxH;
+    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));
+    (0, react_1.useEffect)(function () {
+        if (!autoFitViewport)
+            return;
+        var compute = function () {
+            if (tableContainerRef.current) {
+                var rect = tableContainerRef.current.getBoundingClientRect();
+                var available = Math.max(200, window.innerHeight - rect.top - 16);
+                setViewportAvailableH(available);
+            }
+        };
+        compute();
+        window.addEventListener("resize", compute);
+        return function () { return window.removeEventListener("resize", compute); };
+    }, [autoFitViewport]);
+    var rowsHeight = (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight;
+    var dynamicMaxH = Math.min(500, rowsHeight);
+    var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
+    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : fittedMaxH;
     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 } },
@@ -132,7 +153,7 @@ function Table(_a) {
                     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, pageSizeOptions: paginationSelectOptions, isVisiblity: true })))),
-                react_1.default.createElement(react_2.TableContainer, { position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
+                react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
                         '&::-webkit-scrollbar': {
                             width: '6px',
                             height: '6px',

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

@@ -27,6 +27,9 @@ export type TableProps = {
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     paginationSelectOptions?: (number | string)[];
     tableMaxHeight?: number;
+    minVisibleRows?: number;
+    maxVisibleRows?: number;
+    autoFitViewport?: boolean;
     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.108",
+  "version": "2.2.110",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",