es-grid-template 1.8.29 → 1.8.31

package/es/table-component/TableContainerEdit.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
+import { useCopyToClipboard } from 'usehooks-ts';
 import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isFormattedNumber, newGuid, parseExcelClipboardText, sumSize,
 // sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
@@ -134,6 +135,7 @@ const TableContainerEdit = props => {
 
   // //The virtualizers need to know the scrollable container element
   const tableContainerRef = React.useRef(null);
+  const [, copy] = useCopyToClipboard();
 
   // const columnSizingState = table.getState().columnSizing;
 
@@ -385,7 +387,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.useCallback(newData => {
     onDataChange?.(newData);
@@ -614,14 +619,14 @@ const TableContainerEdit = props => {
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
   React.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.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

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

@@ -7,20 +7,7 @@ import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
 import { TableContext } from "../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>
-//   )
-// }
-
+import { toggleRowSelection } from "../hook/useColumns";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -93,6 +80,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.createElement("div", {
     style: {}
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -129,35 +118,16 @@ const renderSelection = args => {
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
-    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
-        });
-      }
+      toggleRowSelection({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     },
     disabled: !row.getCanSelect()
   })));
@@ -416,11 +386,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) {
@@ -485,45 +451,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 => {
+      toggleRowSelection({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {})

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

@@ -14,6 +14,7 @@ import React from "react";
 import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
 import { nonActionColumn } from "../hook/constant";
+import { toggleRowSelection } from "../hook/useColumns";
 // import { nonActionColumn } from "../hook/constant";
 
 const renderCellIndex = props => {
@@ -100,7 +101,9 @@ const renderSelection = args => {
     }
   }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {
@@ -130,32 +133,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 => {
+      toggleRowSelection({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
     },
     disabled: !row.getCanSelect()
   })));
@@ -823,7 +842,9 @@ const TableBodyCellEdit = props => {
       }
     }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
       // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
+      onClick: e => {
+        e.stopPropagation();
+        e.preventDefault();
         const keys = Object.keys(expanded);
         // @ts-ignore
         const tmp = {
@@ -900,40 +921,7 @@ const TableBodyCellEdit = props => {
         // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
-    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.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.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/React.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/React.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,
@@ -1029,27 +1017,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),
@@ -1113,10 +1082,6 @@ const TableBodyCellEdit = props => {
             handleChange();
             setEditingKey?.('');
             reset?.();
-
-            // setTimeout(() => {
-
-            // })
           }
         }
       }
@@ -1146,7 +1111,9 @@ const TableBodyCellEdit = props => {
     }
   }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
     // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
       const keys = Object.keys(expanded);
       // @ts-ignore
       const tmp = {

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

@@ -9,7 +9,7 @@ import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';
 import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
-import { excludeItems, extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { excludeItems, extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter, removeDuplicatesByKey } from "../hook/utils";
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
@@ -267,10 +267,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 = excludeItems(aa, dd);
+        const cc = excludeItems(prevSelected, allRowsInPage);
         setIsSelectionChange({
           isChange: true,
           type: 'all',
@@ -278,14 +278,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 = removeDuplicatesByKey(abc, 'id');
         setIsSelectionChange({
           isChange: true,
           type: 'all',
           rowData: {},
-          rowsData: abc
+          rowsData: newSeletedRows
         });
       }
     }

package/es/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/es/table-component/hook/useColumns.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ControlCheckbox from "../components/ControlCheckbox";
-import { checkDecimalSeparator, checkThousandSeparator, getFormat, isColor, isEmpty, sortByType } from "./utils";
+import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
 import { numericFormatter } from 'react-numeric-component';
 import dayjs from 'dayjs';
 import moment from 'moment';
@@ -170,4 +170,115 @@ export function convertToTanStackColumns({
     }
     return newCol;
   });
-}
+}
+export 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 = getAllChildren(row);
+    toggleRowAndChildren(row, !row.getIsSelected());
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+      const newRowsSelected = 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() && 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
+      });
+    }
+  }
+};

package/es/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/es/table-component/hook/utils.js

@@ -2171,4 +2171,44 @@ export 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));
+}
+export 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));
+//   }, []);
+// }
+
+export 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));
+  }
+}
+export 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;
+}
+export 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/es/table-component/table/Grid.js

@@ -190,7 +190,7 @@ const Grid = props => {
       //   ...prev,
       //   isChange: false
       // }))
-      setRowSelection(convertToObjTrue(mergedSelectedKeys));
+      // setRowSelection(convertToObjTrue(mergedSelectedKeys))
     }
   }, [mergedSelectedKeys]);
   React.useEffect(() => {
@@ -204,6 +204,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 = 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)

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

@@ -476,6 +476,7 @@ export type SelectionSettings<T = AnyObject> = {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
+    checkStrictly?: boolean;
     columnWidth?: number;
     hideSelectAll?: boolean;
     selectedRowKeys?: Key[];