react-table-edit 0.4.0 → 0.4.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
 
 type ITextAlign = 'center' | 'left' | 'right';
@@ -93,16 +93,18 @@ type IFTableEditToolbar = {
     toolbarBottomOptions?: IFToolbarOptions[];
     showBottomToolbar?: boolean;
 };
+type IFTableEditSearchSetting = {
+    searchEnable?: boolean;
+    searchTerm?: string;
+    setSearchTerm?: Dispatch<SetStateAction<string>>;
+    keyField?: string[];
+};
 type IFTableEditProps = {
     idTable?: string;
     dataSource: any[];
-    haveSum?: boolean;
     selectEnable?: boolean;
     defaultValue?: any;
     columns: IColumnTable[];
-    pagingSetting?: IFTableEditPaging;
-    buttonSetting?: IFTableEditButton;
-    toolbarSetting?: IFTableEditToolbar;
     setDataSource?: any;
     commandClick?: any;
     rowChange?: any;
@@ -111,16 +113,18 @@ type IFTableEditProps = {
     height?: number;
     maxHeight?: number;
     minHeight?: number;
-    searchTerm?: string;
-    setSearchTerm?: any;
     selectedItem?: any;
-    setSelectedItem?: any;
-    searchEnable?: boolean;
+    setSelectedItem?: Dispatch<SetStateAction<any>>;
     isMulti?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
+    haveSum?: boolean;
     editDisable?: boolean;
     addDisable?: boolean;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    pagingSetting?: IFTableEditPaging;
+    buttonSetting?: IFTableEditButton;
+    toolbarSetting?: IFTableEditToolbar;
+    searchSetting?: IFTableEditSearchSetting;
 };
 type IFPageSize = {
     pageSize: number;
@@ -178,4 +182,4 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Dispatch, SetStateAction } from 'react';
 import { TFunction } from 'react-i18next';
 
 type ITextAlign = 'center' | 'left' | 'right';
@@ -93,16 +93,18 @@ type IFTableEditToolbar = {
     toolbarBottomOptions?: IFToolbarOptions[];
     showBottomToolbar?: boolean;
 };
+type IFTableEditSearchSetting = {
+    searchEnable?: boolean;
+    searchTerm?: string;
+    setSearchTerm?: Dispatch<SetStateAction<string>>;
+    keyField?: string[];
+};
 type IFTableEditProps = {
     idTable?: string;
     dataSource: any[];
-    haveSum?: boolean;
     selectEnable?: boolean;
     defaultValue?: any;
     columns: IColumnTable[];
-    pagingSetting?: IFTableEditPaging;
-    buttonSetting?: IFTableEditButton;
-    toolbarSetting?: IFTableEditToolbar;
     setDataSource?: any;
     commandClick?: any;
     rowChange?: any;
@@ -111,16 +113,18 @@ type IFTableEditProps = {
     height?: number;
     maxHeight?: number;
     minHeight?: number;
-    searchTerm?: string;
-    setSearchTerm?: any;
     selectedItem?: any;
-    setSelectedItem?: any;
-    searchEnable?: boolean;
+    setSelectedItem?: Dispatch<SetStateAction<any>>;
     isMulti?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
+    haveSum?: boolean;
     editDisable?: boolean;
     addDisable?: boolean;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    pagingSetting?: IFTableEditPaging;
+    buttonSetting?: IFTableEditButton;
+    toolbarSetting?: IFTableEditToolbar;
+    searchSetting?: IFTableEditSearchSetting;
 };
 type IFPageSize = {
     pageSize: number;
@@ -178,4 +182,4 @@ declare const objSymbolThousand: any;
 declare const formartNumberic: (str: string | number, decimalSeparator: string, thousandSeparator: string, fraction?: number, isDone?: boolean) => string;
 declare const roundNumber: (num: number, fraction: number) => number;
 
-export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };
+export { type FromItemsField, type IColumnTable, type ICommandItem, type IFCurrentPage, type IFCurrentPageConfig, type IFPageSize, type IFTableEditButton, type IFTableEditPaging, type IFTableEditProps, type IFTableEditSearchSetting, type IFTableEditToolbar, type IFToolbarOptions, type ISettingFormElement, type ISettingNumericElement, type ISettingSelectElement, TableEdit as default, formartNumberic, generateUUID, isNullOrUndefined, messageBoxConfirm, messageBoxConfirm2, messageBoxConfirmDelete, messageBoxError, messageHtmlBoxConfirm, messageHtmlBoxError, notificationError, notificationSuccess, objSymbolDecimal, objSymbolThousand, roundNumber, useOnClickOutside };

package/dist/index.js

@@ -1496,9 +1496,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
     defaultValue,
     haveSum,
     toolbarSetting,
-    searchTerm,
-    setSearchTerm,
-    searchEnable,
+    searchSetting,
     setSelectedItem,
     selectedItem,
     selectEnable,
@@ -1526,12 +1524,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   const [objWidthFix, setObjWidthFix] = (0, import_react12.useState)({});
   const [openPopupTree, setOpenPopupTree] = (0, import_react12.useState)(false);
   const [openPopupSetupColumn, setOpenPopupSetupColumn] = (0, import_react12.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react12.useState)("");
   const tableElement = (0, import_react12.useRef)(null);
   const gridRef = (0, import_react12.useRef)();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
   const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
-  const totalCount = dataSource.length;
+  const searchClient = searchSetting?.searchEnable && !(editDisable || addDisable);
+  let totalCount = dataSource.length;
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
   (0, import_react12.useEffect)(() => {
@@ -1668,8 +1668,13 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
   };
   const handleKeyPress = (e) => {
     if (e.code === "Enter" || e.code === "NumpadEnter") {
-      setSearchTerm(e.target.value);
+      if (searchSetting?.setSearchTerm) {
+        searchSetting?.setSearchTerm(e.target.value);
+      } else {
+        setSearchTerm(e.target.value);
+      }
       e.stopPropagation();
+      e.preventDefault();
     }
   };
   const searchTemplate = () => {
@@ -1677,14 +1682,14 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       react_input_default,
       {
         style: { width: "230px" },
-        value: searchTerm,
-        setSearchTerm,
+        value: searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm,
+        setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm,
         placeholder: t("Search"),
         onKeyPress: handleKeyPress
       }
     ) }) });
   };
-  const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
+  const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: "left" }] : [];
   let toolbarTopOption = [];
   if (toolbarSetting?.toolbarOptions) {
     toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
@@ -2870,6 +2875,39 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
       ] })
     ] }) });
   };
+  const checkSearch = (keyword, data, fieldKey2) => {
+    if (!keyword || fieldKey2.length === 0) {
+      return true;
+    }
+    for (let index = 0; index < fieldKey2.length; index++) {
+      const key = fieldKey2[index].trim();
+      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const renderData = () => {
+    totalCount = 0;
+    return dataSource.map((row, indexRow) => {
+      const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+      const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
+      if (flagSearch) {
+        totalCount += 1;
+        const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
+        return flagDisplay && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "tr",
+          {
+            className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
+            children: contentColumns.map((col, indexCol) => {
+              return renderContentCol(col, row, indexRow, indexCol, isSelected);
+            })
+          },
+          `row-${indexRow}`
+        );
+      }
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "r-grid", ref: gridRef, children: [
@@ -2880,20 +2918,7 @@ var TableEdit = (0, import_react12.forwardRef)((props, ref) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
-            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
-            return flagDisplay && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "tr",
-              {
-                className: (0, import_classnames10.default)("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
-                children: contentColumns.map((col, indexCol) => {
-                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) })

package/dist/index.mjs

@@ -1455,9 +1455,7 @@ var TableEdit = forwardRef2((props, ref) => {
     defaultValue,
     haveSum,
     toolbarSetting,
-    searchTerm,
-    setSearchTerm,
-    searchEnable,
+    searchSetting,
     setSelectedItem,
     selectedItem,
     selectEnable,
@@ -1485,12 +1483,14 @@ var TableEdit = forwardRef2((props, ref) => {
   const [objWidthFix, setObjWidthFix] = useState5({});
   const [openPopupTree, setOpenPopupTree] = useState5(false);
   const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState5(false);
+  const [searchTerm, setSearchTerm] = useState5("");
   const tableElement = useRef2(null);
   const gridRef = useRef2();
   const lag = window.localStorage.getItem("i18nextLng");
   const lang = lag ? lag : "vi";
   const pagingClient = pagingSetting?.allowPaging && !(editDisable || addDisable);
-  const totalCount = dataSource.length;
+  const searchClient = searchSetting?.searchEnable && !(editDisable || addDisable);
+  let totalCount = dataSource.length;
   const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? "id";
   const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
   useEffect5(() => {
@@ -1627,8 +1627,13 @@ var TableEdit = forwardRef2((props, ref) => {
   };
   const handleKeyPress = (e) => {
     if (e.code === "Enter" || e.code === "NumpadEnter") {
-      setSearchTerm(e.target.value);
+      if (searchSetting?.setSearchTerm) {
+        searchSetting?.setSearchTerm(e.target.value);
+      } else {
+        setSearchTerm(e.target.value);
+      }
       e.stopPropagation();
+      e.preventDefault();
     }
   };
   const searchTemplate = () => {
@@ -1636,14 +1641,14 @@ var TableEdit = forwardRef2((props, ref) => {
       react_input_default,
       {
         style: { width: "230px" },
-        value: searchTerm,
-        setSearchTerm,
+        value: searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm,
+        setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm,
         placeholder: t("Search"),
         onKeyPress: handleKeyPress
       }
     ) }) });
   };
-  const defaultToolbarOption = searchEnable === true ? [{ template: searchTemplate, align: "left" }] : [];
+  const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: "left" }] : [];
   let toolbarTopOption = [];
   if (toolbarSetting?.toolbarOptions) {
     toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
@@ -2829,6 +2834,39 @@ var TableEdit = forwardRef2((props, ref) => {
       ] })
     ] }) });
   };
+  const checkSearch = (keyword, data, fieldKey2) => {
+    if (!keyword || fieldKey2.length === 0) {
+      return true;
+    }
+    for (let index = 0; index < fieldKey2.length; index++) {
+      const key = fieldKey2[index].trim();
+      if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const renderData = () => {
+    totalCount = 0;
+    return dataSource.map((row, indexRow) => {
+      const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+      const flagSearch = !searchClient || checkSearch(searchSetting?.searchTerm !== void 0 ? searchSetting?.searchTerm : searchTerm, row, searchSetting?.keyField ?? []);
+      if (flagSearch) {
+        totalCount += 1;
+        const flagDisplay = !pagingClient || totalCount > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && totalCount <= (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
+        return flagDisplay && /* @__PURE__ */ jsx12(
+          "tr",
+          {
+            className: classnames6("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
+            children: contentColumns.map((col, indexCol) => {
+              return renderContentCol(col, row, indexRow, indexCol, isSelected);
+            })
+          },
+          `row-${indexRow}`
+        );
+      }
+    });
+  };
   return /* @__PURE__ */ jsxs11(Fragment12, { children: [
     /* @__PURE__ */ jsxs11("div", { className: "react-table-edit", children: [
       /* @__PURE__ */ jsxs11("div", { className: "r-grid", ref: gridRef, children: [
@@ -2839,20 +2877,7 @@ var TableEdit = forwardRef2((props, ref) => {
               return renderHeaderCol(col, index, indexParent);
             }) }, indexParent);
           }) }),
-          /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: dataSource.map((row, indexRow) => {
-            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-            const flagDisplay = !pagingClient || indexRow + 1 > (pagingSetting.pageSize ?? 0) * ((pagingSetting.currentPage ?? 0) - 1) && indexRow < (pagingSetting.pageSize ?? 0) * (pagingSetting.currentPage ?? 0);
-            return flagDisplay && /* @__PURE__ */ jsx12(
-              "tr",
-              {
-                className: classnames6("r-row", { "last-row": indexRow === (pagingClient ? totalCount % (pagingSetting?.pageSize ?? 0) : totalCount - 1) }, { "fisrt-row": indexRow === 0 }),
-                children: contentColumns.map((col, indexCol) => {
-                  return renderContentCol(col, row, indexRow, indexCol, isSelected);
-                })
-              },
-              `row-${indexRow}`
-            );
-          }) }),
+          /* @__PURE__ */ jsx12("tbody", { className: "r-gridcontent", children: renderData() }),
           /* @__PURE__ */ jsx12("tfoot", { className: "r-gridfoot", children: haveSum == true ? /* @__PURE__ */ jsx12("tr", { className: "r-row", children: contentColumns.map((col, index) => {
             return renderFooterCol(col, index);
           }) }) : /* @__PURE__ */ jsx12(Fragment13, {}) })

package/package.json

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