@mkt-loitd/react-table-grid-custom 1.2.1 → 1.2.3

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
@@ -16,6 +16,24 @@ interface IObjectDynamic {
 }
 interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
 }
+interface useShowHideColumnParameter<T, SR = unknown> {
+    nameLocal?: string;
+    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
+    columns: TColumnsTable<T, SR>;
+    ignoreColumns?: string[];
+}
+interface useShowHideColumnReturn<T, SR> {
+    hiddenColumns: string[];
+    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
+    columnsTable: TColumnsTable<T, SR>;
+    changeHiddenColumn: (key: string | string[]) => void;
+    newShowhideColumns: TColumnsTable<T, SR>;
+    locationColumns: string[];
+    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
+    handleChangeLocation?: (arr: string[]) => void;
+}
+
+declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
 interface IPaginationText {
     from?: number;
@@ -41,10 +59,22 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     fetching?: boolean;
     TableLogo?: string;
 }
+interface refTablePaginationClient extends Required<IPaginationParams> {
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    resetPagition: (conditional?: boolean) => void;
+}
 
 type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
 declare const ReactTableGridCustom: ReactTableGridCustomComponent;
 
+type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
+interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
+    initPage?: number;
+    initPageSize?: number;
+    refTable?: MutableRefObject<refTablePaginationClient | undefined>;
+}
+declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
+
 interface ContextMenuProps {
     selector: string;
     children?: ReactNode;
@@ -198,4 +228,4 @@ interface UseShowHideColumnReturn<T, SR> {
     handleChangeLocation?: (arr: string[]) => void;
 }
 
-export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
+export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
@@ -16,6 +16,24 @@ interface IObjectDynamic {
 }
 interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
 }
+interface useShowHideColumnParameter<T, SR = unknown> {
+    nameLocal?: string;
+    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
+    columns: TColumnsTable<T, SR>;
+    ignoreColumns?: string[];
+}
+interface useShowHideColumnReturn<T, SR> {
+    hiddenColumns: string[];
+    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
+    columnsTable: TColumnsTable<T, SR>;
+    changeHiddenColumn: (key: string | string[]) => void;
+    newShowhideColumns: TColumnsTable<T, SR>;
+    locationColumns: string[];
+    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
+    handleChangeLocation?: (arr: string[]) => void;
+}
+
+declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
 interface IPaginationText {
     from?: number;
@@ -41,10 +59,22 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     fetching?: boolean;
     TableLogo?: string;
 }
+interface refTablePaginationClient extends Required<IPaginationParams> {
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
+    resetPagition: (conditional?: boolean) => void;
+}
 
 type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
 declare const ReactTableGridCustom: ReactTableGridCustomComponent;
 
+type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
+interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
+    initPage?: number;
+    initPageSize?: number;
+    refTable?: MutableRefObject<refTablePaginationClient | undefined>;
+}
+declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
+
 interface ContextMenuProps {
     selector: string;
     children?: ReactNode;
@@ -198,4 +228,4 @@ interface UseShowHideColumnReturn<T, SR> {
     handleChangeLocation?: (arr: string[]) => void;
 }
 
-export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn };
+export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type ReactTableGridCustomPaginationClientComponent, type ReactTableGridCustomPaginationClientProps, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };

package/dist/index.js

@@ -31,17 +31,43 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ReactTableGridCustom: () => ReactTableGridCustom,
-  TableStyleContextWapper: () => TableStyleContextWapper
+  ReactTableGridCustomPaginationClient: () => ReactTableGridCustomPaginationClient,
+  TableStyleContextWapper: () => TableStyleContextWapper,
+  useShowHideColumn: () => useShowHideColumn
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/component/ui/Table/ReactTableGridCustom.tsx
-var import_core = require("@mantine/core");
+// src/helpers/functions.ts
+var import_idb = require("idb");
 var import_lodash = require("lodash");
-var import_react2 = require("react");
-var import_react_data_grid = require("react-data-grid");
-var import_styles = require("react-data-grid/lib/styles.css");
-var import_react_i18next2 = require("react-i18next");
+var import_moment = __toESM(require("moment"));
+var setLocalStore = (key, value) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(key, value);
+  }
+};
+var getLocalStore = (key) => {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem(key);
+  } else {
+    return null;
+  }
+};
+var toggleValues = ({ array, value }) => {
+  if (array.includes(value)) {
+    return array.filter((item) => item !== value);
+  } else {
+    return [...array, value];
+  }
+};
+var arrayLocal = (array) => {
+  try {
+    const data = array ? JSON.parse(array) : [];
+    return Array.isArray(data) ? data : [];
+  } catch {
+    return [];
+  }
+};
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -69,12 +95,128 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/hooks/useTranslationTable.ts
+// src/hooks/useShowHideColumn.ts
 var import_react = require("react");
+var import_lodash2 = require("lodash");
+
+// src/type/table.ts
+function isColumn(column) {
+  return "key" in column;
+}
+
+// src/hooks/useShowHideColumn.ts
+var useShowHideColumn = ({
+  nameLocal = "table",
+  columns,
+  ignoreColumns
+}) => {
+  const nameLocalLocation = `${nameLocal}_location`;
+  const [locationColumns, setLocationColumns] = (0, import_react.useState)(() => {
+    const dataLocal = getLocalStore(nameLocalLocation);
+    if (dataLocal) {
+      return arrayLocal(dataLocal);
+    }
+    return [];
+  });
+  const [hiddenColumns, setHiddenColumns] = (0, import_react.useState)(() => {
+    const dataLocal = getLocalStore(nameLocal);
+    if (dataLocal) {
+      return arrayLocal(dataLocal);
+    }
+    return [];
+  });
+  const handleFindLocation = (0, import_react.useCallback)(
+    (filterColumns, arrLoctions = locationColumns) => {
+      return (arrLoctions == null ? void 0 : arrLoctions.length) > 0 ? arrLoctions == null ? void 0 : arrLoctions.reduce(
+        (total, current) => {
+          const currentColumns = filterColumns == null ? void 0 : filterColumns.find((item) => {
+            const newItem = item;
+            return (newItem == null ? void 0 : newItem.key) === current;
+          });
+          if (currentColumns) {
+            total = [...total, currentColumns];
+          }
+          return total;
+        },
+        []
+      ) : filterColumns;
+    },
+    [locationColumns]
+  );
+  const newCloumnKeys = (0, import_react.useMemo)(
+    () => columns == null ? void 0 : columns.filter(isColumn).map((column) => column.key),
+    [columns]
+  );
+  const newColumns = (0, import_react.useMemo)(() => {
+    var _a;
+    const filterColumns = (_a = columns == null ? void 0 : columns.filter((column) => {
+      if (!isColumn(column)) return true;
+      const key = column.key;
+      if (ignoreColumns == null ? void 0 : ignoreColumns.includes(key)) return true;
+      if (hiddenColumns == null ? void 0 : hiddenColumns.includes(key)) return false;
+      return true;
+    })) != null ? _a : [];
+    return handleFindLocation(filterColumns);
+  }, [columns, hiddenColumns, locationColumns, ignoreColumns]);
+  const newShowhideColumns = (0, import_react.useMemo)(() => {
+    var _a;
+    if (!ignoreColumns) return columns;
+    return (_a = columns == null ? void 0 : columns.filter((column) => {
+      if (!isColumn(column)) return true;
+      return !ignoreColumns.includes(column.key);
+    })) != null ? _a : [];
+  }, [columns, ignoreColumns]);
+  const changeHiddenColumn = (0, import_react.useCallback)(
+    (key) => {
+      let newData = [...hiddenColumns];
+      if (typeof key === "string") {
+        newData = toggleValues({
+          array: newData,
+          value: key
+        });
+      } else {
+        newData = key;
+      }
+      setLocalStore(nameLocal, JSON.stringify(newData));
+      setHiddenColumns(newData);
+    },
+    [hiddenColumns, nameLocalLocation]
+  );
+  const handleChangeLocation = (0, import_react.useCallback)(
+    (key) => {
+      let newKey = key;
+      newKey = (0, import_lodash2.uniq)([...key, ...newCloumnKeys]);
+      setLocationColumns(newKey);
+      setLocalStore(nameLocalLocation, JSON.stringify(newKey));
+    },
+    [newCloumnKeys]
+  );
+  return {
+    hiddenColumns,
+    setHiddenColumns,
+    columnsTable: newColumns,
+    changeHiddenColumn,
+    newShowhideColumns,
+    locationColumns,
+    handleFindLocation,
+    handleChangeLocation
+  };
+};
+
+// src/component/ui/Table/ReactTableGridCustom.tsx
+var import_core = require("@mantine/core");
+var import_lodash3 = require("lodash");
+var import_react3 = require("react");
+var import_react_data_grid = require("react-data-grid");
+var import_styles = require("react-data-grid/lib/styles.css");
+var import_react_i18next2 = require("react-i18next");
+
+// src/hooks/useTranslationTable.ts
+var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 var useTranslationTable = (column) => {
   const { i18n, t } = (0, import_react_i18next.useTranslation)();
-  const columnTranslation = (0, import_react.useMemo)(() => {
+  const columnTranslation = (0, import_react2.useMemo)(() => {
     return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
   }, [i18n == null ? void 0 : i18n.language, column]);
   return columnTranslation;
@@ -173,16 +315,16 @@ var ReactTableGridCustomInner = ({
   ...spread
 }) => {
   const { t } = (0, import_react_i18next2.useTranslation)();
-  const tableRef = (0, import_react2.useRef)(null);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [containerWidth, setContainerWidth] = (0, import_react2.useState)(0);
-  const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
+  const tableRef = (0, import_react3.useRef)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [containerWidth, setContainerWidth] = (0, import_react3.useState)(0);
+  const [sortColumns, setSortColumns] = (0, import_react3.useState)([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = (0, import_react2.useMemo)(
+  const maxPage = (0, import_react3.useMemo)(
     () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = (0, import_react2.useMemo)(() => {
+  const toInPagination = (0, import_react3.useMemo)(() => {
     if (!hiddenPaginationText && page && pageSize) {
       const from = STT({ page, pageSize }, 0);
       return {
@@ -195,7 +337,7 @@ var ReactTableGridCustomInner = ({
   const columnTranslation = useTranslationTable_default(
     columns
   );
-  const newColumns = (0, import_react2.useMemo)(() => {
+  const newColumns = (0, import_react3.useMemo)(() => {
     let cols = [
       ...columnTranslation
     ];
@@ -228,13 +370,13 @@ var ReactTableGridCustomInner = ({
     page,
     pageSize
   ]);
-  const customRowKeyGetter = (0, import_react2.useCallback)(
+  const customRowKeyGetter = (0, import_react3.useCallback)(
     (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
       if (typeof rowKeyGetter === "string") {
-        return (0, import_lodash.get)(row, rowKeyGetter);
+        return (0, import_lodash3.get)(row, rowKeyGetter);
       }
       throw new Error(
         "rowKeyGetter must be a string or a function"
@@ -242,15 +384,15 @@ var ReactTableGridCustomInner = ({
     },
     [rowKeyGetter]
   );
-  const sortedRows = (0, import_react2.useMemo)(() => {
+  const sortedRows = (0, import_react3.useMemo)(() => {
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
     const order = direction === "ASC" ? "asc" : "desc";
     const iteratee = typeof columnKey === "string" ? columnKey : String(columnKey);
-    return (0, import_lodash.orderBy)(data, [iteratee], [order]);
+    return (0, import_lodash3.orderBy)(data, [iteratee], [order]);
   }, [data, sortColumns]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     var _a;
     setIsLoading(false);
     if ((_a = tableRef.current) == null ? void 0 : _a.element) {
@@ -300,20 +442,103 @@ var ReactTableGridCustomInner = ({
     }
   );
 };
-var ReactTableGridCustom = (0, import_react2.memo)(
+var ReactTableGridCustom = (0, import_react3.memo)(
   ReactTableGridCustomInner
 );
 
+// src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
+var import_react5 = require("react");
+
+// src/hooks/useDataPagingClient.ts
+var import_react4 = require("react");
+var useDataPagingClient = ({ data = [], page, pageSize }) => {
+  const newData = (0, import_react4.useMemo)(() => {
+    if (page && pageSize) {
+      const startIndex = (page - 1) * pageSize;
+      return data.slice(startIndex, startIndex + pageSize);
+    }
+    return data;
+  }, [data, page, pageSize]);
+  return newData;
+};
+var useDataPagingClient_default = useDataPagingClient;
+
+// src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ReactTableGridCustomPaginationClientInner = ({
+  data,
+  initPage = 1,
+  initPageSize = 200,
+  refTable,
+  ...spread
+}) => {
+  const [configSearch, setConfigSearch] = (0, import_react5.useState)({
+    page: initPage,
+    pageSize: initPageSize
+  });
+  const newDataAccount = useDataPagingClient_default({
+    data,
+    page: configSearch == null ? void 0 : configSearch.page,
+    pageSize: configSearch == null ? void 0 : configSearch.pageSize
+  });
+  const resetPage = (0, import_react5.useCallback)(() => {
+    setConfigSearch((prev) => ({
+      ...prev,
+      page: 1
+    }));
+  }, []);
+  (0, import_react5.useImperativeHandle)(
+    refTable,
+    () => {
+      var _a, _b;
+      return {
+        setConfigSearch,
+        page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
+        pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
+        resetPagition: (conditional = true) => {
+          if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
+            resetPage();
+          } else {
+            resetPage();
+          }
+        }
+      };
+    },
+    [
+      setConfigSearch,
+      configSearch == null ? void 0 : configSearch.page,
+      configSearch == null ? void 0 : configSearch.pageSize,
+      initPage,
+      initPageSize,
+      resetPage
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ReactTableGridCustom,
+    {
+      data: newDataAccount,
+      total: data == null ? void 0 : data.length,
+      page: configSearch == null ? void 0 : configSearch.page,
+      pageSize: configSearch == null ? void 0 : configSearch.pageSize,
+      setConfigPagination: setConfigSearch,
+      ...spread
+    }
+  );
+};
+var ReactTableGridCustomPaginationClient = (0, import_react5.memo)(
+  ReactTableGridCustomPaginationClientInner
+);
+
 // src/component/ui/Table/TableStyleContextWapper.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 
 // src/component/ui/ContextMenu/ContextMenu.tsx
-var import_react3 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ContextMenu = ({ selector, children, zIndex = 40 }) => {
-  const menuRef = (0, import_react3.useRef)(null);
-  const closeMenu = (0, import_react3.useCallback)(() => {
+  const menuRef = (0, import_react6.useRef)(null);
+  const closeMenu = (0, import_react6.useCallback)(() => {
     const contextMenuElem = menuRef.current;
     const elementParent = document.querySelector(selector);
     if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
@@ -325,7 +550,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
       elementParent.style.removeProperty("overflow");
     }
   }, [menuRef.current]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const elementParent = document.querySelector(selector);
     if (elementParent) {
       const clickMenu = (e) => {
@@ -393,7 +618,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
     };
   }, []);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         className: "fixed z-40 w-fit",
@@ -408,12 +633,12 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
 var ContextMenu_default = ContextMenu;
 
 // src/component/ui/ContextMenu/RenderContextMenu.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/component/ui/ContextMenu/ContextMenuItem.tsx
 var import_react_i18next3 = require("react-i18next");
 var import_md = require("react-icons/md");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ContextMenuItem = ({
   currentValue,
   expandValue,
@@ -423,7 +648,7 @@ var ContextMenuItem = ({
 }) => {
   const { t } = (0, import_react_i18next3.useTranslation)();
   const Icon = currentValue.Icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: `cursor-pointer p-2 flex items-center space-x-2 relative ${show ? "bg-[#555] text-white" : "hover:bg-[#555] hover:text-white"}`,
@@ -432,9 +657,9 @@ var ContextMenuItem = ({
         expandValue && valueClickItem && (currentValue == null ? void 0 : currentValue.onClick) && ((_a = currentValue == null ? void 0 : currentValue.onClick) == null ? void 0 : _a.call(currentValue, valueClickItem, expandValue));
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 20 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
-        isArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_md.MdKeyboardArrowRight, { size: 20 })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { size: 20 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
+        isArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_md.MdKeyboardArrowRight, { size: 20 })
       ]
     }
   );
@@ -442,14 +667,14 @@ var ContextMenuItem = ({
 var ContextMenuItem_default = ContextMenuItem;
 
 // src/component/ui/ContextMenu/DropdownContextChild.tsx
-var import_react4 = __toESM(require("@tippyjs/react"));
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react7 = __toESM(require("@tippyjs/react"));
+var import_react8 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DropdownContextChild = ({ button, children, ...rest }) => {
-  const id = (0, import_react5.useId)();
-  const instanceRef = (0, import_react5.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react4.default,
+  const id = (0, import_react8.useId)();
+  const instanceRef = (0, import_react8.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react7.default,
     {
       theme: "drop-down",
       className: "!bg-transparent !text-inherit !border-r-0 [&>*]:!p-0",
@@ -460,7 +685,7 @@ var DropdownContextChild = ({ button, children, ...rest }) => {
       allowHTML: true,
       content: children,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           id: `div-${id}`,
@@ -477,16 +702,16 @@ var DropdownContextChild = ({ button, children, ...rest }) => {
 var DropdownContextChild_default = DropdownContextChild;
 
 // src/component/ui/ContextMenu/RenderContextMenu.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var RenderContextMenu = ({
   renderData,
   valueClickItem,
   expandValue = {}
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
-    const [isShow, setIsShow] = (0, import_react6.useState)(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react6.Fragment, { children: [
-      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
+    const [isShow, setIsShow] = (0, import_react9.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react9.Fragment, { children: [
+      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         ContextMenuItem_default,
         {
           currentValue: menuAction,
@@ -494,7 +719,7 @@ var RenderContextMenu = ({
           valueClickItem
         }
       ),
-      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         DropdownContextChild_default,
         {
           appendTo: "parent",
@@ -502,7 +727,7 @@ var RenderContextMenu = ({
           offset: [0, 5],
           onShow: () => setIsShow(true),
           onHide: () => setIsShow(false),
-          button: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          button: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             ContextMenuItem_default,
             {
               currentValue: menuAction,
@@ -512,7 +737,7 @@ var RenderContextMenu = ({
               isArrow: true
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             RenderContextMenu,
             {
               renderData: menuAction == null ? void 0 : menuAction.children,
@@ -528,26 +753,26 @@ var RenderContextMenu = ({
 var RenderContextMenu_default = RenderContextMenu;
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var TableStyleContextMenuWapper = ({
   children,
   contextMenuProps,
   clsTablecustom,
   renderContext
 }) => {
-  const idWapper = (0, import_react7.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const idWapper = (0, import_react10.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       id: `wapper_menu_context-${idWapper}`,
       className: `border border-[#dedede] rounded-xl overflow-hidden bg-white flex-1 h-full flex flex-col min-h-[360px] ${clsTablecustom != null ? clsTablecustom : ""}`,
       children: [
-        (renderContext == null ? void 0 : renderContext.renderData) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        (renderContext == null ? void 0 : renderContext.renderData) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ContextMenu_default,
           {
             selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
             ...contextMenuProps,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RenderContextMenu_default, { ...renderContext })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderContextMenu_default, { ...renderContext })
           }
         ),
         children
@@ -555,11 +780,13 @@ var TableStyleContextMenuWapper = ({
     }
   );
 };
-var TableStyleContextWapper = (0, import_react7.memo)(
+var TableStyleContextWapper = (0, import_react10.memo)(
   TableStyleContextMenuWapper
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ReactTableGridCustom,
-  TableStyleContextWapper
+  ReactTableGridCustomPaginationClient,
+  TableStyleContextWapper,
+  useShowHideColumn
 });

package/dist/index.mjs

@@ -1,20 +1,34 @@
-// src/component/ui/Table/ReactTableGridCustom.tsx
-import { Checkbox } from "@mantine/core";
-import { get, orderBy } from "lodash";
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState
-} from "react";
-import {
-  DataGrid,
-  SelectColumn
-} from "react-data-grid";
-import "react-data-grid/lib/styles.css";
-import { useTranslation as useTranslation2 } from "react-i18next";
+// src/helpers/functions.ts
+import { deleteDB, openDB } from "idb";
+import { pickBy } from "lodash";
+import moment from "moment";
+var setLocalStore = (key, value) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(key, value);
+  }
+};
+var getLocalStore = (key) => {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem(key);
+  } else {
+    return null;
+  }
+};
+var toggleValues = ({ array, value }) => {
+  if (array.includes(value)) {
+    return array.filter((item) => item !== value);
+  } else {
+    return [...array, value];
+  }
+};
+var arrayLocal = (array) => {
+  try {
+    const data = array ? JSON.parse(array) : [];
+    return Array.isArray(data) ? data : [];
+  } catch {
+    return [];
+  }
+};
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -42,12 +56,138 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/hooks/useShowHideColumn.ts
+import { useCallback, useMemo, useState } from "react";
+import { uniq } from "lodash";
+
+// src/type/table.ts
+function isColumn(column) {
+  return "key" in column;
+}
+
+// src/hooks/useShowHideColumn.ts
+var useShowHideColumn = ({
+  nameLocal = "table",
+  columns,
+  ignoreColumns
+}) => {
+  const nameLocalLocation = `${nameLocal}_location`;
+  const [locationColumns, setLocationColumns] = useState(() => {
+    const dataLocal = getLocalStore(nameLocalLocation);
+    if (dataLocal) {
+      return arrayLocal(dataLocal);
+    }
+    return [];
+  });
+  const [hiddenColumns, setHiddenColumns] = useState(() => {
+    const dataLocal = getLocalStore(nameLocal);
+    if (dataLocal) {
+      return arrayLocal(dataLocal);
+    }
+    return [];
+  });
+  const handleFindLocation = useCallback(
+    (filterColumns, arrLoctions = locationColumns) => {
+      return (arrLoctions == null ? void 0 : arrLoctions.length) > 0 ? arrLoctions == null ? void 0 : arrLoctions.reduce(
+        (total, current) => {
+          const currentColumns = filterColumns == null ? void 0 : filterColumns.find((item) => {
+            const newItem = item;
+            return (newItem == null ? void 0 : newItem.key) === current;
+          });
+          if (currentColumns) {
+            total = [...total, currentColumns];
+          }
+          return total;
+        },
+        []
+      ) : filterColumns;
+    },
+    [locationColumns]
+  );
+  const newCloumnKeys = useMemo(
+    () => columns == null ? void 0 : columns.filter(isColumn).map((column) => column.key),
+    [columns]
+  );
+  const newColumns = useMemo(() => {
+    var _a;
+    const filterColumns = (_a = columns == null ? void 0 : columns.filter((column) => {
+      if (!isColumn(column)) return true;
+      const key = column.key;
+      if (ignoreColumns == null ? void 0 : ignoreColumns.includes(key)) return true;
+      if (hiddenColumns == null ? void 0 : hiddenColumns.includes(key)) return false;
+      return true;
+    })) != null ? _a : [];
+    return handleFindLocation(filterColumns);
+  }, [columns, hiddenColumns, locationColumns, ignoreColumns]);
+  const newShowhideColumns = useMemo(() => {
+    var _a;
+    if (!ignoreColumns) return columns;
+    return (_a = columns == null ? void 0 : columns.filter((column) => {
+      if (!isColumn(column)) return true;
+      return !ignoreColumns.includes(column.key);
+    })) != null ? _a : [];
+  }, [columns, ignoreColumns]);
+  const changeHiddenColumn = useCallback(
+    (key) => {
+      let newData = [...hiddenColumns];
+      if (typeof key === "string") {
+        newData = toggleValues({
+          array: newData,
+          value: key
+        });
+      } else {
+        newData = key;
+      }
+      setLocalStore(nameLocal, JSON.stringify(newData));
+      setHiddenColumns(newData);
+    },
+    [hiddenColumns, nameLocalLocation]
+  );
+  const handleChangeLocation = useCallback(
+    (key) => {
+      let newKey = key;
+      newKey = uniq([...key, ...newCloumnKeys]);
+      setLocationColumns(newKey);
+      setLocalStore(nameLocalLocation, JSON.stringify(newKey));
+    },
+    [newCloumnKeys]
+  );
+  return {
+    hiddenColumns,
+    setHiddenColumns,
+    columnsTable: newColumns,
+    changeHiddenColumn,
+    newShowhideColumns,
+    locationColumns,
+    handleFindLocation,
+    handleChangeLocation
+  };
+};
+
+// src/component/ui/Table/ReactTableGridCustom.tsx
+import { Checkbox } from "@mantine/core";
+import { get, orderBy } from "lodash";
+import {
+  memo,
+  useCallback as useCallback2,
+  useEffect,
+  useMemo as useMemo3,
+  useRef,
+  useState as useState2
+} from "react";
+import {
+  DataGrid,
+  SelectColumn
+} from "react-data-grid";
+import "react-data-grid/lib/styles.css";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
 // src/hooks/useTranslationTable.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { useTranslation } from "react-i18next";
 var useTranslationTable = (column) => {
   const { i18n, t } = useTranslation();
-  const columnTranslation = useMemo(() => {
+  const columnTranslation = useMemo2(() => {
     return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
   }, [i18n == null ? void 0 : i18n.language, column]);
   return columnTranslation;
@@ -147,15 +287,15 @@ var ReactTableGridCustomInner = ({
 }) => {
   const { t } = useTranslation2();
   const tableRef = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [sortColumns, setSortColumns] = useState([]);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [containerWidth, setContainerWidth] = useState2(0);
+  const [sortColumns, setSortColumns] = useState2([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = useMemo2(
+  const maxPage = useMemo3(
     () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = useMemo2(() => {
+  const toInPagination = useMemo3(() => {
     if (!hiddenPaginationText && page && pageSize) {
       const from = STT({ page, pageSize }, 0);
       return {
@@ -168,7 +308,7 @@ var ReactTableGridCustomInner = ({
   const columnTranslation = useTranslationTable_default(
     columns
   );
-  const newColumns = useMemo2(() => {
+  const newColumns = useMemo3(() => {
     let cols = [
       ...columnTranslation
     ];
@@ -201,7 +341,7 @@ var ReactTableGridCustomInner = ({
     page,
     pageSize
   ]);
-  const customRowKeyGetter = useCallback(
+  const customRowKeyGetter = useCallback2(
     (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
@@ -215,7 +355,7 @@ var ReactTableGridCustomInner = ({
     },
     [rowKeyGetter]
   );
-  const sortedRows = useMemo2(() => {
+  const sortedRows = useMemo3(() => {
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
@@ -277,16 +417,104 @@ var ReactTableGridCustom = memo(
   ReactTableGridCustomInner
 );
 
+// src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
+import {
+  memo as memo2,
+  useCallback as useCallback3,
+  useImperativeHandle,
+  useState as useState3
+} from "react";
+
+// src/hooks/useDataPagingClient.ts
+import { useMemo as useMemo4 } from "react";
+var useDataPagingClient = ({ data = [], page, pageSize }) => {
+  const newData = useMemo4(() => {
+    if (page && pageSize) {
+      const startIndex = (page - 1) * pageSize;
+      return data.slice(startIndex, startIndex + pageSize);
+    }
+    return data;
+  }, [data, page, pageSize]);
+  return newData;
+};
+var useDataPagingClient_default = useDataPagingClient;
+
+// src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ReactTableGridCustomPaginationClientInner = ({
+  data,
+  initPage = 1,
+  initPageSize = 200,
+  refTable,
+  ...spread
+}) => {
+  const [configSearch, setConfigSearch] = useState3({
+    page: initPage,
+    pageSize: initPageSize
+  });
+  const newDataAccount = useDataPagingClient_default({
+    data,
+    page: configSearch == null ? void 0 : configSearch.page,
+    pageSize: configSearch == null ? void 0 : configSearch.pageSize
+  });
+  const resetPage = useCallback3(() => {
+    setConfigSearch((prev) => ({
+      ...prev,
+      page: 1
+    }));
+  }, []);
+  useImperativeHandle(
+    refTable,
+    () => {
+      var _a, _b;
+      return {
+        setConfigSearch,
+        page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
+        pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
+        resetPagition: (conditional = true) => {
+          if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
+            resetPage();
+          } else {
+            resetPage();
+          }
+        }
+      };
+    },
+    [
+      setConfigSearch,
+      configSearch == null ? void 0 : configSearch.page,
+      configSearch == null ? void 0 : configSearch.pageSize,
+      initPage,
+      initPageSize,
+      resetPage
+    ]
+  );
+  return /* @__PURE__ */ jsx4(
+    ReactTableGridCustom,
+    {
+      data: newDataAccount,
+      total: data == null ? void 0 : data.length,
+      page: configSearch == null ? void 0 : configSearch.page,
+      pageSize: configSearch == null ? void 0 : configSearch.pageSize,
+      setConfigPagination: setConfigSearch,
+      ...spread
+    }
+  );
+};
+var ReactTableGridCustomPaginationClient = memo2(
+  ReactTableGridCustomPaginationClientInner
+);
+
 // src/component/ui/Table/TableStyleContextWapper.tsx
-import { memo as memo2, useId as useId2 } from "react";
+import { memo as memo3, useId as useId2 } from "react";
 
 // src/component/ui/ContextMenu/ContextMenu.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ContextMenu = ({ selector, children, zIndex = 40 }) => {
   const menuRef = useRef2(null);
-  const closeMenu = useCallback2(() => {
+  const closeMenu = useCallback4(() => {
     const contextMenuElem = menuRef.current;
     const elementParent = document.querySelector(selector);
     if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
@@ -366,7 +594,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
     };
   }, []);
   return createPortal(
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         className: "fixed z-40 w-fit",
@@ -381,12 +609,12 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
 var ContextMenu_default = ContextMenu;
 
 // src/component/ui/ContextMenu/RenderContextMenu.tsx
-import { Fragment as Fragment2, useState as useState2 } from "react";
+import { Fragment as Fragment2, useState as useState4 } from "react";
 
 // src/component/ui/ContextMenu/ContextMenuItem.tsx
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { MdKeyboardArrowRight } from "react-icons/md";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var ContextMenuItem = ({
   currentValue,
   expandValue,
@@ -405,9 +633,9 @@ var ContextMenuItem = ({
         expandValue && valueClickItem && (currentValue == null ? void 0 : currentValue.onClick) && ((_a = currentValue == null ? void 0 : currentValue.onClick) == null ? void 0 : _a.call(currentValue, valueClickItem, expandValue));
       },
       children: [
-        /* @__PURE__ */ jsx5(Icon, { size: 20 }),
-        /* @__PURE__ */ jsx5("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
-        isArrow && /* @__PURE__ */ jsx5(MdKeyboardArrowRight, { size: 20 })
+        /* @__PURE__ */ jsx6(Icon, { size: 20 }),
+        /* @__PURE__ */ jsx6("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
+        isArrow && /* @__PURE__ */ jsx6(MdKeyboardArrowRight, { size: 20 })
       ]
     }
   );
@@ -417,11 +645,11 @@ var ContextMenuItem_default = ContextMenuItem;
 // src/component/ui/ContextMenu/DropdownContextChild.tsx
 import Tippy from "@tippyjs/react";
 import { useId, useRef as useRef3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var DropdownContextChild = ({ button, children, ...rest }) => {
   const id = useId();
   const instanceRef = useRef3(null);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     Tippy,
     {
       theme: "drop-down",
@@ -433,7 +661,7 @@ var DropdownContextChild = ({ button, children, ...rest }) => {
       allowHTML: true,
       content: children,
       ...rest,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           id: `div-${id}`,
@@ -450,16 +678,16 @@ var DropdownContextChild = ({ button, children, ...rest }) => {
 var DropdownContextChild_default = DropdownContextChild;
 
 // src/component/ui/ContextMenu/RenderContextMenu.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var RenderContextMenu = ({
   renderData,
   valueClickItem,
   expandValue = {}
 }) => {
-  return /* @__PURE__ */ jsx7("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
-    const [isShow, setIsShow] = useState2(false);
+  return /* @__PURE__ */ jsx8("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => {
+    const [isShow, setIsShow] = useState4(false);
     return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx7(
+      !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
         ContextMenuItem_default,
         {
           currentValue: menuAction,
@@ -467,7 +695,7 @@ var RenderContextMenu = ({
           valueClickItem
         }
       ),
-      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx7(
+      (menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx8(
         DropdownContextChild_default,
         {
           appendTo: "parent",
@@ -475,7 +703,7 @@ var RenderContextMenu = ({
           offset: [0, 5],
           onShow: () => setIsShow(true),
           onHide: () => setIsShow(false),
-          button: /* @__PURE__ */ jsx7(
+          button: /* @__PURE__ */ jsx8(
             ContextMenuItem_default,
             {
               currentValue: menuAction,
@@ -485,7 +713,7 @@ var RenderContextMenu = ({
               isArrow: true
             }
           ),
-          children: /* @__PURE__ */ jsx7("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx7(
+          children: /* @__PURE__ */ jsx8("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx8(
             RenderContextMenu,
             {
               renderData: menuAction == null ? void 0 : menuAction.children,
@@ -501,7 +729,7 @@ var RenderContextMenu = ({
 var RenderContextMenu_default = RenderContextMenu;
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var TableStyleContextMenuWapper = ({
   children,
   contextMenuProps,
@@ -515,12 +743,12 @@ var TableStyleContextMenuWapper = ({
       id: `wapper_menu_context-${idWapper}`,
       className: `border border-[#dedede] rounded-xl overflow-hidden bg-white flex-1 h-full flex flex-col min-h-[360px] ${clsTablecustom != null ? clsTablecustom : ""}`,
       children: [
-        (renderContext == null ? void 0 : renderContext.renderData) && /* @__PURE__ */ jsx8(
+        (renderContext == null ? void 0 : renderContext.renderData) && /* @__PURE__ */ jsx9(
           ContextMenu_default,
           {
             selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
             ...contextMenuProps,
-            children: /* @__PURE__ */ jsx8(RenderContextMenu_default, { ...renderContext })
+            children: /* @__PURE__ */ jsx9(RenderContextMenu_default, { ...renderContext })
           }
         ),
         children
@@ -528,10 +756,12 @@ var TableStyleContextMenuWapper = ({
     }
   );
 };
-var TableStyleContextWapper = memo2(
+var TableStyleContextWapper = memo3(
   TableStyleContextMenuWapper
 );
 export {
   ReactTableGridCustom,
-  TableStyleContextWapper
+  ReactTableGridCustomPaginationClient,
+  TableStyleContextWapper,
+  useShowHideColumn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,