qbs-react-grid 1.3.16 → 2.0.2

package/src/qbsTable/CustomTableCell.tsx

@@ -110,21 +110,21 @@ export const CustomTableCell: React.FC<any> = React.memo(
     ...props
   }) => {
     return (
-      <>
-        <Cell {...props} dataKey={dataKey}>
-          {link && !path && !hideLink?.(rowData) ? (
-            <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
-              {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
-            </a>
-          ) : path && !hideLink?.(rowData) ? (
-            <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)}</>
-          )}
-        </Cell>
-      </>
+      <Cell {...props} dataKey={dataKey}>
+        {link && !path && !hideLink?.(rowData) ? (
+          <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+          </a>
+        ) : path && !hideLink?.(rowData) ? (
+          <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)
+        )}
+      </Cell>
     );
   }
 );
@@ -149,41 +149,39 @@ export const CustomRowStatus: React.FC<any> = React.memo(
     };
 
     return (
-      <>
-        <Cell
-          {...props}
-          dataKey={dataKey}
-          style={{ padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
-          onMouseEnter={() => adjustDropdownPosition()}
-        >
-          <div className="row-status">
-            {!path ? (
-              <span
-                ref={menuButtonRef}
-                style={{ height: 24, width: 24, display: 'flex' }}
-                onClick={() => rowClick?.(rowData)}
-              >
-                {getIcon?.(rowData)}
-              </span>
-            ) : (
-              <Link
-                style={{ height: 24, width: 24 }}
-                to={path?.(rowData) ?? ''}
-                className="qbs-table-row-link"
-              >
-                {getIcon?.(rowData)}
-              </Link>
-            )}
-            <div
-              ref={dropRef}
-              className={`row-status-tooltip ${dropdownPosition}`}
-              style={{ position: 'fixed' }}
+      <Cell
+        {...props}
+        dataKey={dataKey}
+        style={{ padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+        onMouseEnter={() => adjustDropdownPosition()}
+      >
+        <div className="row-status">
+          {!path ? (
+            <span
+              ref={menuButtonRef}
+              style={{ height: 24, width: 24, display: 'flex' }}
+              onClick={() => rowClick?.(rowData)}
             >
-              {getToolTip?.(rowData)}
-            </div>
+              {getIcon?.(rowData)}
+            </span>
+          ) : (
+            <Link
+              style={{ height: 24, width: 24 }}
+              to={path?.(rowData) ?? ''}
+              className="qbs-table-row-link"
+            >
+              {getIcon?.(rowData)}
+            </Link>
+          )}
+          <div
+            ref={dropRef}
+            className={`row-status-tooltip ${dropdownPosition}`}
+            style={{ position: 'fixed' }}
+          >
+            {getToolTip?.(rowData)}
           </div>
-        </Cell>
-      </>
+        </div>
+      </Cell>
     );
   }
 );

package/src/qbsTable/QbsTable.tsx

@@ -98,7 +98,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 prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
@@ -338,125 +338,229 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const findGrouped = () => {
     return columns?.find(item => item.grouped) ? true : false;
   };
+  // const columnsRendered: React.ReactElement[] = useMemo(
+  //   () =>
+  //     (columns ?? []).map(
+  //       ({
+  //         title,
+  //         field,
+  //         resizable,
+  //         sortable,
+  //         colWidth,
+  //         align,
+  //         grouped,
+  //         groupHeader,
+  //         fixed,
+  //         children,
+  //         customCell,
+  //         renderCell,
+  //         isVisible,
+  //         link,
+  //         getPath,
+  //         rowClick,
+  //         sortKey,
+  //         type,
+  //         hideLink
+  //       }) =>
+  //         isVisible &&
+  //         (grouped ? (
+  //           <ColumnGroup
+  //             header={groupHeader}
+  //             fixed={fixed}
+  //             align={align}
+  //             verticalAlign="middle"
+  //             groupHeaderHeight={40}
+  //           >
+  //             {children?.map(child => (
+  //               <Column
+  //                 key={child.title}
+  //                 sortable={child.sortable}
+  //                 width={child.colWidth ?? COLUMN_WIDTH}
+  //                 resizable={child.resizable}
+  //                 align={child.align}
+  //                 onResize={handleColumnWidth}
+  //                 fixed={child.fixed}
+  //               >
+  //                 <HeaderCell
+  //                   dataTheme={dataTheme}
+  //                   verticalAlign={'middle'}
+  //                   className={` ${classes.headerClass}`}
+  //                   sortKey={child.sortKey}
+  //                   renderSortIcon={renderSortIcon}
+  //                 >
+  //                   {child.title}
+  //                 </HeaderCell>
+  //                 {child.customCell || child.link ? (
+  //                   <CustomTableCell
+  //                     renderCell={child.renderCell}
+  //                     dataKey={child.field}
+  //                     dataTheme={dataTheme}
+  //                     type={child.type}
+  //                     path={child.getPath}
+  //                     link={child.link}
+  //                   />
+  //                 ) : (
+  //                   <Cell
+  //                     className={` ${classes.cellClass}`}
+  //                     dataKey={child.field}
+  //                     dataTheme={dataTheme}
+  //                   />
+  //                 )}
+  //               </Column>
+  //             ))}
+  //           </ColumnGroup>
+  //         ) : (
+  //           <Column
+  //             key={title}
+  //             sortable={sortable}
+  //             width={colWidth ?? COLUMN_WIDTH}
+  //             resizable={resizable}
+  //             align={align}
+  //             fixed={fixed}
+  //             onResize={handleColumnWidth}
+  //           >
+  //             <HeaderCell
+  //               dataTheme={dataTheme}
+  //               verticalAlign={findGrouped() ? 'middle' : undefined}
+  //               className={` ${classes.headerClass}`}
+  //               sortKey={sortKey}
+  //               renderSortIcon={renderSortIcon}
+  //             >
+  //               {title}
+  //             </HeaderCell>
+  //             {customCell || link ? (
+  //               <CustomTableCell
+  //                 renderCell={renderCell}
+  //                 dataKey={field}
+  //                 rowClick={rowClick}
+  //                 type={type}
+  //                 hideLink={hideLink}
+  //                 path={getPath}
+  //                 dataTheme={dataTheme}
+  //                 link={link}
+  //               />
+  //             ) : (
+  //               <Cell dataKey={field} dataTheme={dataTheme} className={` ${classes.cellClass}`} />
+  //             )}
+  //           </Column>
+  //         ))
+  //     ),
+  //   [columns, dataTheme]
+  // );
   const columnsRendered: React.ReactElement[] = useMemo(
     () =>
-      (columns ?? []).map(
-        ({
-          title,
-          field,
-          resizable,
-          sortable,
-          colWidth,
-          align,
-          grouped,
-          groupHeader,
-          fixed,
-          children,
-          customCell,
-          renderCell,
-          isVisible,
-          link,
-          getPath,
-          rowClick,
-          sortKey,
-          type,
-          hideLink
-        }) => (
-          <>
-            {isVisible && (
-              <>
-                {grouped ? (
-                  <ColumnGroup
-                    header={groupHeader}
-                    fixed={fixed}
-                    align={align}
-                    verticalAlign="middle"
-                    groupHeaderHeight={40}
-                  >
-                    <>
-                      {children?.map(child => (
-                        <Column
-                          key={child.title}
-                          sortable={child.sortable}
-                          width={child.colWidth ?? COLUMN_WIDTH}
-                          resizable={child.resizable}
-                          align={child.align}
-                          onResize={handleColumnWidth}
-                          fixed={child.fixed}
-                        >
-                          <HeaderCell
-                            dataTheme={dataTheme}
-                            verticalAlign={'middle'}
-                            className={` ${classes.headerClass}`}
-                            sortKey={child.sortKey}
-                            renderSortIcon={renderSortIcon}
-                          >
-                            {child.title}
-                          </HeaderCell>
-                          {child.customCell || child.link ? (
-                            <CustomTableCell
-                              renderCell={child.renderCell}
-                              dataKey={child.field}
-                              dataTheme={dataTheme}
-                              type={child.type}
-                              path={child.getPath}
-                              link={child.link}
-                            />
-                          ) : (
-                            <Cell
-                              className={` ${classes.cellClass}`}
-                              dataKey={child.field}
-                              dataTheme={dataTheme}
-                            />
-                          )}
-                        </Column>
-                      ))}
-                    </>
-                  </ColumnGroup>
-                ) : (
-                  <Column
-                    key={title}
-                    sortable={sortable}
-                    width={colWidth ?? COLUMN_WIDTH}
-                    resizable={resizable}
-                    align={align}
-                    fixed={fixed}
-                    onResize={handleColumnWidth}
-                  >
-                    <HeaderCell
-                      dataTheme={dataTheme}
-                      verticalAlign={findGrouped() ? 'middle' : undefined}
-                      className={` ${classes.headerClass}`}
-                      sortKey={sortKey}
-                      renderSortIcon={renderSortIcon}
+      (columns ?? [])
+        .map(
+          ({
+            title,
+            field,
+            resizable,
+            sortable,
+            colWidth,
+            align,
+            grouped,
+            groupHeader,
+            fixed,
+            children,
+            customCell,
+            renderCell,
+            isVisible,
+            link,
+            getPath,
+            rowClick,
+            sortKey,
+            type,
+            hideLink
+          }) =>
+            isVisible ? (
+              grouped ? (
+                <ColumnGroup
+                  header={groupHeader}
+                  fixed={fixed}
+                  align={align}
+                  verticalAlign="middle"
+                  groupHeaderHeight={40}
+                >
+                  {children?.map(child => (
+                    <Column
+                      key={child.title}
+                      sortable={child.sortable}
+                      width={child.colWidth ?? COLUMN_WIDTH}
+                      resizable={child.resizable}
+                      align={child.align}
+                      onResize={handleColumnWidth}
+                      fixed={child.fixed}
                     >
-                      {title}
-                    </HeaderCell>
-                    {customCell || link ? (
-                      <CustomTableCell
-                        renderCell={renderCell}
-                        dataKey={field}
-                        rowClick={rowClick}
-                        type={type}
-                        hideLink={hideLink}
-                        path={getPath}
+                      <HeaderCell
                         dataTheme={dataTheme}
-                        link={link}
-                      />
-                    ) : (
-                      <Cell
-                        dataKey={field}
-                        dataTheme={dataTheme}
-                        className={` ${classes.cellClass}`}
-                      />
-                    )}
-                  </Column>
-                )}
-              </>
-            )}
-          </>
+                        verticalAlign="middle"
+                        className={` ${classes.headerClass}`}
+                        sortKey={child.sortKey}
+                        renderSortIcon={renderSortIcon}
+                      >
+                        {child.title}
+                      </HeaderCell>
+                      {child.customCell || child.link ? (
+                        <CustomTableCell
+                          renderCell={child.renderCell}
+                          dataKey={child.field}
+                          dataTheme={dataTheme}
+                          type={child.type}
+                          path={child.getPath}
+                          link={child.link}
+                        />
+                      ) : (
+                        <Cell
+                          className={` ${classes.cellClass}`}
+                          dataKey={child.field}
+                          dataTheme={dataTheme}
+                        />
+                      )}
+                    </Column>
+                  ))}
+                </ColumnGroup>
+              ) : (
+                <Column
+                  key={title}
+                  sortable={sortable}
+                  width={colWidth ?? COLUMN_WIDTH}
+                  resizable={resizable}
+                  align={align}
+                  fixed={fixed}
+                  onResize={handleColumnWidth}
+                >
+                  <HeaderCell
+                    dataTheme={dataTheme}
+                    verticalAlign={findGrouped() ? 'middle' : undefined}
+                    className={` ${classes.headerClass}`}
+                    sortKey={sortKey}
+                    renderSortIcon={renderSortIcon}
+                  >
+                    {title}
+                  </HeaderCell>
+                  {customCell || link ? (
+                    <CustomTableCell
+                      renderCell={renderCell}
+                      dataKey={field}
+                      rowClick={rowClick}
+                      type={type}
+                      hideLink={hideLink}
+                      path={getPath}
+                      dataTheme={dataTheme}
+                      link={link}
+                    />
+                  ) : (
+                    <Cell
+                      dataKey={field}
+                      dataTheme={dataTheme}
+                      className={` ${classes.cellClass}`}
+                    />
+                  )}
+                </Column>
+              )
+            ) : null // ✅ Fix: Return `null` instead of `false`
         )
-      ),
+        .filter(Boolean) as React.ReactElement[], // ✅ Fix: Type assertion to ReactElement[]
     [columns, dataTheme]
   );
 
@@ -470,7 +574,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             key={tableKey}
             tableKey={tableKey}
             data={data}
-            tableBodyRef={tableBodyRef}
+            tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}
             autoHeight={autoHeight}

package/src/qbsTable/TableCardList.tsx

@@ -88,7 +88,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 prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
@@ -445,7 +445,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           key={tableKey}
           tableKey={tableKey}
           data={data}
-          tableBodyRef={tableBodyRef}
+          tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
           dataTheme={dataTheme}
           wordWrap={wordWrap}
           autoHeight={autoHeight}

package/src/utils/getTableColumns.ts

@@ -1,6 +1,6 @@
+import flatten from 'lodash/flatten';
 import React from 'react';
 import * as ReactIs from 'react-is';
-import flatten from 'lodash/flatten';
 import ColumnGroup from '../ColumnGroup';
 
 /**
@@ -11,7 +11,7 @@ import ColumnGroup from '../ColumnGroup';
 function getTableColumns(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
 
-  const flattenColumns = flatten(childrenArray).map((column: React.ReactElement) => {
+  const flattenColumns = flatten(childrenArray).map((column: any) => {
     // If the column is a group, we need to get the columns from the children.
     if (column?.type === ColumnGroup) {
       const {
@@ -21,7 +21,7 @@ function getTableColumns(children) {
         fixed,
         verticalAlign,
         groupHeaderHeight
-      } = column?.props;
+      } = column?.props as any;
 
       const childColumns = getTableColumns(groupChildren);
 
@@ -56,7 +56,7 @@ function getTableColumns(children) {
       });
     } else if (ReactIs.isFragment(column)) {
       // If the column is a fragment, we need to get the columns from the children.
-      return getTableColumns(column.props?.children);
+      return getTableColumns(column.props?.children as any);
     } else if (Array.isArray(column)) {
       // If the column is an array, need check item in the array.
       return getTableColumns(column);

package/src/utils/useAffix.ts

@@ -1,24 +1,24 @@
-import React, { useRef, useCallback, useEffect } from 'react';
-import getHeight from 'dom-lib/getHeight';
 import addStyle from 'dom-lib/addStyle';
-import removeStyle from 'dom-lib/removeStyle';
+import getHeight from 'dom-lib/getHeight';
 import on from 'dom-lib/on';
-import toggleClass from './toggleClass';
+import removeStyle from 'dom-lib/removeStyle';
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { ElementOffset, ListenerCallback } from '../@types/common';
+import type { ScrollbarInstance } from '../Scrollbar';
 import isNumberOrTrue from './isNumberOrTrue';
+import toggleClass from './toggleClass';
 import useUpdateEffect from './useUpdateEffect';
-import type { ListenerCallback, ElementOffset } from '../@types/common';
-import type { ScrollbarInstance } from '../Scrollbar';
 
 interface AffixProps {
   getTableHeight: () => number;
   contentHeight: React.MutableRefObject<number>;
   affixHeader?: boolean | number;
   affixHorizontalScrollbar?: boolean | number;
-  tableOffset: React.RefObject<ElementOffset>;
-  headerOffset: React.RefObject<ElementOffset>;
+  tableOffset: React.RefObject<ElementOffset | null>;
+  headerOffset: React.RefObject<ElementOffset | null>;
   headerHeight: number;
-  scrollbarXRef: React.RefObject<ScrollbarInstance>;
-  affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
+  scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
+  affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
 }
 
 const useAffix = (props: AffixProps) => {
@@ -34,7 +34,7 @@ const useAffix = (props: AffixProps) => {
     affixHeaderWrapperRef
   } = props;
 
-  const scrollListener = useRef<ListenerCallback>();
+  const scrollListener = useRef<ListenerCallback>(null);
   const handleAffixHorizontalScrollbar = useCallback(() => {
     const scrollY = window.scrollY || window.pageYOffset;
     const windowHeight = getHeight(window);

package/src/utils/useCellDescriptor.ts

@@ -32,8 +32,8 @@ interface CellDescriptorProps<Row> {
   onSortColumn?: (dataKey: string, sortType?: SortType) => void;
   onHeaderCellResize?: (width: number, dataKey: string) => void;
   rowHeight?: number | ((rowData?: Row) => number);
-  mouseAreaRef: React.RefObject<HTMLDivElement>;
-  tableRef: React.RefObject<HTMLDivElement>;
+  mouseAreaRef: React.RefObject<HTMLDivElement | null>;
+  tableRef: React.RefObject<HTMLDivElement | null>;
 }
 
 interface CellDescriptor {
@@ -68,7 +68,7 @@ const useCellDescriptor = <Row extends RowDataType>(
     rowHeight,
     onSortColumn,
     onHeaderCellResize,
-    prefix,
+    prefix
   } = props;
 
   const [sortType, setSortType] = useControlled(sortTypeProp, defaultSortType);
@@ -196,16 +196,16 @@ const useCellDescriptor = <Row extends RowDataType>(
   const count = columns.length;
   const { totalFlexGrow, totalWidth } = getTotalByColumns(columns);
 
-  React.Children.forEach(columns, (column: React.ReactElement<ColumnProps>, index) => {
+  React.Children.forEach(columns as any, (column: React.ReactElement<ColumnProps>, index) => {
     if (React.isValidElement(column)) {
       const columnChildren = column.props.children as React.ReactNode[];
       const columnProps = getColumnProps(column);
 
       const { width, resizable, flexGrow, minWidth, onResize, treeCol } = columnProps;
-
       if (treeCol) {
         hasCustomTreeCol = true;
       }
+      console.log(columns);
 
       if (columnChildren?.length !== 2) {
         throw new Error(`Component <HeaderCell> and <Cell> is required, column index: ${index} `);

package/src/utils/usePosition.ts

@@ -1,23 +1,23 @@
-import React, { useCallback, useRef } from 'react';
 import addStyle, { CSSProperty } from 'dom-lib/addStyle';
+import React, { useCallback, useRef } from 'react';
+import type { RowDataType } from '../@types/common';
 import { SCROLLBAR_WIDTH } from '../constants';
+import defer from './defer';
+import isSupportTouchEvent from './isSupportTouchEvent';
 import toggleClass from './toggleClass';
 import useUpdateEffect from './useUpdateEffect';
-import type { RowDataType } from '../@types/common';
-import isSupportTouchEvent from './isSupportTouchEvent';
-import defer from './defer';
 
 interface PositionProps {
   data: readonly RowDataType[];
   height: number;
   tableWidth: React.MutableRefObject<number>;
-  tableRef: React.RefObject<HTMLDivElement>;
+  tableRef: React.RefObject<HTMLDivElement | null>;
   prefix: (str: string) => string;
   translateDOMPositionXY: React.MutableRefObject<any>;
-  wheelWrapperRef: React.RefObject<HTMLDivElement>;
-  headerWrapperRef: React.RefObject<HTMLDivElement>;
-  affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
-  tableHeaderRef: React.RefObject<HTMLDivElement>;
+  wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
+  headerWrapperRef: React.RefObject<HTMLDivElement | null>;
+  affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
+  tableHeaderRef: React.RefObject<HTMLDivElement | null>;
   scrollX: React.MutableRefObject<number>;
   scrollY: React.MutableRefObject<number>;
   contentWidth: React.MutableRefObject<number>;