qbs-react-grid 1.1.11 → 1.1.13

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, _path, _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 = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _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

@@ -311,6 +311,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell = _ref3.renderCell,
         isVisible = _ref3.isVisible,
         link = _ref3.link,
+        getPath = _ref3.getPath,
         rowClick = _ref3.rowClick,
         sortKey = _ref3.sortKey,
         type = _ref3.type;
@@ -335,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.getPath,
           link: child.link
         }) : /*#__PURE__*/React.createElement(Cell, {
           className: " " + classes.cellClass,
@@ -364,6 +366,7 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         rowClick: rowClick,
         type: type,
+        path: getPath,
         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;
+    getPath?: (data: any) => 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, _path, _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 = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _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

@@ -318,6 +318,7 @@ var QbsTable = function QbsTable(_ref) {
         renderCell = _ref3.renderCell,
         isVisible = _ref3.isVisible,
         link = _ref3.link,
+        getPath = _ref3.getPath,
         rowClick = _ref3.rowClick,
         sortKey = _ref3.sortKey,
         type = _ref3.type;
@@ -342,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.getPath,
           link: child.link
         }) : /*#__PURE__*/_react["default"].createElement(_Cell["default"], {
           className: " " + classes.cellClass,
@@ -371,6 +373,7 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         rowClick: rowClick,
         type: type,
+        path: getPath,
         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;
+    getPath?: (data: any) => string;
 }
 export interface QbsColumnProps extends ColumnBase {
     grouped?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "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?.(rowData) ?? ''} 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,7 +118,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
     [checkedKeys]
   );
-  
+
   const handleToggle = useCallback(
     (columnName: string) => {
       let lastVisibleColumn: any = null;
@@ -308,6 +308,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           renderCell,
           isVisible,
           link,
+          getPath,
           rowClick,
           sortKey,
           type
@@ -342,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.getPath}
                               link={child.link}
                             />
                           ) : (
@@ -385,6 +387,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                         dataKey={field}
                         rowClick={rowClick}
                         type={type}
+                        path={getPath}
                         dataTheme={dataTheme}
                         link={link}
                       />

package/src/qbsTable/commontypes.ts

@@ -19,6 +19,7 @@ export interface ColumnBase {
   rowClick?: (rowData: any) => void;
   sortKey?: string;
   type?: string;
+  getPath?: (data: any) => 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 {