@mkt-loitd/react-table-grid-custom 1.1.9 → 1.2.2

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
 import { TFunction } from 'i18next';
 import { UseMutateFunction } from '@tanstack/react-query';
@@ -15,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;
@@ -138,7 +157,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | undefined;
+    t?: TFunction<any, any> | undefined | any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
@@ -197,4 +216,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, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX } from 'react';
 import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
 import { TFunction } from 'i18next';
 import { UseMutateFunction } from '@tanstack/react-query';
@@ -15,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;
@@ -138,7 +157,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | undefined;
+    t?: TFunction<any, any> | undefined | any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
@@ -197,4 +216,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, type TColumnsTable, TableStyleContextWapper, type TableStyleWapperProps, type UseShowHideColumnParameter, type UseShowHideColumnReturn, useShowHideColumn };

package/dist/index.js

@@ -31,17 +31,42 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ReactTableGridCustom: () => ReactTableGridCustom,
-  TableStyleContextWapper: () => TableStyleContextWapper
+  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 +94,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 +314,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 +336,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 +369,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 +383,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 +441,20 @@ var ReactTableGridCustomInner = ({
     }
   );
 };
-var ReactTableGridCustom = (0, import_react2.memo)(
+var ReactTableGridCustom = (0, import_react3.memo)(
   ReactTableGridCustomInner
 );
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/component/ui/ContextMenu/ContextMenu.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime4 = 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_react4.useRef)(null);
+  const closeMenu = (0, import_react4.useCallback)(() => {
     const contextMenuElem = menuRef.current;
     const elementParent = document.querySelector(selector);
     if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
@@ -325,7 +466,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
       elementParent.style.removeProperty("overflow");
     }
   }, [menuRef.current]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const elementParent = document.querySelector(selector);
     if (elementParent) {
       const clickMenu = (e) => {
@@ -408,7 +549,7 @@ var ContextMenu = ({ selector, children, zIndex = 40 }) => {
 var ContextMenu_default = ContextMenu;
 
 // src/component/ui/ContextMenu/RenderContextMenu.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/component/ui/ContextMenu/ContextMenuItem.tsx
 var import_react_i18next3 = require("react-i18next");
@@ -442,14 +583,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_react5 = __toESM(require("@tippyjs/react"));
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DropdownContextChild = ({ button, children, ...rest }) => {
-  const id = (0, import_react5.useId)();
-  const instanceRef = (0, import_react5.useRef)(null);
+  const id = (0, import_react6.useId)();
+  const instanceRef = (0, import_react6.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react4.default,
+    import_react5.default,
     {
       theme: "drop-down",
       className: "!bg-transparent !text-inherit !border-r-0 [&>*]:!p-0",
@@ -484,8 +625,8 @@ var RenderContextMenu = ({
   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: [
+    const [isShow, setIsShow] = (0, import_react7.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.Fragment, { children: [
       !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ContextMenuItem_default,
         {
@@ -535,7 +676,7 @@ var TableStyleContextMenuWapper = ({
   clsTablecustom,
   renderContext
 }) => {
-  const idWapper = (0, import_react7.useId)();
+  const idWapper = (0, import_react8.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
@@ -555,11 +696,12 @@ var TableStyleContextMenuWapper = ({
     }
   );
 };
-var TableStyleContextWapper = (0, import_react7.memo)(
+var TableStyleContextWapper = (0, import_react8.memo)(
   TableStyleContextMenuWapper
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ReactTableGridCustom,
-  TableStyleContextWapper
+  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;
@@ -281,12 +421,12 @@ var ReactTableGridCustom = memo(
 import { memo as memo2, 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 useCallback3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ContextMenu = ({ selector, children, zIndex = 40 }) => {
   const menuRef = useRef2(null);
-  const closeMenu = useCallback2(() => {
+  const closeMenu = useCallback3(() => {
     const contextMenuElem = menuRef.current;
     const elementParent = document.querySelector(selector);
     if (contextMenuElem && contextMenuElem.classList.contains("shadow-menu")) {
@@ -381,7 +521,7 @@ 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 useState3 } from "react";
 
 // src/component/ui/ContextMenu/ContextMenuItem.tsx
 import { useTranslation as useTranslation3 } from "react-i18next";
@@ -457,7 +597,7 @@ var RenderContextMenu = ({
   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);
+    const [isShow, setIsShow] = useState3(false);
     return /* @__PURE__ */ jsxs4(Fragment2, { children: [
       !(menuAction == null ? void 0 : menuAction.children) && /* @__PURE__ */ jsx7(
         ContextMenuItem_default,
@@ -533,5 +673,6 @@ var TableStyleContextWapper = memo2(
 );
 export {
   ReactTableGridCustom,
-  TableStyleContextWapper
+  TableStyleContextWapper,
+  useShowHideColumn
 };

package/package.json

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