es-grid-template 1.7.34 → 1.7.36

package/es/table-component/InternalTable.js

@@ -51,8 +51,8 @@ export const SELECTION_COLUMN = {};
 const InternalTable = props => {
   const {
     t,
-    // columns: propsColumns,
-    columns,
+    columns: propsColumns,
+    // columns,
     lang,
     locale,
     dataSource,
@@ -61,6 +61,7 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    selectionSettings,
     // infiniteScroll,
     // wrapSettings,
     // onFilter,
@@ -126,6 +127,10 @@ const InternalTable = props => {
   const [filterStates, setFilterState] = React.useState(null);
   const [sorterStates, setSorterStates] = React.useState([]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const [columns, setColumns] = React.useState([]);
+  React.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
   const [expanded, setExpanded] = React.useState({});
   const convertData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -160,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]);
@@ -169,10 +184,14 @@ const InternalTable = props => {
   const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
     value: undefined
   });
-  const triggerChangeColumns = (cols, keys) => {
-    const aa = flatColumns2(columns).map(it => it.field);
-    const rsss = getDiffent2Array(aa, keys);
-    setColumnsHiddenKeys(rsss);
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = flatColumns2(columns).map(it => it.field);
+      const rsss = getDiffent2Array(aa, keys);
+      setColumnsHiddenKeys(rsss);
+    }
   };
 
   // const contextMenuItems = React.useMemo(() => {
@@ -282,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,
@@ -314,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,
@@ -346,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

@@ -116,7 +116,8 @@ const TableContainerEdit = props => {
     contextMenuHidden,
     showDefaultContext,
     commandSettings,
-    isDataTree
+    isDataTree,
+    onCellClick
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1442,6 +1443,33 @@ const TableContainerEdit = props => {
     }
     contextMenuClick?.(args);
   };
+  const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = updateArrayByKey([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: rowNumber,
+        rowId,
+        cellValue,
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
@@ -1554,7 +1582,8 @@ const TableContainerEdit = props => {
       handleDeleteContent,
       handleAddMulti,
       dataErrors,
-      windowSize
+      windowSize,
+      handleCellClick
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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 => {
@@ -128,7 +186,10 @@ const TableBodyCellEdit = props => {
     expanded,
     setExpanded,
     expandable,
-    isDataTree
+    isDataTree,
+    handleCellClick,
+    setIsSelectionChange,
+    selectionSettings
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -411,10 +472,11 @@ const TableBodyCellEdit = props => {
 
     // setRangePasteState(selectPasteState)
   }
-  const handleEdit = e => {
+  const handleEdit = (e, isKeyDown) => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
+    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -424,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') {
 
@@ -590,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)
     }
   }
@@ -663,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: () => {
@@ -737,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({
@@ -762,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", {
@@ -799,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 = () => {
@@ -863,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
@@ -875,6 +947,9 @@ const TableBodyCellEdit = props => {
           rowId: cell.row.id,
           colId: cell.column.id
         });
+        if (canEdit) {
+          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+        }
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {

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

@@ -40,7 +40,7 @@ export declare function groupArrayByColumns(arr: any[], columns: string[] | unde
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare function getFixedFields(columns: ColumnTable[], type: 'left' | 'right'): string[];
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
 export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
 export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
 export declare function isEqualSet(setA: any, setB: any): boolean;
@@ -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,
@@ -305,7 +305,7 @@ export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
     return '.';
   }
 };
-export function getFixedFields(columns, type) {
+export const getFixedFields = (columns, type) => {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
@@ -319,7 +319,7 @@ export function getFixedFields(columns, type) {
   }
   traverse(columns);
   return result;
-}
+};
 export function areStringArraysEqual(a, b) {
   if (a.length !== b.length) return false;
   const sortedA = [...a].sort();
@@ -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,13 +1,13 @@
 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;
     rowKey: string;
     prefix: string;
     columns: ColumnDef<T>[];
-    propsColumns: ColumnsTable;
+    propsColumns: ColumnsTable<T>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;
@@ -20,9 +20,10 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    triggerChangeColumns?: (args: any, keys: any) => void;
+    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,9 +57,14 @@ 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 [manualUpdate, setManualUpdate] = React.useState(false);
   // const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(columnHidden)
 
   const [columnFilters, setColumnFilters] = 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/es/table-component/useContext.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -66,6 +66,7 @@ export interface IContext<T> {
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
     isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/es/table-component/useContext.js

@@ -16,5 +16,6 @@ export const TableContext = /*#__PURE__*/createContext({
   setIsSelectionChange: () => {},
   setSorterChange: () => {},
   setFilterChange: () => {},
-  setExpanded: () => {}
+  setExpanded: () => {},
+  handleCellClick: () => {}
 });

package/lib/table-component/InternalTable.js

@@ -57,8 +57,8 @@ const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
 const InternalTable = props => {
   const {
     t,
-    // columns: propsColumns,
-    columns,
+    columns: propsColumns,
+    // columns,
     lang,
     locale,
     dataSource,
@@ -67,6 +67,7 @@ const InternalTable = props => {
     groupAble,
     groupSetting,
     groupColumns,
+    selectionSettings,
     // infiniteScroll,
     // wrapSettings,
     // onFilter,
@@ -132,6 +133,10 @@ const InternalTable = props => {
   const [filterStates, setFilterState] = _react.default.useState(null);
   const [sorterStates, setSorterStates] = _react.default.useState([]);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
+  const [columns, setColumns] = _react.default.useState([]);
+  _react.default.useEffect(() => {
+    setColumns(propsColumns);
+  }, [propsColumns]);
   const [expanded, setExpanded] = _react.default.useState({});
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -166,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]);
@@ -175,10 +190,14 @@ const InternalTable = props => {
   const [columnsHiddenKeys, setColumnsHiddenKeys] = (0, _useMergedState.default)(undefined, {
     value: undefined
   });
-  const triggerChangeColumns = (cols, keys) => {
-    const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
-    const rsss = (0, _utils.getDiffent2Array)(aa, keys);
-    setColumnsHiddenKeys(rsss);
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+      setColumns(cols);
+    } else {
+      const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
+      const rsss = (0, _utils.getDiffent2Array)(aa, keys);
+      setColumnsHiddenKeys(rsss);
+    }
   };
 
   // const contextMenuItems = React.useMemo(() => {
@@ -288,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,
@@ -320,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,
@@ -352,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

@@ -123,7 +123,8 @@ const TableContainerEdit = props => {
     contextMenuHidden,
     showDefaultContext,
     commandSettings,
-    isDataTree
+    isDataTree,
+    onCellClick
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -1449,6 +1450,33 @@ const TableContainerEdit = props => {
     }
     contextMenuClick?.(args);
   };
+  const handleCellClick = (rowNumber, record, column, rowId, cellValue) => {
+    const cellClickCallback = newOptions => {
+      if (newOptions) {
+        const newElem = {
+          ...column,
+          editSelectSettings: {
+            ...(column?.editSelectSettings ? {
+              ...column?.editSelectSettings
+            } : {}),
+            options: newOptions
+          }
+        };
+        const rrr = (0, _utils.updateArrayByKey)([...columns], newElem, 'field');
+        triggerChangeColumns?.(rrr, 'click');
+      }
+    };
+    if (onCellClick) {
+      onCellClick({
+        index: rowNumber,
+        rowId,
+        cellValue,
+        type: "Editing",
+        field: column.field,
+        rowData: record
+      }, cellClickCallback);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
@@ -1561,7 +1589,8 @@ const TableContainerEdit = props => {
       handleDeleteContent,
       handleAddMulti,
       dataErrors,
-      windowSize
+      windowSize,
+      handleCellClick
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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 => {
@@ -135,7 +192,10 @@ const TableBodyCellEdit = props => {
     expanded,
     setExpanded,
     expandable,
-    isDataTree
+    isDataTree,
+    handleCellClick,
+    setIsSelectionChange,
+    selectionSettings
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -418,10 +478,11 @@ const TableBodyCellEdit = props => {
 
     // setRangePasteState(selectPasteState)
   }
-  const handleEdit = e => {
+  const handleEdit = (e, isKeyDown) => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
+    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -431,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') {
 
@@ -597,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)
     }
   }
@@ -670,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: () => {
@@ -744,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({
@@ -769,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", {
@@ -806,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 = () => {
@@ -870,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
@@ -882,6 +953,9 @@ const TableBodyCellEdit = props => {
           rowId: cell.row.id,
           colId: cell.column.id
         });
+        if (canEdit) {
+          handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+        }
       } else {
         handleMouseDown(cell.row.id, cell.column.id);
         if (editingKey) {

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

@@ -40,7 +40,7 @@ export declare function groupArrayByColumns(arr: any[], columns: string[] | unde
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare function getFixedFields(columns: ColumnTable[], type: 'left' | 'right'): string[];
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
 export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
 export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
 export declare function isEqualSet(setA: any, setB: any): boolean;
@@ -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,14 +18,12 @@ 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;
 exports.getColIdsBetween = getColIdsBetween;
-exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles = void 0;
-exports.getFixedFields = getFixedFields;
-exports.getFormat = void 0;
+exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
@@ -90,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,
@@ -367,7 +365,7 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
   }
 };
 exports.checkDecimalSeparator = checkDecimalSeparator;
-function getFixedFields(columns, type) {
+const getFixedFields = (columns, type) => {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
@@ -381,7 +379,8 @@ function getFixedFields(columns, type) {
   }
   traverse(columns);
   return result;
-}
+};
+exports.getFixedFields = getFixedFields;
 function areStringArraysEqual(a, b) {
   if (a.length !== b.length) return false;
   const sortedA = [...a].sort();
@@ -1962,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,13 +1,13 @@
 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;
     rowKey: string;
     prefix: string;
     columns: ColumnDef<T>[];
-    propsColumns: ColumnsTable;
+    propsColumns: ColumnsTable<T>;
     columnHidden: VisibilityState;
     expanded: ExpandedState;
     setExpanded: any;
@@ -20,9 +20,10 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
-    triggerChangeColumns?: (args: any, keys: any) => void;
+    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,9 +59,14 @@ 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 [manualUpdate, setManualUpdate] = _react.default.useState(false);
   // const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(columnHidden)
 
   const [columnFilters, setColumnFilters] = _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/lib/table-component/useContext.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -66,6 +66,7 @@ export interface IContext<T> {
     handleAddMulti?: (item: any, n: number, id?: string) => void;
     dataErrors?: any[];
     isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/table-component/useContext.js

@@ -22,5 +22,6 @@ const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContex
   setIsSelectionChange: () => {},
   setSorterChange: () => {},
   setFilterChange: () => {},
-  setExpanded: () => {}
+  setExpanded: () => {},
+  handleCellClick: () => {}
 });

package/package.json

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