qbs-react-grid 1.1.43 → 1.1.45

package/es/Table.js

@@ -364,8 +364,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     height: getTableHeight()
   }, style);
   var renderRowExpanded = useCallback(function (rowData) {
+    var _tableRef$current;
     var styles = {
-      height: rowExpandedHeight
+      height: rowExpandedHeight,
+      maxWidth: tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth
     };
     if (typeof renderRowExpandedProp === 'function') {
       return /*#__PURE__*/React.createElement("div", {
@@ -401,8 +403,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var scrollCells = [];
       var fixedLeftCellGroupWidth = 0;
       var fixedRightCellGroupWidth = 0;
-      for (var i = 0; i < cells.length; i++) {
-        var cell = cells[i];
+      cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
+        // const cell = cells[i];
         var _cell$props = cell.props,
           fixed = _cell$props.fixed,
           width = _cell$props.width;
@@ -421,7 +423,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
         } else {
           scrollCells.push(cell);
         }
-      }
+      });
       if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
         fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
       }
@@ -447,7 +449,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return /*#__PURE__*/React.createElement(Row, _extends({}, restRowProps, {
       "data-depth": depth,
-      style: rowStyles
+      style: _extends({}, rowStyles)
+      // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
+      // height={shouldRenderExpandedRow ? 556 : 36}
     }), renderRowProp ? renderRowProp(rowNode, rowData) : rowNode);
   };
   var renderTableHeader = function renderTableHeader(headerCells, rowWidth) {

package/es/qbsTable/QbsTable.js

@@ -81,7 +81,10 @@ var QbsTable = function QbsTable(_ref) {
     headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
     tableBodyHeight = _ref.tableBodyHeight,
     customRowStatus = _ref.customRowStatus,
-    searchPlaceholder = _ref.searchPlaceholder;
+    searchPlaceholder = _ref.searchPlaceholder,
+    _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
+    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh,
+    renderSortIcon = _ref.renderSortIcon;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -246,6 +249,7 @@ var QbsTable = function QbsTable(_ref) {
     };
   }, [themeToggle]);
   var handleExpanded = useCallback(function (rowData) {
+    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -344,7 +348,8 @@ var QbsTable = function QbsTable(_ref) {
           dataTheme: dataTheme,
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
-          sortKey: child.sortKey
+          sortKey: child.sortKey,
+          renderSortIcon: renderSortIcon
         }, child.title), child.customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
@@ -369,7 +374,8 @@ var QbsTable = function QbsTable(_ref) {
         dataTheme: dataTheme,
         verticalAlign: findGrouped() ? 'middle' : undefined,
         className: " " + classes.headerClass,
-        sortKey: sortKey
+        sortKey: sortKey,
+        renderSortIcon: renderSortIcon
       }, title), customCell || link ? /*#__PURE__*/React.createElement(CustomTableCell, {
         renderCell: renderCell,
         dataKey: field,
@@ -410,6 +416,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
     defaultChecked: true,
@@ -427,7 +434,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, "#"), /*#__PURE__*/React.createElement(ExpandCell, {
     dataKey: dataRowKey,
     expandedRowKeys: expandedRowKeys,
@@ -442,6 +450,7 @@ var QbsTable = function QbsTable(_ref) {
     },
     verticalAlign: findGrouped() ? 'middle' : undefined,
     dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon,
     className: "qbs-checkbox-border-none " + classes.headerlClass
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -479,7 +488,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, ' '), /*#__PURE__*/React.createElement(CustomRowStatus, {
     getIcon: customRowStatus.getIcon,
     dataKey: customRowStatus.field,
@@ -493,7 +503,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, /*#__PURE__*/React.createElement(ColumToggle, {
     columns: columns,
     onToggle: handleToggle,
@@ -509,7 +520,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, !columnToggle ? /*#__PURE__*/React.createElement(SettingsIcon, null) : /*#__PURE__*/React.createElement(ColumToggle, {
     columns: columns,
     onToggle: handleToggle,

package/es/qbsTable/commontypes.d.ts

@@ -109,6 +109,8 @@ export interface QbsTableProps {
         field?: boolean;
         getPath?: (data: any) => string;
     };
+    rowExpandedHeight?: number;
+    renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/Table.js

@@ -371,8 +371,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     height: getTableHeight()
   }, style);
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
+    var _tableRef$current;
     var styles = {
-      height: rowExpandedHeight
+      height: rowExpandedHeight,
+      maxWidth: tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth
     };
     if (typeof renderRowExpandedProp === 'function') {
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -408,8 +410,8 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       var scrollCells = [];
       var fixedLeftCellGroupWidth = 0;
       var fixedRightCellGroupWidth = 0;
-      for (var i = 0; i < cells.length; i++) {
-        var cell = cells[i];
+      cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
+        // const cell = cells[i];
         var _cell$props = cell.props,
           fixed = _cell$props.fixed,
           width = _cell$props.width;
@@ -428,7 +430,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         } else {
           scrollCells.push(cell);
         }
-      }
+      });
       if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
         fixedRightCellGroupWidth += _constants.SCROLLBAR_WIDTH;
       }
@@ -454,7 +456,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     return /*#__PURE__*/_react["default"].createElement(_Row["default"], (0, _extends2["default"])({}, restRowProps, {
       "data-depth": depth,
-      style: rowStyles
+      style: (0, _extends2["default"])({}, rowStyles)
+      // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
+      // height={shouldRenderExpandedRow ? 556 : 36}
     }), renderRowProp ? renderRowProp(rowNode, rowData) : rowNode);
   };
   var renderTableHeader = function renderTableHeader(headerCells, rowWidth) {

package/lib/qbsTable/QbsTable.js

@@ -87,7 +87,10 @@ var QbsTable = function QbsTable(_ref) {
     headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
     tableBodyHeight = _ref.tableBodyHeight,
     customRowStatus = _ref.customRowStatus,
-    searchPlaceholder = _ref.searchPlaceholder;
+    searchPlaceholder = _ref.searchPlaceholder,
+    _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
+    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh,
+    renderSortIcon = _ref.renderSortIcon;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -252,6 +255,7 @@ var QbsTable = function QbsTable(_ref) {
     };
   }, [themeToggle]);
   var handleExpanded = (0, _react.useCallback)(function (rowData) {
+    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -350,7 +354,8 @@ var QbsTable = function QbsTable(_ref) {
           dataTheme: dataTheme,
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
-          sortKey: child.sortKey
+          sortKey: child.sortKey,
+          renderSortIcon: renderSortIcon
         }, child.title), child.customCell || child.link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
@@ -375,7 +380,8 @@ var QbsTable = function QbsTable(_ref) {
         dataTheme: dataTheme,
         verticalAlign: findGrouped() ? 'middle' : undefined,
         className: " " + classes.headerClass,
-        sortKey: sortKey
+        sortKey: sortKey,
+        renderSortIcon: renderSortIcon
       }, title), customCell || link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
         renderCell: renderCell,
         dataKey: field,
@@ -416,6 +422,7 @@ var QbsTable = function QbsTable(_ref) {
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
+    rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: true,
     defaultChecked: true,
@@ -433,7 +440,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, "#"), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ExpandCell, {
     dataKey: dataRowKey,
     expandedRowKeys: expandedRowKeys,
@@ -448,6 +456,7 @@ var QbsTable = function QbsTable(_ref) {
     },
     verticalAlign: findGrouped() ? 'middle' : undefined,
     dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon,
     className: "qbs-checkbox-border-none " + classes.headerlClass
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -485,7 +494,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, ' '), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomRowStatus, {
     getIcon: customRowStatus.getIcon,
     dataKey: customRowStatus.field,
@@ -499,7 +509,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
     columns: columns,
     onToggle: handleToggle,
@@ -515,7 +526,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, !columnToggle ? /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null) : /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
     columns: columns,
     onToggle: handleToggle,

package/lib/qbsTable/commontypes.d.ts

@@ -109,6 +109,8 @@ export interface QbsTableProps {
         field?: boolean;
         getPath?: (data: any) => string;
     };
+    rowExpandedHeight?: number;
+    renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/package.json

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

package/src/Table.tsx

@@ -607,7 +607,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
   const renderRowExpanded = useCallback(
     (rowData?: Row) => {
-      const styles = { height: rowExpandedHeight };
+      const styles = { height: rowExpandedHeight, maxWidth: tableRef?.current?.clientWidth };
 
       if (typeof renderRowExpandedProp === 'function') {
         return (
@@ -656,9 +656,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       const scrollCells: React.ReactNode[] = [];
       let fixedLeftCellGroupWidth = 0;
       let fixedRightCellGroupWidth = 0;
-
-      for (let i = 0; i < cells.length; i++) {
-        const cell = cells[i];
+      cells?.forEach(cell => {
+        // const cell = cells[i];
         const { fixed, width } = cell.props;
 
         let isFixedStart = fixed === 'left' || fixed === true;
@@ -678,7 +677,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
         } else {
           scrollCells.push(cell);
         }
-      }
+      });
 
       if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
         fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
@@ -729,7 +728,16 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       );
     }
     return (
-      <Row {...restRowProps} data-depth={depth} style={rowStyles}>
+      <Row
+        {...restRowProps}
+        data-depth={depth}
+        style={{
+          ...rowStyles
+          // minHeight: shouldRenderExpandedRow ? 556 : 36
+        }}
+        // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
+        // height={shouldRenderExpandedRow ? 556 : 36}
+      >
         {renderRowProp ? renderRowProp(rowNode, rowData) : rowNode}
       </Row>
     );

package/src/qbsTable/QbsTable.tsx

@@ -73,7 +73,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   headerHeight = 40,
   tableBodyHeight,
   customRowStatus,
-  searchPlaceholder
+  searchPlaceholder,
+  rowExpandedHeight = 517,
+  renderSortIcon
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -248,6 +250,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   const handleExpanded = useCallback(
     (rowData: any) => {
+      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -353,6 +356,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                             verticalAlign={'middle'}
                             className={` ${classes.headerClass}`}
                             sortKey={child.sortKey}
+                            renderSortIcon={renderSortIcon}
                           >
                             {child.title}
                           </HeaderCell>
@@ -391,6 +395,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       verticalAlign={findGrouped() ? 'middle' : undefined}
                       className={` ${classes.headerClass}`}
                       sortKey={sortKey}
+                      renderSortIcon={renderSortIcon}
                     >
                       {title}
                     </HeaderCell>
@@ -443,6 +448,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           columns={columns}
           minHeight={minHeight}
           headerHeight={headerHeight}
+          rowExpandedHeight={rowExpandedHeight}
           loading={isLoading ?? loading}
           showHeader
           defaultChecked
@@ -460,6 +466,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
+                renderSortIcon={renderSortIcon}
               >
                 #
               </HeaderCell>
@@ -476,6 +483,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 style={{ padding: 0 }}
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 dataTheme={dataTheme}
+                renderSortIcon={renderSortIcon}
                 className={`qbs-checkbox-border-none ${classes.headerlClass}`}
               >
                 <div
@@ -519,6 +527,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
+                renderSortIcon={renderSortIcon}
               >
                 {' '}
               </HeaderCell>
@@ -540,6 +549,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}
                   dataTheme={dataTheme}
+                  renderSortIcon={renderSortIcon}
                 >
                   <ColumToggle
                     columns={columns}
@@ -561,6 +571,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
                 dataTheme={dataTheme}
+                renderSortIcon={renderSortIcon}
               >
                 {!columnToggle ? (
                   <SettingsIcon />

package/src/qbsTable/commontypes.ts

@@ -45,7 +45,7 @@ export interface ActionProps {
   icon: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
-  hide?: (data: any,index?:number) => boolean;
+  hide?: (data: any, index?: number) => boolean;
 }
 
 export interface QbsTableProps {
@@ -87,7 +87,7 @@ export interface QbsTableProps {
   primaryFilter?: ReactElement | ReactNode;
   advancefilter?: ReactElement | ReactNode;
   tableHeaderActions?: ReactElement | ReactNode;
-  searchPlaceholder?:string
+  searchPlaceholder?: string;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
@@ -112,6 +112,8 @@ export interface QbsTableProps {
     field?: boolean;
     getPath?: (data: any) => string;
   };
+  rowExpandedHeight?: number;
+  renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 
 export interface QbsTableToolbarProps {