react-table-edit 1.1.3 → 1.1.5

package/dist/index.d.mts

@@ -1,5 +1,6 @@
-import React, { ReactNode, Dispatch, SetStateAction } from 'react';
-import { TFunction } from 'react-i18next';
+import * as react from 'react';
+import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
+import { TFunction } from 'i18next';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type IFColumnSelectTable = {
@@ -45,7 +46,7 @@ type Props$1 = {
     showFooter?: boolean;
     onPaste?: any;
 };
-declare const SelectTable: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<unknown>>;
+declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -211,7 +212,7 @@ type IHeaderColumnTable = {
     fixedType?: 'left' | 'right' | undefined;
     index?: number;
 };
-declare const TableEdit: React.ForwardRefExoticComponent<IFTableEditProps & React.RefAttributes<IFRef>>;
+declare const TableEdit: react.ForwardRefExoticComponent<IFTableEditProps & react.RefAttributes<IFRef>>;
 
 type FromItemsField = {
     name: string;
@@ -309,7 +310,7 @@ type Props = {
     selectChilds?: boolean;
     onPaste?: any;
 };
-declare const SelectTableTree: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
 
 interface IFDataStyleSetting {
     color: string;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactNode, Dispatch, SetStateAction } from 'react';
-import { TFunction } from 'react-i18next';
+import * as react from 'react';
+import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
+import { TFunction } from 'i18next';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type IFColumnSelectTable = {
@@ -45,7 +46,7 @@ type Props$1 = {
     showFooter?: boolean;
     onPaste?: any;
 };
-declare const SelectTable: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<unknown>>;
+declare const SelectTable: react__default.ForwardRefExoticComponent<Props$1 & react__default.RefAttributes<unknown>>;
 
 type ITextAlign = 'center' | 'left' | 'right';
 type IEditType = 'text' | 'numeric' | 'datetime' | 'selectTree' | 'date' | 'select' | 'checkbox' | 'form' | 'color';
@@ -211,7 +212,7 @@ type IHeaderColumnTable = {
     fixedType?: 'left' | 'right' | undefined;
     index?: number;
 };
-declare const TableEdit: React.ForwardRefExoticComponent<IFTableEditProps & React.RefAttributes<IFRef>>;
+declare const TableEdit: react.ForwardRefExoticComponent<IFTableEditProps & react.RefAttributes<IFRef>>;
 
 type FromItemsField = {
     name: string;
@@ -309,7 +310,7 @@ type Props = {
     selectChilds?: boolean;
     onPaste?: any;
 };
-declare const SelectTableTree: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+declare const SelectTableTree: react__default.ForwardRefExoticComponent<Props & react__default.RefAttributes<unknown>>;
 
 interface IFDataStyleSetting {
     color: string;

package/dist/index.js

@@ -656,27 +656,12 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   const isSelectedAll = (0, import_react6.useMemo)(() => {
     return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
   }, [optionsLoad, options, value]);
-  const defaultColumns = noHeader ? [
+  const defaultColumns = [
     {
       headerText: "Name",
       field: fieldLabel ?? "label",
       width: menuWidth
     }
-  ] : [
-    {
-      field: "key",
-      headerText: "Code",
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      headerText: "Name",
-      field: "label",
-      width: 150,
-      maxWidth: 200,
-      minWidth: 250
-    }
   ];
   const closeMenu = () => {
     setDropdownOpen(false);
@@ -997,7 +982,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
     let countDisplay = 0;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+        !(noHeader || (columns?.length ?? 0) === 0) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "r-select-row", role: "row", children: [
           isMulti && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: (0, import_classnames4.default)(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
@@ -1025,7 +1010,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
               )
             }
           ) }),
-          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+          (columns ? columns : defaultColumns).map((col, index) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
@@ -1056,7 +1041,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: (0, import_classnames4.default)("react-select-table", { "is-invalid": invalid, "no-header": noHeader }),
+      className: (0, import_classnames4.default)("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: selectTableRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -1158,7 +1143,7 @@ var SelectTable = (0, import_react6.forwardRef)((props, ref) => {
                       }
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("r-select-gridtable", { "no-header": noHeader }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderTable, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)("r-select-gridtable", { "no-header": noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RenderTable, {}) }),
                       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames4.default)("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: [
                         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_reactstrap4.Button, { outline: true, color: "primary", onClick: handleAdd, className: (0, import_classnames4.default)("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
                           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_becoxy_icons2.Plus, { className: "me-50", fontSize: 16 }),
@@ -2202,7 +2187,7 @@ var HeaderTableCol = (props) => {
                     }
                   }
                 ),
-                col.field !== "checkbox" && t(col.headerText ?? "")
+                col.field !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "header-content", children: t(col.headerText ?? "") }) })
               ]
             }
           )
@@ -2328,27 +2313,12 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
   const isSelectedAll = (0, import_react15.useMemo)(() => {
     return isMulti === true && options.length > 0 && areAllItemsSelected(value, options, fieldValue ?? "value");
   }, [options, value]);
-  const defaultColumns = noHeader ? [
+  const defaultColumns = [
     {
       headerText: "Name",
       field: fieldLabel ?? "label",
       width: menuWidth
     }
-  ] : [
-    {
-      field: "key",
-      headerText: "Code",
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      headerText: "Name",
-      field: "label",
-      width: 150,
-      maxWidth: 200,
-      minWidth: 250
-    }
   ];
   const closeMenu = () => {
     setDropdownOpen(false);
@@ -2657,7 +2627,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
     let countDisplay = 0;
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: "r-select-row", role: "row", children: [
+        !(noHeader && (columns?.length ?? 0) > 0) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { className: "r-select-row", role: "row", children: [
           isMulti && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "th",
             {
@@ -2692,7 +2662,7 @@ var SelectTableTree = (0, import_react15.forwardRef)((props, ref) => {
               )
             }
           ),
-          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+          (columns ? columns : defaultColumns).map((col, index) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
@@ -3146,7 +3116,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             },
             fieldValue: col.selectSettings?.fieldValue,
             fieldLabel: col.selectSettings?.fieldLabel,
-            component: tableElement,
+            component: gridRef,
             columns: col.selectSettings?.columns,
             isClearable: col.selectSettings?.isClearable ?? false,
             decimalSeparator,
@@ -3228,7 +3198,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
                 },
                 fieldValue: col.selectSettings?.fieldValue,
                 fieldLabel: col.selectSettings?.fieldLabel,
-                component: tableElement,
+                component: gridRef,
                 columns: col.selectSettings?.columns,
                 isClearable: col.selectSettings?.isClearable ?? false,
                 decimalSeparator,
@@ -3595,7 +3565,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
   };
   const handleDuplicate = (data, index) => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
-      if (fieldKey) {
+      if (fieldKey && defaultValue) {
         fieldUniKey.forEach((item) => {
           data[item] = defaultValue[item];
         });
@@ -3833,7 +3803,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
@@ -3885,7 +3855,7 @@ var TableEdit = (0, import_react16.forwardRef)((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // test-app/src/component/table/index.tsx
-import { Fragment as Fragment19, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
+import { Fragment as Fragment20, forwardRef as forwardRef4, useEffect as useEffect9, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
 import { Button as Button6, DropdownMenu as DropdownMenu4, DropdownToggle as DropdownToggle4, Input as Input9, UncontrolledDropdown, UncontrolledTooltip as UncontrolledTooltip5 } from "reactstrap";
 import classnames9 from "classnames";
 import { useTranslation as useTranslation12 } from "react-i18next";
@@ -617,27 +617,12 @@ var SelectTable = forwardRef((props, ref) => {
   const isSelectedAll = useMemo(() => {
     return isMulti === true && (optionsLoad ? optionsLoad : options).length > 0 && value?.length >= (optionsLoad ? optionsLoad : options).length;
   }, [optionsLoad, options, value]);
-  const defaultColumns = noHeader ? [
+  const defaultColumns = [
     {
       headerText: "Name",
       field: fieldLabel ?? "label",
       width: menuWidth
     }
-  ] : [
-    {
-      field: "key",
-      headerText: "Code",
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      headerText: "Name",
-      field: "label",
-      width: 150,
-      maxWidth: 200,
-      minWidth: 250
-    }
   ];
   const closeMenu = () => {
     setDropdownOpen(false);
@@ -958,7 +943,7 @@ var SelectTable = forwardRef((props, ref) => {
     let countDisplay = 0;
     return /* @__PURE__ */ jsxs5(Fragment6, { children: [
       /* @__PURE__ */ jsxs5("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ jsx5("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs5("tr", { className: "r-select-row", role: "row", children: [
+        !(noHeader || (columns?.length ?? 0) === 0) && /* @__PURE__ */ jsx5("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs5("tr", { className: "r-select-row", role: "row", children: [
           isMulti && /* @__PURE__ */ jsx5("th", { className: classnames3(`r-select-headercell`), style: { width: 40, top: `0px` }, children: /* @__PURE__ */ jsx5(
             "div",
             {
@@ -986,7 +971,7 @@ var SelectTable = forwardRef((props, ref) => {
               )
             }
           ) }),
-          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+          (columns ? columns : defaultColumns).map((col, index) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
@@ -1017,7 +1002,7 @@ var SelectTable = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx5(
     "div",
     {
-      className: classnames3("react-select-table", { "is-invalid": invalid, "no-header": noHeader }),
+      className: classnames3("react-select-table", { "is-invalid": invalid }),
       ref,
       id,
       children: /* @__PURE__ */ jsx5("div", { ref: selectTableRef, children: /* @__PURE__ */ jsxs5(
@@ -1119,7 +1104,7 @@ var SelectTable = forwardRef((props, ref) => {
                       }
                     },
                     children: /* @__PURE__ */ jsxs5("div", { className: "r-select-grid", children: [
-                      /* @__PURE__ */ jsx5("div", { className: classnames3("r-select-gridtable", { "no-header": noHeader }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx5(RenderTable, {}) }),
+                      /* @__PURE__ */ jsx5("div", { className: classnames3("r-select-gridtable", { "no-header": noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight }, children: /* @__PURE__ */ jsx5(RenderTable, {}) }),
                       /* @__PURE__ */ jsxs5("div", { className: classnames3("r-select-footer", { "d-none": !(showFooter === true || handleAdd) }), children: [
                         /* @__PURE__ */ jsxs5(Button, { outline: true, color: "primary", onClick: handleAdd, className: classnames3("r-btn d-flex align-items-center", { "d-none": !handleAdd }), children: [
                           /* @__PURE__ */ jsx5(Plus, { className: "me-50", fontSize: 16 }),
@@ -2091,7 +2076,7 @@ import { Input as Input7 } from "reactstrap";
 import { useTranslation as useTranslation9 } from "react-i18next";
 import { Resizable } from "react-resizable";
 import "react-resizable/css/styles.css";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var HeaderTableCol = (props) => {
   const {
     selectEnable,
@@ -2163,7 +2148,7 @@ var HeaderTableCol = (props) => {
                     }
                   }
                 ),
-                col.field !== "checkbox" && t(col.headerText ?? "")
+                col.field !== "checkbox" && /* @__PURE__ */ jsx12(Fragment15, { children: /* @__PURE__ */ jsx12("span", { className: "header-content", children: t(col.headerText ?? "") }) })
               ]
             }
           )
@@ -2175,14 +2160,14 @@ var HeaderTableCol = (props) => {
 var header_default = HeaderTableCol;
 
 // test-app/src/component/table/command.tsx
-import { Fragment as Fragment16 } from "react";
+import { Fragment as Fragment17 } from "react";
 import classnames7 from "classnames";
 import { Button as Button4, UncontrolledTooltip as UncontrolledTooltip3 } from "reactstrap";
 import { useTranslation as useTranslation10 } from "react-i18next";
 
 // test-app/src/component/icon/index.tsx
 import * as Icon from "becoxy-icons";
-import { Fragment as Fragment15 } from "react";
+import { Fragment as Fragment16 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var IconCustom = (props) => {
   const { iconName, size } = props;
@@ -2190,7 +2175,7 @@ var IconCustom = (props) => {
     return null;
   } else {
     const TagIcon = iconName === "" ? "" : Icon[iconName];
-    return /* @__PURE__ */ jsx13(Fragment15, { children: iconName === "" ? "" : /* @__PURE__ */ jsx13(TagIcon, { fontSize: size }) });
+    return /* @__PURE__ */ jsx13(Fragment16, { children: iconName === "" ? "" : /* @__PURE__ */ jsx13(TagIcon, { fontSize: size }) });
   }
 };
 var icon_default = IconCustom;
@@ -2200,7 +2185,7 @@ import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var CommandElement = (props) => {
   const { commandItems, rowData, indexRow, handleCommandClick, indexFocus, setIndexFocus } = props;
   const { t } = useTranslation10();
-  return /* @__PURE__ */ jsx14(Fragment16, { children: /* @__PURE__ */ jsx14("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
+  return /* @__PURE__ */ jsx14(Fragment17, { children: /* @__PURE__ */ jsx14("div", { className: "d-flex align-items-center", style: { columnGap: 10 }, children: commandItems.map((item, index) => {
     return /* @__PURE__ */ jsxs13(
       Button4,
       {
@@ -2230,7 +2215,7 @@ var CommandElement = (props) => {
 var command_default = CommandElement;
 
 // test-app/src/component/select-table-tree/index.tsx
-import React2, { forwardRef as forwardRef3, Fragment as Fragment17, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
+import React2, { forwardRef as forwardRef3, Fragment as Fragment18, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef3, useState as useState7 } from "react";
 import {
   DropdownItem as DropdownItem3,
   DropdownMenu as DropdownMenu3,
@@ -2244,7 +2229,7 @@ import { useTranslation as useTranslation11 } from "react-i18next";
 import classnames8 from "classnames";
 import moment2 from "moment";
 import { ChevronRight as ChevronRight3, Plus as Plus3 } from "becoxy-icons";
-import { Fragment as Fragment18, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var defaultMaxHeight2 = 250;
 var SelectTableTree = forwardRef3((props, ref) => {
   const {
@@ -2297,27 +2282,12 @@ var SelectTableTree = forwardRef3((props, ref) => {
   const isSelectedAll = useMemo2(() => {
     return isMulti === true && options.length > 0 && areAllItemsSelected(value, options, fieldValue ?? "value");
   }, [options, value]);
-  const defaultColumns = noHeader ? [
+  const defaultColumns = [
     {
       headerText: "Name",
       field: fieldLabel ?? "label",
       width: menuWidth
     }
-  ] : [
-    {
-      field: "key",
-      headerText: "Code",
-      width: 100,
-      maxWidth: 120,
-      minWidth: 80
-    },
-    {
-      headerText: "Name",
-      field: "label",
-      width: 150,
-      maxWidth: 200,
-      minWidth: 250
-    }
   ];
   const closeMenu = () => {
     setDropdownOpen(false);
@@ -2389,7 +2359,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
     }
   };
   const renderHeaderCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx15(Fragment17, { children: col.visible !== false && /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx15(Fragment18, { children: col.visible !== false && /* @__PURE__ */ jsx15(
       "th",
       {
         className: classnames8(`r-select-headercell fix-${col.fixedType}`, { "cell-fixed": col.fixedType }),
@@ -2452,7 +2422,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
   const RenderElement = React2.memo((props2) => {
     const { indexRow, row, isSelected, level = 0 } = props2;
     const [expanded, setExpanded] = useState7(row.expanded);
-    return /* @__PURE__ */ jsxs14(Fragment18, { children: [
+    return /* @__PURE__ */ jsxs14(Fragment19, { children: [
       /* @__PURE__ */ jsxs14(
         "tr",
         {
@@ -2537,7 +2507,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
               } else if (col.type === "datetime") {
                 valueDisplay = valueDisplay ? moment2(valueDisplay).format("DD/MM/yyyy HH:mm") : "";
               }
-              return /* @__PURE__ */ jsxs14(Fragment17, { children: [
+              return /* @__PURE__ */ jsxs14(Fragment18, { children: [
                 col.visible !== false && /* @__PURE__ */ jsxs14(
                   "td",
                   {
@@ -2624,9 +2594,9 @@ var SelectTableTree = forwardRef3((props, ref) => {
   const RenderTable = (props2) => {
     const {} = props2;
     let countDisplay = 0;
-    return /* @__PURE__ */ jsxs14(Fragment18, { children: [
+    return /* @__PURE__ */ jsxs14(Fragment19, { children: [
       /* @__PURE__ */ jsxs14("table", { style: { width: "100%" }, children: [
-        !noHeader && /* @__PURE__ */ jsx15("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs14("tr", { className: "r-select-row", role: "row", children: [
+        !(noHeader && (columns?.length ?? 0) > 0) && /* @__PURE__ */ jsx15("thead", { className: "r-select-gridheader", children: /* @__PURE__ */ jsxs14("tr", { className: "r-select-row", role: "row", children: [
           isMulti && /* @__PURE__ */ jsx15(
             "th",
             {
@@ -2661,11 +2631,11 @@ var SelectTableTree = forwardRef3((props, ref) => {
               )
             }
           ),
-          !noHeader && (columns ? columns : defaultColumns).map((col, index) => {
+          (columns ? columns : defaultColumns).map((col, index) => {
             return renderHeaderCol(col, index);
           })
         ] }) }),
-        options.length > 0 && /* @__PURE__ */ jsx15(Fragment18, { children: /* @__PURE__ */ jsx15("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
+        options.length > 0 && /* @__PURE__ */ jsx15(Fragment19, { children: /* @__PURE__ */ jsx15("tbody", { className: "r-select-gridcontent", children: options?.map((row, indexRow) => {
           if (checkSearch(searchTerm, row, columns ? columns : defaultColumns)) {
             const isSelected = value && (isMulti ? value?.some((x) => x === row[fieldValue ?? "value"]) : value[fieldValue ?? "value"] === row[fieldValue ?? "value"]);
             countDisplay++;
@@ -2729,12 +2699,12 @@ var SelectTableTree = forwardRef3((props, ref) => {
                 className: classnames8("select-table-control", { "r-select-is-disabled": isDisabled }, { "r-select-is-open": dropdownOpen }, { "r-select-is-focus": isFocus }, { "r-select-is-invalid": invalid }),
                 children: [
                   /* @__PURE__ */ jsxs14("div", { className: "select-table-container", children: [
-                    isMulti ? /* @__PURE__ */ jsx15(Fragment18, { children: /* @__PURE__ */ jsx15("div", { className: classnames8("select-value is-mutil", { "d-none": searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
+                    isMulti ? /* @__PURE__ */ jsx15(Fragment19, { children: /* @__PURE__ */ jsx15("div", { className: classnames8("select-value is-mutil", { "d-none": searchTerm }), children: getSelectedRecords(options, value).map((ele, index) => {
                       return /* @__PURE__ */ jsxs14("span", { children: [
                         index === 0 ? "" : ", ",
                         ele[fieldLabel ?? "label"]
                       ] }, index);
-                    }) }) }) : /* @__PURE__ */ jsx15(Fragment18, { children: /* @__PURE__ */ jsxs14("div", { className: classnames8("select-value", { "d-none": searchTerm }), children: [
+                    }) }) }) : /* @__PURE__ */ jsx15(Fragment19, { children: /* @__PURE__ */ jsxs14("div", { className: classnames8("select-value", { "d-none": searchTerm }), children: [
                       value ? formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? "label"] : "",
                       " "
                     ] }) }),
@@ -2815,7 +2785,7 @@ var SelectTableTree = forwardRef3((props, ref) => {
 
 // test-app/src/component/table/index.tsx
 import { NumericFormat } from "react-number-format";
-import { Fragment as Fragment20, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableEdit = forwardRef4((props, ref) => {
   const { t } = useTranslation12();
   const {
@@ -3001,7 +2971,7 @@ var TableEdit = forwardRef4((props, ref) => {
     }
   };
   const searchTemplate = () => {
-    return /* @__PURE__ */ jsx16(Fragment19, { children: /* @__PURE__ */ jsx16("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16(Fragment20, { children: /* @__PURE__ */ jsx16("div", { className: "me-50 r-search", children: /* @__PURE__ */ jsx16(
       react_input_default,
       {
         style: { width: "230px" },
@@ -3115,7 +3085,7 @@ var TableEdit = forwardRef4((props, ref) => {
             },
             fieldValue: col.selectSettings?.fieldValue,
             fieldLabel: col.selectSettings?.fieldLabel,
-            component: tableElement,
+            component: gridRef,
             columns: col.selectSettings?.columns,
             isClearable: col.selectSettings?.isClearable ?? false,
             decimalSeparator,
@@ -3197,7 +3167,7 @@ var TableEdit = forwardRef4((props, ref) => {
                 },
                 fieldValue: col.selectSettings?.fieldValue,
                 fieldLabel: col.selectSettings?.fieldLabel,
-                component: tableElement,
+                component: gridRef,
                 columns: col.selectSettings?.columns,
                 isClearable: col.selectSettings?.isClearable ?? false,
                 decimalSeparator,
@@ -3564,7 +3534,7 @@ var TableEdit = forwardRef4((props, ref) => {
   };
   const handleDuplicate = (data, index) => {
     if (toolbarSetting?.showBottomToolbar && !buttonSetting?.duplicateDisable && !editDisable && !addDisable) {
-      if (fieldKey) {
+      if (fieldKey && defaultValue) {
         fieldUniKey.forEach((item) => {
           data[item] = defaultValue[item];
         });
@@ -3802,7 +3772,7 @@ var TableEdit = forwardRef4((props, ref) => {
             right: col.fixedType === "right" ? objWidthFix[indexCol] : void 0,
             textAlign: col.textAlign ? col.textAlign : "left"
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div ", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div command", children: /* @__PURE__ */ jsx16(command_default, { commandItems: col.commandItems ?? [], handleCommandClick, indexRow, rowData: row, setIndexFocus, indexFocus }) })
         },
         `col-${indexRow}-${indexCol}`
       );
@@ -3854,7 +3824,7 @@ var TableEdit = forwardRef4((props, ref) => {
               e.stopPropagation();
             }
           },
-          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div pt-50", children: indexRow + 1 })
+          children: /* @__PURE__ */ jsx16("div", { className: "r-rowcell-div", children: indexRow + 1 })
         },
         `col-${indexRow}-${indexCol}`
       );
@@ -3923,7 +3893,7 @@ var TableEdit = forwardRef4((props, ref) => {
       }
       const typeDis = !editDisable && (indexFocus === indexRow || col.editType === "checkbox") && (!col.disabledCondition || !col.disabledCondition(row)) ? col.editEnable ? 1 : col.template ? 2 : 3 : col.template ? 2 : 3;
       const errorMessage = typeDis === 1 || col.field === "" || !col.validate ? "" : col.validate(row[col.field], row);
-      return /* @__PURE__ */ jsx16(Fragment19, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
         "td",
         {
           className: classnames9(
@@ -4008,7 +3978,7 @@ var TableEdit = forwardRef4((props, ref) => {
     return element && element.scrollWidth > element.clientWidth;
   };
   const renderFooterCol = (col, indexCol) => {
-    return /* @__PURE__ */ jsx16(Fragment19, { children: col.visible !== false && /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16(Fragment20, { children: col.visible !== false && /* @__PURE__ */ jsx16(
       "td",
       {
         className: classnames9(
@@ -4043,13 +4013,13 @@ var TableEdit = forwardRef4((props, ref) => {
     return /* @__PURE__ */ jsx16("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-items", children: [
       /* @__PURE__ */ jsxs15("div", { className: "r-toolbar-left", children: [
         /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleAdd, className: "d-flex", children: t("Add item") }) }),
-        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs15(Fragment20, { children: [
+        (indexFocus ?? -1) > -1 ? /* @__PURE__ */ jsxs15(Fragment21, { children: [
           /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: () => {
             handleDuplicate(dataSource[indexFocus ?? -1], indexFocus ?? -1);
           }, className: "d-flex", children: t("Duplicate") }) }),
           /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t("Insert item before") }) }),
           /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t("Insert item after") }) })
-        ] }) : /* @__PURE__ */ jsx16(Fragment20, { children: " " }),
+        ] }) : /* @__PURE__ */ jsx16(Fragment21, { children: " " }),
         /* @__PURE__ */ jsx16("div", { className: classnames9("r-toolbar-item", { "d-none": editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: /* @__PURE__ */ jsx16(Button6, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t("Delete all item") }) }),
         toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
           return item.align === "left" ? /* @__PURE__ */ jsx16("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`) : "";
@@ -4117,10 +4087,10 @@ var TableEdit = forwardRef4((props, ref) => {
       pagingSetting?.setCurrentPage(1);
     }
   }, [searchTerm, searchSetting?.searchTerm]);
-  return /* @__PURE__ */ jsxs15(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment20, { children: [
     /* @__PURE__ */ jsxs15("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ jsxs15("div", { className: "r-grid", ref: gridRef, children: [
-        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment20, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment20, {}),
+        toolbarSetting?.showTopToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarTop() }) : /* @__PURE__ */ jsx16(Fragment21, {}),
         /* @__PURE__ */ jsx16("div", { ref: tableElement, className: "r-gridtable", style: { height: `${height ? `${height}px` : "auto"}`, minHeight: `${minHeight ? `${minHeight}px` : ""}`, maxHeight: `${maxHeight ? `${maxHeight}px` : "400px"}` }, children: /* @__PURE__ */ jsxs15("table", { style: { width: "100%" }, children: [
           /* @__PURE__ */ jsx16("thead", { className: "r-gridheader", children: headerColumns.map((element, indexParent) => {
             return /* @__PURE__ */ jsx16("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
@@ -4147,9 +4117,9 @@ var TableEdit = forwardRef4((props, ref) => {
           /* @__PURE__ */ jsx16("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ jsx16("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx16("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
-          }) }) : /* @__PURE__ */ jsx16(Fragment20, {}) })
+          }) }) : /* @__PURE__ */ jsx16(Fragment21, {}) })
         ] }) }),
-        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment20, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment20, {})
+        toolbarSetting?.showBottomToolbar ? /* @__PURE__ */ jsx16(Fragment21, { children: renderToolbarBottom() }) : /* @__PURE__ */ jsx16(Fragment21, {})
       ] }),
       pagingSetting?.allowPaging ? /* @__PURE__ */ jsx16(
         PagingComponent,
@@ -4161,7 +4131,7 @@ var TableEdit = forwardRef4((props, ref) => {
           totalItem: pagingClient ? totalCount : pagingSetting?.totalItem ?? 0,
           onChangePageSize
         }
-      ) : /* @__PURE__ */ jsx16(Fragment20, {})
+      ) : /* @__PURE__ */ jsx16(Fragment21, {})
     ] }),
     /* @__PURE__ */ jsx16(
       sidebar_setting_column_default,
@@ -4181,7 +4151,7 @@ var table_default = TableEdit;
 // test-app/src/component/tab-menu/index.tsx
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "becoxy-icons";
 import classNames6 from "classnames";
-import { Fragment as Fragment21, useEffect as useEffect10, useState as useState9 } from "react";
+import { Fragment as Fragment22, useEffect as useEffect10, useState as useState9 } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { DropdownItem as DropdownItem4, DropdownMenu as DropdownMenu5, DropdownToggle as DropdownToggle5, UncontrolledDropdown as UncontrolledDropdown2 } from "reactstrap";
 import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -4259,7 +4229,7 @@ var TabsMenuComponent = ({
   const handleModal = (name) => {
     setOpenModal((old) => ({ ...old, [name]: !(openModal[name] ?? false) }));
   };
-  return /* @__PURE__ */ jsxs16(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment22, { children: [
     renderModal ? renderModal({ handleModal, windowSize, openModal, setDataItem, dataItem }) : "",
     /* @__PURE__ */ jsxs16("div", { className: classNames6("tab-custom", { "tab-parent": tabParent }, { "tab-child": tabChild }), style: { width: `calc(100% - ${buttonWidth ?? 100}px` }, children: [
       /* @__PURE__ */ jsx17(
@@ -4318,7 +4288,7 @@ var TabsMenuComponent = ({
 import { Bold, Droplet, Italic, Type, Underline } from "becoxy-icons";
 import { Button as Button7, Input as Input10 } from "reactstrap";
 import classnames10 from "classnames";
-import { Fragment as Fragment22 } from "react";
+import { Fragment as Fragment23 } from "react";
 
 // test-app/src/component/input-style/fonts.ts
 var OptionFont = [
@@ -5191,7 +5161,7 @@ var InputStyleComponent = (props) => {
     disabledItalic,
     disabledUnderline
   } = props;
-  return /* @__PURE__ */ jsx18(Fragment22, { children: /* @__PURE__ */ jsxs17("div", { className: "d-flex align-items-center", children: [
+  return /* @__PURE__ */ jsx18(Fragment23, { children: /* @__PURE__ */ jsxs17("div", { className: "d-flex align-items-center", children: [
     /* @__PURE__ */ jsx18(
       SelectTable,
       {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-table-edit",
   "license": "MIT",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",