@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/h5public/src/components/factory/src/DynamicTable/Table.tsx

@@ -1,17 +1,17 @@
-import type { ComponentItemType } from '@lingxiteam/types';
-import { LingxiForwardRef } from '@lingxiteam/types';
-import { CellClickedEvent, DomLayoutType } from 'ag-grid-community';
+import React, { useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import useCreateColumn from './hooks/useCreateColumn';
+import { AgGridReact } from 'ag-grid-react';
+import { DomLayoutType, CellClickedEvent } from 'ag-grid-community';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-import { AgGridReact } from 'ag-grid-react';
+import { leftDirection, rightDirection } from './assets/index';
+import type { ComponentItemType } from '@lingxiteam/types';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import './index.less';
 import { Skeleton } from 'antd-mobile-5';
 import { isEqual } from 'lodash';
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Empty } from '../BasicComponents';
 import Icon from '../Icon';
-import { leftDirection, rightDirection } from './assets/index';
-import useCreateColumn from './hooks/useCreateColumn';
-import './index.less';
 // import { ListNoFound } from '@lingxiteam/icons';
 
 const themeList = {
@@ -52,6 +52,19 @@ export interface MyDynamicTableProps {
   setPageNum: React.Dispatch<React.SetStateAction<number>>;
   dataLoading: boolean;
   setDataLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  headIconType?: string;
+  headPrefixIcon?: {
+    prefixIconTheme?: string;
+    prefixIconType?: string;
+    prefixIconiconFile?: {
+      fileId: string;
+      fileCode: string;
+      fileSubType: 'ICON_IMAGE' | 'ICONFONT';
+    }
+    prefixIconFontAddress?: string;
+    isSystem?: boolean;
+    systemIconKey?: string;
+  }
 }
 
 const prefixCls = 'appDynamicTable';
@@ -86,6 +99,8 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
     setPageNum,
     dataLoading,
     setDataLoading,
+    headIconType,
+    headPrefixIcon,
   } = props;
 
   // console.log('DynamicTable:', props);
@@ -131,7 +146,7 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
     headerBgColor,
     sandBoxLoadModule: engineApis.sandBoxLoadModule,
     getEngineApis,
-    renderIcon: iconProps => <Icon {...iconProps} $$componentItem={$$componentItem} getEngineApis={getEngineApis} />,
+    renderIcon: (iconProps) => <Icon {...iconProps} $$componentItem={$$componentItem} getEngineApis={getEngineApis} />,
   });
 
   if (typeof currentPage !== 'undefined') {
@@ -172,6 +187,7 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
     //   } else {
     //     setDataLoading(loading);
     //   }
+
     // },
     // clearData: () => {
     //   tableDataRef.current.pageData = [];
@@ -279,8 +295,7 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
       setTableHeight({ flex: 1 });
     } else {
       let totalHeight = rowHeight * (displayedRowCount + 1) + 5;
-      if (Object.keys(aggregate || {})?.length > 0) {
-        // 底部有合计栏再增加一栏
+      if (Object.keys(aggregate || {})?.length > 0) { // 底部有合计栏再增加一栏
         totalHeight += rowHeight;
       }
       setTableHeight({ height: `${totalHeight}px` });
@@ -300,11 +315,9 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
     // 设置合计数据将合计固定在表格底部
     if (currentData?.length > 0 && Object.keys(aggregate)?.length > 0) {
       const name = finalColumn?.[0]?.field;
-      const aggregateData: any = {
-        [name]: getLocale('DynamicTable.total', '合计'),
-      };
+      const aggregateData: any = { [name]: getLocale('DynamicTable.total', '合计') };
       currentData.forEach((item: any) => {
-        Object.keys(aggregate)?.forEach(c => {
+        Object.keys(aggregate)?.forEach((c) => {
           aggregateData[c] = (Number(aggregateData?.[c]) || 0) + (Number(item?.[c]) || 0);
         });
       });
@@ -395,9 +408,8 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
 
   useEffect(() => {
     tableDataRef.current.allData = dataSource;
-    setTimeout(() => {
-      resetCurrentPageData();
-    }, 0);
+
+    resetCurrentPageData();
   }, [dataSource]);
 
   useEffect(() => {
@@ -466,11 +478,63 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
     }
   }, [style]);
 
+  const tableHeader = useMemo(() => {
+    let header = <></>;
+    switch (headIconType) {
+      // case 'none':
+      //   header = <div className="table-header">{tableTitle}</div>;
+      //   break;
+      case 'styleOne':
+        header = (
+          <div className="table-header">
+            <div className="head-style-one" />
+            {tableTitle}
+          </div>
+        );
+        break;
+      case 'styleTwo':
+        header = (
+          <div className="table-header">
+            <div className="head-style-two" />
+            {tableTitle}
+          </div>
+        );
+        break;
+      case 'custom':
+        header = (
+          <div className="table-header">
+            <Icon
+              icon={{
+                type: headPrefixIcon?.prefixIconType,
+                theme: headPrefixIcon?.prefixIconTheme,
+                fontAddress: headPrefixIcon?.prefixIconFontAddress,
+                iconFile: headPrefixIcon?.prefixIconiconFile,
+                isSystem: headPrefixIcon?.isSystem,
+                systemIconKey: headPrefixIcon?.systemIconKey,
+              }}
+              $$componentItem={$$componentItem}
+              getEngineApis={getEngineApis}
+              className="head-style-custom"
+            />
+            {tableTitle}
+          </div>
+        );
+        break;
+      default:
+        header = <div className="table-header">{tableTitle}</div>;
+        break;
+    }
+    if (showHead) {
+      return header;
+    }
+    return <></>;
+  }, [showHead, tableTitle, headPrefixIcon, headIconType]);
+
   return (
     <>
       {visible === true && (
         <div className={`${prefixCls} ${className}`} style={style}>
-          {showHead && tableTitle && <div className="table-header">{tableTitle}</div>}
+          {tableHeader}
           <div
             className="table-body"
             ref={fatherViewRef}
@@ -509,17 +573,21 @@ const DynamicTable = LingxiForwardRef<any, MyDynamicTableProps>((props, ref) =>
               onFirstDataRendered={onFirstDataRendered}
             />
           </div>
-          {showOther && showMore && !showAllData && !pagination && tableDataRef.current?.allData && (
-            <span
-              className="more-cell"
-              onClick={() => {
-                setShowAllData(true);
-                const height = `${(tableDataRef.current?.allData?.length + 1) * 40}px`;
-                setTableHeight({ height });
-              }}
-            >
-              {getLocale('DynamicTable.more', '查看更多')}
-            </span>
+          {showOther &&
+            showMore &&
+            !showAllData &&
+            !pagination &&
+            tableDataRef.current?.allData && (
+              <span
+                className="more-cell"
+                onClick={() => {
+                  setShowAllData(true);
+                  const height = `${(tableDataRef.current?.allData?.length + 1) * 40}px`;
+                  setTableHeight({ height });
+                }}
+              >
+                {getLocale('DynamicTable.more', '查看更多')}
+              </span>
           )}
           {showOther && pagination && currentData.length > 0 && tableDataRef.current?.allData && (
             <div className="table-footer">

package/lib/h5public/src/components/factory/src/DynamicTable/components/HeaderCell.tsx

@@ -8,11 +8,7 @@ interface CustomHeaderProps {
 
 const HeaderCell: FC<CustomHeaderProps> = props => {
   const { style, displayName } = props;
-  return (
-    <div className="ag-custom-header-cell" style={style}>
-      {displayName}
-    </div>
-  );
+  return <div className="ag-custom-header-cell" style={style}>{displayName}</div>;
 };
 
 export default HeaderCell;

package/lib/h5public/src/components/factory/src/DynamicTable/components/TypeCells.tsx

@@ -1,30 +1,30 @@
-import { EngineApisType, EngineBaseProps } from '@lingxiteam/types';
-import { ICellRendererParams } from 'ag-grid-community';
-import { Button, Popover } from 'antd-mobile-5';
 import React from 'react';
-import CustomModule from '../../utils/CustomModule';
-import { useFuncExpExecute } from '../../utils/hooks/useFuncExpExecute';
-import useFormatCell from '../hooks/useFormatCell';
+import { ICellRendererParams } from 'ag-grid-community';
 import {
-  FADE_COLOUR_TAG,
+  PURE_COLOUR_FILL,
+  POINT_TAG,
   GHOST_TAG,
+  FADE_COLOUR_TAG,
+  PURE_COLOUR_TAG,
   HYPER_LINK,
-  OPERATOR_ENDS_WITH,
+  PROGRESS_BAR,
+  RELATION_OR,
   OPERATOR_EQUAL,
+  OPERATOR_NOT_EQUAL,
   OPERATOR_GREATER_THAN,
-  OPERATOR_INCLUDE,
   OPERATOR_LESS_THAN,
-  OPERATOR_NOT_EQUAL,
+  OPERATOR_INCLUDE,
   OPERATOR_NOT_INCLUDE,
-  OPERATOR_NOT_NULL,
-  OPERATOR_NULL,
   OPERATOR_STARTS_WITH,
-  POINT_TAG,
-  PROGRESS_BAR,
-  PURE_COLOUR_FILL,
-  PURE_COLOUR_TAG,
-  RELATION_OR,
+  OPERATOR_ENDS_WITH,
+  OPERATOR_NULL,
+  OPERATOR_NOT_NULL,
 } from '../utils/constant';
+import { useFuncExpExecute } from '../../utils/hooks/useFuncExpExecute';
+import useFormatCell from '../hooks/useFormatCell';
+import CustomModule from '../../utils/CustomModule';
+import { EngineApisType, EngineBaseProps } from '@lingxiteam/types';
+import { Button, Popover } from 'antd-mobile-5';
 // import Icon from '../../Icon';
 // import IconEd from '../../Icon/IconED';
 import './index.less';
@@ -58,7 +58,7 @@ interface extendItem {
 
 const prefixCls = 'appDynamicTable-cell';
 
-const TypeCells: React.FC<CellProps> = props => {
+const TypeCells: React.FC<CellProps> = (props) => {
   const { params, item, isEditor, appId, pageId, tableRowKey, sandBoxLoadModule, $$componentItem, extendActions, getEngineApis, renderIcon } = props;
   const engineApis = getEngineApis?.();
   const { colorFormatInfo, customRendering, extendInfo } = item;
@@ -67,7 +67,7 @@ const TypeCells: React.FC<CellProps> = props => {
     const { code, operator, value } = data;
 
     const toStringVal = (val: any) => `${val}`;
-    const toNumberVal = (val: any) => (!isNaN(Number(val)) ? Number(val) : toStringVal(val));
+    const toNumberVal = (val: any) => !isNaN(Number(val)) ? Number(val) : toStringVal(val);
 
     switch (operator) {
       case OPERATOR_EQUAL:
@@ -108,7 +108,10 @@ const TypeCells: React.FC<CellProps> = props => {
     }
   };
 
-  const collectCondition: (data: string | any[], record: any) => any = (data: string | any[], record: any) => {
+  const collectCondition: (data: string | any[], record: any) => any = (
+    data: string | any[],
+    record: any,
+  ) => {
     if (!data || !data?.length) {
       return true;
     }
@@ -139,7 +142,7 @@ const TypeCells: React.FC<CellProps> = props => {
       rowId,
     });
 
-  const renderActionButtonView = (list: extendItem[], actionKeys: string[], data: { rowId: string; row: any; rowIndex: number }) => {
+  const renderActionButtonView = (list: extendItem[], actionKeys: string[], data: {rowId: string, row: any, rowIndex: number}) => {
     return list.map((item: extendItem) => {
       let btnOnClick: any = () => {};
 
@@ -149,21 +152,23 @@ const TypeCells: React.FC<CellProps> = props => {
       return (
         <Button color="primary" fill="none" disabled={(item.disabled || false) as boolean} onClick={btnOnClick}>
           <div className="buttonInsideView">
-            {item.iconPos === 'left' &&
-              item?.icon &&
+            {item.iconPos === 'left' && item?.icon && (
               renderIcon({
                 icon: item.icon,
                 className: 'buttonLeftIcon',
                 name: item.title,
-              })}
-            <div>{!item?.isIcon && item.title}</div>
-            {item.iconPos === 'right' &&
-              item?.icon &&
+              })
+            )
+            }
+            <div>{ !item?.isIcon && item.title }</div>
+            {item.iconPos === 'right' && item?.icon && (
               renderIcon({
                 icon: item.icon,
                 className: 'buttonRightIcon',
                 name: item.title,
-              })}
+              })
+            )
+            }
           </div>
         </Button>
       );
@@ -177,34 +182,32 @@ const TypeCells: React.FC<CellProps> = props => {
     const rowIndex = params?.rowIndex;
     const actionKeys = Object.keys(extendActions || {});
     // 最后用于显示的按钮
-    let finalButtons = extend
-      .map((item: extendItem) => {
-        const data: any = { ...item };
-        data.disabled = false;
-        data.visible = true;
-        if (!isEditor) {
-          if (typeof item.disabled === 'string') {
-            if (item.disabled === 'false') {
-              data.disabled = false;
-            } else {
-              data.disabled = getRuningResultFunc(row, rowIndex, rowId, item.disabled);
-            }
+    let finalButtons = extend.map((item: extendItem) => {
+      const data: any = { ...item };
+      data.disabled = false;
+      data.visible = true;
+      if (!isEditor) {
+        if (typeof item.disabled === 'string') {
+          if (item.disabled === 'false') {
+            data.disabled = false;
+          } else {
+            data.disabled = getRuningResultFunc(row, rowIndex, rowId, item.disabled);
           }
-
-          if (typeof item.rule === 'string') {
-            if (item.rule === 'true') {
-              data.visible = false;
-            } else {
-              // 当值为true时隐藏，false时显示
-              data.visible = !getRuningResultFunc(row, rowIndex, rowId, item.rule);
-            }
+        }
+        
+        if (typeof item.rule === 'string') {
+          if (item.rule === 'true') {
+            data.visible = false;
+          } else {
+            // 当值为true时隐藏，false时显示
+            data.visible = !getRuningResultFunc(row, rowIndex, rowId, item.rule);
           }
         }
-        return data;
-      })
-      .filter((item: any) => {
-        return item.checked && item.visible;
-      });
+      }
+      return data;
+    }).filter((item: any) => {
+      return item.checked && item.visible;
+    });
     // 更多部分按钮
     let popoverButtons: extendItem[] = [];
     if (extendNum > 0 && finalButtons.length > extendNum) {
@@ -213,27 +216,20 @@ const TypeCells: React.FC<CellProps> = props => {
     }
     return (
       <div className={prefixCls}>
-        {renderActionButtonView(finalButtons, actionKeys, {
-          row,
-          rowId,
-          rowIndex,
-        })}
-        {popoverButtons.length > 0 && (
+        {renderActionButtonView(finalButtons, actionKeys, { row, rowId, rowIndex })}
+        {
+          popoverButtons.length > 0 &&
+          (
           <Popover
             trigger="click"
             placement="bottom"
             className={`${prefixCls}-popover`}
-            content={renderActionButtonView(popoverButtons, actionKeys, {
-              row,
-              rowId,
-              rowIndex,
-            })}
+            content={renderActionButtonView(popoverButtons, actionKeys, { row, rowId, rowIndex })}
           >
-            <Button color="primary" fill="none">
-              更多
-            </Button>
+            <Button color="primary" fill="none">更多</Button>
           </Popover>
-        )}
+          )
+        }
       </div>
     );
   };
@@ -355,10 +351,7 @@ const TypeCells: React.FC<CellProps> = props => {
           >
             <span
               className="span-cell"
-              style={{
-                background: cellBackgroundColor,
-                borderColor: cellBorderColor,
-              }}
+              style={{ background: cellBackgroundColor, borderColor: cellBorderColor }}
             >
               {cellContent}
             </span>
@@ -436,10 +429,7 @@ const TypeCells: React.FC<CellProps> = props => {
               <div className="progressBar" style={{ backgroundColor: cellFontColor }}>
                 <div
                   className="current"
-                  style={{
-                    backgroundColor: cellBackgroundColor,
-                    width: progressWidth,
-                  }}
+                  style={{ backgroundColor: cellBackgroundColor, width: progressWidth }}
                 />
               </div>
             </div>

package/lib/h5public/src/components/factory/src/DynamicTable/hooks/useCreateColumn.tsx

@@ -1,9 +1,15 @@
-import { EngineApisType, EngineBaseProps } from '@lingxiteam/types';
-import { CellClassParams, ICellRendererParams, RowSpanParams, ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import HeaderCell from '../components/HeaderCell';
+import {
+  ICellRendererParams,
+  RowSpanParams,
+  CellClassParams,
+  ValueFormatterParams,
+  ValueGetterParams,
+} from 'ag-grid-community';
 import TypeCells from '../components/TypeCells';
+import HeaderCell from '../components/HeaderCell';
+import { EngineApisType, EngineBaseProps } from '@lingxiteam/types';
 
 export interface CreateColumnProps {
   columns: any[];
@@ -89,7 +95,10 @@ const useCreateColumn = (props: CreateColumnProps) => {
     return `table-row-merge-${align}`;
   };
 
-  const cellValueFormatter = (params: ValueFormatterParams, options: [{ value?: string; label?: string }]) => {
+  const cellValueFormatter = (
+    params: ValueFormatterParams,
+    options: [{ value?: string; label?: string }],
+  ) => {
     const oldValue = params?.value;
     const translateValue = options.find((item: any) => item?.value === oldValue);
     return translateValue ? translateValue?.label : oldValue;
@@ -109,19 +118,22 @@ const useCreateColumn = (props: CreateColumnProps) => {
     }
   }, [staticAttrNbrs]);
 
-  const cellValueFormatterWithAttrMap = (params: ValueFormatterParams, attr: { childKeys?: any[]; attrNbr: string }) => {
+  const cellValueFormatterWithAttrMap = (
+    params: ValueFormatterParams,
+    attr: { childKeys?: any[]; attrNbr: string },
+  ) => {
     const oldValue = params?.value;
     let translateList = attrMapRef?.current?.[attr.attrNbr];
     let translateValue;
     if (translateList?.length) {
       // 设定了范围，就拿范围里的数据
       if (attr?.childKeys?.length) {
-        translateList = translateList.filter?.(
-          (item: any) => attr?.childKeys?.includes(item?.attrValue) || attr?.childKeys?.includes(item?.attrValueCode)
+        translateList = translateList.filter?.((item: any) =>
+          attr?.childKeys?.includes(item?.attrValue) ||
+          attr?.childKeys?.includes(item?.attrValueCode),
         );
       }
-      if (Array.isArray(oldValue)) {
-        // 翻译字段里面的值如果是数组的话，分开进行翻译
+      if (Array.isArray(oldValue)) { // 翻译字段里面的值如果是数组的话，分开进行翻译
         const newValue: any[] = [];
         oldValue.forEach(itemValue => {
           const item = translateList?.find?.((c: any) => String(c?.attrValue) === String(itemValue));
@@ -180,52 +192,49 @@ const useCreateColumn = (props: CreateColumnProps) => {
     return map;
   }, []);
 
-  const getRowSpanNumber = useCallback(
-    (columnList: any) => {
-      const tableRowSpan = new WeakMap();
-      const rowNumber: any[] = [];
-      // 记录负责合并行的主行
-      const recursiveSet = (arr: any[]) => {
-        const parentSpanRowsMap: any = {};
-        (arr || []).forEach((d, i) => {
-          const newD = d;
-          const __rowSpan: any = {};
-          if (newD?.children?.length > 0) {
-            // newD.children = recursiveSet(newD.children);
-            recursiveSet(newD.children);
-          }
-          Object.keys(getRowSpanColMap(columnList)).forEach(rowIndex => {
-            __rowSpan[rowIndex] = 1;
-            if (!parentSpanRowsMap[rowIndex]) {
-              parentSpanRowsMap[rowIndex] = {
-                preIndex: i,
-                row: newD,
-              };
+  const getRowSpanNumber = useCallback((columnList: any) => {
+    const tableRowSpan = new WeakMap();
+    const rowNumber: any[] = [];
+    // 记录负责合并行的主行
+    const recursiveSet = (arr: any[]) => {
+      const parentSpanRowsMap: any = {};
+      (arr || []).forEach((d, i) => {
+        const newD = d;
+        const __rowSpan: any = {};
+        if (newD?.children?.length > 0) {
+          // newD.children = recursiveSet(newD.children);
+          recursiveSet(newD.children);
+        }
+        Object.keys(getRowSpanColMap(columnList)).forEach((rowIndex) => {
+          __rowSpan[rowIndex] = 1;
+          if (!parentSpanRowsMap[rowIndex]) {
+            parentSpanRowsMap[rowIndex] = {
+              preIndex: i,
+              row: newD,
+            };
+          } else {
+            const { preIndex, row } = parentSpanRowsMap[rowIndex];
+            // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
+            if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
+              const curRowSpan = tableRowSpan.get(row);
+              curRowSpan[rowIndex] += 1;
+              // 合并当前行
+              __rowSpan[rowIndex] = 0;
             } else {
-              const { preIndex, row } = parentSpanRowsMap[rowIndex];
-              // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
-              if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
-                const curRowSpan = tableRowSpan.get(row);
-                curRowSpan[rowIndex] += 1;
-                // 合并当前行
-                __rowSpan[rowIndex] = 0;
-              } else {
-                parentSpanRowsMap[rowIndex].row = newD;
-              }
-              parentSpanRowsMap[rowIndex].preIndex = i;
+              parentSpanRowsMap[rowIndex].row = newD;
             }
-          });
-          tableRowSpan.set(newD, __rowSpan);
-          rowNumber.push(__rowSpan);
+            parentSpanRowsMap[rowIndex].preIndex = i;
+          }
         });
-      };
-      if (Array.isArray(data)) {
-        recursiveSet(cloneDeep(data));
-      }
-      return rowNumber;
-    },
-    [data, getRowSpanColMap]
-  );
+        tableRowSpan.set(newD, __rowSpan);
+        rowNumber.push(__rowSpan);
+      });
+    };
+    if (Array.isArray(data)) {
+      recursiveSet(cloneDeep(data));
+    }
+    return rowNumber;
+  }, [data, getRowSpanColMap]);
 
   const myColumn = useMemo(() => {
     // console.log('column:', columns, twoDimension, bordered);
@@ -274,8 +283,7 @@ const useCreateColumn = (props: CreateColumnProps) => {
         if (typeof item?.width !== 'undefined') {
           c.suppressSizeToFit = true;
         }
-        if (item?.type === 'orderCol') {
-          // 自增序列
+        if (item?.type === 'orderCol') { // 自增序列
           c.valueGetter = valueGetter;
         }
 
@@ -306,11 +314,13 @@ const useCreateColumn = (props: CreateColumnProps) => {
         // 字段翻译 item?.attr---静态编码  item?.options ---自定义
         // c.valueFormatter 用此方法进行字段翻译
         if (Array.isArray(item?.options)) {
-          c.valueFormatter = (params: ValueFormatterParams) => cellValueFormatter(params, item.options);
+          c.valueFormatter = (params: ValueFormatterParams) =>
+            cellValueFormatter(params, item.options);
         }
         if (item?.attr) {
           translateAttrs.push(item?.attr?.attrNbr);
-          c.valueFormatter = (params: ValueFormatterParams) => cellValueFormatterWithAttrMap(params, item.attr);
+          c.valueFormatter = (params: ValueFormatterParams) =>
+            cellValueFormatterWithAttrMap(params, item.attr);
         }
 
         if (index === 0) {
@@ -362,23 +372,9 @@ const useCreateColumn = (props: CreateColumnProps) => {
       return finalColumn;
     }
     return [];
-  }, [
-    columns,
-    twoDimension,
-    bordered,
-    headerBgColor,
-    headerColor,
-    firstColumnColor,
-    firstColumnBgColor,
-    fixedRight,
-    fixedLeft,
-    hiddenAction,
-    fixedAction,
-    showExtend,
-    extend,
-    extendNum,
-    getRowSpanNumber,
-  ]);
+  }, [columns, twoDimension, bordered,
+    headerBgColor, headerColor, firstColumnColor, firstColumnBgColor,
+    fixedRight, fixedLeft, hiddenAction, fixedAction, showExtend, extend, extendNum, getRowSpanNumber]);
 
   return {
     myColumn,