es-grid-template 1.7.38 → 1.7.39

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

@@ -25,7 +25,7 @@ import { Controller } from "react-hook-form";
 import { Checkbox, Select, TreeSelect } from "rc-master-ui";
 import { AsyncSelect } from "../components/async-select";
 import { AsyncTableSelect } from "../components/async-table-select";
-import { cyan, green, red, blue } from "@ant-design/colors";
+import { cyan, green, red, blue } from '@ant-design/colors';
 import { EditForm } from "../components/EditForm";
 import { TableContext } from "../useContext";
 // import moment from "moment";
@@ -41,7 +41,7 @@ const filterTreeNode = (input, treeNode) => {
     title,
     value
   } = treeNode;
-  if (typeof title === "string" || typeof title === "number") {
+  if (typeof title === "string" || typeof title === 'number') {
     return title.toString().toLowerCase().includes(input.toLowerCase()) || value.toLowerCase().includes(input.toLowerCase());
   }
   return value.toLowerCase().includes(input.toLowerCase());
@@ -76,7 +76,7 @@ const EditableCell = props => {
   const dateTimePickerRef = React.useRef(null);
   // const timePickerRef = React.useRef(null);
 
-  const colFormat = typeof column?.format === "function" ? column?.format(record) : column?.format;
+  const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
   const cellFormat = getFormat(colFormat, format);
   const inputNode = (value, onChange) => {
     const dateFormat = getDatepickerFormat(editType, cellFormat);
@@ -102,32 +102,33 @@ const EditableCell = props => {
 
     // @ts-ignore
     const key = record[rowKey];
-    const field = column.field ?? "";
+    const field = column.field ?? '';
 
     // const message = errors && column.field && errors[column.field] ? errors[column.field].message : ''
     const message = isInvalid?.message;
     const keySelect = checkFieldKey(column?.editSelectSettings?.fieldKey);
-    const selectOptions = typeof propsOptions === "function" ? propsOptions(record, column.field) : propsOptions;
+    const selectOptions = typeof propsOptions === 'function' ? propsOptions(record, column.field) : propsOptions;
     const options = validateOption ? validateOption(record, column.field) : selectOptions ?? [];
     const optionsTree = validateOption ? convertArrayWithIndent(validateOption(record, column.field)) : selectOptions ? convertArrayWithIndent(selectOptions) : [];
 
     // const currt = flatColumns2()
 
     switch (editType) {
-      case "date":
+      case 'date':
         return /*#__PURE__*/React.createElement(DatePicker, {
           ref: datePickerRef,
           format: {
             format: dateFormat,
-            type: "mask"
+            type: 'mask'
           },
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
+
           // locale={buddhistLocale}
           ,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           }
           // value={date}
           ,
@@ -151,11 +152,11 @@ const EditableCell = props => {
                 option: newState,
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -167,31 +168,31 @@ const EditableCell = props => {
               datePickerRef.current?.focus();
             }, 0);
           },
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case "datetime":
+      case 'datetime':
         return /*#__PURE__*/React.createElement(DatePicker
         // id={`col${indexCol}-record${indexRow}`}
         , {
           ref: dateTimePickerRef,
           format: {
             format: dateFormat,
-            type: "mask"
+            type: 'mask'
           }
           // locale={buddhistLocale}
           ,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           showTime: true
           // value={date}
           ,
           defaultValue: date,
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -219,20 +220,20 @@ const EditableCell = props => {
                 option: newState,
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case "month":
-      case "quarter":
-      case "year":
+      case 'month':
+      case 'quarter':
+      case 'year':
         const pickerFormat = getDatepickerFormat(editType, cellFormat);
         const maxDateValue1 = !isEmpty(column.maxDate) ? dayjs(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !isEmpty(column.minDate) ? dayjs(column.minDate, pickerFormat) : undefined;
@@ -240,47 +241,47 @@ const EditableCell = props => {
           id: `col${indexCol}-record${indexRow}`,
           format: {
             format: pickerFormat,
-            type: "mask"
+            type: 'mask'
           },
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           picker: editType,
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case "week":
+      case 'week':
         const weekFormat = getDatepickerFormat(editType, cellFormat);
         const maxWeekValue = !isEmpty(column.maxDate) ? dayjs(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !isEmpty(column.minDate) ? dayjs(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/React.createElement(DatePicker, {
           format: val => customWeekStartEndFormat(val, weekFormat),
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           picker: editType,
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case "time":
+      case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
         const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
@@ -292,24 +293,24 @@ const EditableCell = props => {
         return /*#__PURE__*/React.createElement(TimePicker, {
           format: {
             format: timeFormat,
-            type: "mask"
+            type: 'mask'
           },
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           maxDate: maxTime,
           minDate: minTime,
           disabled: isDisable(column, record) ?? false,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId
         });
-      case "selectTable":
+      case 'selectTable':
         const rr = selectColumns ?? [];
         const columnsTable = rr.map(colSelect => {
           return {
@@ -334,9 +335,9 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === "checkbox") {
+        if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
-          valueSelectTable = !isNullOrUndefined(record[dataIndex ?? ""]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
+          valueSelectTable = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(AsyncTableSelect
         // id={`col${indexCol}-record${indexRow}`}
@@ -345,11 +346,10 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable,
-          rowData: record
-          // autoDestroy={true}
-          ,
+          rowData: record,
+          autoDestroy: true,
           onChange: (val, option) => {
-            onChange(val ?? "");
+            onChange(val ?? '');
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -365,38 +365,39 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
           },
           showSearch: true,
-          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           selectMode: selectMode,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
+
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
-          maxTagCount: "responsive",
+          maxTagCount: 'responsive',
           rowKey: keySelect,
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: "be-popup-container",
+          popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
-          status: isInvalid ? "error" : undefined,
+          status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
             if (toolbarItems && toolbarItems.length > 0) {
               return /*#__PURE__*/React.createElement(React.Fragment, null, menu, /*#__PURE__*/React.createElement(Divider, {
                 style: {
-                  margin: "8px 0"
+                  margin: '8px 0'
                 }
               }), /*#__PURE__*/React.createElement("div", {
-                className: "toolbar-control d-flex justify-content-end"
+                className: 'toolbar-control d-flex justify-content-end'
               }));
             } else {
               return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
@@ -405,13 +406,12 @@ const EditableCell = props => {
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? "label"
+            label: inputKey ?? 'label'
           },
           onBlur: event => {
-            console.log("aafffffff");
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? "");
+              onChange(val ?? '');
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -429,20 +429,20 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case "select":
+      case 'select':
         let valueSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === "checkbox") {
+        if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
           valueSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
@@ -450,7 +450,7 @@ const EditableCell = props => {
           options: options,
           value: valueSelect,
           onChange: (val, option) => {
-            onChange(val ?? "");
+            onChange(val ?? '');
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -465,39 +465,39 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
-          }
-          // autoDestroy={true}
-          ,
+          },
+          autoDestroy: true,
           showSearch: true,
-          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
+
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
 
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
-          maxTagCount: "responsive",
+          maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? "label"
+            label: inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? "");
+              onChange(val ?? '');
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -515,20 +515,20 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case "asyncSelect":
+      case 'asyncSelect':
         let valueAsyncSelect = value;
         if (fieldValue) {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === "checkbox") {
+        if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
           valueAsyncSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
@@ -537,7 +537,7 @@ const EditableCell = props => {
           defaultOptions: options,
           value: valueAsyncSelect,
           onChange: (val, option) => {
-            onChange(val ?? "");
+            onChange(val ?? '');
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -552,30 +552,30 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
-          }
-          // autoDestroy={true}
-          ,
+          },
+          autoDestroy: true,
           showSearch: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
+
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
-          mode: isMulti || selectMode === "checkbox" ? "multiple" : undefined,
+          mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
-          maxTagCount: "responsive",
+          maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: "be-popup-container",
+          popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
-          status: isInvalid ? "error" : undefined
+          status: isInvalid ? 'error' : undefined
           // dropdownRender={(menu) => {
           //   if (toolbarItems && toolbarItems.length > 0) {
           //     return (
@@ -617,12 +617,12 @@ const EditableCell = props => {
           filterOption: filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
-            label: inputKey ?? "label"
+            label: inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
               const val = event.inputValue;
-              onChange(val ?? "");
+              onChange(val ?? '');
               const formState = getValues();
               // const itemState = getValues(dataIndex)
               // @ts-ignore
@@ -640,14 +640,14 @@ const EditableCell = props => {
                 },
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case "treeSelect":
+      case 'treeSelect':
         // let valueTreeSelect
 
         const newTreeData = convertLabelToTitle(optionsTree);
@@ -659,27 +659,28 @@ const EditableCell = props => {
           // @ts-ignore
           valueTreeSelect = record[fieldValue] ?? value;
         }
-        if (isMulti || selectMode === "checkbox") {
+        if (isMulti || selectMode === 'checkbox') {
           // @ts-ignore
           valueTreeSelect = !isNullOrUndefined(record[dataIndex]) && Array.isArray(record[dataIndex]) && record[dataIndex]?.length > 0 ? options.filter(val => record[dataIndex]?.includes(val[keySelect])) : undefined;
         }
         return /*#__PURE__*/React.createElement(TreeSelect, {
           id: `col${indexCol}-record${indexRow}`,
-          className: "be-tree-select",
+          className: 'be-tree-select',
           style: {
-            width: "100%",
-            height: "100%"
+            width: '100%',
+            height: '100%'
           },
           value: valueTreeSelect,
           dropdownStyle: {
             maxHeight: 400,
-            overflow: "auto"
+            overflow: 'auto'
           },
           treeData: newTreeData,
-          placeholder: t ? t(column.placeholder ?? "Select") : column.placeholder ?? "Select",
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           treeDefaultExpandAll: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId
+
           // defaultOpen={column.field === cellEditing?.column.field}
           ,
           virtual: true,
@@ -691,14 +692,14 @@ const EditableCell = props => {
           maxTagPlaceholder: 2,
           treeTitleRender: column?.editSelectSettings?.formatOptionLabel,
           showCheckedStrategy: SHOW_PARENT,
-          multiple: column?.editSelectSettings?.selectMode === "checkbox" || column?.editSelectSettings?.isMulti
+          multiple: column?.editSelectSettings?.selectMode === 'checkbox' || column?.editSelectSettings?.isMulti
           // fieldNames={{label: inputKey ? inputKey : 'title', value: keySelect, children: 'children'}}
           ,
-          treeCheckable: column?.editSelectSettings?.selectMode === "checkbox",
+          treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
-            onChange(val ?? "");
+            onChange(val ?? '');
             const formState = getValues();
             // const itemState = getValues(dataIndex)
             // @ts-ignore
@@ -713,23 +714,23 @@ const EditableCell = props => {
               option: option,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
           },
-          popupClassName: "be-popup-container",
-          status: isInvalid ? "error" : undefined,
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });
-      case "checkbox":
+      case 'checkbox':
         return /*#__PURE__*/React.createElement("div", {
           style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: column.align ?? "center",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: column.align ?? 'center',
             paddingInline: 5,
-            height: "100%",
-            width: "100%"
+            height: '100%',
+            width: '100%'
           }
         }, /*#__PURE__*/React.createElement(Checkbox, {
           checked: Boolean(value)
@@ -748,12 +749,12 @@ const EditableCell = props => {
               field: column.field ?? column.field,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
           },
           disabled: isDisable(column, record) ?? false
         }));
-      case "form":
+      case 'form':
         const valueForm = value;
         return /*#__PURE__*/React.createElement(EditForm, {
           rowData: record,
@@ -763,6 +764,7 @@ const EditableCell = props => {
           value: valueForm,
           fieldKey: column.editFromSettings?.fieldKey,
           indexRow: indexRow
+
           // cellFocus={column.field === cellEditing?.column.field}
           ,
 
@@ -777,14 +779,14 @@ const EditableCell = props => {
               field: column.field,
               record: {
                 ...formState,
-                [column.field ?? ""]: val
+                [column.field ?? '']: val
               },
               prevState,
               newState,
               option: val,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
           }
           // cellEditing={cellEditing}
@@ -792,7 +794,7 @@ const EditableCell = props => {
           // menuPortalTarget={tableContainerRef}
           // classNamePrefix={column.classElement ?? 'select'}
           ,
-          placeholder: t ? t(column.placeholder ? column.placeholder : "") : column.placeholder ? column.placeholder : "",
+          placeholder: t ? t(column.placeholder ? column.placeholder : '') : column.placeholder ? column.placeholder : '',
           menuWidth: column.editFromSettings?.menuWidth,
           menuHeight: column.editFromSettings?.menuHeight
         });
@@ -824,8 +826,8 @@ const EditableCell = props => {
       //
       //   )
 
-      case "color":
-        const color = isColor(value) ? value : "#ffffff";
+      case 'color':
+        const color = isColor(value) ? value : '#ffffff';
         const presets = genPresets({
           blue,
           red,
@@ -847,7 +849,7 @@ const EditableCell = props => {
               newState: `#${valueColor.toHex()}`,
               indexCol,
               indexRow,
-              type: "blur"
+              type: 'blur'
             });
           },
           presets: presets,
@@ -865,7 +867,7 @@ const EditableCell = props => {
           }, /*#__PURE__*/React.createElement(Presets, null)), /*#__PURE__*/React.createElement(Divider, {
             type: "vertical",
             style: {
-              height: "auto"
+              height: 'auto'
             }
           }), /*#__PURE__*/React.createElement(Col, {
             flex: "auto"
@@ -894,7 +896,7 @@ const EditableCell = props => {
       //     />
       //   )
 
-      case "numeric":
+      case 'numeric':
         const thousandSeparator = cellFormat?.thousandSeparator;
         const decimalSeparator = cellFormat?.decimalSeparator;
 
@@ -920,13 +922,13 @@ const EditableCell = props => {
           customInput: Input
           // valueIsNumericString={true}
           ,
-          placeholder: t ? t(column.placeholder ?? "Enter") : column.placeholder ?? "Enter",
-          autoComplete: "off",
-          className: classNames("be-cell-editing  rounded-0 input-element", {
-            "is-invalid": isInvalid,
-            "be-cell-edit-align-center": column.align === "center",
-            "be-cell-edit-align-left": column.align === "left",
-            "be-cell-edit-align-right": !column.align || column.align === "right"
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          autoComplete: 'off',
+          className: classNames('be-cell-editing  rounded-0 input-element', {
+            'is-invalid': isInvalid,
+            'be-cell-edit-align-center': column.align === 'center',
+            'be-cell-edit-align-left': column.align === 'left',
+            'be-cell-edit-align-right': !column.align || column.align === 'right'
           }),
           autoFocus: column.field === startCell?.colId,
           onValueChange: values => {
@@ -950,7 +952,7 @@ const EditableCell = props => {
                 newState,
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
@@ -962,16 +964,13 @@ const EditableCell = props => {
           id: `col${indexCol}-record${indexRow}`,
           style: {
             textAlign: column.align,
-            resize: "none",
-            height: "100%"
-          }
-          // @ts-ignore
-          // value={!isNullOrUndefined(record[dataIndex]) ? record[dataIndex] : ''}
-          ,
+            resize: 'none',
+            height: '100%'
+          },
           disabled: isDisable(column, record) ?? false,
-          className: classNames("be-cell-editing rounded-0 input-element"),
-          placeholder: t ? t(column.placeholder ?? "Enter") : column.placeholder ?? "Enter",
-          value: !isNullOrUndefined(value) ? value : "",
+          className: classNames('be-cell-editing rounded-0 input-element'),
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
+          value: !isNullOrUndefined(value) ? value : '',
           onBlur: () => {
             const formState = getValues();
             // const itemState = getValues(dataIndex)
@@ -989,7 +988,7 @@ const EditableCell = props => {
                 field,
                 indexCol,
                 indexRow,
-                type: "blur"
+                type: 'blur'
               });
             }
           },
@@ -1008,12 +1007,12 @@ const EditableCell = props => {
               record: formState,
               indexCol,
               indexRow,
-              type: "enter"
+              type: 'enter'
             });
             // }
           },
           onChange: onChange,
-          status: isInvalid ? "error" : undefined,
+          status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`,
           autoSize: {