es-grid-template 1.8.59 → 1.8.61

package/es/grid-component/ColumnsChoose.js

@@ -1,326 +1,7 @@
-// import React, {Fragment, useMemo, useState} from "react"
-//
-// import styled from "styled-components"
-// import {Button, Input, Popover, Tooltip} from "antd";
-// import {SettingOutlined} from "@ant-design/icons";
-// import {
-//   getVisibleColumnKeys,
-//   updateColumns
-// } from "./hooks";
-//
-// // import type {TableColumnsType} from "rc-master-ui";
-// import Tree from "rc-master-ui/es/tree";
-// import SearchOutlined from "@ant-design/icons/SearchOutlined";
-// import type {ColumnsTable} from "./type";
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-//
-//
-// const  BoxAction = styled.div`
-//   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;
-//     }
-//   }
-// `
-//
-// export type IColumnsChoose<RecordType> = {
-//   columns: ColumnsTable<RecordType>
-//   columnsGroup?: string[]
-//   triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
-//   t?: any
-//
-// }
-//
-//
-// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
-//   const {
-//     columns: propsColumns,
-//     triggerChangeColumns,
-//     t,
-//     columnsGroup,
-//   } = props
-//
-//   // const dataList: { key: React.Key; title: string }[] = [];
-//
-//   // const defaultColumns = useMemo(() => {
-//   //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
-//   // }, [propsColumns])
-//
-//
-//   // const columnsChooseRef: any = useRef()
-//   // const searchRef: any = useRef()
-//
-//
-//
-//   // const [columns, setColumns] = useState<TableColumnsType>([])
-//
-//   // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-//
-//   // const [isManualUpdate, setIsManualUpdate] = useState(false);
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //   setColumns(defaultColumns as TableColumnsType)
-//   //
-//   // }, [propsColumns])
-//
-//   const columns  = useMemo(() => {
-//
-//     // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
-//     // setColumns(defaultColumns as TableColumnsType)
-//   }, [columnsGroup, propsColumns])
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //
-//   //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
-//   //
-//   //   if (!isManualUpdate) {
-//   //     setSelectedKeys(defaultSelectedKeys)
-//   //   }
-//   //   setIsManualUpdate(false);
-//   //
-//   //
-//   // }, [isManualUpdate, propsColumns])
-//
-//   const defaultSelectedKeys =  React.useMemo(() => {
-//
-//     const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return getVisibleColumnKeys(rs)
-//
-//   },  [columnsGroup, propsColumns])
-//
-//   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-//     defaultSelectedKeys || [],
-//     {
-//       value: defaultSelectedKeys,
-//     },
-//   );
-//
-//   //
-//   // const defaultSelectedKeys = useMemo(() => {
-//   //
-//   //   return getVisibleColumnKeys(propsColumns)
-//   //
-//   // }, [propsColumns])
-//
-//
-//   const [clicked, setClicked] = useState(false);
-//   const [autoExpandParent, setAutoExpandParent] = 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: boolean) => {
-//     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: string[]) => {
-//
-//     // setSelectedKeys(keys)
-//     setMergedSelectedKeys(keys)
-//     // setIsManualUpdate(true)
-//
-//   }
-//
-//   const handleAccept = () => {
-//
-//
-//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
-//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
-//
-//
-//     triggerChangeColumns?.(rs1, 'columnChoose')
-//
-//     hide()
-//
-//   }
-//
-//   const handleCancel = () => {
-//     // setSelectedKeys(defaultSelectedKeys)
-//     hide()
-//   }
-//
-//
-//   return (
-//     <Fragment>
-//       <Popover
-//         placement={'bottomLeft'}
-//         content={
-//           <div style={{minWidth: 250}}>
-//             <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
-//
-//             <Tree
-//               onExpand={onExpand}
-//               // expandedKeys={expandedKeys}
-//               autoExpandParent={autoExpandParent}
-//               // treeData={treeData}
-//               treeData={columns}
-//               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 as string[])}
-//
-//
-//               multiple={true}
-//               // checkedKeys={selectedKeys}
-//
-//               defaultCheckedKeys={mergedSelectedKeys}
-//               // defaultCheckedKeys={defaultSelectedKeys}
-//               // selectedKeys={[]}
-//
-//               height={window.innerHeight - 200}
-//
-//             />
-//
-//
-//             <BoxAction className={'px-1'}>
-//               <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'}
-//                 {/*{'OK'}*/}
-//               </Button>
-//
-//               {/*<Button className={'btn-action btn-action-cancel'} onClick={hide}  >{('Cancel') }</Button>*/}
-//               <Button className={'btn-action btn-action-cancel'} onClick={handleCancel}  >{t ? t('Cancel') : 'Cancel' }</Button>
-//             </BoxAction>
-//           </div>
-//         }
-//         trigger="click"
-//         open={clicked}
-//         onOpenChange={handleClickChange}
-//         arrow={false}
-//       >
-//         <Tooltip arrow={false} title={'Cài đặt'} >
-//           <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
-//         </Tooltip>
-//
-//       </Popover>
-//     </Fragment>
-//   )
-// }
-
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { Button, Input, Popover, Tooltip } from "antd";
-import { SettingOutlined } from "@ant-design/icons";
+import { Settings } from "becoxy-icons";
 import { getVisibleColumnKeys, updateColumns } from "./hooks";
 
 // import type {TableColumnsType} from "rc-master-ui";
@@ -543,5 +224,7 @@ export const ColumnsChoose = props => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
+  }, /*#__PURE__*/React.createElement(Settings, {
+    fontSize: 16
+  }))));
 };

package/es/grid-component/InternalTable.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
+import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, sumByField, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
+import ReactDOMServer from 'react-dom/server';
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -12,7 +13,7 @@ import 'dayjs/locale/vi';
 // import GridEdit from "./table/GridEdit"
 // import InfiniteTable from "./table/InfiniteTable";
 
-import Grid from "./table/Grid";
+// 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 enDr from "rc-master-ui/es/locales/en_US";
@@ -115,15 +116,12 @@ const ResizableTitle = props => {
     })))
   );
 };
-const TableBodyCell = props => {
-  const dragState = useContext(DragIndexContext);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    style: {
-      ...props.style,
-      ...dragActiveStyle(dragState, props.id)
-    }
-  }));
-};
+
+// const TableBodyCell = (props: any) => {
+//   const dragState = useContext<DragIndexState>(DragIndexContext)
+//   return <div {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />
+// }
+
 const SortableHeaderCell = ({
   children,
   columnKey
@@ -189,6 +187,8 @@ const InternalTable = props => {
     onSorter,
     defaultSorter,
     toolbarItems,
+    allowSortering,
+    allowFiltering,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -243,30 +243,22 @@ const InternalTable = props => {
     active: -1,
     over: -1
   });
-  const [tooltipContent, setTooltipContent] = useState('');
+  // const [tooltipContent, setTooltipContent] = useState<any>('')
+
   const [filterStates, setFilterState] = React.useState(null);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const mergedData = React.useMemo(() => {
-    if (groupAble && groupSetting && groupSetting.client !== false) {
+    if (groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
     }
     return addRowIdArray(dataSource);
-  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  }, [dataSource, groupColumns, groupSetting?.client]);
 
   // ========================= Keys =========================
   const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(mergedData), {
     value: undefined
   });
-  //
-  // const originData = React.useMemo(() => {
-  //
-  //   if (groupAble && groupSetting && groupSetting.client !== false) {
-  //     return groupArrayByColumns(dataSource, groupColumns)
-  //   }
-  //   return addRowIdArray(dataSource)
-  //
-  // }, [dataSource, groupAble, groupColumns, groupSetting])
-
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
     const totalHeight = propsHeight;
@@ -445,7 +437,7 @@ const InternalTable = props => {
           wrapSettings: wrapSettings
         })),
         // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        ellipsis: column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: column.ellipsis !== false || wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
         // ellipsis: false,
         // ellipsis: column.ellipsis !== false,
 
@@ -504,17 +496,17 @@ const InternalTable = props => {
       }
       return {
         ...transformedColumn,
-        ...(transformedColumn.allowFiltering === false ? {} : {
+        ...(transformedColumn.allowFiltering === false || allowFiltering === false ? {} : {
           ...getColumnSearchProps(column)
         }),
-        // sorter: (column.sorter === false ? undefined : {
-        //   // @ts-ignore
-        //   compare: (a: any, b: any) => onSorter ? a : a[column.field] - b[column.field],
-        //   multiple: sortMultiple ? colIndex : undefined
-
-        // }),
+        sorter: column.sorter === false || allowSortering === false ? undefined : {
+          // @ts-ignore
+          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
+          multiple: sortMultiple ? colIndex : undefined
+        },
         // @ts-ignore
-        sorter: (a, b) => a[column.field] - b[column.field],
+        // sorter: (a, b) => a[column.field] - b[column.field],
+
         sortIcon: args => {
           const {
             sortOrder
@@ -561,6 +553,10 @@ const InternalTable = props => {
            ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
         }),
         onCell: (data, index) => {
+          const tooltipContent = isOpenTooltip === false ? '' : column?.tooltipDescription ? typeof column.tooltipDescription === 'function' ? column.tooltipDescription({
+            value: data[column.field ?? ''],
+            record: data
+          }) : column.tooltipDescription : column.template && typeof column.template !== 'function' ? column.template : data[column.field ?? ''];
           return {
             id: `${column.field}`,
             colSpan: groupColumns && data.children && column.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === column.field ? 0 : 1,
@@ -571,7 +567,23 @@ const InternalTable = props => {
               'cell-group-fixed': groupColumns && data.children && column.field === firstNonGroupColumn?.field
             }),
             // 'data-tooltip-id': "tooltip-cell-content"
-            'data-tooltip-id': `${id}-tooltip-cell-content`
+            'data-tooltip-id': `${id}-tooltip-cell-content`,
+            "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
+            onMouseEnter: e => {
+              if (e.target.firstChild?.clientWidth <= e.target.firstChild?.scrollWidth) {
+                if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+                  setIsOpenTooltip(true);
+                } else {
+                  setIsOpenTooltip(false);
+                }
+              } else {
+                if (e.target.clientWidth < e.target.scrollWidth) {
+                  setIsOpenTooltip(true);
+                } else {
+                  setIsOpenTooltip(false);
+                }
+              }
+            }
           };
         },
         render: (value, record, rowIndex) => {
@@ -593,6 +605,10 @@ const InternalTable = props => {
             }
             return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
+          if (groupAble && record.children && column.sumGroup === true && column.type === 'number') {
+            const sumValue = sumByField(filterDataByColumns4(record.children, [], []), column?.field);
+            return /*#__PURE__*/React.createElement(React.Fragment, null, sumValue);
+          }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         // defaultSortOrder: 'ascend',
@@ -914,10 +930,7 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-
-  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
-  const TableComponent = groupAble ? Group : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, true && /*#__PURE__*/React.createElement(DndContext, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
     onDragEnd: onDragEnd,
@@ -928,7 +941,7 @@ const InternalTable = props => {
     strategy: horizontalListSortingStrategy
   }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
     t: t,
     id: id,
     locale: locale,
@@ -956,34 +969,24 @@ const InternalTable = props => {
     groupColumns: groupColumns,
     commandClick: triggerCommandClick,
     summary: summary,
-    pagination: pagination
-    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
-    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
-    ,
-
+    pagination: pagination,
     scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
-
-    // height={isFullScreen ? windowSize.innerHeight - 100 : propsHeight}
     ,
     height: propsHeight,
     scrollHeight: scrollHeight,
+    toolbarItems: toolbarItems,
     components: {
       header: {
         cell: ResizableTitle
-      },
-      body: {
-        cell: TableBodyCell
       }
+      // body: { cell: TableBodyCell }
     },
-    setTooltipContent: setTooltipContent,
     onFilter: val => {
       handleOnFilter(val);
-      // triggerFilter?.(convertFilters(val))
-      // onFilter?.(convertFilters(val))
     },
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
@@ -991,10 +994,6 @@ const InternalTable = props => {
     onChange: handleChange,
     handleFullScreen: handleFullScreen,
     isFullScreen: isFullScreen
-
-    // onChange={(paging, filters, sorter) => {
-    //   handleChange(sorter)
-    // }}
   })))), /*#__PURE__*/React.createElement(DragOverlay, {
     style: {
       minWidth: 100,
@@ -1046,7 +1045,7 @@ const InternalTable = props => {
     strategy: horizontalListSortingStrategy
   }, /*#__PURE__*/React.createElement(DragIndexContext.Provider, {
     value: dragIndex
-  }, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
     t: t,
     id: faker.string.alpha(20),
     locale: locale,
@@ -1088,12 +1087,12 @@ const InternalTable = props => {
     components: {
       header: {
         cell: ResizableTitle
-      },
-      body: {
-        cell: TableBodyCell
       }
-    },
-    setTooltipContent: setTooltipContent,
+      // body: { cell: TableBodyCell }
+    }
+    // setTooltipContent={setTooltipContent}
+    ,
+
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -1130,12 +1129,6 @@ const InternalTable = props => {
     id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
-    },
-    render: () => {
-      if (tooltipContent) {
-        return /*#__PURE__*/React.createElement("span", null, typeof tooltipContent === 'function' ? tooltipContent() : tooltipContent);
-      }
-      return undefined;
     }
   }));
 };

package/es/grid-component/TableGrid.js

@@ -62,7 +62,7 @@ const TableGrid = props => {
     rowHoverable,
     title,
     format,
-    // virtual = true,
+    virtualRow = true,
     t,
     lang,
     contextMenuOpen,
@@ -322,14 +322,18 @@ const TableGrid = props => {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
-    virtual: true,
+    virtual: virtualRow,
     columns: columns,
     rowKey: rowKey,
     rowHoverable: rowHoverable,
     size: "small",
     scroll: scroll ? scroll : {
       y: 500
-    },
+    }
+
+    // scroll={{ x: 'max-content', y: 700 }}
+    ,
+
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
@@ -380,16 +384,6 @@ const TableGrid = 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",
-        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-      }) : /*#__PURE__*/React.createElement(Maximize, {
-        fontSize: 16,
-        onClick: () => handleFullScreen?.(),
-        "data-tooltip-id": "tooltip-icon",
-        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
       })), /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',
@@ -405,7 +399,17 @@ const TableGrid = props => {
         // @ts-ignore
         ,
         showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-      }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+      }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+      }) : /*#__PURE__*/React.createElement(Maximize, {
+        fontSize: 16,
+        onClick: () => handleFullScreen?.(),
+        "data-tooltip-id": "tooltip-icon",
+        "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+      })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
         t: t,
         columnsGroup: groupColumns,