es-grid-template 1.8.63 → 1.8.64

package/es/grid-component/type.d.ts

@@ -285,6 +285,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/es/table-component/InternalTable.js

@@ -200,10 +200,7 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
+    expanded: expanded,
     editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,

package/es/table-component/TableContainer.js

@@ -185,10 +185,6 @@ const TableContainer = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -239,7 +235,11 @@ const TableContainer = props => {
     t: t,
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns
-  })))), /*#__PURE__*/React.createElement(TableContext.Provider, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       t,
       locale,

package/es/table-component/TableContainerEdit.js

@@ -358,6 +358,9 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = React.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
+
+  // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
+
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -396,7 +399,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table]);
   const triggerChangeData = React.useCallback(newData => {
     onDataChange?.(newData);
-  }, [onDataChange]);
+  }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), callbackData);
@@ -955,6 +958,30 @@ const TableContainerEdit = props => {
     mode: 'onChange',
     resolver: validate ? yupResolver(validate) : undefined
   });
+  const handleAddMulti = React.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = getDefaultValue(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : newGuid()
+      });
+      const kkk = getAllRowKey(newRows) ?? [];
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+      setMergedFilterKeys?.(rs);
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const onSubmit = formData => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -975,6 +1002,26 @@ const TableContainerEdit = props => {
       console.log('Validate Failed:', errInfo);
     }
   };
+  const onSubmit2 = (formData, newOriginData) => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...newOriginData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
   const handleCellChange = args => {
     const {
       record,
@@ -1032,30 +1079,111 @@ const TableContainerEdit = props => {
       onSubmit(record);
     }
   };
-  const handleAddMulti = React.useCallback((item, n, newId) => {
-    if (item.onClick) {
-      item.onClick({
-        toolbar: item
-      });
-    } else {
-      const defaultRowValue = getDefaultValue(defaultValue);
-      const newRows = Array.from({
-        length: n
-      }).map(() => defaultRowValue ? {
-        ...defaultRowValue,
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      } : {
-        id: undefined,
-        rowId: n === 1 && newId ? newId : newGuid()
-      });
-      const kkk = getAllRowKey(newRows) ?? [];
-      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
-      setMergedFilterKeys?.(rs);
-      const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData);
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = getDefaultValue(defaultValue);
+    const newRowId = newGuid();
+    const newRows = Array.from({
+      length: 1
+    }).map(() => defaultRowValue ? {
+      ...defaultRowValue,
+      id: undefined,
+      rowId: newRowId
+    } : {
+      id: undefined,
+      rowId: newRowId
+    });
+    const kkk = getAllRowKey(newRows) ?? [];
+    const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+    setMergedFilterKeys?.(rs);
+    const newData = originData.concat(newRows);
+    setFocusedCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setStartCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setEndCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setTimeout(() => {
+      setRangeState?.(getSelectedCellMatrix(table, {
+        rowId: newRowId,
+        colId: field
+      }, {
+        rowId: newRowId,
+        colId: field
+      }));
+    });
+    setTimeout(() => {
+      const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+      const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+      if (cellFocus) {
+        cellFocus.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        cellFocus.focus();
+      }
+    }, 100);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        onSubmit2(callbackRecord, [...newData]);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit2(record, [...newData]);
+        }
+      }
     }
-  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
+
+    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
+
+    //   onSubmit(record)
+
+    // }
+  };
   const handleDuplicate = React.useCallback(() => {
     // không tính tree
 
@@ -1782,10 +1910,6 @@ const TableContainerEdit = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -1836,7 +1960,11 @@ const TableContainerEdit = props => {
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns,
     columnHidden: columnHidden
-  })))), /*#__PURE__*/React.createElement("form", {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
@@ -1888,6 +2016,7 @@ const TableContainerEdit = props => {
       setValue,
       reset,
       handleCellChange,
+      handleCellChangeAndAddRow,
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,

package/es/table-component/body/TableBodyCellEdit.js

@@ -227,7 +227,7 @@ const TableBodyCellEdit = props => {
     setValue,
     getValues,
     handleCellChange,
-    // handleAddMulti,
+    handleCellChangeAndAddRow,
     dataErrors,
     expanded,
     setExpanded,
@@ -237,17 +237,13 @@ const TableBodyCellEdit = props => {
     isSelectionChange,
     setIsSelectionChange,
     selectionSettings,
-    pagination
+    pagination,
+    handleAddMulti
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -783,6 +779,8 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
       handleEdit(e, true);
       return;
     }
@@ -1038,6 +1036,64 @@ const TableBodyCellEdit = props => {
         indexRow: currentRowIndex,
         type: 'blur'
       });
+    } else {}
+  };
+  const handleChangeAndCreateRow = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      // vừa cell change + add new row
+      handleCellChangeAndAddRow?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {
+      // chỉ add new row
+
+      const newRowId = newGuid();
+      handleAddMulti?.({}, 1, newRowId);
+      setFocusedCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setStartCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setEndCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setTimeout(() => {
+        setRangeState?.(getSelectedCellMatrix(table, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }));
+      });
+      setTimeout(() => {
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+          cellFocus.focus();
+        }
+      }, 100);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -1110,9 +1166,10 @@ const TableBodyCellEdit = props => {
       if (!isEditing) {
         handleKeyDown(e, cell.row.id, cell.column.id);
       } else {
-        // setStartCell?.(undefined)
-
-        if (e.shiftKey && e.key === 'Enter') {} else {
+        if (e.shiftKey && e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        } else {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
@@ -1141,29 +1198,10 @@ const TableBodyCellEdit = props => {
               rowVirtualizer.scrollToIndex(nextRow.index, {
                 align: 'center'
               });
+              handleChange();
             } else {
-
-              // const newRowId = newGuid()
-              // handleAddMulti?.({}, 1, newRowId)
-
-              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
-              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setTimeout(() => {
-              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
-              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
-
-              // })
-
-              // setTimeout(() => {
-
-              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
-
-              // }, 100)
+              handleChangeAndCreateRow();
             }
-            handleChange();
             setEditingKey?.('');
             reset?.();
           }

package/es/table-component/hook/utils.d.ts

@@ -154,3 +154,5 @@ export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
 export declare const getTableHeight: (height?: number, minHeight?: number) => number;
 export declare const convertFlatColumn1: (array: ColumnsTable) => ColumnsTable[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;

package/es/table-component/hook/utils.js

@@ -1,4 +1,4 @@
-import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
+// import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection"
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
 // import moment from "moment/moment"
@@ -263,7 +263,7 @@ export function groupArrayByColumns(arr, columns) {
 export const flatColumns2 = columns => {
   return columns.reduce((list, column) => {
     const subColumns = column.children;
-    if (column === SELECTION_COLUMN) {
+    if (column.field === 'selection_column') {
       return [...list, {
         ...column
       }];
@@ -2180,4 +2180,41 @@ export const convertFlatColumn1 = array => {
     }
   });
   return result;
+};
+export const updateColumnsByGroup = (columns, columnsGroup) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup);
+      hasVisibleChild = newColumn.children.some(child => child.visible !== false);
+    }
+
+    // Map previous behaviour (hidden = true when field in columnsGroup)
+    // to the new `visible` property: visible = !hidden
+    newColumn.visible = !(newColumn.field && columnsGroup.includes(newColumn.field));
+
+    // For parent columns, visibility depends on whether any child is visible
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !!hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+export const removeColumns = (columns, groupColumns) => {
+  const ttt = [...columns];
+  return ttt.filter(column => !groupColumns.includes(column.field)).map(column => {
+    const newCol = {
+      ...column
+    };
+    if (newCol?.children && newCol?.children.length > 0) {
+      newCol.children = removeColumns(newCol.children, groupColumns);
+    }
+    return newCol;
+  });
 };

package/es/table-component/table/Grid.js

@@ -59,6 +59,7 @@ const Grid = props => {
     mergedSelectedKeys,
     allowResizing,
     windowSize,
+    fullScreenTitle,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -316,9 +317,7 @@ const Grid = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    }
-    // onClose={() => setIsFullScreen(false)}
-    ,
+    },
     onCancel: () => setIsFullScreen(false)
 
     // destroyOnClose
@@ -333,12 +332,16 @@ const Grid = props => {
         zIndex: 1050
       }
     },
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingTop: 40
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, /*#__PURE__*/React.createElement(GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: classNames(`${prefix}-grid`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'

package/es/table-component/table/TableWrapper.js

@@ -180,11 +180,9 @@ const TableWrapper = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      // height: height, //should be a fixed height
       maxHeight: height,
       //should be a fixed height
       minHeight: minHeight ? height : undefined //should be a fixed height
-      // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}
     ,

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

@@ -198,6 +198,7 @@ export type TableProps<RecordType = AnyObject> = {
         color?: string;
     };
     title?: ReactNode | ((data: RecordType) => ReactNode);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;
     next?: () => void;

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

@@ -48,6 +48,7 @@ export interface IContext<T> {
     reset?: any;
     setValue?: any;
     handleCellChange?: (args: ContextCellChange) => void;
+    handleCellChangeAndAddRow?: (args: ContextCellChange) => void;
     editingKey?: string;
     setEditingKey?: Dispatch<SetStateAction<string>>;
     rangeState?: RangeState;
@@ -86,11 +87,12 @@ export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {
     key: string;
     record: any;
-    field: string | undefined;
+    field: string;
     option: any;
     indexRow: number;
     indexCol: number;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
+    addNewRow?: boolean;
 };

package/lib/grid-component/type.d.ts

@@ -285,6 +285,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/lib/table-component/InternalTable.js

@@ -205,10 +205,7 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
+    expanded: expanded,
     editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,

package/lib/table-component/TableContainer.js

@@ -192,10 +192,6 @@ const TableContainer = props => {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -246,7 +242,11 @@ const TableContainer = props => {
     t: t,
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns
-  })))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
       t,
       locale,

package/lib/table-component/TableContainerEdit.js

@@ -365,6 +365,9 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = _react.default.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = _react.default.useState(0);
+
+  // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
+
   const rowsFocus = _react.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
@@ -403,7 +406,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table]);
   const triggerChangeData = _react.default.useCallback(newData => {
     onDataChange?.(newData);
-  }, [onDataChange]);
+  }, [onDataChange, dataSource]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), callbackData);
@@ -962,6 +965,30 @@ const TableContainerEdit = props => {
     mode: 'onChange',
     resolver: validate ? (0, _yup.yupResolver)(validate) : undefined
   });
+  const handleAddMulti = _react.default.useCallback((item, n, newId) => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
+      const newRows = Array.from({
+        length: n
+      }).map(() => defaultRowValue ? {
+        ...defaultRowValue,
+        id: undefined,
+        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
+      } : {
+        id: undefined,
+        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
+      });
+      const kkk = (0, _utils.getAllRowKey)(newRows) ?? [];
+      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+      setMergedFilterKeys?.(rs);
+      const newData = dataSource.concat(newRows);
+      triggerChangeData?.(newData);
+    }
+  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
   const onSubmit = formData => {
     try {
       // const record = (await form.validateFields()) as RecordType;
@@ -982,6 +1009,26 @@ const TableContainerEdit = props => {
       console.log('Validate Failed:', errInfo);
     }
   };
+  const onSubmit2 = (formData, newOriginData) => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...newOriginData];
+
+      // @ts-ignore
+      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);
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
   const handleCellChange = args => {
     const {
       record,
@@ -1039,30 +1086,111 @@ const TableContainerEdit = props => {
       onSubmit(record);
     }
   };
-  const handleAddMulti = _react.default.useCallback((item, n, newId) => {
-    if (item.onClick) {
-      item.onClick({
-        toolbar: item
-      });
-    } else {
-      const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
-      const newRows = Array.from({
-        length: n
-      }).map(() => defaultRowValue ? {
-        ...defaultRowValue,
-        id: undefined,
-        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
-      } : {
-        id: undefined,
-        rowId: n === 1 && newId ? newId : (0, _utils.newGuid)()
-      });
-      const kkk = (0, _utils.getAllRowKey)(newRows) ?? [];
-      const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
-      setMergedFilterKeys?.(rs);
-      const newData = dataSource.concat(newRows);
-      triggerChangeData?.(newData);
+  const handleCellChangeAndAddRow = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+
+    // add new row
+
+    const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
+    const newRowId = (0, _utils.newGuid)();
+    const newRows = Array.from({
+      length: 1
+    }).map(() => defaultRowValue ? {
+      ...defaultRowValue,
+      id: undefined,
+      rowId: newRowId
+    } : {
+      id: undefined,
+      rowId: newRowId
+    });
+    const kkk = (0, _utils.getAllRowKey)(newRows) ?? [];
+    const rs = mergedFilterKeys ? [...mergedFilterKeys, ...kkk] : [...kkk];
+    setMergedFilterKeys?.(rs);
+    const newData = originData.concat(newRows);
+    setFocusedCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setStartCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setEndCell?.({
+      rowId: newRowId,
+      colId: field
+    });
+    setTimeout(() => {
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+        rowId: newRowId,
+        colId: field
+      }, {
+        rowId: newRowId,
+        colId: field
+      }));
+    });
+    setTimeout(() => {
+      const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+      const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+      if (cellFocus) {
+        cellFocus.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        cellFocus.focus();
+      }
+    }, 100);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        onSubmit2(callbackRecord, [...newData]);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            rowsData: [...newData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit2(record, [...newData]);
+        }
+      }
     }
-  }, [dataSource, defaultValue, mergedFilterKeys, setMergedFilterKeys, triggerChangeData]);
+
+    // if (prevState && newState && prevState !== newState && changeType === 'enter') {
+
+    //   onSubmit(record)
+
+    // }
+  };
   const handleDuplicate = _react.default.useCallback(() => {
     // không tính tree
 
@@ -1789,10 +1917,6 @@ const TableContainerEdit = props => {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -1843,7 +1967,11 @@ const TableContainerEdit = props => {
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns,
     columnHidden: columnHidden
-  })))), /*#__PURE__*/_react.default.createElement("form", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
@@ -1895,6 +2023,7 @@ const TableContainerEdit = props => {
       setValue,
       reset,
       handleCellChange,
+      handleCellChangeAndAddRow,
       triggerPaste,
       handleDeleteContent,
       handleAddMulti,

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

@@ -233,7 +233,7 @@ const TableBodyCellEdit = props => {
     setValue,
     getValues,
     handleCellChange,
-    // handleAddMulti,
+    handleCellChangeAndAddRow,
     dataErrors,
     expanded,
     setExpanded,
@@ -243,17 +243,13 @@ const TableBodyCellEdit = props => {
     isSelectionChange,
     setIsSelectionChange,
     selectionSettings,
-    pagination
+    pagination,
+    handleAddMulti
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
@@ -789,6 +785,8 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
       handleEdit(e, true);
       return;
     }
@@ -1044,6 +1042,64 @@ const TableBodyCellEdit = props => {
         indexRow: currentRowIndex,
         type: 'blur'
       });
+    } else {}
+  };
+  const handleChangeAndCreateRow = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      // vừa cell change + add new row
+      handleCellChangeAndAddRow?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    } else {
+      // chỉ add new row
+
+      const newRowId = (0, _utils.newGuid)();
+      handleAddMulti?.({}, 1, newRowId);
+      setFocusedCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setStartCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setEndCell?.({
+        rowId: newRowId,
+        colId: cell.column.id
+      });
+      setTimeout(() => {
+        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }, {
+          rowId: newRowId,
+          colId: cell.column.id
+        }));
+      });
+      setTimeout(() => {
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${newRowId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.scrollIntoView({
+            behavior: "smooth",
+            block: "start"
+          });
+          cellFocus.focus();
+        }
+      }, 100);
     }
   };
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -1116,9 +1172,10 @@ const TableBodyCellEdit = props => {
       if (!isEditing) {
         handleKeyDown(e, cell.row.id, cell.column.id);
       } else {
-        // setStartCell?.(undefined)
-
-        if (e.shiftKey && e.key === 'Enter') {} else {
+        if (e.shiftKey && e.key === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+        } else {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
@@ -1147,29 +1204,10 @@ const TableBodyCellEdit = props => {
               rowVirtualizer.scrollToIndex(nextRow.index, {
                 align: 'center'
               });
+              handleChange();
             } else {
-
-              // const newRowId = newGuid()
-              // handleAddMulti?.({}, 1, newRowId)
-
-              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
-              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
-
-              // setTimeout(() => {
-              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
-              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
-
-              // })
-
-              // setTimeout(() => {
-
-              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
-
-              // }, 100)
+              handleChangeAndCreateRow();
             }
-            handleChange();
             setEditingKey?.('');
             reset?.();
           }

package/lib/table-component/hook/utils.d.ts

@@ -154,3 +154,5 @@ export declare function countUnselectedChildren(row: Row<any>): number;
 export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
 export declare const getTableHeight: (height?: number, minHeight?: number) => number;
 export declare const convertFlatColumn1: (array: ColumnsTable) => ColumnsTable[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;

package/lib/table-component/hook/utils.js

@@ -53,6 +53,7 @@ exports.parseClipboardEvent = parseClipboardEvent;
 exports.parseExcelClipboard = parseExcelClipboard;
 exports.parseExcelClipboardText = parseExcelClipboardText;
 exports.parseExcelText = parseExcelText;
+exports.removeColumns = void 0;
 exports.removeDuplicatesByKey = removeDuplicatesByKey;
 exports.sortByType = exports.shouldInclude = exports.removeVietnameseTones = void 0;
 exports.sortData = sortData;
@@ -60,14 +61,15 @@ exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
 exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
-exports.updateColumns1 = void 0;
+exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
 exports.updateWidthsByOther = updateWidthsByOther;
-var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
 var _uuid = require("uuid");
 var _colors = require("@ant-design/colors");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment"));
+// import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection"
+
 // import moment from "moment/moment"
 
 const newGuid = () => {
@@ -343,7 +345,7 @@ function groupArrayByColumns(arr, columns) {
 const flatColumns2 = columns => {
   return columns.reduce((list, column) => {
     const subColumns = column.children;
-    if (column === _useSelection.SELECTION_COLUMN) {
+    if (column.field === 'selection_column') {
       return [...list, {
         ...column
       }];
@@ -2304,4 +2306,43 @@ const convertFlatColumn1 = array => {
   });
   return result;
 };
-exports.convertFlatColumn1 = convertFlatColumn1;
+exports.convertFlatColumn1 = convertFlatColumn1;
+const updateColumnsByGroup = (columns, columnsGroup) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup);
+      hasVisibleChild = newColumn.children.some(child => child.visible !== false);
+    }
+
+    // Map previous behaviour (hidden = true when field in columnsGroup)
+    // to the new `visible` property: visible = !hidden
+    newColumn.visible = !(newColumn.field && columnsGroup.includes(newColumn.field));
+
+    // For parent columns, visibility depends on whether any child is visible
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !!hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+exports.updateColumnsByGroup = updateColumnsByGroup;
+const removeColumns = (columns, groupColumns) => {
+  const ttt = [...columns];
+  return ttt.filter(column => !groupColumns.includes(column.field)).map(column => {
+    const newCol = {
+      ...column
+    };
+    if (newCol?.children && newCol?.children.length > 0) {
+      newCol.children = removeColumns(newCol.children, groupColumns);
+    }
+    return newCol;
+  });
+};
+exports.removeColumns = removeColumns;

package/lib/table-component/table/Grid.js

@@ -63,6 +63,7 @@ const Grid = props => {
     mergedSelectedKeys,
     allowResizing,
     windowSize,
+    fullScreenTitle,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -320,9 +321,7 @@ const Grid = props => {
     style: {
       maxWidth: '100%',
       height: '100%'
-    }
-    // onClose={() => setIsFullScreen(false)}
-    ,
+    },
     onCancel: () => setIsFullScreen(false)
 
     // destroyOnClose
@@ -337,12 +336,16 @@ const Grid = props => {
         zIndex: 1050
       }
     },
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
     destroyOnClose: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      paddingTop: 40
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {}
+  }, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: (0, _classnames.default)(`${prefix}-grid`, {
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'

package/lib/table-component/table/TableWrapper.js

@@ -189,11 +189,9 @@ const TableWrapper = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      // height: height, //should be a fixed height
       maxHeight: height,
       //should be a fixed height
       minHeight: minHeight ? height : undefined //should be a fixed height
-      // minWidth: table.getTotalSize()
     }
     // onScroll={infiniteScroll ? handleScroll : undefined}
     ,

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

@@ -198,6 +198,7 @@ export type TableProps<RecordType = AnyObject> = {
         color?: string;
     };
     title?: ReactNode | ((data: RecordType) => ReactNode);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;
     next?: () => void;

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

@@ -48,6 +48,7 @@ export interface IContext<T> {
     reset?: any;
     setValue?: any;
     handleCellChange?: (args: ContextCellChange) => void;
+    handleCellChangeAndAddRow?: (args: ContextCellChange) => void;
     editingKey?: string;
     setEditingKey?: Dispatch<SetStateAction<string>>;
     rangeState?: RangeState;
@@ -86,11 +87,12 @@ export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {
     key: string;
     record: any;
-    field: string | undefined;
+    field: string;
     option: any;
     indexRow: number;
     indexCol: number;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
+    addNewRow?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.63",
+  "version": "1.8.64",
   "description": "es-grid-template",
   "keywords": [
     "react",