es-grid-template 1.8.29 → 1.8.31

package/lib/table-component/TableContainerEdit.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _usehooksTs = require("usehooks-ts");
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _reactHookForm = require("react-hook-form");
@@ -141,6 +142,7 @@ const TableContainerEdit = props => {
 
   // //The virtualizers need to know the scrollable container element
   const tableContainerRef = _react.default.useRef(null);
+  const [, copy] = (0, _usehooksTs.useCopyToClipboard)();
 
   // const columnSizingState = table.getState().columnSizing;
 
@@ -392,7 +394,10 @@ const TableContainerEdit = props => {
     const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
 
     // Copy to clipboard
-    navigator.clipboard.writeText(tsv).then(() => {});
+    // navigator.clipboard.writeText(tsv).then(() => {
+    // });
+
+    copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
   const triggerChangeData = _react.default.useCallback(newData => {
     onDataChange?.(newData);
@@ -621,14 +626,14 @@ const TableContainerEdit = props => {
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   _react.default.useEffect(() => {
     const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell) {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
         e.preventDefault();
         copySelectionToClipboard();
       }
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, table, copySelectionToClipboard]);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
   _react.default.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

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

@@ -14,20 +14,7 @@ var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkb
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
-// const renderCellIndex = (props: Props<any>) => {
-
-//   const { parrents, cell } = props
-//   return (
-//     <span className="ui-rc_cell-content">
-//       {parrents.map((pr) => {
-//         return `${pr.index + 1}.`;
-//       })}
-
-//       {cell.row.index + 1}
-//     </span>
-//   )
-// }
-
+var _useColumns = require("../hook/useColumns");
 const renderCellIndex = props => {
   const {
     parrents,
@@ -100,6 +87,8 @@ const renderSelection = args => {
     setIsSelectionChange,
     isSelectionChange
   } = args;
+  const checked = selectionSettings?.checkStrictly ? row.getIsSelected() : row.getIsSelected() || row.getIsAllSubRowsSelected();
+  const indeterminate = selectionSettings?.type == 'single' || selectionSettings?.checkStrictly ? false : row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' || row.getIsSomeSelected();
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {}
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
@@ -136,35 +125,16 @@ const renderSelection = args => {
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
   }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-    checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
-    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
-    // indeterminate={row.getIsSomeSelected() }
-    ,
+    checked: checked,
+    indeterminate: indeterminate,
     onChange: e => {
-      row.getToggleSelectedHandler()(e);
-      if (row.getIsSelected()) {
-        // nếu đã chọn
-
-        const aaa = isSelectionChange?.rowsData.filter(it => it.id !== row.id);
-        setIsSelectionChange({
-          isChange: true,
-          type: 'rowSelected',
-          rowData: row.original,
-          rowsData: aaa ?? []
-        });
-      } else {
-        const {
-          rowsData
-        } = isSelectionChange ?? {};
-        const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
-        abc.push(row);
-        setIsSelectionChange({
-          isChange: true,
-          type: 'rowSelected',
-          rowData: row.original,
-          rowsData: abc
-        });
-      }
+      (0, _useColumns.toggleRowSelection)({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     },
     disabled: !row.getCanSelect()
   })));
@@ -423,11 +393,7 @@ const TableBodyCell = props => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
       }
-    }
-
-    // onMouseUp={() => { }}
-    ,
-
+    },
     onKeyDown: e => {
       const flatRows = table.getRowModel().flatRows;
       if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
@@ -492,45 +458,19 @@ const TableBodyCell = props => {
           });
         }
       }
-    },
-    onDoubleClick: () => {},
-    onClick: e => {
-      if (selectionSettings?.checkboxOnly !== true && cell.row.getCanSelect()) {
-        const isInsideCell = e.target.closest(".ui-rc-grid-cell");
-        if (isInsideCell) {
-          cell.row.getToggleSelectedHandler()(e);
-          // setIsSelectionChange({
-          //   isChange: true,
-          //   type: 'rowSelected',
-          //   rowData: cell.row.original,
-          //   rowsData: []
-          // })
+    }
 
-          if (cell.row.getIsSelected()) {
-            // nếu đã chọn
+    // onDoubleClick={() => { }}
+    ,
 
-            const aaa = isSelectionChange?.rowsData.filter(it => it.id !== cell.row.id);
-            setIsSelectionChange({
-              isChange: true,
-              type: 'rowSelected',
-              rowData: cell.row.original,
-              rowsData: aaa ?? []
-            });
-          } else {
-            const {
-              rowsData
-            } = isSelectionChange ?? {};
-            const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
-            abc.push(cell.row);
-            setIsSelectionChange({
-              isChange: true,
-              type: 'rowSelected',
-              rowData: cell.row.original,
-              rowsData: abc
-            });
-          }
-        }
-      }
+    onClick: e => {
+      (0, _useColumns.toggleRowSelection)({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc_cell-content', {})

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

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
+var _useColumns = require("../hook/useColumns");
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -106,7 +107,9 @@ const renderSelection = args => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {
@@ -136,32 +139,48 @@ const renderSelection = args => {
     checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
     indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
     // indeterminate={row.getIsSomeSelected() }
+    // onChange={(e) => {
+
+    //   row.getToggleSelectedHandler()(e)
+
+    //   if (row.getIsSelected()) { // nếu đã chọn
+
+    //     const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+    //     setIsSelectionChange({
+    //       isChange: true,
+    //       type: 'rowSelected',
+    //       rowData: row.original,
+    //       rowsData: aaa ?? []
+    //     })
+
+    //   } else {
+
+    //     const { rowsData } = isSelectionChange ?? {}
+
+    //     const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
+
+    //     abc.push(row)
+
+    //     setIsSelectionChange({
+    //       isChange: true,
+    //       type: 'rowSelected',
+    //       rowData: row.original,
+    //       rowsData: abc
+    //     })
+    //   }
+
+    // }}
     ,
-    onChange: e => {
-      row.getToggleSelectedHandler()(e);
-      if (row.getIsSelected()) {
-        // nếu đã chọn
 
-        const aaa = isSelectionChange?.rowsData.filter(it => it.id !== row.id);
-        setIsSelectionChange({
-          isChange: true,
-          type: 'rowSelected',
-          rowData: row.original,
-          rowsData: aaa ?? []
-        });
-      } else {
-        const {
-          rowsData
-        } = isSelectionChange ?? {};
-        const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
-        abc.push(row);
-        setIsSelectionChange({
-          isChange: true,
-          type: 'rowSelected',
-          rowData: row.original,
-          rowsData: abc
-        });
-      }
+    onChange: e => {
+      (0, _useColumns.toggleRowSelection)({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     },
     disabled: !row.getCanSelect()
   })));
@@ -829,7 +848,9 @@ const TableBodyCellEdit = props => {
       }
     }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
       // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
+      onClick: e => {
+        e.stopPropagation();
+        e.preventDefault();
         const keys = Object.keys(expanded);
         // @ts-ignore
         const tmp = {
@@ -906,40 +927,7 @@ const TableBodyCellEdit = props => {
         // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
-    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), cell.column.id === "selection_column" && renderSelection({
+    }, cell.column.id === "selection_column" && renderSelection({
       cell,
       table,
       selectionSettings,
@@ -1035,27 +1023,8 @@ const TableBodyCellEdit = props => {
             setEditingKey?.('');
             reset?.();
           });
-
-          // const currentEditColumn  =  table.getVisibleFlatColumns().find((it) => it.id === focusedCell?.colId)
-
-          // if ()
-
-          // handleChange()
-          // setEditingKey?.('')
-          // reset?.()
         }
-
-        // reset?.()
       }
-
-      // if (record[rowKey] !== editingKey) {
-
-      //   setTimeout(() => {
-      //     // setEditingKey?.('')
-      //     reset?.()
-      //   })
-
-      // }
     },
     onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
@@ -1119,10 +1088,6 @@ const TableBodyCellEdit = props => {
             handleChange();
             setEditingKey?.('');
             reset?.();
-
-            // setTimeout(() => {
-
-            // })
           }
         }
       }
@@ -1152,7 +1117,9 @@ const TableBodyCellEdit = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {

package/lib/table-component/header/TableHeadCell2.js

@@ -276,10 +276,10 @@ const TableHeadCell2 = props => {
     indeterminate: table.getIsSomePageRowsSelected(),
     onChange: e => {
       table.getToggleAllRowsSelectedHandler()(e);
-      const aa = isSelectionChange?.rowsData ?? [];
+      const prevSelected = isSelectionChange?.rowsData ?? [];
+      const allRowsInPage = table.getRowModel().flatRows;
       if (table.getIsAllRowsSelected()) {
-        const dd = table.getRowModel().flatRows;
-        const cc = (0, _utils.excludeItems)(aa, dd);
+        const cc = (0, _utils.excludeItems)(prevSelected, allRowsInPage);
         setIsSelectionChange({
           isChange: true,
           type: 'all',
@@ -287,14 +287,13 @@ const TableHeadCell2 = props => {
           rowsData: cc
         });
       } else {
-        aa.concat(table.getRowModel().flatRows);
-        const bb = table.getRowModel().flatRows;
-        const abc = [...aa, ...bb];
+        const abc = [...prevSelected, ...allRowsInPage];
+        const newSeletedRows = (0, _utils.removeDuplicatesByKey)(abc, 'id');
         setIsSelectionChange({
           isChange: true,
           type: 'all',
           rowData: {},
-          rowsData: abc
+          rowsData: newSeletedRows
         });
       }
     }

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

@@ -1,5 +1,6 @@
-import type { ColumnsTable, ColumnTable, IFormat } from '../type';
-import type { ColumnDef } from '@tanstack/react-table';
+import type { Dispatch, SetStateAction } from "react";
+import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../type';
+import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
 export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
     t?: any;
@@ -7,3 +8,21 @@ export declare function convertToTanStackColumns<T>({ t, columns, format, editAb
     format?: IFormat;
     editAble?: boolean;
 }): ColumnDef<T, any>[];
+export type ToggleRow<T> = {
+    e: any;
+    cell: Cell<T, unknown>;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+};
+export declare const toggleRowSelection: <T>(props: ToggleRow<T>) => void;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToTanStackColumns = convertToTanStackColumns;
-exports.renderValueCell = void 0;
+exports.toggleRowSelection = exports.renderValueCell = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
 var _utils = require("./utils");
@@ -181,4 +181,116 @@ function convertToTanStackColumns({
     }
     return newCol;
   });
-}
+}
+const toggleRowSelection = props => {
+  const {
+    selectionSettings,
+    cell,
+    isSelectionChange,
+    e,
+    setIsSelectionChange
+  } = props;
+  const {
+    row
+  } = cell;
+  const {
+    rowsData
+  } = isSelectionChange ?? {};
+  const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
+  if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // xóa row ra list selected 
+      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      const checkedRows = [...prevSelected, row];
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+    return;
+  }
+  if (row.subRows && row.subRows.length > 0) {
+    const allChild = (0, _utils.getAllChildren)(row);
+    (0, _utils.toggleRowAndChildren)(row, !row.getIsSelected());
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+      const newRowsSelected = (0, _utils.excludeItems)(prevSelected, [...allChild, row]);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      if (row.subRows && row.subRows.length > 0) {
+        checkedRows = [...prevSelected, row, ...allChild];
+      } else {
+        checkedRows = [...prevSelected, row];
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  } else {
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // xóa row ra list selected 
+      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      const rowParent = row.getParentRow();
+
+      // console.log(countUnselectedChildren(row))
+
+      // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
+      if (rowParent && !rowParent.getIsSelected() && (0, _utils.countUnselectedChildren)(row) === 1) {
+        rowParent.toggleSelected(!rowParent.getIsSelected());
+        checkedRows = [...prevSelected, row, rowParent];
+      } else {
+        // chỉ thêm vào row hiện tại
+
+        checkedRows = [...prevSelected, row];
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  }
+};
+exports.toggleRowSelection = toggleRowSelection;

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

@@ -1,4 +1,4 @@
-import type { Table } from "@tanstack/react-table";
+import type { Row, Table } from "@tanstack/react-table";
 import { type Column } from "@tanstack/react-table";
 import type { VirtualItem } from "@tanstack/react-virtual";
 import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../type";
@@ -148,3 +148,7 @@ export declare function parseClipboardEvent(e: ClipboardEvent | React.ClipboardE
 export declare function arraysEqualIgnoreOrderFast(a: any[], b: any[]): boolean;
 export declare function filterByIds(a: any[], b: any[]): any[];
 export declare function excludeItems(arrayA: any[], arrayB: any[]): any[];
+export declare function getAllChildren(row: any): any;
+export declare function toggleRowAndChildren(row: Row<any>, isSelected?: boolean): void;
+export declare function countUnselectedChildren(row: Row<any>): number;
+export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];

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

@@ -19,14 +19,18 @@ exports.convertArrayWithIndent = void 0;
 exports.convertColumnsToTreeData = convertColumnsToTreeData;
 exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs = void 0;
 exports.convertFormat = convertFormat;
-exports.detectSeparators = exports.customWeekStartEndFormat = exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
+exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
+exports.countUnselectedChildren = countUnselectedChildren;
+exports.detectSeparators = exports.customWeekStartEndFormat = void 0;
 exports.excludeItems = excludeItems;
 exports.extendsObject = void 0;
 exports.filterByIds = filterByIds;
 exports.filterDataByColumns = filterDataByColumns;
 exports.findAllChildrenKeys2 = findAllChildrenKeys2;
 exports.findFirst = findFirst;
-exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
+exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
+exports.getAllChildren = getAllChildren;
+exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
 exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles2 = exports.getCommonPinningStyles = void 0;
@@ -50,9 +54,12 @@ exports.parseClipboardEvent = parseClipboardEvent;
 exports.parseExcelClipboard = parseExcelClipboard;
 exports.parseExcelClipboardText = parseExcelClipboardText;
 exports.parseExcelText = parseExcelText;
+exports.removeDuplicatesByKey = removeDuplicatesByKey;
 exports.sortByType = exports.shouldInclude = exports.removeVietnameseTones = void 0;
 exports.sortData = sortData;
-exports.updateArrayByKey = exports.unFlattenData = exports.sumSize = void 0;
+exports.sumSize = void 0;
+exports.toggleRowAndChildren = toggleRowAndChildren;
+exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
 exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
@@ -2287,4 +2294,44 @@ function excludeItems(arrayA, arrayB) {
 
   // Lọc A, chỉ giữ lại phần tử không có trong B
   return arrayA.filter(item => !idsInB.has(item.id));
+}
+function getAllChildren(row) {
+  const children = row.subRows ?? [];
+  return children.reduce((acc, child) => {
+    return acc.concat(child, getAllChildren(child));
+  }, []);
+}
+
+// export function toggleSelectAllChildren(row: any) {
+//   const children = row.subRows ?? [];
+
+//   return children.reduce((acc: any, child: any) => {
+//     return acc.concat(child, getAllChildren(child));
+//   }, []);
+// }
+
+function toggleRowAndChildren(row, isSelected) {
+  // Toggle chính row hiện tại
+  row.toggleSelected(isSelected);
+
+  // Nếu có subRows thì gọi đệ quy
+  if (row.subRows && row.subRows.length > 0) {
+    row.subRows.forEach(subRow => toggleRowAndChildren(subRow, isSelected));
+  }
+}
+function countUnselectedChildren(row) {
+  const parent = row.getParentRow();
+  if (!parent) return 0; // Không có cha thì return 0
+
+  const unselectedCount = parent.subRows.filter(child => !child.getIsSelected()).length;
+  return unselectedCount;
+}
+function removeDuplicatesByKey(arr, key = 'id') {
+  const map = new Map();
+  for (const item of arr) {
+    if (!map.has(item[key])) {
+      map.set(item[key], item);
+    }
+  }
+  return Array.from(map.values());
 }

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

@@ -192,7 +192,7 @@ const Grid = props => {
       //   ...prev,
       //   isChange: false
       // }))
-      setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+      // setRowSelection(convertToObjTrue(mergedSelectedKeys))
     }
   }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {
@@ -206,6 +206,7 @@ const Grid = props => {
 
       // const ssss = dataTable.filter(it => ids.includes(it.id)) // lấy rowsData của trang hiện tại
       const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
+      // const ssss = (isSelectionChange.rowsData ?? []) as any[] // lấy rowsData của trang hiện tại
 
       const rs = ssss.map(it => it.original);
       // const rs = allRows.map(it => it.original)