es-grid-template 1.2.8 → 1.2.9

package/es/grid-component/hooks/columns/index.d.ts

@@ -1,9 +1,9 @@
-import type { ColumnTable, ColumnType, IFormat } from "../../type";
+import type { ColumnTable, IFormat } from "../../type";
 import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
-export declare const renderContent: (column: ColumnTable, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/es/grid-component/hooks/useColumns.js

@@ -246,11 +246,12 @@ const useColumns = config => {
             width: col.width,
             onResize: handleResize?.(col)
           }),
-          onCell: data => {
+          onCell: (data, index) => {
             return {
               colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
-              className: classNames('', {
+              ...transformedColumn?.onCell?.(data, index),
+              className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
                 'cell-group': groupColumns && data.children,
                 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
               })

package/es/grid-component/hooks/utils.d.ts

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnsType, ColumnTable, GetRowKey } from "../type";
+import type { ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -32,9 +32,9 @@ export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
 export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
-export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
-export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
+export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
@@ -70,3 +70,4 @@ export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>
 export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
+export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];

package/es/grid-component/hooks/utils.js

@@ -784,4 +784,7 @@ export const isArraysEqual = (arr1, arr2) => {
     return false;
   }
   return arr1.every((element, index) => element === arr2[index]);
+};
+export const editAbleColumns = columns => {
+  return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };

package/es/grid-component/table/GridEdit.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { AnyObject } from "../type";
-import type { TableEditProps } from "../type";
+import type { AnyObject, TableProps } from "../type";
 import type { ColumnsTable } from "../type";
 import type { GetRowKey } from "../type";
-type Props<RecordType> = TableEditProps<RecordType> & {
+type Props<RecordType> = TableProps<RecordType> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     triggerChangeData?: (newData: RecordType[], type: string) => void;

package/es/grid-component/table/GridEdit.js

@@ -13,9 +13,8 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
-
 // import Command from "../Command";
 
 import { Toolbar, ConfigProvider } from "rc-master-ui";
@@ -757,8 +756,9 @@ const GridEdit = props => {
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
+    const tCols = editAbleColumns(columns);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
-      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+      for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -1265,6 +1265,29 @@ const GridEdit = props => {
       return {
         ...column,
         className: 'rc-ui-cell-editable',
+        onCell: (record, rowIndex) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+          return {
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex + 1, rowNumber, event);
+                event.preventDefault();
+              }
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            onClick: () => {
+              if (record[rowKey] !== editingKey && editingKey !== '') {
+                setEditingKey('');
+              }
+            },
+            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+          };
+        },
         render: (value, record, rowIndex) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
@@ -1294,7 +1317,7 @@ const GridEdit = props => {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey && isEditable(column, record)) {
                 // ~~ khi editingKey = ''
                 event.preventDefault();
                 event.stopPropagation();
@@ -1370,14 +1393,14 @@ const GridEdit = props => {
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
+            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
               handleEdit(record, column, getEditType(column, record), event);
               handleCellClick(rowNumber, record, column);
             }
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              // setEditingKey('')
+              setEditingKey('');
             }
           },
           // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
@@ -1389,8 +1412,9 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record) !== false,
+          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing,
+          t,
           // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
@@ -1462,10 +1486,10 @@ const GridEdit = props => {
         width: '100%'
       },
       items: toolbarItemsBottom ?? [],
-      mode: 'scroll'
-      // onClick={({  item }) => {
-      //   console.log('item', item)
-      // }}
+      mode: 'scroll',
+      onClick: ({}) => {
+        setEditingKey('');
+      }
     }));
   };
   const onSelectChange = keys => {

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

@@ -84,7 +84,7 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
+export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
     field?: string;
     key?: any;
     type?: IColumnType;
@@ -111,9 +111,9 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
-    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
-    children?: ColumnType<RecordType>[];
+    children?: ColumnTable<RecordType>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -133,10 +133,8 @@ export type ColumnTemplate<RecordType> = {
     index: number;
     field: string;
 };
-export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
-export type ColumnTable<RecordType = AnyObject> = ColumnType<RecordType>;
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
-export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
     groupAble?: boolean;
     groupColumns?: string[];
@@ -166,7 +164,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         value: any;
     }[]) => void;
     onSorter?: (args: {
-        column: ColumnType<RecordType>;
+        column: ColumnTable<RecordType>;
         columnKey: string;
         field: string;
         direction: 'Ascending' | 'Descending' | null;
@@ -189,9 +187,6 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
     showEmptyText?: boolean;
     commandSettings?: CommandSettings;
-}
-export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
-    columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
@@ -206,7 +201,7 @@ export type ICellClick = {
     cellValue: any;
     rowData: any;
 };
-export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
+export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>;
 export interface CommandItem {
     id: string;
     type?: string;

package/lib/grid-component/hooks/columns/index.d.ts

@@ -1,9 +1,9 @@
-import type { ColumnTable, ColumnType, IFormat } from "../../type";
+import type { ColumnTable, IFormat } from "../../type";
 import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
-export declare const renderContent: (column: ColumnTable, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/lib/grid-component/hooks/useColumns.js

@@ -257,11 +257,12 @@ const useColumns = config => {
             width: col.width,
             onResize: handleResize?.(col)
           }),
-          onCell: data => {
+          onCell: (data, index) => {
             return {
               colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
-              className: (0, _classnames.default)('', {
+              ...transformedColumn?.onCell?.(data, index),
+              className: (0, _classnames.default)(transformedColumn?.onCell?.(data, index).className ?? '', {
                 'cell-group': groupColumns && data.children,
                 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
               })

package/lib/grid-component/hooks/utils.d.ts

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnsType, ColumnTable, GetRowKey } from "../type";
+import type { ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -32,9 +32,9 @@ export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
 export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
-export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
-export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
+export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
@@ -70,3 +70,4 @@ export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>
 export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
+export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];

package/lib/grid-component/hooks/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
-exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
+exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemByKey = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
@@ -846,4 +846,8 @@ const isArraysEqual = (arr1, arr2) => {
   }
   return arr1.every((element, index) => element === arr2[index]);
 };
-exports.isArraysEqual = isArraysEqual;
+exports.isArraysEqual = isArraysEqual;
+const editAbleColumns = columns => {
+  return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
+};
+exports.editAbleColumns = editAbleColumns;

package/lib/grid-component/table/GridEdit.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { AnyObject } from "../type";
-import type { TableEditProps } from "../type";
+import type { AnyObject, TableProps } from "../type";
 import type { ColumnsTable } from "../type";
 import type { GetRowKey } from "../type";
-type Props<RecordType> = TableEditProps<RecordType> & {
+type Props<RecordType> = TableProps<RecordType> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     triggerChangeData?: (newData: RecordType[], type: string) => void;

package/lib/grid-component/table/GridEdit.js

@@ -764,8 +764,9 @@ const GridEdit = props => {
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
+    const tCols = (0, _hooks.editAbleColumns)(columns);
     for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
-      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+      for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -1272,6 +1273,29 @@ const GridEdit = props => {
       return {
         ...column,
         className: 'rc-ui-cell-editable',
+        onCell: (record, rowIndex) => {
+          const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
+          return {
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex + 1, rowNumber, event);
+                event.preventDefault();
+              }
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            onClick: () => {
+              if (record[rowKey] !== editingKey && editingKey !== '') {
+                setEditingKey('');
+              }
+            },
+            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+          };
+        },
         render: (value, record, rowIndex) => {
           const rowNumber = (0, _hooks.getRowNumber)(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/_react.default.createElement("div", {
@@ -1301,7 +1325,7 @@ const GridEdit = props => {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
                 // ~~ khi editingKey = ''
                 event.preventDefault();
                 event.stopPropagation();
@@ -1377,14 +1401,14 @@ const GridEdit = props => {
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
+            if (!isEditing(record) && record[rowKey] !== editingKey && (0, _hooks.isEditable)(column, record)) {
               handleEdit(record, column, (0, _hooks.getEditType)(column, record), event);
               handleCellClick(rowNumber, record, column);
             }
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              // setEditingKey('')
+              setEditingKey('');
             }
           },
           // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
@@ -1396,8 +1420,9 @@ const GridEdit = props => {
           title: (0, _columns.getValueCell)(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record) !== false,
+          editing: isEditing(record) && rowEditable?.(record) !== false && (0, _hooks.isEditable)(column, record),
           cellEditing,
+          t,
           // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
@@ -1469,10 +1494,10 @@ const GridEdit = props => {
         width: '100%'
       },
       items: toolbarItemsBottom ?? [],
-      mode: 'scroll'
-      // onClick={({  item }) => {
-      //   console.log('item', item)
-      // }}
+      mode: 'scroll',
+      onClick: ({}) => {
+        setEditingKey('');
+      }
     }));
   };
   const onSelectChange = keys => {

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

@@ -84,7 +84,7 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
+export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
     field?: string;
     key?: any;
     type?: IColumnType;
@@ -111,9 +111,9 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
-    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
-    children?: ColumnType<RecordType>[];
+    children?: ColumnTable<RecordType>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -133,10 +133,8 @@ export type ColumnTemplate<RecordType> = {
     index: number;
     field: string;
 };
-export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
-export type ColumnTable<RecordType = AnyObject> = ColumnType<RecordType>;
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
-export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
     groupAble?: boolean;
     groupColumns?: string[];
@@ -166,7 +164,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         value: any;
     }[]) => void;
     onSorter?: (args: {
-        column: ColumnType<RecordType>;
+        column: ColumnTable<RecordType>;
         columnKey: string;
         field: string;
         direction: 'Ascending' | 'Descending' | null;
@@ -189,9 +187,6 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
     showEmptyText?: boolean;
     commandSettings?: CommandSettings;
-}
-export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
-    columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
@@ -206,7 +201,7 @@ export type ICellClick = {
     cellValue: any;
     rowData: any;
 };
-export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
+export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>;
 export interface CommandItem {
     id: string;
     type?: string;

package/package.json

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