qbs-react-grid 1.1.15 → 1.1.17

package/src/qbsTable/QbsTable.tsx

@@ -7,7 +7,13 @@ import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
-import { ActionCell, CheckCell, CustomTableCell, ExpandCell } from './CustomTableCell';
+import {
+  ActionCell,
+  CheckCell,
+  CustomTableCell,
+  ExpandCell,
+  CustomRowStatus
+} from './CustomTableCell';
 import ToolBar from './Toolbar';
 import ColumToggle from './utilities/ColumShowHide';
 import debounce from './utilities/debounce';
@@ -63,7 +69,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   handleResetColumns,
   selectedRows,
   headerHeight = 40,
-  tableBodyHeight
+  tableBodyHeight,
+  customRowStatus
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -407,6 +414,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
       ),
     [columns, dataTheme]
   );
+
   return (
     <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
       {toolbar && <ToolBar {...toolbarProps} />}
@@ -417,12 +425,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
           dataTheme={dataTheme}
           wordWrap={wordWrap}
           sortColumn={sortColumn}
+          style={{ position: 'relative' }}
           sortType={sortType}
           onSortColumn={handleSortColumn}
           onRowClick={onRowClick}
           tableBodyHeight={tableBodyHeight}
           cellBordered={cellBordered}
           bordered={bordered}
+          columns={columns}
           minHeight={minHeight}
           headerHeight={headerHeight}
           loading={isLoading ?? loading}
@@ -496,6 +506,24 @@ const QbsTable: React.FC<QbsTableProps> = ({
               />
             </Column>
           )}
+          {customRowStatus && Object.keys(customRowStatus)?.length > 0 && (
+            <Column width={50} align="center" fixed="left">
+              <HeaderCell
+                verticalAlign={findGrouped() ? 'middle' : undefined}
+                className={` ${classes.headerlClass}`}
+              >
+                {' '}
+              </HeaderCell>
+              <CustomRowStatus
+                getIcon={customRowStatus.getIcon}
+                dataKey={customRowStatus.field}
+                rowClick={customRowStatus.onClick}
+                path={customRowStatus.getPath}
+                link={customRowStatus.link}
+                toolTip={customRowStatus.toolTip}
+              />
+            </Column>
+          )}
           {columnsRendered}
           {!actionProps ||
             (actionProps?.length === 0 && columnToggle && (
@@ -546,6 +574,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             </Column>
           )}
         </Table>
+
         <div>
           {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
         </div>

package/src/qbsTable/commontypes.ts

@@ -101,6 +101,15 @@ export interface QbsTableProps {
   handleResetColumns?: () => void;
   headerHeight?: number;
   tableBodyHeight?: string;
+  customRowStatus?: {
+    getIcon?: (data: any) => ReactElement;
+    onClick?: (rowData: any) => void;
+    hidden?: boolean;
+    toolTip?: string | ReactElement;
+    link?: boolean;
+    field?: boolean;
+    getPath?: (data: any) => string;
+  };
 }
 
 export interface QbsTableToolbarProps {

package/src/qbsTable/utilities/ToolTip.tsx

@@ -1,24 +1,36 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useRef } from 'react';
 
 const TooltipComponent: React.FC<any> = ({ title, children }) => {
-  const [scrollY, setScrollY] = useState(0);
-  const [isScrollingUp, setIsScrollingUp] = useState(true);
+  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
+  const dropRef = useRef(null);
+  const menuButtonRef = useRef<HTMLElement>(null);
+  const adjustDropdownPosition = () => {
+    if (menuButtonRef.current && dropRef.current) {
+      const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
 
-  const handleScroll = () => {
-    setIsScrollingUp(window.scrollY < scrollY);
-    setScrollY(window.scrollY);
+      const spaceAbove = inputBoxRect.top;
+      const spaceBelow = viewportHeight - inputBoxRect.bottom;
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top-position');
+      } else {
+        setDropdownPosition('bottom-position');
+      }
+    }
   };
 
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [scrollY]);
   return (
-    <div className={`qbs-table-tooltip ${!isScrollingUp ? 'up' : 'down'}`}>
-      <span>{children}</span>
-      <span className="tooltiptext">{title}</span>
+    <div className={`qbs-table-tooltip ${dropdownPosition == 'bottom-position' ? 'down' : 'up'} `}>
+      <span
+        ref={menuButtonRef}
+        style={{ display: 'flex' }}
+        onMouseEnter={() => adjustDropdownPosition()}
+      >
+        {children}
+      </span>
+      <span ref={dropRef} className={`tooltiptext`}>
+        {title}
+      </span>
     </div>
   );
 };

package/src/qbsTable/utilities/menuDropDown.tsx

@@ -41,6 +41,7 @@ const MenuDropDown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowD
     setOpenMenu(false);
   };
 
+  
   return (
     <div className="qbs-table-menu-dropdown" ref={menuRef}>
       <button className="qbs-table-dropbtn" onClick={toggleMenu} ref={menuButtonRef}>

package/src/utils/useTableDimension.ts

@@ -305,7 +305,6 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
     if (fillHeight) {
       return tableHeight.current;
     }
-
     if (data?.length === 0 && autoHeight) {
       return heightProp;
     }