qbs-react-grid 1.3.16 → 2.0.1

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,231 @@ 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>
+              )
+            ) : (
+              <></>
+            ) // ✅ Fix: Return `null` instead of `false`
         )
-      ),
+        .filter(Boolean), // ✅ Fix: Remove `undefined` and `false` elements
     [columns, dataTheme]
   );
 
@@ -470,7 +576,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,7 +196,7 @@ 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);

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>;

package/src/utils/useScrollListener.ts

@@ -1,18 +1,18 @@
-import React, { useRef, useCallback, useState, useEffect } from 'react';
-import WheelHandler from 'dom-lib/WheelHandler';
-import scrollLeft from 'dom-lib/scrollLeft';
-import scrollTop from 'dom-lib/scrollTop';
 import on from 'dom-lib/on';
 import removeStyle from 'dom-lib/removeStyle';
-import { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
-import useUpdateEffect from './useUpdateEffect';
-import useMount from './useMount';
-import { SCROLLBAR_WIDTH, TRANSITION_DURATION, BEZIER } from '../constants';
-import type { ScrollbarInstance } from '../Scrollbar';
+import scrollLeft from 'dom-lib/scrollLeft';
+import scrollTop from 'dom-lib/scrollTop';
+import WheelHandler from 'dom-lib/WheelHandler';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { ListenerCallback, RowDataType } from '../@types/common';
-import isSupportTouchEvent from './isSupportTouchEvent';
-import flushSync from './flushSync';
+import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
+import type { ScrollbarInstance } from '../Scrollbar';
 import defer from './defer';
+import flushSync from './flushSync';
+import isSupportTouchEvent from './isSupportTouchEvent';
+import { cancelAnimationTimeout, requestAnimationTimeout } from './requestAnimationTimeout';
+import useMount from './useMount';
+import useUpdateEffect from './useUpdateEffect';
 
 // Inertial sliding start time threshold
 const momentumTimeThreshold = 300;
@@ -29,11 +29,11 @@ interface ScrollListenerProps {
   headerHeight: number;
   autoHeight?: boolean;
   tableBodyRef: React.RefObject<HTMLDivElement>;
-  scrollbarXRef: React.RefObject<ScrollbarInstance>;
-  scrollbarYRef: React.RefObject<ScrollbarInstance>;
+  scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
+  scrollbarYRef: React.RefObject<ScrollbarInstance | null>;
   disabledScroll?: boolean;
   loading?: boolean;
-  tableRef: React.RefObject<HTMLDivElement>;
+  tableRef: React.RefObject<HTMLDivElement | null>;
   contentWidth: React.MutableRefObject<number>;
   tableWidth: React.MutableRefObject<number>;
   scrollY: React.MutableRefObject<number>;
@@ -109,10 +109,10 @@ const useScrollListener = (props: ScrollListenerProps) => {
     tableKey
   } = props;
 
-  const wheelListener = useRef<ListenerCallback>();
-  const touchStartListener = useRef<ListenerCallback>();
-  const touchMoveListener = useRef<ListenerCallback>();
-  const touchEndListener = useRef<ListenerCallback>();
+  const wheelListener = useRef<ListenerCallback>(null);
+  const touchStartListener = useRef<ListenerCallback>(null);
+  const touchMoveListener = useRef<ListenerCallback>(null);
+  const touchEndListener = useRef<ListenerCallback>(null);
   const [isChildFocused, setIsChildFocused] = useState(false);
 
   const [isScrolling, setScrolling] = useState(false);
@@ -247,7 +247,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
     [handleWheel, scrollbarXRef, scrollbarYRef]
   );
 
-  const wheelHandler = useRef<WheelHandler | null>();
+  const wheelHandler = useRef<WheelHandler | null>(null);
 
   // Stop unending scrolling and remove transition
   const stopScroll = useCallback(() => {

package/src/utils/useTableDimension.ts

@@ -16,8 +16,8 @@ interface TableDimensionProps<Row, Key> {
   rowHeight: number | ((rowData?: Row) => number);
   height: number;
   minHeight: number;
-  tableRef?: React.RefObject<HTMLDivElement>;
-  headerWrapperRef?: React.RefObject<HTMLDivElement>;
+  tableRef?: React.RefObject<HTMLDivElement | null>;
+  headerWrapperRef?: React.RefObject<HTMLDivElement | null>;
   width?: number;
   prefix: (str: string) => string;
   affixHeader?: boolean | number;
@@ -74,8 +74,8 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
   const tableWidth = useRef(widthProp || 0);
   const tableHeight = useRef(heightProp || 0);
   const columnCount = useRef(0);
-  const resizeObserver = useRef<ResizeObserver>();
-  const containerResizeObserver = useRef<ResizeObserver>();
+  const resizeObserver = useRef<ResizeObserver>(null);
+  const containerResizeObserver = useRef<ResizeObserver>(null);
   const headerOffset = useRef<ElementOffset | null>(null);
   const tableOffset = useRef<ElementOffset | null>(null);