es-grid-template 1.7.23 → 1.7.25

package/lib/table-component/ColumnsChoose.js

@@ -0,0 +1,216 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsChoose = void 0;
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+var _utils = require("./hook/utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const BoxAction = _styledComponents.default.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-jfujqh-0"
+})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    originColumns,
+    columnHidden,
+    triggerChangeColumns,
+    // triggerChangeKeys,
+    t,
+    columnsGroup
+  } = props;
+  const treeColumns = _react.default.useMemo(() => {
+    return (0, _utils.convertColumnsToTreeData)(propsColumns, columnsGroup);
+  }, [propsColumns, columnsGroup]);
+  const defaultSelectedKeys = _react.default.useMemo(() => {
+    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const aa = Object.keys(columnHidden);
+    return (0, _utils.getVisibleColumnKeys1)(defaultColumns).filter(it => !aa.includes(it));
+  }, [columnHidden, columnsGroup, originColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
+    value: undefined
+  });
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
+
+  // const treeData = useMemo(() => {
+  //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
+  //     data.map((item) => {
+  //       const strTitle = item.title as string;
+  //       const index = strTitle.indexOf(searchValue);
+  //       const beforeStr = strTitle.substring(0, index);
+  //       const afterStr = strTitle.slice(index + searchValue.length);
+  //       const title =
+  //         index > -1 ? (
+  //           <span key={item.key}>
+  //             {beforeStr}
+  //             <span className="site-tree-search-value">{searchValue}</span>
+  //             {afterStr}
+  //           </span>
+  //         ) : (
+  //           <span key={item.key}>{strTitle}</span>
+  //         );
+  //       if (item.children) {
+  //         return { title, key: item.key, children: loop(item.children) };
+  //       }
+  //
+  //       return {
+  //         title,
+  //         key: item.key,
+  //       };
+  //     });
+  //
+  //   // return loop(defaultData);
+  //   return loop(columns as any);
+  // }, [searchValue, columns]);
+
+  const hide = () => {
+    setClicked(false);
+  };
+  const handleClickChange = open => {
+    setClicked(open);
+  };
+  const onExpand = () => {
+    // setExpandedKeys(newExpandedKeys)
+    setAutoExpandParent(false);
+  };
+
+  // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
+  //   let parentKey: React.Key
+  //   for (let i = 0; i < tree.length; i++) {
+  //     const node = tree[i]
+  //     if (node.children) {
+  //       if (node.children.some((item) => item.key === key)) {
+  //         parentKey = node.key
+  //       } else if (getParentKey(key, node.children)) {
+  //         parentKey = getParentKey(key, node.children)
+  //       }
+  //     }
+  //   }
+  //   return parentKey!
+  // }
+
+  // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChange = () => {
+    // const { value } = e.target
+    // const newExpandedKeys = dataList
+    //   .map((item) => {
+    //     if (item.title.indexOf(value) > -1) {
+    //       return getParentKey(item.key, defaultData)
+    //     }
+    //     return null
+    //   })
+    //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
+    // setExpandedKeys(newExpandedKeys)
+
+    // setSearchValue(value)
+    setAutoExpandParent(true);
+  };
+  const onCheck = keys => {
+    // setSelectedKeys(keys)
+    // setIsManualUpdate(true)
+    setMergedSelectedKeys(keys);
+  };
+  const handleAccept = () => {
+    const rs1 = (0, _utils.updateColumns1)(originColumns, mergedSelectedKeys ?? []);
+    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    hide();
+  };
+  const handleCancel = () => {
+    setMergedSelectedKeys(defaultSelectedKeys);
+    hide();
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: 250,
+        maxWidth: 320
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: t ? t("Search") : 'Search',
+      prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
+      onChange: onChange
+    }), /*#__PURE__*/_react.default.createElement(_tree.default, {
+      onExpand: onExpand
+      // expandedKeys={expandedKeys}
+      ,
+      autoExpandParent: autoExpandParent
+      // treeData={treeData}
+      // treeData={columns.filter((it) => !columnsGroup?.includes(it.field as string))}
+      ,
+      treeData: treeColumns,
+      defaultExpandAll: true,
+      checkable: true
+      // onSelect={(keys, info) => {
+      //   const key = info.node.key
+      //
+      //   const find = findItemByKey(columns, 'key', key)
+      //
+      //   // const tmpColumn
+      //
+      //   // if (selectedKeys.includes(key as string)) {
+      //   //   const rssss  = findKeyPath(columns, key as string)
+      //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
+      //   //
+      //   //   setSelectedKeys(rs)
+      //   // } else {
+      //
+      //     // const rs  = [...selectedKeys, keys[0]]
+      //
+      //     // setSelectedKeys(keys)
+      //   // }
+      // }}
+      ,
+      onCheck: keys => onCheck(keys),
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+      checkedKeys: mergedSelectedKeys || defaultSelectedKeys
+
+      // defaultCheckedKeys={selectedKeys}
+      ,
+      defaultCheckedKeys: defaultSelectedKeys,
+      selectedKeys: []
+
+      // height={window.innerHeight - 200}
+      ,
+      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
+      // style={{height: 300}}
+    }), /*#__PURE__*/_react.default.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/_react.default.createElement(_antd.Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleAccept
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, t ? t('OK') : 'OK'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleCancel
+    }, t ? t('Cancel') : 'Cancel'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false,
+    zIndex: 1065
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+};
+exports.ColumnsChoose = ColumnsChoose;

package/lib/table-component/ContextMenu.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { ContextInfo } from "./type";
+import type { ContextMenuItem } from "./type";
+export declare const findItemByKey: (array: any[], key: string, value: any) => any;
+type Props<RecordType> = {
+    rowData: RecordType | null;
+    contextMenuItems: ContextMenuItem[];
+    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    open: boolean;
+    menuRef?: any;
+    setOpen: (open: boolean) => void;
+    pos: {
+        x: number | undefined;
+        y: number | undefined;
+        viewportWidth: number;
+        viewportHeight: number;
+    };
+};
+declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default ContextMenu;

package/lib/table-component/ContextMenu.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findItemByKey = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type { MenuProps } from "antd";
+
+const findItemByKey = (array, key, value) => {
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (item[key] === value) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const foundInChildren = findItemByKey(item.children, key, value);
+      if (foundInChildren) {
+        return foundInChildren;
+      }
+    }
+  }
+  return null;
+};
+exports.findItemByKey = findItemByKey;
+const ContextMenu = props => {
+  const {
+    menuRef,
+    open,
+    setOpen,
+    pos,
+    contextMenuClick,
+    contextMenuItems,
+    rowData
+  } = props;
+  return /*#__PURE__*/React.createElement(_antd.Dropdown, {
+    placement: 'topRight',
+    open: open,
+    overlayClassName: 'be-popup-container',
+    overlayStyle: {
+      left: `${pos.x}px`,
+      top: `${pos.y}px`
+    },
+    dropdownRender: () => {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: menuRef
+      }, /*#__PURE__*/React.createElement(_antd.Menu, {
+        items: contextMenuItems,
+        style: {
+          minWidth: 200,
+          maxHeight: pos.viewportHeight - 20,
+          width: 'fit-content'
+        },
+        rootClassName: 'popup-context-menu'
+        // rootClassName={'be-popup-container'}
+        ,
+
+        onClick: e => {
+          setOpen(false);
+          contextMenuClick?.({
+            rowInfo: {
+              rowData
+            },
+            event: e.domEvent,
+            item: {
+              ...findItemByKey(contextMenuItems, 'key', e.key),
+              id: e.key
+            }
+          });
+
+          // if (!open) {
+          //   document.addEventListener(`click`, function onClickOutside() {
+          //     setOpen(false);
+          //     document.removeEventListener(`click`, onClickOutside);
+          //   });
+          // }
+        }
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null));
+};
+var _default = exports.default = ContextMenu;

package/lib/table-component/InternalTable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import 'react-resizable/css/styles.css';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import './style.scss';
+import type { TableProps } from './type';
+export declare const SELECTION_COLUMN: {};
+declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
+export default InternalTable;

package/lib/table-component/InternalTable.js

@@ -0,0 +1,313 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SELECTION_COLUMN = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _react = _interopRequireWildcard(require("react"));
+require("react-resizable/css/styles.css");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+require("./style.scss");
+var _faker = require("@faker-js/faker");
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
+var _reactTooltip = require("react-tooltip");
+var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
+var _utils = require("./hook/utils");
+var _useColumns = require("./hook/useColumns");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 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 enDr from "rc-master-ui/es/locales/en_US"
+// import viDr from "rc-master-ui/es/locales/vi_VN"
+
+// import type { PickerLocale } from "rc-master-ui/es/date-picker/generatePicker"
+
+// import Swal from "sweetalert2"
+// import withReactContent from "sweetalert2-react-content"
+// import { Tooltip } from "react-tooltip"
+
+// import InfiniteTable from './table/InfiniteTable'
+// import GridEdit from './table/GridEdit'
+
+// import { Group } from 'becoxy-icons'
+
+// import GridEdit from './table/GridEdit'
+
+// import { columns111 } from '../test-2/columns'
+
+_dayjs.default.extend(_customParseFormat.default);
+
+// const MySwal = withReactContent(Swal)
+
+// const ASCEND = 'ascend'
+// const DESCEND = 'descend'
+
+const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
+const InternalTable = props => {
+  const {
+    t,
+    // columns: propsColumns,
+    columns,
+    lang,
+    locale,
+    dataSource,
+    editAble,
+    format,
+    groupAble,
+    groupSetting,
+    groupColumns,
+    infiniteScroll,
+    // wrapSettings,
+    // onFilter,
+    // expandable,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    contextMenuClick,
+    contextMenuOpen,
+    ...rest
+  } = props;
+  const id = _react.default.useMemo(() => {
+    return _faker.faker.string.alpha(20);
+  }, []);
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
+  _react.default.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+
+  // const local = lang && lang === 'en' ? en : vi
+  // const dateRangeLocale = lang && lang === 'en' ? enDr : viDr
+
+  // const buddhistLocale: PickerLocale = {
+  //   ...local,
+  //   lang: {
+  //     ...local.lang
+  //   }
+  // }
+
+  const menuRef = _react.default.useRef(null);
+  const viewportWidth = windowSize.innerWidth;
+  const viewportHeight = windowSize.innerHeight;
+  const [menuVisible, setMenuVisible] = _react.default.useState(false);
+  const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
+  const [position, setPosition] = _react.default.useState({
+    x: 0,
+    y: 0,
+    viewportWidth,
+    viewportHeight
+  });
+
+  // const [tooltipContent, setTooltipContent] = useState<any>('')
+
+  const [filterStates, setFilterState] = _react.default.useState(null);
+  const [sorterStates, setSorterStates] = _react.default.useState([]);
+  const [expanded, setExpanded] = _react.default.useState({});
+  const convertData = _react.default.useMemo(() => {
+    if (groupAble && groupSetting && groupSetting.client !== false) {
+      return (0, _utils.groupArrayByColumns)(dataSource, groupColumns);
+    }
+    return (0, _utils.addRowIdArray)(dataSource);
+  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const mergedColumns = _react.default.useMemo(() => {
+    return (0, _useColumns.convertToTanStackColumns)({
+      t,
+      columns,
+      // expanded,
+      // setExpanded,
+      // expandable,
+      format,
+      editAble
+    });
+
+    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+  }, [t, columns, format, editAble]);
+  console.log('mergedColumns', mergedColumns);
+  const columnPinning = _react.default.useMemo(() => {
+    return {
+      left: (0, _utils.getFixedFields)(columns, 'left'),
+      right: (0, _utils.getFixedFields)(columns, 'right')
+    };
+  }, [columns]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
+    value: undefined
+  });
+  const mergedData = _react.default.useMemo(() => {
+    return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
+  const columnVisibility = _react.default.useMemo(() => {
+    return (0, _utils.getInvisibleColumns)(columns);
+  }, [columns]);
+  const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
+    value: undefined
+  });
+  const triggerChangeColumns = (cols, keys) => {
+    const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
+    const rsss = (0, _utils.getDiffent2Array)(aa, keys);
+    setColumnsHiddenKeys(rsss);
+  };
+  const contextMenuItems = _react.default.useMemo(() => {
+    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
+      const hiddenItems = contextMenuHidden({
+        rowInfo: {
+          rowData: selectedRowData
+        }
+      });
+      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
+    }
+    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
+      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
+    }
+    return propContextMenuItems;
+  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
+
+  // const [columns, setColumns] = React.useState<any[]>([])
+
+  // React.useEffect(() => {
+  //   setColumns(propsColumns)
+  // }, [propsColumns])
+
+  // const triggerFilter = (queries: any[]) => {
+
+  //   if (onFilter) {
+  //     onFilter?.(convertFilters(queries))
+  //   } else {
+
+  //     setFilterState(convertFilters(queries))
+
+  //     const b = filterDataByColumns(convertData, convertFilters(queries), [], [])
+
+  //     setMergedFilterKeys(getAllRowKey(b))
+
+  //   }
+  // }
+
+  const onContextMenu = data => event => {
+    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
+
+    setSelectedRowData(data);
+    contextMenuOpen?.({
+      rowInfo: {
+        rowData: data
+      },
+      event
+    });
+    setMenuVisible(true);
+
+    // Đợi DOM cập nhật và lấy kích thước menu
+    setTimeout(() => {
+      const menuElement = menuRef.current; // Lấy menu từ DOM
+      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
+      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
+
+      // Điều chỉnh vị trí menu
+      let x = event.clientX;
+      let y = event.clientY;
+      if (x + menuWidth > viewportWidth) {
+        x = x - menuWidth - 10; // Cách cạnh phải 10px
+      }
+      if (y + menuHeight > viewportHeight) {
+        if (y < menuHeight) {
+          y = 10;
+        } else {
+          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
+        }
+      }
+      setPosition(prevState => ({
+        ...prevState,
+        x,
+        y
+      }));
+    }, 100);
+    if (!menuVisible) {
+      document.addEventListener(`click`, function onClickOutside(e) {
+        const element = e.target;
+        const menuContainer = document.querySelector('.popup-context-menu');
+        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
+        if (isInsideContainer) {
+          return;
+        }
+        setMenuVisible(false);
+        setPosition(prevState => ({
+          ...prevState,
+          x: undefined,
+          y: undefined
+        }));
+        document.removeEventListener(`click`, onClickOutside);
+      });
+    }
+  };
+
+  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
+  // const TableComponent = Grid
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    id: id,
+    prefix: prefix,
+    originData: convertData,
+    dataSource: mergedData,
+    locale: locale,
+    format: format
+    // columns={columns111 as any}
+    ,
+    columns: mergedColumns,
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
+    triggerFilter: setFilterState,
+    triggerSorter: setSorterStates,
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    expanded: expanded,
+    onContextMenu: onContextMenu,
+    contextMenuItems: contextMenuItems,
+    editAble: editAble,
+    triggerChangeColumns: triggerChangeColumns,
+    setExpanded: setExpanded
+  })), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: `${id}-tooltip-content`,
+    style: {
+      zIndex: 1999
+    }
+  }));
+};
+var _default = exports.default = InternalTable;

package/lib/table-component/TableContainer.d.ts

@@ -0,0 +1,31 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import type { ColumnDef, Table } from '@tanstack/react-table';
+import type { ColumnsTable, TableProps } from './type';
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    rowKey: any;
+    originData: T[];
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    tableHeight?: number;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable;
+    triggerChangeColumns: any;
+    columnHidden: any;
+};
+declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainer;