es-grid-template 1.7.35 → 1.7.37

package/es/table-component/InternalTable.js

@@ -61,6 +61,7 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    selectionSettings,
     // infiniteScroll,
     // wrapSettings,
     // onFilter,
@@ -164,6 +165,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
     value: undefined
   });
+
+  // ========================= Keys =========================
+
+  const {
+    selectedRowKeys,
+    defaultSelectedRowKeys
+  } = selectionSettings ?? {};
+  const [mergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || [], {
+    value: selectedRowKeys
+  });
   const mergedData = React.useMemo(() => {
     return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys);
   }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
@@ -290,7 +301,9 @@ const InternalTable = props => {
     setIsFullScreen: setIsFullScreen,
     windowSize: windowSize,
     height: height,
-    isDataTree: isDataTree
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -322,8 +335,10 @@ const InternalTable = props => {
       paddingTop: 40
     }
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
-    t: t,
-    id: isFullScreen ? faker.string.alpha(20) : id,
+    t: t
+    // id={isFullScreen ? faker.string.alpha(20) : id}
+    ,
+    id: faker.string.alpha(20),
     prefix: prefix,
     originData: convertData,
     dataSource: mergedData,
@@ -354,7 +369,9 @@ const InternalTable = props => {
     setIsFullScreen: setIsFullScreen,
     height: windowSize.innerHeight - 70,
     windowSize: windowSize,
-    isDataTree: isDataTree
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys
   })))));
 };
 export default InternalTable;

package/es/table-component/TableContainerEdit.js

@@ -664,24 +664,19 @@ const TableContainerEdit = props => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
-
-  // React.useEffect(() => {
-  //   if (!containerRef.current) return;
-
-  //   const containerWidth = containerRef.current.offsetWidth - 2;
-  //   const totalWidth = table.getTotalSize();
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-  //     const factor = containerWidth / totalWidth;
-
-  //     table.setColumnSizing(
-  //       table.getAllLeafColumns().reduce((acc, col) => {
-  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
-  //         return acc;
-  //       }, {} as Record<string, number>)
-  //     );
-  //   }
-  // }, [table.getTotalSize(), windowSize.innerWidth])
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const containerWidth = containerRef.current.offsetWidth - 1;
+    const totalWidth = table.getTotalSize();
+    if (totalWidth && totalWidth < containerWidth) {
+      const factor = containerWidth / totalWidth;
+      table.setColumnSizing(table.getAllLeafColumns().reduce((acc, col) => {
+        acc[col.id] = (col.getSize() || col.columnDef.size || 150) * factor;
+        return acc;
+      }, {}));
+    }
+  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
   React.useEffect(() => {
     const totalHeight = minHeight ?? height;

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

@@ -9,6 +9,7 @@ getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSele
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 // import type { Dispatch, SetStateAction } from "react";
+
 import React from "react";
 import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
@@ -69,16 +70,73 @@ const renderSelection = args => {
   const {
     row
   } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
+  const {
+    selectionSettings,
+    setIsSelectionChange
+  } = args;
   return /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc_cell-content",
     style: {
 
       // paddingLeft: `${row.depth * 2}rem`,
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
-    checked: row.getIsSelected(),
-    indeterminate: row.getIsSomeSelected(),
-    onChange: row.getToggleSelectedHandler()
+  }, 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"
+  }))), /*#__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() }
+    ,
+    onChange: e => {
+      row.getToggleSelectedHandler()(e);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original
+      });
+      // row.toggleSelected()
+
+      // table.setRowSelection({
+      //   [row.id]: true
+      // })
+    }
   })));
 };
 const TableBodyCellEdit = props => {
@@ -129,7 +187,9 @@ const TableBodyCellEdit = props => {
     setExpanded,
     expandable,
     isDataTree,
-    handleCellClick
+    handleCellClick,
+    setIsSelectionChange,
+    selectionSettings
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -412,7 +472,7 @@ const TableBodyCellEdit = props => {
 
     // setRangePasteState(selectPasteState)
   }
-  const handleEdit = e => {
+  const handleEdit = (e, isKeyDown) => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
@@ -426,8 +486,10 @@ const TableBodyCellEdit = props => {
         setValue?.(name, value);
       });
     }
-    if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
-      setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+    if (isKeyDown) {
+      if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
+        setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      }
     }
     if (editType === 'select') {
 
@@ -592,13 +654,13 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
-      handleEdit(e);
+      handleEdit(e, true);
       return;
     }
     if (e.key.length === 1 && !e.ctrlKey) {
       e.preventDefault();
       e.stopPropagation();
-      handleEdit(e);
+      handleEdit(e, true);
       // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
     }
   }
@@ -665,8 +727,9 @@ const TableBodyCellEdit = props => {
         height: '36px',
         userSelect: 'none',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        // flexBasis: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       },
       onMouseDown: () => {
@@ -739,8 +802,8 @@ const TableBodyCellEdit = props => {
         display: 'flex',
         height: '36px',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, renderCommand({
@@ -764,8 +827,8 @@ const TableBodyCellEdit = props => {
         display: 'flex',
         height: '36px',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -801,8 +864,15 @@ const TableBodyCellEdit = props => {
       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"
-    }))), renderSelection({
-      cell
+    }))), cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex
     }));
   }
   const handleChange = () => {
@@ -865,8 +935,8 @@ const TableBodyCellEdit = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
-      // minWidth: cell.column.getSize(),
-      // maxWidth: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      maxWidth: cell.column.getSize(),
       height: '36px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined

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

@@ -130,5 +130,8 @@ export declare const updateColumns1: (columns: ColumnTable[], includes: string[]
 export declare const convertToObj: (arr: any) => {
     [k: string]: any;
 };
+export declare const convertToObjTrue: (arr: any) => {
+    [k: string]: any;
+};
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;

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

@@ -42,7 +42,7 @@ export const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
+    width: column.getSize(),
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,
@@ -1863,6 +1863,16 @@ export const convertToObj = arr => {
 
   return Object.fromEntries(arr.map(key => [key, false]));
 };
+export const convertToObjTrue = arr => {
+  // const result = Object.keys(obj).reduce((acc: any, key) => {
+  //   acc[key] = false;
+  //   return acc;
+  // }, {});
+
+  // return result
+
+  return Object.fromEntries(arr.map(key => [key, true]));
+};
 export const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
 };

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

@@ -1,6 +1,6 @@
 import type { ColumnDef, ColumnPinningState, ExpandedState, VisibilityState } from '@tanstack/react-table';
 import type { ColumnsTable, Sorter, TableProps } from '../type';
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, Key, SetStateAction } from 'react';
 import React from 'react';
 type Props<T> = Omit<TableProps<T>, 'columns'> & {
     id: string;
@@ -23,6 +23,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;
     isDataTree: boolean;
+    mergedSelectedKeys: Key[];
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -17,7 +17,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import React from 'react';
 import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
-import { convertFilters, filterDataByColumns, getAllRowKey } from "../hook/utils";
+import { convertFilters, convertToObjTrue, filterDataByColumns, getAllRowKey } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 const Grid = props => {
   const {
@@ -48,6 +48,7 @@ const Grid = props => {
     editAble,
     triggerChangeColumns,
     infiniteScroll,
+    mergedSelectedKeys,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -56,10 +57,15 @@ const Grid = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
-  const [rowSelection, setRowSelection] = React.useState({});
+
+  // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+
+  // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
+  const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
   const [grouping, setGrouping] = React.useState([]);
   const [columnSizing, setColumnSizing] = React.useState({});
-  // const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(columnHidden)
+  const [manualUpdate, setManualUpdate] = React.useState(false);
+  // const [manualResize, setManualResize] = React.useState(false)
 
   const [columnFilters, setColumnFilters] = React.useState([]);
   const [operator, setOperator] = React.useState([]);
@@ -97,7 +103,7 @@ const Grid = props => {
     getSubRows: row => row.children,
     // RowSelection
     enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
-    enableMultiRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableMultiRowSelection: selectionSettings && (selectionSettings.mode === 'checkbox' || selectionSettings.type !== 'single'),
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     // RowSelection
@@ -132,8 +138,24 @@ const Grid = props => {
 
     // debugTable: true
   });
+  React.useEffect(() => {
+    if (columnHidden) {
+      const abb = table.getVisibleLeafColumns()?.[0];
+      if (abb) {
+        setColumnSizing({
+          "#": abb.getSize()
+        });
+      }
+    }
+  }, [columnHidden, table]);
+  React.useEffect(() => {
+    if (!manualUpdate) {
+      setRowSelection(convertToObjTrue(mergedSelectedKeys));
+    }
+  }, [manualUpdate, mergedSelectedKeys]);
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
+      setManualUpdate(true);
       const aa = table.getState().rowSelection;
       const dataTable = table.getRowModel().flatRows;
       const ids = Object.keys(aa);
@@ -144,6 +166,10 @@ const Grid = props => {
         rowData: isSelectionChange.rowData,
         selected: rs
       });
+      setIsSelectionChange(prev => ({
+        ...prev,
+        isChange: false
+      }));
     }
   }, [isSelectionChange, rowSelected, rowSelection, table]);
   React.useEffect(() => {

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

@@ -173,7 +173,7 @@ const TableWrapper = props => {
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
     })
   }, /*#__PURE__*/React.createElement("div", {
-    id: id,
+    // id={id}
     ref: tableContainerRef,
     style: {
       overflow: 'auto',

package/lib/table-component/InternalTable.js

@@ -67,6 +67,7 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    selectionSettings,
     // infiniteScroll,
     // wrapSettings,
     // onFilter,
@@ -170,6 +171,16 @@ const InternalTable = props => {
   const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
     value: undefined
   });
+
+  // ========================= Keys =========================
+
+  const {
+    selectedRowKeys,
+    defaultSelectedRowKeys
+  } = selectionSettings ?? {};
+  const [mergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || [], {
+    value: selectedRowKeys
+  });
   const mergedData = _react.default.useMemo(() => {
     return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys);
   }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
@@ -296,7 +307,9 @@ const InternalTable = props => {
     setIsFullScreen: setIsFullScreen,
     windowSize: windowSize,
     height: height,
-    isDataTree: isDataTree
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -328,8 +341,10 @@ const InternalTable = props => {
       paddingTop: 40
     }
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
-    t: t,
-    id: isFullScreen ? _faker.faker.string.alpha(20) : id,
+    t: t
+    // id={isFullScreen ? faker.string.alpha(20) : id}
+    ,
+    id: _faker.faker.string.alpha(20),
     prefix: prefix,
     originData: convertData,
     dataSource: mergedData,
@@ -360,7 +375,9 @@ const InternalTable = props => {
     setIsFullScreen: setIsFullScreen,
     height: windowSize.innerHeight - 70,
     windowSize: windowSize,
-    isDataTree: isDataTree
+    isDataTree: isDataTree,
+    selectionSettings: selectionSettings,
+    mergedSelectedKeys: mergedSelectedKeys
   })))));
 };
 var _default = exports.default = InternalTable;

package/lib/table-component/TableContainerEdit.js

@@ -671,24 +671,19 @@ const TableContainerEdit = props => {
       columnVirtualizer.measure();
     });
   }, [columnSizingState, columnVirtualizer]);
-
-  // React.useEffect(() => {
-  //   if (!containerRef.current) return;
-
-  //   const containerWidth = containerRef.current.offsetWidth - 2;
-  //   const totalWidth = table.getTotalSize();
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-  //     const factor = containerWidth / totalWidth;
-
-  //     table.setColumnSizing(
-  //       table.getAllLeafColumns().reduce((acc, col) => {
-  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
-  //         return acc;
-  //       }, {} as Record<string, number>)
-  //     );
-  //   }
-  // }, [table.getTotalSize(), windowSize.innerWidth])
+  _react.default.useEffect(() => {
+    if (!containerRef.current) return;
+    const containerWidth = containerRef.current.offsetWidth - 1;
+    const totalWidth = table.getTotalSize();
+    if (totalWidth && totalWidth < containerWidth) {
+      const factor = containerWidth / totalWidth;
+      table.setColumnSizing(table.getAllLeafColumns().reduce((acc, col) => {
+        acc[col.id] = (col.getSize() || col.columnDef.size || 150) * factor;
+        return acc;
+      }, {}));
+    }
+  }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing]);
+  // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
 
   _react.default.useEffect(() => {
     const totalHeight = minHeight ?? height;

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

@@ -76,16 +76,73 @@ const renderSelection = args => {
   const {
     row
   } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
+  const {
+    selectionSettings,
+    setIsSelectionChange
+  } = args;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc_cell-content",
     style: {
 
       // paddingLeft: `${row.depth * 2}rem`,
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-    checked: row.getIsSelected(),
-    indeterminate: row.getIsSomeSelected(),
-    onChange: row.getToggleSelectedHandler()
+  }, 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"
+  }))), /*#__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() }
+    ,
+    onChange: e => {
+      row.getToggleSelectedHandler()(e);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original
+      });
+      // row.toggleSelected()
+
+      // table.setRowSelection({
+      //   [row.id]: true
+      // })
+    }
   })));
 };
 const TableBodyCellEdit = props => {
@@ -136,7 +193,9 @@ const TableBodyCellEdit = props => {
     setExpanded,
     expandable,
     isDataTree,
-    handleCellClick
+    handleCellClick,
+    setIsSelectionChange,
+    selectionSettings
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -419,7 +478,7 @@ const TableBodyCellEdit = props => {
 
     // setRangePasteState(selectPasteState)
   }
-  const handleEdit = e => {
+  const handleEdit = (e, isKeyDown) => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
@@ -433,8 +492,10 @@ const TableBodyCellEdit = props => {
         setValue?.(name, value);
       });
     }
-    if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
-      setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+    if (isKeyDown) {
+      if (e.key === 'Enter' || editType === 'date' || e.type === 'dblclick') {} else {
+        setValue(columnMeta.field, editType === 'numeric' ? !isNaN(Number(e.key)) ? Number(e.key) : '' : e.key);
+      }
     }
     if (editType === 'select') {
 
@@ -599,13 +660,13 @@ const TableBodyCellEdit = props => {
       return;
     }
     if (e.key === 'Enter') {
-      handleEdit(e);
+      handleEdit(e, true);
       return;
     }
     if (e.key.length === 1 && !e.ctrlKey) {
       e.preventDefault();
       e.stopPropagation();
-      handleEdit(e);
+      handleEdit(e, true);
       // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
     }
   }
@@ -672,8 +733,9 @@ const TableBodyCellEdit = props => {
         height: '36px',
         userSelect: 'none',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        // flexBasis: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       },
       onMouseDown: () => {
@@ -746,8 +808,8 @@ const TableBodyCellEdit = props => {
         display: 'flex',
         height: '36px',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, renderCommand({
@@ -771,8 +833,8 @@ const TableBodyCellEdit = props => {
         display: 'flex',
         height: '36px',
         width: cell.column.getSize(),
-        // minWidth: cell.column.getSize(),
-        // maxWidth: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
@@ -808,8 +870,15 @@ const TableBodyCellEdit = props => {
       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"
-    }))), renderSelection({
-      cell
+    }))), cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex
     }));
   }
   const handleChange = () => {
@@ -872,8 +941,8 @@ const TableBodyCellEdit = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
-      // minWidth: cell.column.getSize(),
-      // maxWidth: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      maxWidth: cell.column.getSize(),
       height: '36px',
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined

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

@@ -130,5 +130,8 @@ export declare const updateColumns1: (columns: ColumnTable[], includes: string[]
 export declare const convertToObj: (arr: any) => {
     [k: string]: any;
 };
+export declare const convertToObjTrue: (arr: any) => {
+    [k: string]: any;
+};
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;

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

@@ -18,7 +18,7 @@ exports.convertArrayWithIndent = void 0;
 exports.convertColumnsToTreeData = convertColumnsToTreeData;
 exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs = void 0;
 exports.convertFormat = convertFormat;
-exports.extendsObject = exports.detectSeparators = exports.customWeekStartEndFormat = exports.convertToObj = exports.convertLabelToTitle = void 0;
+exports.extendsObject = exports.detectSeparators = exports.customWeekStartEndFormat = exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
 exports.filterDataByColumns = filterDataByColumns;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
@@ -88,7 +88,7 @@ const getCommonPinningStyles = column => {
     // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
+    width: column.getSize(),
     zIndex: isPinned ? 2 : 0
     // border: '1px solid #e5e7eb',
     // borderTop: 0,
@@ -1961,6 +1961,17 @@ const convertToObj = arr => {
   return Object.fromEntries(arr.map(key => [key, false]));
 };
 exports.convertToObj = convertToObj;
+const convertToObjTrue = arr => {
+  // const result = Object.keys(obj).reduce((acc: any, key) => {
+  //   acc[key] = false;
+  //   return acc;
+  // }, {});
+
+  // return result
+
+  return Object.fromEntries(arr.map(key => [key, true]));
+};
+exports.convertToObjTrue = convertToObjTrue;
 const getDiffent2Array = (a, b) => {
   return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
 };

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

@@ -1,6 +1,6 @@
 import type { ColumnDef, ColumnPinningState, ExpandedState, VisibilityState } from '@tanstack/react-table';
 import type { ColumnsTable, Sorter, TableProps } from '../type';
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, Key, SetStateAction } from 'react';
 import React from 'react';
 type Props<T> = Omit<TableProps<T>, 'columns'> & {
     id: string;
@@ -23,6 +23,7 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerChangeColumns?: (args: any, keys: any, type: string) => void;
     windowSize: any;
     isDataTree: boolean;
+    mergedSelectedKeys: Key[];
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -50,6 +50,7 @@ const Grid = props => {
     editAble,
     triggerChangeColumns,
     infiniteScroll,
+    mergedSelectedKeys,
     ...rest
   } = props;
   const [columnResizeMode] = _react.default.useState('onChange');
@@ -58,10 +59,15 @@ const Grid = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
-  const [rowSelection, setRowSelection] = _react.default.useState({});
+
+  // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+
+  // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
+  const [rowSelection, setRowSelection] = _react.default.useState((0, _utils.convertToObjTrue)(mergedSelectedKeys));
   const [grouping, setGrouping] = _react.default.useState([]);
   const [columnSizing, setColumnSizing] = _react.default.useState({});
-  // const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(columnHidden)
+  const [manualUpdate, setManualUpdate] = _react.default.useState(false);
+  // const [manualResize, setManualResize] = React.useState(false)
 
   const [columnFilters, setColumnFilters] = _react.default.useState([]);
   const [operator, setOperator] = _react.default.useState([]);
@@ -99,7 +105,7 @@ const Grid = props => {
     getSubRows: row => row.children,
     // RowSelection
     enableSubRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
-    enableMultiRowSelection: selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single',
+    enableMultiRowSelection: selectionSettings && (selectionSettings.mode === 'checkbox' || selectionSettings.type !== 'single'),
     enableRowSelection: true,
     onRowSelectionChange: setRowSelection,
     // RowSelection
@@ -134,8 +140,24 @@ const Grid = props => {
 
     // debugTable: true
   });
+  _react.default.useEffect(() => {
+    if (columnHidden) {
+      const abb = table.getVisibleLeafColumns()?.[0];
+      if (abb) {
+        setColumnSizing({
+          "#": abb.getSize()
+        });
+      }
+    }
+  }, [columnHidden, table]);
+  _react.default.useEffect(() => {
+    if (!manualUpdate) {
+      setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+    }
+  }, [manualUpdate, mergedSelectedKeys]);
   _react.default.useEffect(() => {
     if (isSelectionChange.isChange) {
+      setManualUpdate(true);
       const aa = table.getState().rowSelection;
       const dataTable = table.getRowModel().flatRows;
       const ids = Object.keys(aa);
@@ -146,6 +168,10 @@ const Grid = props => {
         rowData: isSelectionChange.rowData,
         selected: rs
       });
+      setIsSelectionChange(prev => ({
+        ...prev,
+        isChange: false
+      }));
     }
   }, [isSelectionChange, rowSelected, rowSelection, table]);
   _react.default.useEffect(() => {

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

@@ -182,7 +182,7 @@ const TableWrapper = props => {
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
+    // id={id}
     ref: tableContainerRef,
     style: {
       overflow: 'auto',

package/package.json

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