es-grid-template 1.7.27 → 1.7.28

package/es/table-component/InternalTable.js

@@ -27,8 +27,8 @@ import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
 // import { Group } from 'becoxy-icons'
 
-import { Tooltip } from 'react-tooltip';
-import ContextMenu from "./ContextMenu";
+// import { Tooltip } from 'react-tooltip'
+// import ContextMenu from './ContextMenu'
 import { addRowIdArray, convertToObj,
 // convertFilters,
 filterDataByColumns, flatColumns2,
@@ -61,12 +61,12 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
-    infiniteScroll,
+    // infiniteScroll,
     // wrapSettings,
     // onFilter,
     // expandable,
-    contextMenuItems: propContextMenuItems,
-    contextMenuHidden,
+    // contextMenuItems: propContextMenuItems,
+    // contextMenuHidden,
     contextMenuClick,
     contextMenuOpen,
     height,
@@ -108,17 +108,18 @@ const InternalTable = props => {
   //   }
   // }
 
-  const menuRef = React.useRef(null);
-  const viewportWidth = windowSize.innerWidth;
-  const viewportHeight = windowSize.innerHeight;
-  const [menuVisible, setMenuVisible] = React.useState(false);
-  const [selectedRowData, setSelectedRowData] = React.useState(null);
-  const [position, setPosition] = React.useState({
-    x: 0,
-    y: 0,
-    viewportWidth,
-    viewportHeight
-  });
+  // const menuRef = React.useRef<any>(null)
+  // const viewportWidth = windowSize.innerWidth
+  // const viewportHeight = windowSize.innerHeight
+
+  // const [menuVisible, setMenuVisible] = React.useState(false)
+  // const [selectedRowData, setSelectedRowData] = React.useState<RecordType | null>(null)
+  // const [position, setPosition] = React.useState<{
+  //   x: number | undefined
+  //   y: number | undefined
+  //   viewportWidth: number
+  //   viewportHeight: number
+  // }>({ x: 0, y: 0, viewportWidth, viewportHeight })
 
   // const [tooltipContent, setTooltipContent] = useState<any>('')
 
@@ -170,101 +171,81 @@ const InternalTable = props => {
     const rsss = getDiffent2Array(aa, keys);
     setColumnsHiddenKeys(rsss);
   };
-  const contextMenuItems = React.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 {
+  // const contextMenuItems = React.useMemo(() => {
+  //   if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
+  //     const hiddenItems = contextMenuHidden({
+  //       rowInfo: {
+  //         rowData: selectedRowData
+  //       }
+  //     })
 
-  //     setFilterState(convertFilters(queries))
-
-  //     const b = filterDataByColumns(convertData, convertFilters(queries), [], [])
+  //     return propContextMenuItems.filter(item => !(hiddenItems as string[]).includes(item?.key as string))
+  //   }
 
-  //     setMergedFilterKeys(getAllRowKey(b))
+  //   if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
+  //     return propContextMenuItems.filter(item => !(contextMenuHidden as string[]).includes(item?.key as string))
+  //   }
 
+  //   return propContextMenuItems
+  // }, [propContextMenuItems, contextMenuHidden, selectedRowData])
+
+  // const onContextMenu = (data: RecordType) => (event: any) => {
+  //   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: any = 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 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.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: id,
@@ -287,14 +268,16 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded,
-    onContextMenu: onContextMenu,
-    contextMenuItems: contextMenuItems,
+    expanded: expanded
+    // onContextMenu={onContextMenu}
+    // contextMenuItems={contextMenuItems}
+    ,
     editAble: editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
-    setIsFullScreen: setIsFullScreen
+    setIsFullScreen: setIsFullScreen,
+    windowSize: windowSize
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -319,7 +302,8 @@ const InternalTable = props => {
       wrapper: {
         zIndex: 1050
       }
-    }
+    },
+    destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: 40
@@ -346,28 +330,17 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded,
-    onContextMenu: onContextMenu,
-    contextMenuItems: contextMenuItems,
+    expanded: expanded
+    // onContextMenu={onContextMenu}
+    // contextMenuItems={contextMenuItems}
+    ,
     editAble: editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
-    height: windowSize.innerHeight - 70
-  })))), menuVisible && /*#__PURE__*/React.createElement(ContextMenu, {
-    open: menuVisible,
-    pos: position,
-    setOpen: setMenuVisible,
-    menuRef: menuRef,
-    contextMenuItems: contextMenuItems,
-    contextMenuClick: contextMenuClick,
-    rowData: selectedRowData
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    id: `${id}-tooltip-content`,
-    style: {
-      zIndex: 1999
-    }
-  }));
+    height: windowSize.innerHeight - 70,
+    windowSize: windowSize
+  })))));
 };
 export default InternalTable;

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

@@ -17,6 +17,10 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
@@ -26,6 +30,8 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     propsColumns: ColumnsTable;
     triggerChangeColumns: any;
     columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainer;

package/es/table-component/TableContainer.js

@@ -2,9 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // import type { Dispatch, SetStateAction } from "react";
 
 import React from 'react';
-import TableHead from "./header/TableHead";
-import { sumSize } from "./hook/utils";
-import { useVirtualizer } from '@tanstack/react-virtual';
+// import TableHead from './header/TableHead'
+// import { sumSize } from './hook/utils'
+
+// import { useVirtualizer } from '@tanstack/react-virtual'
+
 import classNames from 'classnames';
 // import TableBody from './body/TableBody'
 import { TableContext } from "./useContext";
@@ -12,16 +14,20 @@ import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
 import { ColumnsChoose } from "./ColumnsChoose";
-import TableFooter from "./footer/TableFooter";
-import TableBody from "./body/TableBody";
+// import TableFooter from './footer/TableFooter'
+// import TableBody from './body/TableBody'
 import { numericFormatter } from 'react-numeric-component';
+// import ComponentSpinner from '../grid-component/LoadingSpinner'
+import TableWrapper from "./table/TableWrapper";
+import { sumSize } from "./hook/utils";
+import { useVirtualizer } from '@tanstack/react-virtual';
 const TableContainer = props => {
   const {
     t,
     table,
     id,
     prefix,
-    commandClick,
+    // commandClick,
     editAble,
     rowKey,
     format,
@@ -53,14 +59,21 @@ const TableContainer = props => {
     columnHidden,
     expanded,
     setExpanded,
-    showEmptyText
+    showEmptyText,
+    infiniteScroll,
+    next,
+    loading,
+    windowSize,
+    contextMenuOpen,
+    contextMenuClick,
+    contextMenuHidden,
+    isFullScreen,
+    setIsFullScreen
   } = props;
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
   const topToolbarRef = React.useRef(null);
-  const visibleColumns = table.getVisibleLeafColumns();
-  const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
   React.useEffect(() => {
     const totalHeight = height;
@@ -68,15 +81,24 @@ const TableContainer = props => {
       settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
     }
   }, [id, height, editAble]);
+  const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
+
+  //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights
   const columnVirtualizer = useVirtualizer({
     count: visibleColumns.length,
     estimateSize: index => visibleColumns[index].getSize(),
+    //estimate width of each column for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     horizontal: true,
+    // measureElement(element) {
+
+    //   return element?.getBoundingClientRect().width;
+    // },
+
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
@@ -91,8 +113,13 @@ const TableContainer = props => {
   const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
   if (columnVirtualizer && virtualColumns?.length) {
     virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
+
+    // virtualPaddingLeft = leftCols.length === rss.length ?  (virtualColumns[0]?.start ?? 0) : 0;
+    // columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth > 0 ? columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0) - rightWidth : 0;
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
+    // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
   }
+  const triggerCommandClick = () => {};
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
@@ -115,16 +142,18 @@ const TableContainer = props => {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
     mode: 'scroll'
   })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": t ? t('Minimized') : 'Minimized'
   }) : /*#__PURE__*/React.createElement(Maximize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -138,9 +167,9 @@ const TableContainer = props => {
     responsive: true,
     size: 'small',
     rootClassName: 'top-pagination',
-    showTotal: (total, range) =>
+    showTotal: (totalItems, range) =>
     // @ts-ignore
-    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
     columnHidden: columnHidden,
     columns: columns,
@@ -148,23 +177,7 @@ const TableContainer = props => {
     t: t,
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefix}-grid-container`, {
-      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
-      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
-    }),
-    id: id,
-    ref: tableContainerRef,
-    style: {
-      overflow: 'auto',
-      //our scrollable table container
-      position: 'relative',
-      //needed for sticky header
-      // height: tableHeight ?? '500px' //should be a fixed height
-      maxHeight: tableHeight //should be a fixed height
-      // minWidth: table.getTotalSize()
-    }
-  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+  })))), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       locale,
       prefix,
@@ -183,44 +196,35 @@ const TableContainer = props => {
       setIsSelectionChange,
       onContextMenu,
       setSorterChange,
-      setFilterChange
-    }
-  }, /*#__PURE__*/React.createElement("table", {
-    style: {
-      display: 'grid',
-      minWidth: table.getTotalSize()
+      setFilterChange,
+      windowSize
     }
-  }, /*#__PURE__*/React.createElement(TableHead, {
-    tableContainerRef: tableContainerRef,
-    columnVirtualizer: columnVirtualizer,
-    table: table,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight,
-    fixedLeftColumns: fixedLeftColumns,
-    fixedRightColumns: fixedRightColumns
-  }), /*#__PURE__*/React.createElement(TableBody, {
-    tableId: id,
-    columnVirtualizer: columnVirtualizer,
+  }, /*#__PURE__*/React.createElement(TableWrapper, {
+    contextMenuItems: contextMenuItems,
+    height: tableHeight,
+    id: id,
+    prefix: prefix,
     table: table,
     tableContainerRef: tableContainerRef,
-    virtualPaddingLeft: virtualPaddingLeft,
-    virtualPaddingRight: virtualPaddingRight,
-    fixedLeftColumns: fixedLeftColumns,
-    fixedRightColumns: fixedRightColumns,
-    commandClick: commandClick,
+    commandClick: triggerCommandClick,
+    contextMenuClick: contextMenuClick,
+    contextMenuHidden: contextMenuHidden,
+    contextMenuOpen: contextMenuOpen,
     editAble: editAble,
-    contextMenuItems: contextMenuItems,
-    showEmptyText: showEmptyText
-  }), summary && /*#__PURE__*/React.createElement(TableFooter, {
+    showEmptyText: showEmptyText,
+    summary: summary,
+    dataSource: dataSource,
+    infiniteScroll: infiniteScroll,
+    next: next,
+    loading: loading,
     columnVirtualizer: columnVirtualizer,
-    table: table,
     virtualPaddingLeft: virtualPaddingLeft,
     virtualPaddingRight: virtualPaddingRight,
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
-  })))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, pagination && /*#__PURE__*/React.createElement(Pagination
+  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({}, pagination, {
     rootClassName: 'pagination-template',
@@ -229,20 +233,20 @@ const TableContainer = props => {
     size: 'small',
     total: pagination.total,
     pageSize: pagination.onChange ? pagination.pageSize : table.getState().pagination.pageSize,
-    showTotal: (total, range) => `${numericFormatter((range[0] ?? 0).toString(), {
+    showTotal: (totalItems, range) => `${numericFormatter((range[0] ?? 0).toString(), {
       thousandSeparator: '.'
     })}-${numericFormatter((range[1] ?? 0).toString(), {
       thousandSeparator: '.'
-    })} / ${numericFormatter((total ?? 0).toString(), {
+    })} / ${numericFormatter((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
     })} items`,
     pageSizeOptions: [20, 50, 100, 1000, 10000],
-    onChange: (page, pageSize) => {
+    onChange: (page, pageSize1) => {
       if (pagination.onChange) {
-        pagination.onChange(page, pageSize);
+        pagination.onChange(page, pageSize1);
       } else {
         table.setPageIndex(page - 1);
-        table.setPageSize(pageSize);
+        table.setPageSize(pageSize1);
       }
     }
   }))));

package/es/table-component/TableContainerEdit.d.ts

@@ -18,6 +18,10 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;