es-grid-template 1.4.1 → 1.4.2

package/es/grid-component/InternalTable.js

@@ -1,18 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment } from 'react';
-import { Resizable } from "react-resizable";
+import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
+// import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray,
-// filterDataByColumns,
-// filterDataByColumns2,
-// filterDataByColumns3,
-findItemByKey,
-// convertFlatColumn,
-removeColumns,
-// removeFieldRecursive,
-// addRowIdArray,
-updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
+import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -20,25 +11,74 @@ import GridEdit from "./table/GridEdit";
 import Grid from "./table/Grid";
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
-import useColumns from "./hooks/useColumns";
+// import useColumns from "./hooks/useColumns";
+
 import "./styles.scss";
-import { flatColumns2 } from "./hooks/columns";
+import { flatColumns2, renderContent, renderFilter } from "./hooks/columns";
 import Group from "./table/Group";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { Tooltip } from "react-tooltip";
+import classNames from "classnames";
+import HeaderContent from "./hooks/content/HeaderContent";
+import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
+import { Select } from "rc-master-ui";
+import { Button, Space } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
+// import {CSS} from "@dnd-kit/utilities";
+import { Resizable } from "react-resizable";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
-
-// const ASCEND = 'ascend';
-// const DESCEND = 'descend';
-
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+export const SELECTION_COLUMN = {};
+const dragActiveStyle = (dragState, id) => {
+  const {
+    active,
+    over,
+    direction
+  } = dragState;
+  // drag active style
+  let style = {};
+  if (active && active === id) {
+    style = {
+      backgroundColor: '#c0c0c0',
+      opacity: 0.3
+    };
+  }
+  // dragover dashed style
+  else if (over && id === over && active !== over) {
+    style = direction === 'right' ? {
+      borderRight: '1px dashed gray'
+    } : {
+      borderLeft: '1px dashed gray'
+    };
+  }
+  return style;
+};
+const DragIndexContext = /*#__PURE__*/createContext({
+  active: -1,
+  over: -1
+});
 const ResizableTitle = props => {
   const {
     onResize,
     width,
     ...restProps
   } = props;
+  const dragState = useContext(DragIndexContext);
+
+  // const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });
+
+  const style = {
+    ...props.style,
+    // cursor: 'move',
+    // ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),
+    ...dragActiveStyle(dragState, props.id)
+  };
   if (!width) {
     return /*#__PURE__*/React.createElement("th", restProps);
   }
@@ -58,9 +98,47 @@ const ResizableTitle = props => {
       draggableOpts: {
         enableUserSelectHack: false
       }
-    }, /*#__PURE__*/React.createElement("th", restProps))
+    }, /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
+      style: style
+    })))
   );
 };
+const TableBodyCell = props => {
+  const dragState = useContext(DragIndexContext);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    style: {
+      ...props.style,
+      ...dragActiveStyle(dragState, props.id)
+    }
+  }));
+};
+const SortableHeaderCell = ({
+  children,
+  columnKey
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging
+  } = useSortable({
+    id: columnKey
+  });
+  const style = {
+    // ...props.style,
+    cursor: 'move',
+    ...(isDragging ? {
+      position: 'relative',
+      zIndex: 9999,
+      userSelect: 'none'
+    } : {})
+    // ...dragActiveStyle(dragState, props.id),
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners), children);
+};
 const InternalTable = props => {
   const {
     t,
@@ -89,6 +167,7 @@ const InternalTable = props => {
     groupColumns,
     commandClick,
     commandSettings,
+    pagination,
     ...rest
   } = props;
   const rowKey = React.useMemo(() => {
@@ -106,32 +185,19 @@ const InternalTable = props => {
   // const [isFilter, setIsFilter] = React.useState<boolean>(false);
   // const [cellTooltip, seCellTooltip] = React.useState<any>(undefined);
 
-  const mergerdData = React.useMemo(() => {
-    // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
-    // return filterDataByColumns3(addRowIdArray(dataSource), filterStates)
+  const [dragIndex, setDragIndex] = useState({
+    active: -1,
+    over: -1
+  });
+  const [tooltipContent, setTooltipContent] = useState('');
+  const mergedData = React.useMemo(() => {
     return addRowIdArray(dataSource);
-    // return dataSource
   }, [dataSource]);
   const [columns, setColumns] = React.useState([]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
-  // }, [!!propsColumns.length && !!propsColumns])
-
-  // const [data, setData] = useState<RecordType[]>([]);
-
-  // const [isManualUpdate, setIsManualUpdate] = useState(false);
-
-  // useEffect(() => {
-  //   if (!isManualUpdate) {
-  //     const mergedData = addRowIdArray(dataSource)
-  //
-  //     setData(mergedData || []);
-  //   }
-  //   setIsManualUpdate(false);
-  // }, [dataSource, isManualUpdate])
-
   const handleResize = column => (e, {
     size
   }) => {
@@ -152,31 +218,287 @@ const InternalTable = props => {
     return record => record?.[rowKey];
   }, [rowKey]);
 
-  // const onMouseHover = (record: any, col: ColumnTable) => {
-  //
-  // }
+  // const [transformSelectionColumns] = useColumns<RecordType>(
+  //   {
+  //     locale,
+  //     t,
+  //     rowKey,
+  //     // dataSource: mergerdData,
+  //     dataSource,
+  //     buddhistLocale,
+  //     dataSourceFilter: propDataSourceFilter,
+  //     format,
+  //     sortMultiple,
+  //     groupAble,
+  //     groupSetting,
+  //     groupColumns,
+  //     handleResize,
+  //     // onMouseHover
+  //   },
+  // );
 
-  const [transformSelectionColumns] = useColumns({
-    locale,
-    t,
-    rowKey,
-    // dataSource: mergerdData,
-    dataSource,
-    buddhistLocale,
-    dataSourceFilter: propDataSourceFilter,
-    format,
-    sortMultiple,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    handleResize
-    // onMouseHover
-  });
-  const mergedColumns = React.useMemo(() => {
-    return transformSelectionColumns(columns);
-  }, [columns, transformSelectionColumns]);
+  // const mergedColumns: any = React.useMemo(() => {
+  //   return transformSelectionColumns(columns)
+  // }, [columns, transformSelectionColumns])
+
+  const firstNonGroupColumn = flatColumns2(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+  const nonGroupColumns = flatColumns2(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+  const getColumnSearchProps = useCallback(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      const type = getTypeFilter(column);
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, propDataSourceFilter ?? [], buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          // confirm({closeDropdown: false})
+          confirm();
+          // handleSearch(selectedKeys as string[], confirm)
+        },
+        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
+        }
+      }, t ? t("Clear") : 'Clear')));
+    },
+    filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
+      fontSize: 12
+      // onClick={() => {
+      //   onFilterClick?.(column, onFilterCallback)
+      // }}
+      ,
+      style: {
+        color: filtered ? '#E3165B' : '#283046'
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [buddhistLocale, propDataSourceFilter, locale, t]);
+  const convertColumns = React.useMemo(() => {
+    return flatColumns2(columns).map((column, colIndex) => {
+      if (column === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
+      }
+      const transformedColumn = {
+        ...column,
+        dataIndex: column.field ?? column.dataIndex,
+        // key: column.field ?? column.dataIndex ?? column.key,
+        // title: () => (<HeaderContent column={{...column} as any} t={t}/>),
+        title: /*#__PURE__*/React.createElement(SortableHeaderCell, {
+          columnKey: column.field
+        }, /*#__PURE__*/React.createElement(HeaderContent, {
+          column: {
+            ...column
+          },
+          t: t
+        })),
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        fixed: column.fixedType ?? column.fixed,
+        isSummary: column.isSummary ?? column.haveSum,
+        hidden: column.hidden ?? column.visible === false
+      };
+      if (transformedColumn.field === '#') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number'
+          }),
+          render: (val, record) => {
+            if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
+              return findItemPath(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+            }
+            return findItemPath(mergedData, record, rowKey);
+          }
+        };
+      }
+      if (transformedColumn.field === 'command') {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: 'cell-number',
+            style: {
+              padding: '2px 8px'
+            }
+          })
+        };
+      }
+      return {
+        ...transformedColumn,
+        ...(transformedColumn.allowFiltering === false ? {} : {
+          ...getColumnSearchProps(column)
+        }),
+        sorter: column.sorter === false ? undefined : {
+          compare: a => a,
+          multiple: sortMultiple ? colIndex : undefined
+        },
+        sortIcon: args => {
+          const {
+            sortOrder
+          } = args;
+          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
+            fontSize: 15,
+            style: {
+              display: 'flex',
+              opacity: 0,
+              marginLeft: 4
+            },
+            className: classNames(`ui-rc-table-column-sorter-up`, {
+              active: true
+            })
+          }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
+            className: classNames(`ui-rc-table-column-sorter-up`, {
+              active: sortOrder === ASCEND
+            }),
+            style: {
+              display: 'flex',
+              marginLeft: 4
+            }
+          }, /*#__PURE__*/React.createElement(ArrowUp, {
+            fontSize: 15,
+            color: '#000'
+          })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
+            className: classNames(`ui-rc-table-column-sorter-up`, {
+              active: sortOrder === DESCEND
+            }),
+            style: {
+              display: 'flex',
+              marginLeft: 4
+            }
+          }, /*#__PURE__*/React.createElement(ArrowDown, {
+            fontSize: 15,
+            color: '#000'
+          })));
+        },
+        onHeaderCell: () => ({
+          id: `${column.field}`,
+          width: column.width,
+          onResize: handleResize?.(column),
+          className: column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''
+        }),
+        onCell: (data, index) => {
+          return {
+            id: `${column.field}`,
+            colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
+            // 'z-index': data?.children && column.field === firstNonGroupColumn?.field ? 11 : undefined,
+            ...transformedColumn?.onCell?.(data, index),
+            className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
+              'cell-group': groupColumns && data.children,
+              'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
+            }),
+            'data-tooltip-id': "tooltip-cell-content"
+          };
+        },
+        render: (value, record, rowIndex) => {
+          const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+          const cellFormat = getFormat(colFormat, format);
+          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+            if (record.children) {
+              return renderContent(column, value, record, rowIndex, cellFormat);
+            }
+            if (groupColumns?.includes(column.field)) {
+              return '';
+            }
+            return renderContent(column, value, record, rowIndex, cellFormat);
+          }
+          if (column.field === firstNonGroupColumn?.field && record.children) {
+            const currentGroupColumn = flatColumns2(columns).find(it => it.field === record.field);
+            if (currentGroupColumn?.template) {
+              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+            }
+            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+          }
+          return renderContent(column, value, record, rowIndex, cellFormat);
+        },
+        hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
+      };
+    });
+  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  const transformColumns = React.useCallback(cols => {
+    return cols.map(column => {
+      const find = convertColumns.find(it => it.field === column.field);
+      if (column === SELECTION_COLUMN) {
+        return SELECTION_COLUMN;
+      }
+      if (find) {
+        return {
+          ...find
+        };
+      }
+      if (!find) {
+        return {
+          ...column
+        };
+      }
 
-  // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
+        return {
+          ...column,
+          children: transformColumns(column.children)
+        };
+      }
+    });
+  }, [convertColumns]);
+  const mergedColumns = React.useMemo(() => {
+    return transformColumns(columns);
+  }, [columns, transformColumns]);
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 1
+    }
+  }));
   const triggerChangeColumns = (newColumns, type) => {
     setColumns(newColumns);
     if (tableRef.current && type === 'columnChoose') {
@@ -191,6 +513,34 @@ const InternalTable = props => {
       flattenColumns: []
     });
   };
+  const onDragEnd = ({
+    active,
+    over
+  }) => {
+    if (active.id !== over?.id) {
+      const targetColumn = flatColumns2(columns).find(it => it.field === over?.id);
+      const activeIndex = flatColumns2(columns).findIndex(i => i.field === active?.id);
+      const overIndex = flatColumns2(columns).findIndex(i => i.field === over?.id);
+      const rs = arrayMove(columns, activeIndex, overIndex);
+      triggerChangeColumns(rs, targetColumn && targetColumn.fixed === 'left' ? 'columnChoose' : '');
+    }
+    setDragIndex({
+      active: -1,
+      over: -1
+    });
+  };
+  const onDragOver = ({
+    active,
+    over
+  }) => {
+    const activeIndex = columns.findIndex(i => i.field === active.id);
+    const overIndex = columns.findIndex(i => i.field === over?.id);
+    setDragIndex({
+      active: active.id,
+      over: over?.id,
+      direction: overIndex > activeIndex ? 'right' : 'left'
+    });
+  };
   const triggerGroupColumns = groupedColumns => {
     setColumns(updateColumnsByGroup(mergedColumns, groupedColumns));
     if (groupSetting) {
@@ -232,20 +582,6 @@ const InternalTable = props => {
     onDataChange?.(newData);
     // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
   };
-
-  // const triggerFilter = (queries: any) => {
-  //   console.log('queries', queries)
-  //   // console.log('data', dataSource)
-  //   setFilterState(queries)
-  //
-  //   if (queries && queries.length > 0) {
-  //     setIsFilter(true)
-  //   } else {
-  //     setIsFilter(false)
-  //   }
-  //
-  // }
-
   const triggerCommandClick = args => {
     const {
       id,
@@ -253,7 +589,7 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...dataSource];
+    const tmpData = [...mergedData];
     if (id === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -279,7 +615,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+                const parent = findItemByKey(mergedData, rowKey, rowData.parentId);
                 const childData = parent?.children ? [...parent.children] : [];
                 const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
                 childData.splice(Number(findIndex), 1);
@@ -311,7 +647,7 @@ const InternalTable = props => {
                   rowId: rowData.rowId,
                   rowData,
                   index,
-                  rows: [...dataSource]
+                  rows: [...mergedData]
                 });
               }
             }
@@ -325,7 +661,7 @@ const InternalTable = props => {
 
           let newData2 = [];
           if (rowData?.parentId) {
-            const parent = findItemByKey(dataSource, rowKey, rowData.parentId);
+            const parent = findItemByKey(mergedData, rowKey, rowData.parentId);
             const childData = parent?.children ? [...parent.children] : [];
             const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
             childData.splice(Number(findIndex), 1);
@@ -355,7 +691,7 @@ const InternalTable = props => {
               rowId,
               rowData,
               index,
-              rows: [...dataSource]
+              rows: [...mergedData]
             });
           }
         }
@@ -368,7 +704,7 @@ const InternalTable = props => {
   };
   const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
     const handlePasteCallback = callbackData => {
-      const newDataUpdate = updateData(dataSource, callbackData, rowKey);
+      const newDataUpdate = updateData(mergedData, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
 
       // onCellPaste?.dataChange?.(newDataUpdate)
@@ -379,7 +715,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
-          data: dataSource,
+          data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
@@ -387,7 +723,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
-          data: dataSource,
+          data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
@@ -399,22 +735,23 @@ const InternalTable = props => {
     }
   };
   const TableComponent = groupAble ? Group : editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    modifiers: [restrictToHorizontalAxis],
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    collisionDetection: closestCenter
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: columns.map(i => i.field),
+    strategy: horizontalListSortingStrategy
+  }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
+    value: dragIndex
+  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
     t: t,
     locale: locale,
     tableRef: tableRef,
-    dataSource: mergerdData
-    // dataSource={dataSource}
-    // components={components}
-    ,
-    components: {
-      header: {
-        cell: allowResizing ? ResizableTitle : undefined
-      }
-    },
-    format: format
-    // columns={columns}
-    ,
+    dataSource: mergedData,
+    format: format,
     columns: mergedColumns,
     showSorterTooltip: {
       target: 'sorter-icon'
@@ -429,25 +766,44 @@ const InternalTable = props => {
     groupSetting: groupSetting,
     groupAble: groupAble,
     groupColumns: groupColumns,
-    commandClick: triggerCommandClick
-    // triggerFilter={triggerFilter}
-    // isFilter={isFilter}
-    // setIsFilter={setIsFilter}
-    // onScroll={onScroll}
-  })), /*#__PURE__*/React.createElement(Tooltip, {
+    commandClick: triggerCommandClick,
+    pagination: pagination,
+    components: {
+      header: {
+        cell: ResizableTitle
+      },
+      body: {
+        cell: TableBodyCell
+      }
+    },
+    setTooltipContent: setTooltipContent
+  })))), /*#__PURE__*/React.createElement(DragOverlay, {
+    style: {
+      width: 100
+    }
+  }, /*#__PURE__*/React.createElement("th", {
+    style: {
+      backgroundColor: '#c4c4c4',
+      padding: 6,
+      borderRadius: 6,
+      fontWeight: 500
+    }
+  }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Tooltip, {
+    id: "tooltip-form-error",
+    style: {
+      zIndex: 1999
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
     id: "tooltip-cell-content",
     style: {
       zIndex: 1999
+    },
+    render: () => {
+      if (tooltipContent) {
+        return /*#__PURE__*/React.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
+      }
+      return undefined;
     }
-    // content={'sssss'}
-    // content={cellTooltip}
-    // render={() => {
-    //   return (
-    //     <span>
-    //       aaaa
-    //     </span>
-    //   )
-    // }}
   }));
 };
 export default InternalTable;