qbs-react-grid 1.1.10 → 1.1.12

package/es/qbsTable/CustomTableCell.js

@@ -2,11 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "path", "link"];
 import React from 'react';
 import Cell from '../Cell';
 import { handleCellFormat } from './utilities/handleFormatCell';
 import MenuDropDown from './utilities/menuDropDown';
+import { Link } from 'react-router-dom';
 var CHECKBOX_LINE_HEIGHT = '36px';
 export var CheckCell = /*#__PURE__*/React.memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -72,7 +73,7 @@ export var ExpandCell = /*#__PURE__*/React.memo(function (_ref3) {
   }) ? '-' : '+'));
 });
 export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
-  var _renderCell, _renderCell2;
+  var _renderCell, _renderCell2, _renderCell3;
   var rowData = _ref4.rowData,
     renderCell = _ref4.renderCell,
     toolTip = _ref4.toolTip,
@@ -80,14 +81,18 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
     type = _ref4.type,
+    path = _ref4.path,
     link = _ref4.link,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
     dataKey: dataKey
-  }), link ? /*#__PURE__*/React.createElement("a", {
+  }), link && !path ? /*#__PURE__*/React.createElement("a", {
     onClick: function onClick() {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
     className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type))));
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : path ? /*#__PURE__*/React.createElement(Link, {
+    to: path,
+    className: "qbs-table-row-link"
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : handleCellFormat(rowData[dataKey], type))));
 });

package/es/qbsTable/QbsTable.js

@@ -129,17 +129,33 @@ var QbsTable = function QbsTable(_ref) {
     }
   }, [checkedKeys]);
   var handleToggle = useCallback(function (columnName) {
-    setColumns(function (cols) {
-      return cols.map(function (col) {
-        return col.title === columnName ? _extends({}, col, {
+    var lastVisibleColumn = null;
+    var visibleCount = 0;
+    var updatedColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
+      // Toggle visibility for the matched column
+      if (col.title === columnName) {
+        col = _extends({}, col, {
           isVisible: !col.isVisible
-        }) : col;
-      });
+        });
+      }
+      if (col.isVisible) {
+        lastVisibleColumn = col;
+        visibleCount++;
+      }
+      return col;
     });
-    setTimeout(function () {
-      handleColumnsResizable();
-    }, 500);
-  }, []);
+    if (visibleCount > 0 && lastVisibleColumn) {
+      updatedColumns.forEach(function (col) {
+        var _lastVisibleColumn;
+        if (col.field === ((_lastVisibleColumn = lastVisibleColumn) === null || _lastVisibleColumn === void 0 ? void 0 : _lastVisibleColumn.field)) {
+          col.resizable = false;
+        } else {
+          col.resizable = true;
+        }
+      });
+    }
+    setColumns(updatedColumns);
+  }, [columns]);
   var handleColumnWidth = useCallback(function (newWidth, dataKey) {
     if (newWidth === undefined || dataKey === undefined) return;
     setColumns(function (prevColumns) {
@@ -295,6 +311,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell = _ref3.renderCell,
         isVisible = _ref3.isVisible,
         link = _ref3.link,
+        path = _ref3.path,
         rowClick = _ref3.rowClick,
         sortKey = _ref3.sortKey,
         type = _ref3.type;
@@ -319,11 +336,12 @@ var QbsTable = function QbsTable(_ref) {
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
           sortKey: child.sortKey
-        }, child.title), customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
+        }, child.title), child.customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
           type: child.type,
+          path: child.path,
           link: child.link
         }) : /*#__PURE__*/React.createElement(Cell, {
           className: " " + classes.cellClass,
@@ -348,6 +366,7 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         rowClick: rowClick,
         type: type,
+        path: path,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/React.createElement(Cell, {

package/es/qbsTable/commontypes.d.ts

@@ -18,6 +18,7 @@ export interface ColumnBase {
     rowClick?: (rowData: any) => void;
     sortKey?: string;
     type?: string;
+    path?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;

package/lib/qbsTable/CustomTableCell.js

@@ -9,9 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
+var _reactRouterDom = require("react-router-dom");
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "path", "link"];
 var CHECKBOX_LINE_HEIGHT = '36px';
 var CheckCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -80,7 +81,7 @@ var ExpandCell = /*#__PURE__*/_react["default"].memo(function (_ref3) {
 });
 exports.ExpandCell = ExpandCell;
 var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
-  var _renderCell, _renderCell2;
+  var _renderCell, _renderCell2, _renderCell3;
   var rowData = _ref4.rowData,
     renderCell = _ref4.renderCell,
     toolTip = _ref4.toolTip,
@@ -88,15 +89,19 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     onChange = _ref4.onChange,
     rowClick = _ref4.rowClick,
     type = _ref4.type,
+    path = _ref4.path,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
     dataKey: dataKey
-  }), link ? /*#__PURE__*/_react["default"].createElement("a", {
+  }), link && !path ? /*#__PURE__*/_react["default"].createElement("a", {
     onClick: function onClick() {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
     className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type))));
+  }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : path ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+    to: path,
+    className: "qbs-table-row-link"
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type))));
 });
 exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/QbsTable.js

@@ -136,17 +136,33 @@ var QbsTable = function QbsTable(_ref) {
     }
   }, [checkedKeys]);
   var handleToggle = (0, _react.useCallback)(function (columnName) {
-    setColumns(function (cols) {
-      return cols.map(function (col) {
-        return col.title === columnName ? (0, _extends2["default"])({}, col, {
+    var lastVisibleColumn = null;
+    var visibleCount = 0;
+    var updatedColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
+      // Toggle visibility for the matched column
+      if (col.title === columnName) {
+        col = (0, _extends2["default"])({}, col, {
           isVisible: !col.isVisible
-        }) : col;
-      });
+        });
+      }
+      if (col.isVisible) {
+        lastVisibleColumn = col;
+        visibleCount++;
+      }
+      return col;
     });
-    setTimeout(function () {
-      handleColumnsResizable();
-    }, 500);
-  }, []);
+    if (visibleCount > 0 && lastVisibleColumn) {
+      updatedColumns.forEach(function (col) {
+        var _lastVisibleColumn;
+        if (col.field === ((_lastVisibleColumn = lastVisibleColumn) === null || _lastVisibleColumn === void 0 ? void 0 : _lastVisibleColumn.field)) {
+          col.resizable = false;
+        } else {
+          col.resizable = true;
+        }
+      });
+    }
+    setColumns(updatedColumns);
+  }, [columns]);
   var handleColumnWidth = (0, _react.useCallback)(function (newWidth, dataKey) {
     if (newWidth === undefined || dataKey === undefined) return;
     setColumns(function (prevColumns) {
@@ -302,6 +318,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell = _ref3.renderCell,
         isVisible = _ref3.isVisible,
         link = _ref3.link,
+        path = _ref3.path,
         rowClick = _ref3.rowClick,
         sortKey = _ref3.sortKey,
         type = _ref3.type;
@@ -326,11 +343,12 @@ var QbsTable = function QbsTable(_ref) {
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
           sortKey: child.sortKey
-        }, child.title), customCell || child.link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
+        }, child.title), child.customCell || child.link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
           dataTheme: dataTheme,
           type: child.type,
+          path: child.path,
           link: child.link
         }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {
           className: " " + classes.cellClass,
@@ -355,6 +373,7 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         rowClick: rowClick,
         type: type,
+        path: path,
         dataTheme: dataTheme,
         link: link
       }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {

package/lib/qbsTable/commontypes.d.ts

@@ -18,6 +18,7 @@ export interface ColumnBase {
     rowClick?: (rowData: any) => void;
     sortKey?: string;
     type?: string;
+    path?: string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -44,13 +44,16 @@
     "classnames": "^2.3.1",
     "dom-lib": "^3.1.3",
     "lodash": "^4.17.21",
-    "react-is": "^17.0.2"
+    "react-is": "^17.0.2",
+    "react-router-dom": "^6.21.0"
   },
   "peerDependencies": {
     "prop-types": "^15.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rsuite": "^5.21.0"
+    "rsuite": "^5.21.0",
+    "react-router-dom": "^6.21.0"
+
   },
   "devDependencies": {
     "@babel/cli": "^7.12.8",

package/src/qbsTable/CustomTableCell.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Cell from '../Cell';
 import { handleCellFormat } from './utilities/handleFormatCell';
 import MenuDropDown from './utilities/menuDropDown';
-
+import { Link } from 'react-router-dom';
 const CHECKBOX_LINE_HEIGHT = '36px';
 export const CheckCell: React.FC<any> = React.memo(
   ({ rowData, onChange, checkedKeys, dataKey, dataTheme, ...props }) => (
@@ -61,14 +61,18 @@ export const ExpandCell: React.FC<any> = React.memo(
   )
 );
 export const CustomTableCell: React.FC<any> = React.memo(
-  ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, type, link, ...props }) => {
+  ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, type, path, link, ...props }) => {
     return (
       <>
         <Cell {...props} dataKey={dataKey}>
-          {link ? (
+          {link && !path ? (
             <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
               {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
             </a>
+          ) : path ? (
+            <Link to={path} className="qbs-table-row-link">
+              {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+            </Link>
           ) : (
             <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
           )}

package/src/qbsTable/QbsTable.tsx

@@ -118,14 +118,39 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
     [checkedKeys]
   );
-  const handleToggle = useCallback((columnName: string) => {
-    setColumns(cols =>
-      cols.map(col => (col.title === columnName ? { ...col, isVisible: !col.isVisible } : col))
-    );
-    setTimeout(() => {
-      handleColumnsResizable();
-    }, 500);
-  }, []);
+
+  const handleToggle = useCallback(
+    (columnName: string) => {
+      let lastVisibleColumn: any = null;
+      let visibleCount = 0;
+
+      const updatedColumns = columns?.map(col => {
+        // Toggle visibility for the matched column
+        if (col.title === columnName) {
+          col = { ...col, isVisible: !col.isVisible };
+        }
+        if (col.isVisible) {
+          lastVisibleColumn = col;
+          visibleCount++;
+        }
+
+        return col;
+      });
+
+      if (visibleCount > 0 && lastVisibleColumn) {
+        updatedColumns.forEach(col => {
+          if (col.field === lastVisibleColumn?.field) {
+            col.resizable = false;
+          } else {
+            col.resizable = true;
+          }
+        });
+      }
+
+      setColumns(updatedColumns);
+    },
+    [columns]
+  );
 
   const handleColumnWidth = useCallback((newWidth?: number, dataKey?: any) => {
     if (newWidth === undefined || dataKey === undefined) return;
@@ -283,6 +308,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           renderCell,
           isVisible,
           link,
+          path,
           rowClick,
           sortKey,
           type
@@ -317,12 +343,13 @@ const QbsTable: React.FC<QbsTableProps> = ({
                           >
                             {child.title}
                           </HeaderCell>
-                          {customCell || child.link ? (
+                          {child.customCell || child.link ? (
                             <CustomTableCell
                               renderCell={child.renderCell}
                               dataKey={child.field}
                               dataTheme={dataTheme}
                               type={child.type}
+                              path={child.path}
                               link={child.link}
                             />
                           ) : (
@@ -360,6 +387,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                         dataKey={field}
                         rowClick={rowClick}
                         type={type}
+                        path={path}
                         dataTheme={dataTheme}
                         link={link}
                       />

package/src/qbsTable/commontypes.ts

@@ -19,6 +19,7 @@ export interface ColumnBase {
   rowClick?: (rowData: any) => void;
   sortKey?: string;
   type?: string;
+  path?: string;
 }
 
 export interface QbsColumnProps extends ColumnBase {
@@ -99,7 +100,7 @@ export interface QbsTableProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   headerHeight?: number;
-  tableBodyHeight?:string
+  tableBodyHeight?: string;
 }
 
 export interface QbsTableToolbarProps {