es-grid-template 1.7.24 → 1.7.26

package/lib/table-component/TableContainerEdit.js

@@ -21,12 +21,45 @@ var _rcMasterUi = require("rc-master-ui");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _becoxyIcons = require("becoxy-icons");
 var _ColumnsChoose = require("./ColumnsChoose");
+var _TableFooter = _interopRequireDefault(require("./footer/TableFooter"));
 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 {
   Paragraph,
   Title
 } = _antd.Typography;
+const validateData = async (data, formSchema) => {
+  if (!formSchema) {
+    return [];
+  } else {
+    const errors = [];
+    for (let i = 0; i < data.length; i++) {
+      try {
+        await formSchema.validate(data[i], {
+          abortEarly: false
+        });
+      } catch (error) {
+        errors.push(error.inner.reduce((acc, err) => {
+          acc[err.path] = {
+            field: err.path,
+            index: i,
+            message: err.message,
+            type: err.type,
+            ref: {
+              name: err.path
+            }
+          };
+          return {
+            ...acc,
+            index: i,
+            id: data[i].rowId
+          };
+        }, {}));
+      }
+    }
+    return errors;
+  }
+};
 const TableContainerEdit = props => {
   const {
     t,
@@ -51,14 +84,16 @@ const TableContainerEdit = props => {
     setFilterChange,
     // tableHeight,
     onCellPaste,
-    triggerPaste,
+    // triggerPaste,
     validate,
-    triggerChangeData,
+    // triggerChangeData,
     onCellChange,
+    onDataChange,
     defaultValue,
     toolbarItems,
     mergedFilterKeys,
     setMergedFilterKeys,
+    expanded,
     setExpanded,
     onBlur,
     fullScreen,
@@ -66,7 +101,15 @@ const TableContainerEdit = props => {
     showToolbar,
     actionTemplate,
     showColumnChoose,
-    height
+    height,
+    summary,
+    locale,
+    groupColumns,
+    columns,
+    propsColumns,
+    triggerChangeColumns,
+    columnHidden,
+    showEmptyText
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -94,7 +137,7 @@ const TableContainerEdit = props => {
     // },
 
     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 columnSizingState = table.getState().columnSizing;
   const itemsAdd = _react.default.useMemo(() => {
@@ -109,11 +152,22 @@ const TableContainerEdit = props => {
       label: `100 ${t ? t('rows') : 'rows'}`
     }];
   }, [t]);
+  const [dataErrors, setDataErrors] = _react.default.useState([]);
   _react.default.useEffect(() => {
     requestAnimationFrame(() => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
+  _react.default.useEffect(() => {
+    if (validate && dataSource && dataSource.length) {
+      validateData(dataSource, validate).then(error => {
+        setDataErrors([...error]);
+        // if (getErrors) {
+        //   getErrors([...error])
+        // }
+      });
+    }
+  }, [validate, dataSource]);
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
   const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
@@ -194,8 +248,41 @@ const TableContainerEdit = props => {
     // Copy to clipboard
     navigator.clipboard.writeText(tsv).then(() => {});
   }, [startCell, endCell, table]);
+  const triggerChangeData = _react.default.useCallback(newData => {
+    onDataChange?.(newData);
+  }, [onDataChange]);
+  const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
+    const handlePasteCallback = callbackData => {
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...dataSource]), callbackData);
+      const rs = (0, _utils.unFlattenData)(rsFilterData);
+      triggerChangeData(rs);
+    };
+    if (onCellPaste && onCellPaste.onPasted) {
+      if (onCellPaste.onPasted.length > 1) {
+        // có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          copyRows,
+          type: 'onPaste',
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+      } else {
+        // không có callback
+        onCellPaste.onPasted({
+          pasteData: pastedRows,
+          type: 'onPaste',
+          copyRows,
+          data: dataSource,
+          pastedColumns: pastedColumnsArray
+        }, handlePasteCallback);
+        triggerChangeData(newData);
+      }
+    } else {
+      triggerChangeData(newData);
+    }
+  }, [dataSource, onCellPaste, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
-    console.log('ooooooo');
     if (!startCell) {
       return;
     }
@@ -280,7 +367,6 @@ const TableContainerEdit = props => {
       const pastedColumnsArray = Array.from(pastedColumns) ?? [];
       const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), newData);
       const rs = (0, _utils.unFlattenData)(rsFilterData);
-      console.log('2');
       triggerPaste?.(pastedRows, pastedColumnsArray, rs, []);
     } else {
       // const parent = findItemByKey(dataSource, rowKey as any, record.parentId)
@@ -338,7 +424,6 @@ const TableContainerEdit = props => {
       }; // item đã được filter
 
       const newDataSource = (0, _utils.updateArrayByKey)(originData, newRowData, rowKey);
-      console.log('1');
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
   }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
@@ -383,38 +468,25 @@ const TableContainerEdit = props => {
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   _react.default.useEffect(() => {
-
-    // const handleKeyDown = (e: KeyboardEvent) => {
-    //   console.log('copySelectionToClipboard')
-    //   if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
-
-    //     e.preventDefault();
-    //     copySelectionToClipboard();
-
-    //   }
-    // };
-
-    // window.addEventListener('keydown', handleKeyDown);
-    // return () => window.removeEventListener('keydown', handleKeyDown);
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, [startCell, endCell, table, copySelectionToClipboard]);
   _react.default.useEffect(() => {
-
-    // console.log('handlePaste')
-
-    // const handlePaste = (e: any) => {
-
-    //   if (startCell) {
-
-    //     e.preventDefault(); // Chặn hành vi mặc định
-    //     const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
-
-    //     handlePasteToTable(clipboardText);
-    //   }
-
-    // };
-
-    // window.addEventListener('paste', handlePaste);
-    // return () => window.removeEventListener('paste', handlePaste);
+    const handlePaste = e => {
+      if (startCell) {
+        e.preventDefault(); // Chặn hành vi mặc định
+        const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
+        handlePasteToTable(clipboardText);
+      }
+    };
+    window.addEventListener('paste', handlePaste);
+    return () => window.removeEventListener('paste', handlePaste);
   }, [startCell, endCell, table, handlePasteToTable]);
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
@@ -429,11 +501,9 @@ const TableContainerEdit = props => {
       const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
       const isInsideHeader = itemHeader && itemHeader.contains(event.target);
       if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext) {
-        console.log('55555');
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        console.log('55555');
         if (editingKey) {
           onBlur?.(dataSource);
         }
@@ -462,14 +532,14 @@ const TableContainerEdit = props => {
     if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
       settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight);
     }
-  }, [id, height]);
+  }, [id, height, editAble]);
   const {
     control,
     handleSubmit,
     setValue,
     // trigger,
     getValues,
-    // reset,
+    reset,
     formState: {
       errors
     }
@@ -491,7 +561,7 @@ const TableContainerEdit = props => {
       const index = (0, _utils.flattenData)(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = (0, _utils.updateArrayByKey)(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs, 'onChange');
+        triggerChangeData?.(rs);
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -575,7 +645,7 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
       setMergedFilterKeys?.(rs);
       const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData, 'Add');
+      triggerChangeData?.(newData);
     }
   }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const handleDuplicate = _react.default.useCallback(() => {
@@ -607,7 +677,7 @@ const TableContainerEdit = props => {
     const rs = (0, _utils.updateOrInsert)(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs, 'DUPLICATE');
+    triggerChangeData?.(rs);
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -640,7 +710,7 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData, 'INSERT_BEFORE');
+        triggerChangeData?.(newData);
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -666,7 +736,7 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+        triggerChangeData?.(newDataSource);
       }
     }
   }, [defaultValue, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -704,7 +774,7 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData, 'INSERT_AFTER');
+        triggerChangeData?.(newData);
       } else {
         const newData = [...originData];
         const parent = (0, _utils.findItemByKey)(newData, rowKey, record.parentId);
@@ -733,7 +803,7 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = (0, _utils.updateArrayByKey)(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource, 'INSERT_BEFORE');
+        triggerChangeData?.(newDataSource);
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -771,7 +841,7 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = (0, _utils.updateArrayByKey)(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource, 'INSERT_CHILDREN');
+      triggerChangeData?.(newDataSource);
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -798,11 +868,11 @@ const TableContainerEdit = props => {
       const filterData = (0, _utils.flattenArray)([...originData]);
       const rs = filterData.filter(it => !rowsFocus.includes(it[rowKey]));
       const newDaa = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newDaa], 'DELETE_ROWS');
+      triggerChangeData?.([...newDaa]);
     }
   }, [originData, rowKey, rowsFocus, triggerChangeData]);
   const handleDeleteAll = _react.default.useCallback(() => {
-    triggerChangeData?.([], 'INSERT_BEFORE');
+    triggerChangeData?.([]);
   }, [triggerChangeData]);
   const handleDeleteContent = _react.default.useCallback(() => {
     if (startCell && endCell) {
@@ -823,7 +893,7 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = (0, _utils.unFlattenData)(rs);
-      triggerChangeData?.([...newData], 'DELETE_CONTENT');
+      triggerChangeData?.([...newData]);
     }
   }, [dataSource, endCell, rangeState, startCell, table, triggerChangeData]);
   const toolbarItemsBottom = _react.default.useMemo(() => {
@@ -1038,7 +1108,7 @@ const TableContainerEdit = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1084,10 +1154,12 @@ const TableContainerEdit = props => {
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
-    columns: [],
+    columns: columns,
+    originColumns: propsColumns,
     t: t,
-    columnsGroup: []
-    // triggerChangeColumns={triggerChangeColumns}
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns,
+    columnHidden: columnHidden
   })))), /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1102,15 +1174,19 @@ const TableContainerEdit = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight //should be a fixed height
+      // height: tableHeight, //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      locale,
       prefix,
       id,
       rowKey,
       format,
       expandable,
+      expanded,
+      setExpanded,
       dataSource,
       originData,
       wrapSettings,
@@ -1146,16 +1222,18 @@ const TableContainerEdit = props => {
       errors,
       getValues,
       setValue,
+      reset,
       handleCellChange,
       triggerPaste,
       handleDeleteContent,
-      handleAddMulti
+      handleAddMulti,
+      dataErrors
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
     // className={`${prefix}-grid-container`}
     style: {
-      display: 'grid',
-      minWidth: table.getTotalSize()
+      display: 'grid'
+      //  minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,
@@ -1176,7 +1254,15 @@ const TableContainerEdit = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
   }))))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
@@ -1199,7 +1285,7 @@ const TableContainerEdit = props => {
     }
   })), pagination && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
-  , {
+  , (0, _extends2.default)({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
@@ -1214,7 +1300,14 @@ const TableContainerEdit = props => {
         table.setPageIndex(page - 1);
         table.setPageSize(pageSize);
       }
-    }
-  })));
+    },
+    showTotal: (total, range) => `${(0, _reactNumericComponent.numericFormatter)((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${(0, _reactNumericComponent.numericFormatter)((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${(0, _reactNumericComponent.numericFormatter)((total ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} items`
+  }))));
 };
 var _default = exports.default = TableContainerEdit;

package/lib/table-component/body/EditableCell.js

@@ -172,7 +172,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         });
       case 'datetime':
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
@@ -228,7 +228,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`,
+          "data-tooltip-id": `${id}-tooltip-content`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
@@ -256,7 +256,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`,
+          "data-tooltip-id": `${id}-tooltip-content`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
@@ -278,7 +278,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`,
+          "data-tooltip-id": `${id}-tooltip-content`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
@@ -307,7 +307,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`,
+          "data-tooltip-id": `${id}-tooltip-content`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
@@ -348,6 +348,7 @@ const EditableCell = props => {
           defaultOptions: options,
           value: valueSelectTable,
           rowData: record,
+          autoDestroy: true,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -434,7 +435,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         });
       case 'select':
         let valueSelect = value;
@@ -468,6 +469,7 @@ const EditableCell = props => {
               type: 'blur'
             });
           },
+          autoDestroy: true,
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
@@ -519,7 +521,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         });
       case 'asyncSelect':
         let valueAsyncSelect = value;
@@ -554,6 +556,7 @@ const EditableCell = props => {
               type: 'blur'
             });
           },
+          autoDestroy: true,
           showSearch: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
@@ -643,7 +646,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         });
       case 'treeSelect':
         // let valueTreeSelect
@@ -718,7 +721,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         });
       case 'checkbox':
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -955,7 +958,7 @@ const EditableCell = props => {
             }
           },
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-content`
         }));
       default:
         return /*#__PURE__*/_react.default.createElement(TextArea, {
@@ -1016,7 +1019,7 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`,
+          "data-tooltip-id": `${id}-tooltip-content`,
           autoSize: {
             minRows: 1,
             maxRows: 1

package/lib/table-component/body/TableBody.d.ts

@@ -13,7 +13,8 @@ interface TableBodyProps<T> {
     commandClick?: (args: CommandClick) => void;
     editAble?: boolean;
     tableId: string;
+    showEmptyText?: boolean;
     [key: string]: any;
 }
-declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
+declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, showEmptyText, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
 export default TableBody;

package/lib/table-component/body/TableBody.js

@@ -8,8 +8,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _TableBodyRow = _interopRequireDefault(require("./TableBodyRow"));
 var _reactVirtual = require("@tanstack/react-virtual");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
+var _rcMasterUi = require("rc-master-ui");
+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 { Dispatch, SetStateAction } from "react";
 
 const TableBody = ({
@@ -21,6 +24,7 @@ const TableBody = ({
   fixedLeftColumns,
   fixedRightColumns,
   tableId,
+  showEmptyText,
   ...rest
 }) => {
   const {
@@ -28,7 +32,8 @@ const TableBody = ({
   } = table.getRowModel();
   const {
     editingKey,
-    prefix
+    prefix,
+    locale
   } = _react.default.useContext(_useContext.TableContext);
 
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
@@ -39,18 +44,34 @@ const TableBody = ({
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 3
+    overscan: 1
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   return /*#__PURE__*/_react.default.createElement("tbody", {
     className: `${prefix}-grid-tbody`,
     style: {
       display: 'grid',
-      height: `${rowVirtualizer.getTotalSize()}px`,
+      // height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
+      height: showEmptyText && rows.length === 0 ? `140px` : `${rowVirtualizer.getTotalSize()}px`,
       //tells scrollbar how big the table is
       position: 'relative' //needed for absolute positioning of rows
     }
-  }, virtualRows.map(virtualRow => {
+  }, showEmptyText && rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
+    style: {
+      // transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
+    }
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    // colSpan={30}
+    style: {
+      position: "sticky",
+      left: 0,
+      width: tableContainerRef.current?.clientWidth,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
+    image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.emptyText
+  })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
     return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({}, rest, {
@@ -67,6 +88,6 @@ const TableBody = ({
       fixedRightColumns: fixedRightColumns,
       isEditing: isEditing
     }));
-  }));
+  })));
 };
 var _default = exports.default = TableBody;

package/lib/table-component/body/TableBodyCell.d.ts

@@ -1,10 +1,12 @@
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../type";
 import React from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick) => void;
     table: Table<T>;
+    virtualRow?: VirtualItem;
 }
 declare const TableBodyCell: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;
 export default TableBodyCell;