qbs-react-grid 1.1.42 → 1.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/es/Table.js +9 -5
  2. package/es/qbsTable/QbsTable.js +5 -1
  3. package/es/qbsTable/commontypes.d.ts +1 -0
  4. package/es/qbsTable/utilities/menuDropDown.js +49 -45
  5. package/lib/Table.js +9 -5
  6. package/lib/qbsTable/QbsTable.js +5 -1
  7. package/lib/qbsTable/commontypes.d.ts +1 -0
  8. package/lib/qbsTable/utilities/menuDropDown.js +49 -45
  9. package/package.json +1 -1
  10. package/src/Table.tsx +14 -6
  11. package/src/qbsTable/QbsTable.tsx +4 -1
  12. package/src/qbsTable/commontypes.ts +3 -2
  13. package/src/qbsTable/utilities/menuDropDown.tsx +42 -44
package/es/Table.js CHANGED
@@ -364,8 +364,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
364
364
  height: getTableHeight()
365
365
  }, style);
366
366
  var renderRowExpanded = useCallback(function (rowData) {
367
+ var _tableRef$current;
367
368
  var styles = {
368
- height: rowExpandedHeight
369
+ height: rowExpandedHeight,
370
+ maxWidth: tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth
369
371
  };
370
372
  if (typeof renderRowExpandedProp === 'function') {
371
373
  return /*#__PURE__*/React.createElement("div", {
@@ -401,8 +403,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
401
403
  var scrollCells = [];
402
404
  var fixedLeftCellGroupWidth = 0;
403
405
  var fixedRightCellGroupWidth = 0;
404
- for (var i = 0; i < cells.length; i++) {
405
- var cell = cells[i];
406
+ cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
407
+ // const cell = cells[i];
406
408
  var _cell$props = cell.props,
407
409
  fixed = _cell$props.fixed,
408
410
  width = _cell$props.width;
@@ -421,7 +423,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
421
423
  } else {
422
424
  scrollCells.push(cell);
423
425
  }
424
- }
426
+ });
425
427
  if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
426
428
  fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
427
429
  }
@@ -447,7 +449,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
447
449
  }
448
450
  return /*#__PURE__*/React.createElement(Row, _extends({}, restRowProps, {
449
451
  "data-depth": depth,
450
- style: rowStyles
452
+ style: _extends({}, rowStyles)
453
+ // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
454
+ // height={shouldRenderExpandedRow ? 556 : 36}
451
455
  }), renderRowProp ? renderRowProp(rowNode, rowData) : rowNode);
452
456
  };
453
457
  var renderTableHeader = function renderTableHeader(headerCells, rowWidth) {
package/es/qbsTable/QbsTable.js CHANGED
@@ -81,7 +81,9 @@ var QbsTable = function QbsTable(_ref) {
81
81
  headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
82
82
  tableBodyHeight = _ref.tableBodyHeight,
83
83
  customRowStatus = _ref.customRowStatus,
84
- searchPlaceholder = _ref.searchPlaceholder;
84
+ searchPlaceholder = _ref.searchPlaceholder,
85
+ _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
86
+ rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh;
85
87
  var _useState = useState(false),
86
88
  loading = _useState[0],
87
89
  setLoading = _useState[1];
@@ -246,6 +248,7 @@ var QbsTable = function QbsTable(_ref) {
246
248
  };
247
249
  }, [themeToggle]);
248
250
  var handleExpanded = useCallback(function (rowData) {
251
+ console.log(rowData);
249
252
  var keyValue = dataRowKey;
250
253
  var key = rowData[keyValue];
251
254
  var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -410,6 +413,7 @@ var QbsTable = function QbsTable(_ref) {
410
413
  columns: columns,
411
414
  minHeight: minHeight,
412
415
  headerHeight: headerHeight,
416
+ rowExpandedHeight: rowExpandedHeight,
413
417
  loading: isLoading != null ? isLoading : loading,
414
418
  showHeader: true,
415
419
  defaultChecked: true,
package/es/qbsTable/commontypes.d.ts CHANGED
@@ -109,6 +109,7 @@ export interface QbsTableProps {
109
109
  field?: boolean;
110
110
  getPath?: (data: any) => string;
111
111
  };
112
+ rowExpandedHeight?: number;
112
113
  }
113
114
  export interface QbsTableToolbarProps {
114
115
  title?: string;
package/es/qbsTable/utilities/menuDropDown.js CHANGED
@@ -14,9 +14,7 @@ var MenuDropDown = function MenuDropDown(_ref) {
14
14
  var menuButtonRef = useRef(null);
15
15
  var menuRef = useRef(null);
16
16
  var dropRef = useRef(null);
17
- var _useState2 = useState('bottom-position'),
18
- dropdownPosition = _useState2[0],
19
- setDropdownPosition = _useState2[1];
17
+ // const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
20
18
  useEffect(function () {
21
19
  var handleClickOutside = function handleClickOutside(event) {
22
20
  if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -47,46 +45,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
47
45
  });
48
46
  return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
49
47
  };
50
- var _useState3 = useState({
51
- top: 0,
52
- left: 0,
53
- bottom: 0,
54
- right: 0
55
- }),
56
- menuPosition = _useState3[0],
57
- setMenuPosition = _useState3[1];
48
+ // const [menuPosition, setMenuPosition] = useState({
49
+ // top: 0,
50
+ // left: 0,
51
+ // bottom: 0,
52
+ // right: 0
53
+ // });
58
54
  var toggleMenu = function toggleMenu() {
59
- if (!openMenu && menuButtonRef.current) {
60
- var rect = menuButtonRef.current.getBoundingClientRect();
61
- var topSpace = rect.top;
62
- var bottomSpace = window.innerHeight - rect.bottom;
63
- var leftSpace = rect.left;
64
- var rightSpace = window.innerWidth - rect.right;
65
- var dropdownHeight = 200;
66
- var dropdownWidth = 200;
67
- var newPosition = 'bottom-right';
68
- if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
69
- newPosition = 'top-right';
70
- }
71
- if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
72
- newPosition = newPosition.replace('right', 'left');
73
- }
74
- if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
75
- newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
76
- }
77
- setDropdownPosition(newPosition);
78
- setMenuPosition({
79
- top: rect.top + window.scrollY,
80
- left: rect.left + window.scrollX,
81
- bottom: window.innerHeight - rect.bottom,
82
- right: window.innerWidth - rect.right
83
- });
84
- }
55
+ // if (!openMenu && menuButtonRef.current) {
56
+ // const rect = menuButtonRef.current.getBoundingClientRect();
57
+ // const topSpace = rect.top;
58
+ // const bottomSpace = window.innerHeight - rect.bottom;
59
+ // const leftSpace = rect.left;
60
+ // const rightSpace = window.innerWidth - rect.right;
61
+
62
+ // const dropdownHeight = 200;
63
+ // const dropdownWidth = 200;
64
+
65
+ // let newPosition = 'bottom-right';
66
+
67
+ // if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
68
+ // newPosition = 'top-right';
69
+ // }
70
+
71
+ // if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
72
+ // newPosition = newPosition.replace('right', 'left');
73
+ // }
74
+
75
+ // if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
76
+ // newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
77
+ // }
78
+
79
+ // setDropdownPosition(newPosition);
80
+ // setMenuPosition({
81
+ // top: rect.top + window.scrollY,
82
+ // left: rect.left + window.scrollX,
83
+ // bottom: window.innerHeight - rect.bottom,
84
+ // right: window.innerWidth - rect.right
85
+ // });
86
+ // }
85
87
  setTimeout(function () {
86
88
  setOpenMenu(!openMenu);
87
89
  }, 200);
88
90
  };
89
- var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
91
+ // const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
90
92
  return /*#__PURE__*/React.createElement("div", {
91
93
  className: "qbs-table-menu-dropdown",
92
94
  ref: menuRef
@@ -96,13 +98,15 @@ var MenuDropDown = function MenuDropDown(_ref) {
96
98
  ref: menuButtonRef
97
99
  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
98
100
  className: 'qbs-table-qbs-table-menu-dropdown-content',
99
- ref: dropRef,
100
- style: {
101
- top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
102
- bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
103
- left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
104
- right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
105
- }
101
+ ref: dropRef
102
+ // style={{
103
+ // top: dropdownPosition.startsWith('bottom') ? `${menuPosition.top + 20}px` : 'auto',
104
+ // bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
105
+ // left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
106
+ // right: dropdownPosition.endsWith('left')
107
+ // ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
108
+ // : 'auto'
109
+ // }}
106
110
  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
107
111
  var _item$hide2;
108
112
  return /*#__PURE__*/React.createElement(React.Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/React.createElement("a", {
package/lib/Table.js CHANGED
@@ -371,8 +371,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
371
371
  height: getTableHeight()
372
372
  }, style);
373
373
  var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
374
+ var _tableRef$current;
374
375
  var styles = {
375
- height: rowExpandedHeight
376
+ height: rowExpandedHeight,
377
+ maxWidth: tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth
376
378
  };
377
379
  if (typeof renderRowExpandedProp === 'function') {
378
380
  return /*#__PURE__*/_react["default"].createElement("div", {
@@ -408,8 +410,8 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
408
410
  var scrollCells = [];
409
411
  var fixedLeftCellGroupWidth = 0;
410
412
  var fixedRightCellGroupWidth = 0;
411
- for (var i = 0; i < cells.length; i++) {
412
- var cell = cells[i];
413
+ cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
414
+ // const cell = cells[i];
413
415
  var _cell$props = cell.props,
414
416
  fixed = _cell$props.fixed,
415
417
  width = _cell$props.width;
@@ -428,7 +430,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
428
430
  } else {
429
431
  scrollCells.push(cell);
430
432
  }
431
- }
433
+ });
432
434
  if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
433
435
  fixedRightCellGroupWidth += _constants.SCROLLBAR_WIDTH;
434
436
  }
@@ -454,7 +456,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
454
456
  }
455
457
  return /*#__PURE__*/_react["default"].createElement(_Row["default"], (0, _extends2["default"])({}, restRowProps, {
456
458
  "data-depth": depth,
457
- style: rowStyles
459
+ style: (0, _extends2["default"])({}, rowStyles)
460
+ // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
461
+ // height={shouldRenderExpandedRow ? 556 : 36}
458
462
  }), renderRowProp ? renderRowProp(rowNode, rowData) : rowNode);
459
463
  };
460
464
  var renderTableHeader = function renderTableHeader(headerCells, rowWidth) {
package/lib/qbsTable/QbsTable.js CHANGED
@@ -87,7 +87,9 @@ var QbsTable = function QbsTable(_ref) {
87
87
  headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
88
88
  tableBodyHeight = _ref.tableBodyHeight,
89
89
  customRowStatus = _ref.customRowStatus,
90
- searchPlaceholder = _ref.searchPlaceholder;
90
+ searchPlaceholder = _ref.searchPlaceholder,
91
+ _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
92
+ rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh;
91
93
  var _useState = (0, _react.useState)(false),
92
94
  loading = _useState[0],
93
95
  setLoading = _useState[1];
@@ -252,6 +254,7 @@ var QbsTable = function QbsTable(_ref) {
252
254
  };
253
255
  }, [themeToggle]);
254
256
  var handleExpanded = (0, _react.useCallback)(function (rowData) {
257
+ console.log(rowData);
255
258
  var keyValue = dataRowKey;
256
259
  var key = rowData[keyValue];
257
260
  var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -416,6 +419,7 @@ var QbsTable = function QbsTable(_ref) {
416
419
  columns: columns,
417
420
  minHeight: minHeight,
418
421
  headerHeight: headerHeight,
422
+ rowExpandedHeight: rowExpandedHeight,
419
423
  loading: isLoading != null ? isLoading : loading,
420
424
  showHeader: true,
421
425
  defaultChecked: true,
package/lib/qbsTable/commontypes.d.ts CHANGED
@@ -109,6 +109,7 @@ export interface QbsTableProps {
109
109
  field?: boolean;
110
110
  getPath?: (data: any) => string;
111
111
  };
112
+ rowExpandedHeight?: number;
112
113
  }
113
114
  export interface QbsTableToolbarProps {
114
115
  title?: string;
package/lib/qbsTable/utilities/menuDropDown.js CHANGED
@@ -20,9 +20,7 @@ var MenuDropDown = function MenuDropDown(_ref) {
20
20
  var menuButtonRef = (0, _react.useRef)(null);
21
21
  var menuRef = (0, _react.useRef)(null);
22
22
  var dropRef = (0, _react.useRef)(null);
23
- var _useState2 = (0, _react.useState)('bottom-position'),
24
- dropdownPosition = _useState2[0],
25
- setDropdownPosition = _useState2[1];
23
+ // const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
26
24
  (0, _react.useEffect)(function () {
27
25
  var handleClickOutside = function handleClickOutside(event) {
28
26
  if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -53,46 +51,50 @@ var MenuDropDown = function MenuDropDown(_ref) {
53
51
  });
54
52
  return (_result$length = result === null || result === void 0 ? void 0 : result.length) != null ? _result$length : 0;
55
53
  };
56
- var _useState3 = (0, _react.useState)({
57
- top: 0,
58
- left: 0,
59
- bottom: 0,
60
- right: 0
61
- }),
62
- menuPosition = _useState3[0],
63
- setMenuPosition = _useState3[1];
54
+ // const [menuPosition, setMenuPosition] = useState({
55
+ // top: 0,
56
+ // left: 0,
57
+ // bottom: 0,
58
+ // right: 0
59
+ // });
64
60
  var toggleMenu = function toggleMenu() {
65
- if (!openMenu && menuButtonRef.current) {
66
- var rect = menuButtonRef.current.getBoundingClientRect();
67
- var topSpace = rect.top;
68
- var bottomSpace = window.innerHeight - rect.bottom;
69
- var leftSpace = rect.left;
70
- var rightSpace = window.innerWidth - rect.right;
71
- var dropdownHeight = 200;
72
- var dropdownWidth = 200;
73
- var newPosition = 'bottom-right';
74
- if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
75
- newPosition = 'top-right';
76
- }
77
- if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
78
- newPosition = newPosition.replace('right', 'left');
79
- }
80
- if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
81
- newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
82
- }
83
- setDropdownPosition(newPosition);
84
- setMenuPosition({
85
- top: rect.top + window.scrollY,
86
- left: rect.left + window.scrollX,
87
- bottom: window.innerHeight - rect.bottom,
88
- right: window.innerWidth - rect.right
89
- });
90
- }
61
+ // if (!openMenu && menuButtonRef.current) {
62
+ // const rect = menuButtonRef.current.getBoundingClientRect();
63
+ // const topSpace = rect.top;
64
+ // const bottomSpace = window.innerHeight - rect.bottom;
65
+ // const leftSpace = rect.left;
66
+ // const rightSpace = window.innerWidth - rect.right;
67
+
68
+ // const dropdownHeight = 200;
69
+ // const dropdownWidth = 200;
70
+
71
+ // let newPosition = 'bottom-right';
72
+
73
+ // if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
74
+ // newPosition = 'top-right';
75
+ // }
76
+
77
+ // if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
78
+ // newPosition = newPosition.replace('right', 'left');
79
+ // }
80
+
81
+ // if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
82
+ // newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
83
+ // }
84
+
85
+ // setDropdownPosition(newPosition);
86
+ // setMenuPosition({
87
+ // top: rect.top + window.scrollY,
88
+ // left: rect.left + window.scrollX,
89
+ // bottom: window.innerHeight - rect.bottom,
90
+ // right: window.innerWidth - rect.right
91
+ // });
92
+ // }
91
93
  setTimeout(function () {
92
94
  setOpenMenu(!openMenu);
93
95
  }, 200);
94
96
  };
95
- var buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
97
+ // const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
96
98
  return /*#__PURE__*/_react["default"].createElement("div", {
97
99
  className: "qbs-table-menu-dropdown",
98
100
  ref: menuRef
@@ -102,13 +104,15 @@ var MenuDropDown = function MenuDropDown(_ref) {
102
104
  ref: menuButtonRef
103
105
  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
104
106
  className: 'qbs-table-qbs-table-menu-dropdown-content',
105
- ref: dropRef,
106
- style: {
107
- top: dropdownPosition.startsWith('bottom') ? menuPosition.top + window.scrollY + 20 + "px" : 'auto',
108
- bottom: dropdownPosition.startsWith('top') ? menuPosition.bottom + 20 + "px" : 'auto',
109
- left: dropdownPosition.endsWith('right') ? menuPosition.left + 10 + "px" : 'auto',
110
- right: dropdownPosition.endsWith('left') ? window.innerWidth - menuPosition.left - buttonWidth + 10 + "px" : 'auto'
111
- }
107
+ ref: dropRef
108
+ // style={{
109
+ // top: dropdownPosition.startsWith('bottom') ? `${menuPosition.top + 20}px` : 'auto',
110
+ // bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
111
+ // left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
112
+ // right: dropdownPosition.endsWith('left')
113
+ // ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
114
+ // : 'auto'
115
+ // }}
112
116
  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
113
117
  var _item$hide2;
114
118
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) && /*#__PURE__*/_react["default"].createElement("a", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qbs-react-grid",
3
- "version": "1.1.42",
3
+ "version": "1.1.44",
4
4
  "description": "A React table component",
5
5
  "main": "lib/index.js",
6
6
  "typings": "lib/index.d.ts",
package/src/Table.tsx CHANGED
@@ -607,7 +607,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
607
607
 
608
608
  const renderRowExpanded = useCallback(
609
609
  (rowData?: Row) => {
610
- const styles = { height: rowExpandedHeight };
610
+ const styles = { height: rowExpandedHeight, maxWidth: tableRef?.current?.clientWidth };
611
611
 
612
612
  if (typeof renderRowExpandedProp === 'function') {
613
613
  return (
@@ -656,9 +656,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
656
656
  const scrollCells: React.ReactNode[] = [];
657
657
  let fixedLeftCellGroupWidth = 0;
658
658
  let fixedRightCellGroupWidth = 0;
659
-
660
- for (let i = 0; i < cells.length; i++) {
661
- const cell = cells[i];
659
+ cells?.forEach(cell => {
660
+ // const cell = cells[i];
662
661
  const { fixed, width } = cell.props;
663
662
 
664
663
  let isFixedStart = fixed === 'left' || fixed === true;
@@ -678,7 +677,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
678
677
  } else {
679
678
  scrollCells.push(cell);
680
679
  }
681
- }
680
+ });
682
681
 
683
682
  if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
684
683
  fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
@@ -729,7 +728,16 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
729
728
  );
730
729
  }
731
730
  return (
732
- <Row {...restRowProps} data-depth={depth} style={rowStyles}>
731
+ <Row
732
+ {...restRowProps}
733
+ data-depth={depth}
734
+ style={{
735
+ ...rowStyles
736
+ // minHeight: shouldRenderExpandedRow ? 556 : 36
737
+ }}
738
+ // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
739
+ // height={shouldRenderExpandedRow ? 556 : 36}
740
+ >
733
741
  {renderRowProp ? renderRowProp(rowNode, rowData) : rowNode}
734
742
  </Row>
735
743
  );
package/src/qbsTable/QbsTable.tsx CHANGED
@@ -73,7 +73,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
73
73
  headerHeight = 40,
74
74
  tableBodyHeight,
75
75
  customRowStatus,
76
- searchPlaceholder
76
+ searchPlaceholder,
77
+ rowExpandedHeight=517,
77
78
  }) => {
78
79
  const [loading, setLoading] = useState(false);
79
80
  const [columns, setColumns] = useState(propColumn);
@@ -248,6 +249,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
248
249
 
249
250
  const handleExpanded = useCallback(
250
251
  (rowData: any) => {
252
+ console.log(rowData);
251
253
  const keyValue = dataRowKey as string;
252
254
  const key = rowData[keyValue];
253
255
 
@@ -443,6 +445,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
443
445
  columns={columns}
444
446
  minHeight={minHeight}
445
447
  headerHeight={headerHeight}
448
+ rowExpandedHeight={rowExpandedHeight}
446
449
  loading={isLoading ?? loading}
447
450
  showHeader
448
451
  defaultChecked
package/src/qbsTable/commontypes.ts CHANGED
@@ -45,7 +45,7 @@ export interface ActionProps {
45
45
  icon: React.ReactNode;
46
46
  toolTip?: string;
47
47
  hidden?: boolean;
48
- hide?: (data: any,index?:number) => boolean;
48
+ hide?: (data: any, index?: number) => boolean;
49
49
  }
50
50
 
51
51
  export interface QbsTableProps {
@@ -87,7 +87,7 @@ export interface QbsTableProps {
87
87
  primaryFilter?: ReactElement | ReactNode;
88
88
  advancefilter?: ReactElement | ReactNode;
89
89
  tableHeaderActions?: ReactElement | ReactNode;
90
- searchPlaceholder?:string
90
+ searchPlaceholder?: string;
91
91
  selectedRowActions?: {
92
92
  actionTitle?: string;
93
93
  action: (checked: (number | string)[]) => void;
@@ -112,6 +112,7 @@ export interface QbsTableProps {
112
112
  field?: boolean;
113
113
  getPath?: (data: any) => string;
114
114
  };
115
+ rowExpandedHeight?: number;
115
116
  }
116
117
 
117
118
  export interface QbsTableToolbarProps {
package/src/qbsTable/utilities/menuDropDown.tsx CHANGED
@@ -25,7 +25,7 @@ const MenuDropDown: React.FC<Props> = ({
25
25
  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
26
26
  const menuRef = useRef<HTMLDivElement | null>(null);
27
27
  const dropRef = useRef<HTMLDivElement | null>(null);
28
- const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
28
+ // const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
29
29
  useEffect(() => {
30
30
  const handleClickOutside = (event: MouseEvent) => {
31
31
  if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -55,50 +55,50 @@ const MenuDropDown: React.FC<Props> = ({
55
55
  );
56
56
  return result?.length ?? 0;
57
57
  };
58
- const [menuPosition, setMenuPosition] = useState({
59
- top: 0,
60
- left: 0,
61
- bottom: 0,
62
- right: 0
63
- });
58
+ // const [menuPosition, setMenuPosition] = useState({
59
+ // top: 0,
60
+ // left: 0,
61
+ // bottom: 0,
62
+ // right: 0
63
+ // });
64
64
  const toggleMenu = () => {
65
- if (!openMenu && menuButtonRef.current) {
66
- const rect = menuButtonRef.current.getBoundingClientRect();
67
- const topSpace = rect.top;
68
- const bottomSpace = window.innerHeight - rect.bottom;
69
- const leftSpace = rect.left;
70
- const rightSpace = window.innerWidth - rect.right;
65
+ // if (!openMenu && menuButtonRef.current) {
66
+ // const rect = menuButtonRef.current.getBoundingClientRect();
67
+ // const topSpace = rect.top;
68
+ // const bottomSpace = window.innerHeight - rect.bottom;
69
+ // const leftSpace = rect.left;
70
+ // const rightSpace = window.innerWidth - rect.right;
71
71
 
72
- const dropdownHeight = 200;
73
- const dropdownWidth = 200;
72
+ // const dropdownHeight = 200;
73
+ // const dropdownWidth = 200;
74
74
 
75
- let newPosition = 'bottom-right';
75
+ // let newPosition = 'bottom-right';
76
76
 
77
- if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
78
- newPosition = 'top-right';
79
- }
77
+ // if (bottomSpace < dropdownHeight && topSpace > dropdownHeight) {
78
+ // newPosition = 'top-right';
79
+ // }
80
80
 
81
- if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
82
- newPosition = newPosition.replace('right', 'left');
83
- }
81
+ // if (rightSpace < dropdownWidth && leftSpace > dropdownWidth) {
82
+ // newPosition = newPosition.replace('right', 'left');
83
+ // }
84
84
 
85
- if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
86
- newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
87
- }
85
+ // if (topSpace < dropdownHeight && bottomSpace < dropdownHeight) {
86
+ // newPosition = leftSpace > rightSpace ? 'bottom-left' : 'bottom-right';
87
+ // }
88
88
 
89
- setDropdownPosition(newPosition);
90
- setMenuPosition({
91
- top: rect.top + window.scrollY,
92
- left: rect.left + window.scrollX,
93
- bottom: window.innerHeight - rect.bottom,
94
- right: window.innerWidth - rect.right
95
- });
96
- }
89
+ // setDropdownPosition(newPosition);
90
+ // setMenuPosition({
91
+ // top: rect.top + window.scrollY,
92
+ // left: rect.left + window.scrollX,
93
+ // bottom: window.innerHeight - rect.bottom,
94
+ // right: window.innerWidth - rect.right
95
+ // });
96
+ // }
97
97
  setTimeout(() => {
98
98
  setOpenMenu(!openMenu);
99
99
  }, 200);
100
100
  };
101
- const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
101
+ // const buttonWidth = menuButtonRef.current ? menuButtonRef.current.offsetWidth : 0;
102
102
  return (
103
103
  <div className="qbs-table-menu-dropdown" ref={menuRef}>
104
104
  {handleShowHideMenu() > 0 && (
@@ -110,16 +110,14 @@ const MenuDropDown: React.FC<Props> = ({
110
110
  <div
111
111
  className={'qbs-table-qbs-table-menu-dropdown-content'}
112
112
  ref={dropRef}
113
- style={{
114
- top: dropdownPosition.startsWith('bottom')
115
- ? `${menuPosition.top + window.scrollY + 20}px`
116
- : 'auto',
117
- bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
118
- left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
119
- right: dropdownPosition.endsWith('left')
120
- ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
121
- : 'auto'
122
- }}
113
+ // style={{
114
+ // top: dropdownPosition.startsWith('bottom') ? `${menuPosition.top + 20}px` : 'auto',
115
+ // bottom: dropdownPosition.startsWith('top') ? `${menuPosition.bottom + 20}px` : 'auto',
116
+ // left: dropdownPosition.endsWith('right') ? `${menuPosition.left + 10}px` : 'auto',
117
+ // right: dropdownPosition.endsWith('left')
118
+ // ? `${window.innerWidth - menuPosition.left - buttonWidth + 10}px`
119
+ // : 'auto'
120
+ // }}
123
121
  >
124
122
  {actionDropDown?.map(item => (
125
123
  <>