qbs-react-grid 1.0.46 → 1.0.47

package/lib/Pagination.js

@@ -48,7 +48,7 @@ var Pagination = function Pagination(_ref2) {
     _paginationProps$curr = paginationProps.currentPage,
     currentPage = _paginationProps$curr === void 0 ? 1 : _paginationProps$curr,
     _paginationProps$tota = paginationProps.total,
-    total = _paginationProps$tota === void 0 ? 100 : _paginationProps$tota,
+    total = _paginationProps$tota === void 0 ? 0 : _paginationProps$tota,
     onRowsPerPage = paginationProps.onRowsPerPage,
     _paginationProps$rows = paginationProps.rowsPerPage,
     rowsPerPage = _paginationProps$rows === void 0 ? 10 : _paginationProps$rows,
@@ -66,28 +66,20 @@ var Pagination = function Pagination(_ref2) {
     onRowsPerPage === null || onRowsPerPage === void 0 ? void 0 : onRowsPerPage(value, currentPage);
   };
   var handleFirst = function handleFirst(index) {
-    // setCurrenIndex(index);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(index, currentPage);
   };
   var handleLast = function handleLast() {
     var value = pageCount != null ? pageCount : 0;
-    // setCurrenIndex(value);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(value, currentPage);
   };
-  // useEffect(() => {
-  //   setCurrenIndex(currentPage);
-  // }, [currentPage]);
-
   (0, _react.useEffect)(function () {
     var calculatedPageCount = Math.ceil(total / rowsPerPageState);
     setPageCount(calculatedPageCount);
   }, [total, rowsPerPageState]);
   var handlePrevious = function handlePrevious() {
-    // setCurrenIndex(currentPage - 1);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage - 1, currentPage);
   };
   var handleNext = function handleNext() {
-    // setCurrenIndex(currentPage + 1);
     onPagination === null || onPagination === void 0 ? void 0 : onPagination(currentPage + 1, currentPage);
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -115,9 +107,9 @@ var Pagination = function Pagination(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M9.16667 15.8333L3.33334 9.99996L9.16667 4.16663M15.8333 15.8333L10 9.99996L15.8333 4.16663",
     stroke: "#313131",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }))), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
     disabled: currentPage < 2,
@@ -133,9 +125,9 @@ var Pagination = function Pagination(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M12.5 15.8334L6.66666 10L12.5 4.16669",
     stroke: "#313131",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "block-container"
   }, /*#__PURE__*/_react["default"].createElement(PageIndex, {
@@ -145,7 +137,7 @@ var Pagination = function Pagination(_ref2) {
     pageCount: pageCount
   })), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
-    disabled: currentPage >= pageCount - 1,
+    disabled: currentPage === pageCount || pageCount === 0,
     onClick: function onClick() {
       return handleNext();
     }
@@ -158,12 +150,12 @@ var Pagination = function Pagination(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M7.5 4.16669L13.3333 10L7.5 15.8334",
     stroke: "#313131",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   }))), /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
-    disabled: currentPage == pageCount,
+    disabled: currentPage == pageCount || pageCount === 0,
     onClick: function onClick() {
       return handleLast();
     }
@@ -176,9 +168,9 @@ var Pagination = function Pagination(_ref2) {
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M10.8333 4.16663L16.6667 9.99996L10.8333 15.8333M4.16666 4.16663L10 9.99996L4.16666 15.8333",
     stroke: "#313131",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/_react["default"].createElement("span", {

package/lib/less/pagination.less

@@ -5,8 +5,8 @@
   min-height: 40px;
   align-items: center;
   border-radius: 4px;
-  border-top: 1px solid #D6D8DC;
-  background: #FFF;
+  border-top: 1px solid #d6d8dc;
+  background: #fff;
   &-header {
     border-bottom: 1px solid #eee;
     position: absolute;
@@ -27,8 +27,8 @@
     font-weight: 500;
     line-height: 20px;
     border-radius: 6px;
-    border: 1px solid #D6D8DC;
-    background: #FFF;
+    border: 1px solid #d6d8dc;
+    background: #fff;
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -37,7 +37,6 @@
     justify-items: center;
     align-items: center;
     color: black;
-    height: 100%;
     background-color: transparent;
     width: 24px;
     height: 24px;
@@ -48,6 +47,7 @@
     }
     &:disabled {
       color: grey;
+      cursor: not-allowed;
     }
     svg {
       width: 16px;
@@ -80,19 +80,19 @@
         border: 1px solid transparent;
         transition: all 0.2s ease;
         &:hover {
-          border-color: #E76458;
-          color: #E76458;
+          border-color: #e76458;
+          color: #e76458;
           transition: all 0.2s ease;
         }
         &:active {
-          border-color: #E76458;
-          color: #E76458;
+          border-color: #e76458;
+          color: #e76458;
           transition: all 0.2s ease;
         }
       }
       .selected {
-        color: #E76458;
-        border: 1px solid #E76458;
+        color: #e76458;
+        border: 1px solid #e76458;
         transition: all 0.2s ease;
       }
     }
@@ -115,4 +115,4 @@
 
 .qbs-table-custom-pagination .qbs-table-pagination-dropdown:focus {
   outline: none;
-}
+}

package/lib/qbsTable/CustomTableCell.js

@@ -8,7 +8,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
-var _ToolTip = _interopRequireDefault(require("./utilities/ToolTip"));
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "link"];
@@ -80,7 +79,7 @@ var ExpandCell = /*#__PURE__*/_react["default"].memo(function (_ref3) {
 });
 exports.ExpandCell = ExpandCell;
 var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
-  var _renderCell, _renderCell2, _renderCell3;
+  var _renderCell, _renderCell2;
   var rowData = _ref4.rowData,
     renderCell = _ref4.renderCell,
     toolTip = _ref4.toolTip,
@@ -89,15 +88,18 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     rowClick = _ref4.rowClick,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
-  return /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    title: renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.toolTip : toolTip
-  }, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
-    dataKey: dataKey
-  }), link ? /*#__PURE__*/_react["default"].createElement("a", {
-    onClick: function onClick() {
-      return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
-    },
-    className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : rowData[dataKey]) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell)));
+  return (
+    /*#__PURE__*/
+    // <TooltipComponent title={renderCell ? renderCell(rowData)?.toolTip : toolTip}>
+    _react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+      dataKey: dataKey
+    }), link ? /*#__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 : rowData[dataKey]) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell))
+    // </TooltipComponent>
+  );
 });
 exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/QbsTable.js

@@ -17,6 +17,7 @@ var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide")
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _icons = require("./utilities/icons");
 require("../../dist/css/qbs-react-grid.css");
+var _deepEqual = require("./utilities/deepEqual");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CHECKBOX_LINE_HEIGHT = '36px';
@@ -95,6 +96,7 @@ var QbsTable = function QbsTable(_ref) {
   var _useState4 = (0, _react.useState)(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
+  var prevColumns = (0, _react.useRef)();
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -116,10 +118,7 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
-    var updatedKeys = [].concat(keys);
-    if (checkedKeys) {
-      updatedKeys = [].concat(checkedKeys, updatedKeys);
-    }
+    var updatedKeys = [].concat(checkedKeys, keys);
     setCheckedKeys(updatedKeys);
     handleChecked(updatedKeys);
   }, [data]);
@@ -166,9 +165,10 @@ var QbsTable = function QbsTable(_ref) {
   var onReorder = (0, _react.useCallback)(function (columns) {
     setColumns(columns);
   }, []);
-  (0, _react.useEffect)(function () {
-    handleColumnToggle === null || handleColumnToggle === void 0 ? void 0 : handleColumnToggle(columns);
-  }, [columns]);
+
+  // useEffect(() => {
+  // }, [columns]);
+
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -192,7 +192,8 @@ var QbsTable = function QbsTable(_ref) {
     checkedKeys: checkedKeys,
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
-    onSelect: handleClear
+    onSelect: handleClear,
+    handleColumnToggle: handleColumnToggle
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -250,6 +251,26 @@ var QbsTable = function QbsTable(_ref) {
     });
     return largestCellLength;
   }
+  var handleColumnsResizable = (0, _react.useCallback)(function () {
+    var _filteredColumns$leng;
+    var filteredColumns = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+      return item.isVisible;
+    });
+    var length = (_filteredColumns$leng = filteredColumns === null || filteredColumns === void 0 ? void 0 : filteredColumns.length) != null ? _filteredColumns$leng : 0;
+    var lastVisibleColumn = filteredColumns[length - 1];
+    var reColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.field) === (lastVisibleColumn === null || lastVisibleColumn === void 0 ? void 0 : lastVisibleColumn.field) ? (0, _extends2["default"])({}, item, {
+        resizable: false
+      }) : item;
+    });
+    setColumns(reColumns);
+  }, [columns]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _deepEqual.deepEqual)(columns, prevColumns.current)) {
+      handleColumnsResizable();
+    }
+    prevColumns.current = columns;
+  }, [columns, handleColumnsResizable]);
   var columnsRendered = (0, _react.useMemo)(function () {
     return (columns != null ? columns : []).map(function (_ref3) {
       var title = _ref3.title,

package/lib/qbsTable/commontypes.d.ts

@@ -117,6 +117,7 @@ export interface QbsTableToolbarProps {
     checkedKeys?: (number | string)[];
     tableHeaderActions?: ReactElement | ReactNode;
     onSelect?: (keys: any[]) => void;
+    handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;

package/lib/qbsTable/utilities/deepEqual.d.ts

@@ -0,0 +1 @@
+export declare function deepEqual(value1: any, value2: any): boolean;

package/lib/qbsTable/utilities/deepEqual.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.deepEqual = deepEqual;
+function deepEqual(value1, value2) {
+  if (value1 === value2) {
+    return true;
+  }
+  if (typeof value1 !== typeof value2) {
+    return false;
+  }
+  if (value1 === null || value2 === null) {
+    return value1 === value2;
+  }
+  if (typeof value1 === 'object' && typeof value2 === 'object') {
+    if (Array.isArray(value1) && Array.isArray(value2)) {
+      if (value1.length !== value2.length) {
+        return false;
+      }
+      for (var i = 0; i < value1.length; i++) {
+        if (!deepEqual(value1[i], value2[i])) {
+          return false;
+        }
+      }
+      return true;
+    } else if (!Array.isArray(value1) && !Array.isArray(value2)) {
+      var keys1 = Object.keys(value1);
+      var keys2 = Object.keys(value2);
+      if (keys1.length !== keys2.length) {
+        return false;
+      }
+      for (var _i = 0, _keys = keys1; _i < _keys.length; _i++) {
+        var key = _keys[_i];
+        if (!keys2.includes(key) || !deepEqual(value1[key], value2[key])) {
+          return false;
+        }
+      }
+      return true;
+    }
+  }
+  return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/Pagination.tsx

@@ -59,7 +59,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   const {
     dropOptions = [10, 20, 50, 100, 200],
     currentPage = 1,
-    total = 100,
+    total = 0,
     onRowsPerPage,
     rowsPerPage = 10,
     onPagination
@@ -75,18 +75,13 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
     onRowsPerPage?.(value, currentPage);
   };
   const handleFirst = (index: number) => {
-    // setCurrenIndex(index);
     onPagination?.(index, currentPage);
   };
 
   const handleLast = () => {
     const value = pageCount ?? 0;
-    // setCurrenIndex(value);
     onPagination?.(value, currentPage);
   };
-  // useEffect(() => {
-  //   setCurrenIndex(currentPage);
-  // }, [currentPage]);
 
   useEffect(() => {
     const calculatedPageCount = Math.ceil(total / rowsPerPageState);
@@ -94,11 +89,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
   }, [total, rowsPerPageState]);
 
   const handlePrevious = () => {
-    // setCurrenIndex(currentPage - 1);
     onPagination?.(currentPage - 1, currentPage);
   };
   const handleNext = () => {
-    // setCurrenIndex(currentPage + 1);
     onPagination?.(currentPage + 1, currentPage);
   };
 
@@ -130,9 +123,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
             <path
               d="M9.16667 15.8333L3.33334 9.99996L9.16667 4.16663M15.8333 15.8333L10 9.99996L15.8333 4.16663"
               stroke="#313131"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
         </button>
@@ -151,9 +144,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
             <path
               d="M12.5 15.8334L6.66666 10L12.5 4.16669"
               stroke="#313131"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
         </button>
@@ -167,7 +160,7 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
         </div>
         <button
           className="qbs-table-icon-container"
-          disabled={currentPage >= pageCount - 1}
+          disabled={currentPage === pageCount || pageCount === 0}
           onClick={() => handleNext()}
         >
           <svg
@@ -180,15 +173,15 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
             <path
               d="M7.5 4.16669L13.3333 10L7.5 15.8334"
               stroke="#313131"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
         </button>
         <button
           className="qbs-table-icon-container"
-          disabled={currentPage == pageCount}
+          disabled={currentPage == pageCount || pageCount === 0}
           onClick={() => handleLast()}
         >
           <svg
@@ -201,9 +194,9 @@ const Pagination: FC<PageProps> = ({ paginationProps }) => {
             <path
               d="M10.8333 4.16663L16.6667 9.99996L10.8333 15.8333M4.16666 4.16663L10 9.99996L4.16666 15.8333"
               stroke="#313131"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
         </button>

package/src/less/pagination.less

@@ -5,8 +5,8 @@
   min-height: 40px;
   align-items: center;
   border-radius: 4px;
-  border-top: 1px solid #D6D8DC;
-  background: #FFF;
+  border-top: 1px solid #d6d8dc;
+  background: #fff;
   &-header {
     border-bottom: 1px solid #eee;
     position: absolute;
@@ -27,8 +27,8 @@
     font-weight: 500;
     line-height: 20px;
     border-radius: 6px;
-    border: 1px solid #D6D8DC;
-    background: #FFF;
+    border: 1px solid #d6d8dc;
+    background: #fff;
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -37,7 +37,6 @@
     justify-items: center;
     align-items: center;
     color: black;
-    height: 100%;
     background-color: transparent;
     width: 24px;
     height: 24px;
@@ -48,6 +47,7 @@
     }
     &:disabled {
       color: grey;
+      cursor: not-allowed;
     }
     svg {
       width: 16px;
@@ -80,19 +80,19 @@
         border: 1px solid transparent;
         transition: all 0.2s ease;
         &:hover {
-          border-color: #E76458;
-          color: #E76458;
+          border-color: #e76458;
+          color: #e76458;
           transition: all 0.2s ease;
         }
         &:active {
-          border-color: #E76458;
-          color: #E76458;
+          border-color: #e76458;
+          color: #e76458;
           transition: all 0.2s ease;
         }
       }
       .selected {
-        color: #E76458;
-        border: 1px solid #E76458;
+        color: #e76458;
+        border: 1px solid #e76458;
         transition: all 0.2s ease;
       }
     }
@@ -115,4 +115,4 @@
 
 .qbs-table-custom-pagination .qbs-table-pagination-dropdown:focus {
   outline: none;
-}
+}

package/src/qbsTable/CustomTableCell.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Cell from '../Cell';
 import MenuDropDown from './utilities/menuDropDown';
-import TooltipComponent from './utilities/ToolTip';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 
@@ -64,17 +63,17 @@ export const ExpandCell: React.FC<any> = React.memo(
 export const CustomTableCell: React.FC<any> = React.memo(
   ({ rowData, renderCell, toolTip, dataKey, onChange, rowClick, link, ...props }) => {
     return (
-      <TooltipComponent title={renderCell ? renderCell(rowData)?.toolTip : toolTip}>
-        <Cell {...props} dataKey={dataKey}>
-          {link ? (
-            <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
-              {renderCell ? renderCell(rowData)?.cell : rowData[dataKey]}
-            </a>
-          ) : (
-            <>{renderCell(rowData)?.cell}</>
-          )}
-        </Cell>
-      </TooltipComponent>
+      // <TooltipComponent title={renderCell ? renderCell(rowData)?.toolTip : toolTip}>
+      <Cell {...props} dataKey={dataKey}>
+        {link ? (
+          <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
+            {renderCell ? renderCell(rowData)?.cell : rowData[dataKey]}
+          </a>
+        ) : (
+          <>{renderCell(rowData)?.cell}</>
+        )}
+      </Cell>
+      // </TooltipComponent>
     );
   }
 );

package/src/qbsTable/QbsTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
 import Cell from '../Cell';
 import Column from '../Column';
@@ -14,6 +14,7 @@ import debounce from './utilities/debounce';
 import { SettingsIcon } from './utilities/icons';
 
 import '../../dist/css/qbs-react-grid.css';
+import { deepEqual } from './utilities/deepEqual';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
@@ -67,6 +68,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
   const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
   const [isOpen, setIsOpen] = useState(false);
+  const prevColumns = useRef<any | null>();
 
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
@@ -93,10 +95,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const handleCheckAll = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const keys = event.target.checked ? data.map(item => item.id) : [];
-      let updatedKeys = [...keys];
-      if (checkedKeys) {
-        updatedKeys = [...checkedKeys, ...updatedKeys];
-      }
+      let updatedKeys = [...checkedKeys, ...keys];
       setCheckedKeys(updatedKeys);
       handleChecked(updatedKeys);
     },
@@ -146,9 +145,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
     setColumns(columns);
   }, []);
 
-  useEffect(() => {
-    handleColumnToggle?.(columns);
-  }, [columns]);
+  // useEffect(() => {
+  // }, [columns]);
 
   const handleClear = ([]) => {
     setCheckedKeys([]);
@@ -173,9 +171,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
     checkedKeys: checkedKeys,
     tableHeaderActions: tableHeaderActions,
     selectedRowActions: selectedRowActions,
-    onSelect: handleClear
+    onSelect: handleClear,
+    handleColumnToggle: handleColumnToggle
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
+
   useEffect(() => {
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
@@ -236,6 +236,23 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
     return largestCellLength;
   }
+  const handleColumnsResizable = useCallback(() => {
+    const filteredColumns = columns?.filter(item => item.isVisible);
+    const length = filteredColumns?.length ?? 0;
+    const lastVisibleColumn = filteredColumns[length - 1];
+    const reColumns = columns?.map(item =>
+      item?.field === lastVisibleColumn?.field ? { ...item, resizable: false } : item
+    );
+    setColumns(reColumns);
+  }, [columns]);
+
+  useEffect(() => {
+    if (!deepEqual(columns, prevColumns.current)) {
+      handleColumnsResizable();
+    }
+    prevColumns.current = columns;
+  }, [columns, handleColumnsResizable]);
+
   const columnsRendered: React.ReactElement[] = useMemo(
     () =>
       (columns ?? []).map(

package/src/qbsTable/commontypes.ts

@@ -121,6 +121,7 @@ export interface QbsTableToolbarProps {
   checkedKeys?: (number | string)[];
   tableHeaderActions?: ReactElement | ReactNode;
   onSelect?: (keys: any[]) => void;
+  handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;