pixelize-design-library 1.1.57 → 1.1.58

package/dist/Components/Table/Components/TableLoading.js

@@ -33,7 +33,7 @@ exports.default = TableLoading;
 var TableBodyLoading = function (_a) {
     var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor;
     return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 5 }).map(function (_, index) {
-        return (react_1.default.createElement(react_2.Tr, null,
+        return (react_1.default.createElement(react_2.Tr, { key: index },
             react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor) },
                 react_1.default.createElement(react_2.Skeleton, { height: "15px", variant: "shine" }))));
     })));

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

@@ -10,8 +10,9 @@ type UseTableProps = {
     tablePreferences?: Record<string, any>;
     savePreferences?: (data: Record<string, any>) => void;
     noOfRowsPerPage?: number;
+    isServerPagination: boolean;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, }: 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, columns = _a.columns, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, columns = _a.columns, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
@@ -70,10 +70,13 @@ var useTable = function (_a) {
     var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
     var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
     (0, react_1.useEffect)(function () {
+        if (isServerPagination) {
+            return setFilteredData(tableData);
+        }
         var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
         var data = sortedData.slice(startRow, endRow);
-        setFilteredData(data);
-    }, [columnsSort, startRow, endRow, tableData]);
+        return setFilteredData(data);
+    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
     var handlePageSizeChange = function (event) {
         var value = Number(event.target.value);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);

package/dist/Components/Table/Table.js

@@ -75,6 +75,7 @@ function Table(_a) {
         tablePreferences: tablePreferences,
         savePreferences: savePreferences,
         noOfRowsPerPage: noOfRowsPerPage,
+        isServerPagination: paginationMode === "server",
     }), tableData = _u.tableData, tableContainerStyles = _u.tableContainerStyles, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, visibleColumns = _u.visibleColumns, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handleColumnVisibilityChange = _u.handleColumnVisibilityChange, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
@@ -95,6 +96,6 @@ function Table(_a) {
                                 : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
                 react_1.default.createElement(react_3.Tbody, null,
                     react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
-        isPagination && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: totalPages !== null && totalPages !== void 0 ? totalPages : pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: paginationMode === "server", visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
+        isPagination && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: paginationMode === "server" ? totalPages : pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: paginationMode === "server", visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
 }
 exports.default = Table;

package/package.json

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