@mkt-loitd/react-table-grid-custom 1.2.8 → 1.3.3

package/dist/index.css

@@ -55,100 +55,3 @@ div[aria-sort] > span {
   position: sticky !important;
   right: 0 !important;
 }
-
-/* src/component/ui/ContextMenu/ContextMenu.css */
-.shadow-menu {
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-  animation: open 0.3s;
-  transform-origin: top left;
-}
-.shadow-submenu {
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-@keyframes open {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-/* node_modules/tippy.js/dist/tippy.css */
-.tippy-box[data-animation=fade][data-state=hidden] {
-  opacity: 0;
-}
-[data-tippy-root] {
-  max-width: calc(100vw - 10px);
-}
-.tippy-box {
-  position: relative;
-  background-color: #333;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 1.4;
-  white-space: normal;
-  outline: 0;
-  transition-property:
-    transform,
-    visibility,
-    opacity;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow {
-  bottom: 0;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow:before {
-  bottom: -7px;
-  left: 0;
-  border-width: 8px 8px 0;
-  border-top-color: initial;
-  transform-origin: center top;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow {
-  top: 0;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
-  top: -7px;
-  left: 0;
-  border-width: 0 8px 8px;
-  border-bottom-color: initial;
-  transform-origin: center bottom;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow {
-  right: 0;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow:before {
-  border-width: 8px 0 8px 8px;
-  border-left-color: initial;
-  right: -7px;
-  transform-origin: center left;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow {
-  left: 0;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow:before {
-  left: -7px;
-  border-width: 8px 8px 8px 0;
-  border-right-color: initial;
-  transform-origin: center right;
-}
-.tippy-box[data-inertia][data-state=visible] {
-  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
-}
-.tippy-arrow {
-  width: 16px;
-  height: 16px;
-  color: #333;
-}
-.tippy-arrow:before {
-  content: "";
-  position: absolute;
-  border-color: transparent;
-  border-style: solid;
-}
-.tippy-content {
-  position: relative;
-  padding: 5px 9px;
-  z-index: 1;
-}

package/dist/index.d.mts

@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } f
 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';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
@@ -172,7 +171,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | any;
+    t?: any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } f
 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';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
@@ -172,7 +171,7 @@ interface IPayloadService {
 type IDispatchState<T> = Dispatch<SetStateAction<T>>;
 
 interface IExpandValue extends IPayloadService {
-    t?: TFunction<any, any> | any;
+    t?: any;
     setConfigSearch?: IDispatchState<ISetConfigPagination>;
     setSelectedRecords?: Dispatch<ReadonlySet<string>>;
     setIsShowEdit?: Dispatch<SetStateAction<boolean>>;

package/dist/index.js

@@ -206,22 +206,9 @@ var useShowHideColumn = ({
 // src/component/ui/Table/ReactTableGridCustom.tsx
 var import_core = require("@mantine/core");
 var import_lodash3 = require("lodash");
-var import_react3 = require("react");
+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");
-
-// 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_react2.useMemo)(() => {
-    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
-  }, [i18n == null ? void 0 : i18n.language, column]);
-  return columnTranslation;
-};
-var useTranslationTable_default = useTranslationTable;
 
 // src/component/Icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -312,36 +299,21 @@ var ReactTableGridCustomInner = ({
   listPageSize = ["10", "100", "200", "500", "1000", "5000"],
   fetching,
   TableLogo,
+  tableRef,
   ...spread
 }) => {
-  const { t } = (0, import_react_i18next2.useTranslation)();
-  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 [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [containerWidth, setContainerWidth] = (0, import_react2.useState)(0);
+  const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = (0, import_react3.useMemo)(
+  const maxPage = (0, import_react2.useMemo)(
     () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = (0, import_react3.useMemo)(() => {
-    if (!hiddenPaginationText && page && pageSize) {
-      const from = STT({ page, pageSize }, 0);
-      return {
-        from,
-        to: maxPage === page ? total != null ? total : 0 : page * pageSize
-      };
-    }
-    return { from: 0, to: 0 };
-  }, [page, pageSize, hiddenPaginationText, maxPage, total]);
-  const columnTranslation = useTranslationTable_default(
-    columns
-  );
-  const newColumns = (0, import_react3.useMemo)(() => {
+  const newColumns = (0, import_react2.useMemo)(() => {
     let cols = [
-      ...columnTranslation
+      ...columns
     ];
-    const adjustedWidth = containerWidth - 45;
     cols = cols.map(
       (col) => "key" in col ? {
         ...col,
@@ -363,14 +335,14 @@ var ReactTableGridCustomInner = ({
     }
     return cols;
   }, [
-    columnTranslation,
+    columns,
     containerWidth,
     hiddenSTT,
     isSelectRow,
     page,
     pageSize
   ]);
-  const customRowKeyGetter = (0, import_react3.useCallback)(
+  const customRowKeyGetter = (0, import_react2.useCallback)(
     (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
@@ -384,7 +356,7 @@ var ReactTableGridCustomInner = ({
     },
     [rowKeyGetter]
   );
-  const sortedRows = (0, import_react3.useMemo)(() => {
+  const sortedRows = (0, import_react2.useMemo)(() => {
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
@@ -392,10 +364,10 @@ var ReactTableGridCustomInner = ({
     const iteratee = typeof columnKey === "string" ? columnKey : String(columnKey);
     return (0, import_lodash3.orderBy)(data, [iteratee], [order]);
   }, [data, sortColumns]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     var _a;
     setIsLoading(false);
-    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+    if ((_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.element) {
       setContainerWidth(tableRef.current.element.offsetWidth);
     }
   }, []);
@@ -418,7 +390,7 @@ var ReactTableGridCustomInner = ({
             sortColumns,
             onSortColumnsChange: setSortColumns,
             renderers: {
-              renderSortStatus: RenderSortStatus_default,
+              renderSortStatus: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props }),
               renderCheckbox({ onChange: onChange2, checked, ...props }) {
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_core.Checkbox,
@@ -442,17 +414,17 @@ var ReactTableGridCustomInner = ({
     }
   );
 };
-var ReactTableGridCustom = (0, import_react3.memo)(
+var ReactTableGridCustom = (0, import_react2.memo)(
   ReactTableGridCustomInner
 );
 
 // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/useDataPagingClient.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 var useDataPagingClient = ({ data = [], page, pageSize }) => {
-  const newData = (0, import_react4.useMemo)(() => {
+  const newData = (0, import_react3.useMemo)(() => {
     if (page && pageSize) {
       const startIndex = (page - 1) * pageSize;
       return data.slice(startIndex, startIndex + pageSize);
@@ -472,7 +444,7 @@ var ReactTableGridCustomPaginationClientInner = ({
   refTable,
   ...spread
 }) => {
-  const [configSearch, setConfigSearch] = (0, import_react5.useState)({
+  const [configSearch, setConfigSearch] = (0, import_react4.useState)({
     page: initPage,
     pageSize: initPageSize
   });
@@ -481,13 +453,13 @@ var ReactTableGridCustomPaginationClientInner = ({
     page: configSearch == null ? void 0 : configSearch.page,
     pageSize: configSearch == null ? void 0 : configSearch.pageSize
   });
-  const resetPage = (0, import_react5.useCallback)(() => {
+  const resetPage = (0, import_react4.useCallback)(() => {
     setConfigSearch((prev) => ({
       ...prev,
       page: 1
     }));
   }, []);
-  (0, import_react5.useImperativeHandle)(
+  (0, import_react4.useImperativeHandle)(
     refTable,
     () => {
       var _a, _b;
@@ -525,227 +497,13 @@ var ReactTableGridCustomPaginationClientInner = ({
     }
   );
 };
-var ReactTableGridCustomPaginationClient = (0, import_react5.memo)(
+var ReactTableGridCustomPaginationClient = (0, import_react4.memo)(
   ReactTableGridCustomPaginationClientInner
 );
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
-var import_react10 = require("react");
-
-// src/component/ui/ContextMenu/ContextMenu.tsx
-var import_react6 = require("react");
-var import_react_dom = require("react-dom");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ContextMenu = ({ selector, children, zIndex = 40 }) => {
-  const menuRef = (0, import_react6.useRef)(null);
-  const [mounted, setMounted] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
-    setMounted(true);
-  }, []);
-  const closeMenu = (0, import_react6.useCallback)(() => {
-    if (!mounted || typeof document === "undefined") return;
-    const contextMenuElem = menuRef.current;
-    const elementParent = document.querySelector(selector);
-    if (contextMenuElem == null ? void 0 : contextMenuElem.classList.contains("shadow-menu")) {
-      contextMenuElem.classList.remove("shadow-menu");
-      contextMenuElem.style.opacity = "0";
-      contextMenuElem.style.visibility = "hidden";
-    }
-    elementParent == null ? void 0 : elementParent.style.removeProperty("overflow");
-  }, [mounted, selector]);
-  (0, import_react6.useEffect)(() => {
-    if (!mounted || typeof document === "undefined" || typeof window === "undefined") return;
-    const elementParent = document.querySelector(selector);
-    if (!elementParent) return;
-    const clickMenu = (e) => {
-      e.preventDefault();
-      const contextMenuElem = menuRef.current;
-      if (!contextMenuElem) return;
-      contextMenuElem.style.opacity = "1";
-      contextMenuElem.style.visibility = "visible";
-      const { width, height } = contextMenuElem.getBoundingClientRect();
-      elementParent.style.overflow = "hidden";
-      const maxWidth = window.innerWidth;
-      const maxHeight = window.innerHeight;
-      const isLeft = maxWidth - e.clientX >= width;
-      const showTop = height + e.clientY <= maxHeight;
-      const showBottom = e.clientY - height >= 0;
-      const styleOrigin = { x: "left", y: "top" };
-      contextMenuElem.style.left = isLeft ? `${e.clientX}px` : `${e.clientX - width}px`;
-      styleOrigin.x = isLeft ? "left" : "right";
-      if (showTop) {
-        contextMenuElem.style.top = `${e.clientY}px`;
-        styleOrigin.y = "top";
-      } else if (showBottom) {
-        contextMenuElem.style.top = `${e.clientY - height}px`;
-        styleOrigin.y = "bottom";
-      } else {
-        let top = e.clientY - height / 2;
-        if (top < 0) top = 0;
-        if (top + height > maxHeight) top = maxHeight - height;
-        contextMenuElem.style.top = `${top}px`;
-        styleOrigin.y = "center";
-      }
-      contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
-      contextMenuElem.classList.add("shadow-menu");
-    };
-    elementParent.addEventListener("contextmenu", clickMenu);
-    window.addEventListener("click", closeMenu);
-    return () => {
-      elementParent.removeEventListener("contextmenu", clickMenu);
-      window.removeEventListener("click", closeMenu);
-    };
-  }, [mounted, selector, closeMenu]);
-  if (!mounted || typeof document === "undefined") return null;
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "div",
-      {
-        ref: menuRef,
-        className: "fixed w-fit",
-        style: { opacity: 0, visibility: "hidden", zIndex },
-        children
-      }
-    ),
-    document.body
-  );
-};
-var ContextMenu_default = ContextMenu;
-
-// src/component/ui/ContextMenu/RenderContextMenu.tsx
-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_runtime6 = require("react/jsx-runtime");
-var ContextMenuItem = ({
-  currentValue,
-  expandValue,
-  valueClickItem,
-  show,
-  isArrow
-}) => {
-  const { t } = (0, import_react_i18next3.useTranslation)();
-  const Icon = currentValue.Icon;
-  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"}`,
-      onClick: () => {
-        var _a;
-        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_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 })
-      ]
-    }
-  );
-};
-var ContextMenuItem_default = ContextMenuItem;
-
-// src/component/ui/ContextMenu/DropdownContextChild.tsx
-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_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",
-      appendTo: document.body,
-      arrow: false,
-      placement: "auto",
-      interactive: true,
-      allowHTML: true,
-      content: children,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          id: `div-${id}`,
-          onClick: () => {
-            var _a;
-            (_a = instanceRef == null ? void 0 : instanceRef.current) == null ? void 0 : _a.show();
-          },
-          children: button
-        }
-      )
-    }
-  );
-};
-var DropdownContextChild_default = DropdownContextChild;
-
-// src/component/ui/ContextMenu/RenderContextMenu.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ContextMenuItemWrapper = ({
-  menuAction,
-  valueClickItem,
-  expandValue
-}) => {
-  const [isShow, setIsShow] = (0, import_react9.useState)(false);
-  if (!menuAction.children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ContextMenuItem_default,
-      {
-        currentValue: menuAction,
-        expandValue,
-        valueClickItem
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    DropdownContextChild_default,
-    {
-      appendTo: "parent",
-      placement: "right",
-      offset: [0, 5],
-      onShow: () => setIsShow(true),
-      onHide: () => setIsShow(false),
-      button: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        ContextMenuItem_default,
-        {
-          currentValue: menuAction,
-          expandValue,
-          valueClickItem,
-          show: isShow,
-          isArrow: true
-        }
-      ),
-      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.children,
-          expandValue,
-          valueClickItem
-        }
-      ) })
-    }
-  );
-};
-var RenderContextMenu = ({
-  renderData,
-  valueClickItem,
-  expandValue = {}
-}) => {
-  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) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    ContextMenuItemWrapper,
-    {
-      menuAction,
-      expandValue,
-      valueClickItem
-    }
-  ) }, index)) });
-};
-var RenderContextMenu_default = RenderContextMenu;
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
 var isClient = typeof window !== "undefined";
 var TableStyleContextWapper = ({
   children,
@@ -755,29 +513,19 @@ var TableStyleContextWapper = ({
   idWapper: externalId
 }) => {
   if (!isClient) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
   }
   const idWapper = externalId != null ? externalId : "12";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "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_runtime9.jsx)(
-          ContextMenu_default,
-          {
-            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
-            ...contextMenuProps,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderContextMenu_default, { ...renderContext })
-          }
-        ),
-        children
-      ]
+      children
     }
   );
 };
-var TableStyleContextMenuWapper = (0, import_react10.memo)(
+var TableStyleContextMenuWapper = (0, import_react5.memo)(
   TableStyleContextWapper
 );
 TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {

package/dist/index.mjs

@@ -171,8 +171,7 @@ import {
   memo,
   useCallback as useCallback2,
   useEffect,
-  useMemo as useMemo3,
-  useRef,
+  useMemo as useMemo2,
   useState as useState2
 } from "react";
 import {
@@ -180,19 +179,6 @@ import {
   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 as useMemo2 } from "react";
-import { useTranslation } from "react-i18next";
-var useTranslationTable = (column) => {
-  const { i18n, t } = useTranslation();
-  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;
-};
-var useTranslationTable_default = useTranslationTable;
 
 // src/component/Icons.tsx
 import { jsx } from "react/jsx-runtime";
@@ -283,36 +269,21 @@ var ReactTableGridCustomInner = ({
   listPageSize = ["10", "100", "200", "500", "1000", "5000"],
   fetching,
   TableLogo,
+  tableRef,
   ...spread
 }) => {
-  const { t } = useTranslation2();
-  const tableRef = useRef(null);
   const [isLoading, setIsLoading] = useState2(true);
   const [containerWidth, setContainerWidth] = useState2(0);
   const [sortColumns, setSortColumns] = useState2([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = useMemo3(
+  const maxPage = useMemo2(
     () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = useMemo3(() => {
-    if (!hiddenPaginationText && page && pageSize) {
-      const from = STT({ page, pageSize }, 0);
-      return {
-        from,
-        to: maxPage === page ? total != null ? total : 0 : page * pageSize
-      };
-    }
-    return { from: 0, to: 0 };
-  }, [page, pageSize, hiddenPaginationText, maxPage, total]);
-  const columnTranslation = useTranslationTable_default(
-    columns
-  );
-  const newColumns = useMemo3(() => {
+  const newColumns = useMemo2(() => {
     let cols = [
-      ...columnTranslation
+      ...columns
     ];
-    const adjustedWidth = containerWidth - 45;
     cols = cols.map(
       (col) => "key" in col ? {
         ...col,
@@ -334,7 +305,7 @@ var ReactTableGridCustomInner = ({
     }
     return cols;
   }, [
-    columnTranslation,
+    columns,
     containerWidth,
     hiddenSTT,
     isSelectRow,
@@ -355,7 +326,7 @@ var ReactTableGridCustomInner = ({
     },
     [rowKeyGetter]
   );
-  const sortedRows = useMemo3(() => {
+  const sortedRows = useMemo2(() => {
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
@@ -366,7 +337,7 @@ var ReactTableGridCustomInner = ({
   useEffect(() => {
     var _a;
     setIsLoading(false);
-    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+    if ((_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.element) {
       setContainerWidth(tableRef.current.element.offsetWidth);
     }
   }, []);
@@ -389,7 +360,7 @@ var ReactTableGridCustomInner = ({
             sortColumns,
             onSortColumnsChange: setSortColumns,
             renderers: {
-              renderSortStatus: RenderSortStatus_default,
+              renderSortStatus: (props) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props }),
               renderCheckbox({ onChange: onChange2, checked, ...props }) {
                 return /* @__PURE__ */ jsx3(
                   Checkbox,
@@ -426,9 +397,9 @@ import {
 } from "react";
 
 // src/hooks/useDataPagingClient.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 var useDataPagingClient = ({ data = [], page, pageSize }) => {
-  const newData = useMemo4(() => {
+  const newData = useMemo3(() => {
     if (page && pageSize) {
       const startIndex = (page - 1) * pageSize;
       return data.slice(startIndex, startIndex + pageSize);
@@ -507,221 +478,7 @@ var ReactTableGridCustomPaginationClient = memo2(
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
 import { memo as memo3 } from "react";
-
-// src/component/ui/ContextMenu/ContextMenu.tsx
-import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ContextMenu = ({ selector, children, zIndex = 40 }) => {
-  const menuRef = useRef2(null);
-  const [mounted, setMounted] = useState4(false);
-  useEffect2(() => {
-    setMounted(true);
-  }, []);
-  const closeMenu = useCallback4(() => {
-    if (!mounted || typeof document === "undefined") return;
-    const contextMenuElem = menuRef.current;
-    const elementParent = document.querySelector(selector);
-    if (contextMenuElem == null ? void 0 : contextMenuElem.classList.contains("shadow-menu")) {
-      contextMenuElem.classList.remove("shadow-menu");
-      contextMenuElem.style.opacity = "0";
-      contextMenuElem.style.visibility = "hidden";
-    }
-    elementParent == null ? void 0 : elementParent.style.removeProperty("overflow");
-  }, [mounted, selector]);
-  useEffect2(() => {
-    if (!mounted || typeof document === "undefined" || typeof window === "undefined") return;
-    const elementParent = document.querySelector(selector);
-    if (!elementParent) return;
-    const clickMenu = (e) => {
-      e.preventDefault();
-      const contextMenuElem = menuRef.current;
-      if (!contextMenuElem) return;
-      contextMenuElem.style.opacity = "1";
-      contextMenuElem.style.visibility = "visible";
-      const { width, height } = contextMenuElem.getBoundingClientRect();
-      elementParent.style.overflow = "hidden";
-      const maxWidth = window.innerWidth;
-      const maxHeight = window.innerHeight;
-      const isLeft = maxWidth - e.clientX >= width;
-      const showTop = height + e.clientY <= maxHeight;
-      const showBottom = e.clientY - height >= 0;
-      const styleOrigin = { x: "left", y: "top" };
-      contextMenuElem.style.left = isLeft ? `${e.clientX}px` : `${e.clientX - width}px`;
-      styleOrigin.x = isLeft ? "left" : "right";
-      if (showTop) {
-        contextMenuElem.style.top = `${e.clientY}px`;
-        styleOrigin.y = "top";
-      } else if (showBottom) {
-        contextMenuElem.style.top = `${e.clientY - height}px`;
-        styleOrigin.y = "bottom";
-      } else {
-        let top = e.clientY - height / 2;
-        if (top < 0) top = 0;
-        if (top + height > maxHeight) top = maxHeight - height;
-        contextMenuElem.style.top = `${top}px`;
-        styleOrigin.y = "center";
-      }
-      contextMenuElem.style.transformOrigin = `${styleOrigin.y} ${styleOrigin.x}`;
-      contextMenuElem.classList.add("shadow-menu");
-    };
-    elementParent.addEventListener("contextmenu", clickMenu);
-    window.addEventListener("click", closeMenu);
-    return () => {
-      elementParent.removeEventListener("contextmenu", clickMenu);
-      window.removeEventListener("click", closeMenu);
-    };
-  }, [mounted, selector, closeMenu]);
-  if (!mounted || typeof document === "undefined") return null;
-  return createPortal(
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        ref: menuRef,
-        className: "fixed w-fit",
-        style: { opacity: 0, visibility: "hidden", zIndex },
-        children
-      }
-    ),
-    document.body
-  );
-};
-var ContextMenu_default = ContextMenu;
-
-// src/component/ui/ContextMenu/RenderContextMenu.tsx
-import { Fragment as Fragment2, useState as useState5 } from "react";
-
-// src/component/ui/ContextMenu/ContextMenuItem.tsx
-import { useTranslation as useTranslation3 } from "react-i18next";
-import { MdKeyboardArrowRight } from "react-icons/md";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var ContextMenuItem = ({
-  currentValue,
-  expandValue,
-  valueClickItem,
-  show,
-  isArrow
-}) => {
-  const { t } = useTranslation3();
-  const Icon = currentValue.Icon;
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: `cursor-pointer p-2 flex items-center space-x-2 relative ${show ? "bg-[#555] text-white" : "hover:bg-[#555] hover:text-white"}`,
-      onClick: () => {
-        var _a;
-        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__ */ jsx6(Icon, { size: 20 }),
-        /* @__PURE__ */ jsx6("span", { className: "text-sm flex-1", children: t(`${currentValue.action}`) }),
-        isArrow && /* @__PURE__ */ jsx6(MdKeyboardArrowRight, { size: 20 })
-      ]
-    }
-  );
-};
-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 jsx7 } from "react/jsx-runtime";
-var DropdownContextChild = ({ button, children, ...rest }) => {
-  const id = useId();
-  const instanceRef = useRef3(null);
-  return /* @__PURE__ */ jsx7(
-    Tippy,
-    {
-      theme: "drop-down",
-      className: "!bg-transparent !text-inherit !border-r-0 [&>*]:!p-0",
-      appendTo: document.body,
-      arrow: false,
-      placement: "auto",
-      interactive: true,
-      allowHTML: true,
-      content: children,
-      ...rest,
-      children: /* @__PURE__ */ jsx7(
-        "div",
-        {
-          id: `div-${id}`,
-          onClick: () => {
-            var _a;
-            (_a = instanceRef == null ? void 0 : instanceRef.current) == null ? void 0 : _a.show();
-          },
-          children: button
-        }
-      )
-    }
-  );
-};
-var DropdownContextChild_default = DropdownContextChild;
-
-// src/component/ui/ContextMenu/RenderContextMenu.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ContextMenuItemWrapper = ({
-  menuAction,
-  valueClickItem,
-  expandValue
-}) => {
-  const [isShow, setIsShow] = useState5(false);
-  if (!menuAction.children) {
-    return /* @__PURE__ */ jsx8(
-      ContextMenuItem_default,
-      {
-        currentValue: menuAction,
-        expandValue,
-        valueClickItem
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx8(
-    DropdownContextChild_default,
-    {
-      appendTo: "parent",
-      placement: "right",
-      offset: [0, 5],
-      onShow: () => setIsShow(true),
-      onHide: () => setIsShow(false),
-      button: /* @__PURE__ */ jsx8(
-        ContextMenuItem_default,
-        {
-          currentValue: menuAction,
-          expandValue,
-          valueClickItem,
-          show: isShow,
-          isArrow: true
-        }
-      ),
-      children: /* @__PURE__ */ jsx8("div", { className: "dropdown-context-child absolute -top-[20px] -left-1", children: /* @__PURE__ */ jsx8(
-        RenderContextMenu,
-        {
-          renderData: menuAction.children,
-          expandValue,
-          valueClickItem
-        }
-      ) })
-    }
-  );
-};
-var RenderContextMenu = ({
-  renderData,
-  valueClickItem,
-  expandValue = {}
-}) => {
-  return /* @__PURE__ */ jsx8("div", { className: "bg-white shadow-submenu p-1 min-w-[250px] border", children: renderData == null ? void 0 : renderData.map((menuAction, index) => /* @__PURE__ */ jsx8(Fragment2, { children: /* @__PURE__ */ jsx8(
-    ContextMenuItemWrapper,
-    {
-      menuAction,
-      expandValue,
-      valueClickItem
-    }
-  ) }, index)) });
-};
-var RenderContextMenu_default = RenderContextMenu;
-
-// src/component/ui/Table/TableStyleContextWapper.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 var isClient = typeof window !== "undefined";
 var TableStyleContextWapper = ({
   children,
@@ -731,25 +488,15 @@ var TableStyleContextWapper = ({
   idWapper: externalId
 }) => {
   if (!isClient) {
-    return /* @__PURE__ */ jsx9(Fragment3, { children });
+    return /* @__PURE__ */ jsx5(Fragment2, { children });
   }
   const idWapper = externalId != null ? externalId : "12";
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx5(
     "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__ */ jsx9(
-          ContextMenu_default,
-          {
-            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
-            ...contextMenuProps,
-            children: /* @__PURE__ */ jsx9(RenderContextMenu_default, { ...renderContext })
-          }
-        ),
-        children
-      ]
+      children
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.2.8",
+  "version": "1.3.3",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,
@@ -31,7 +31,6 @@
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/query-core": "^5.0.0",
-    "next": ">=13",
     "react": ">=18",
     "react-dom": ">=18"
   },
@@ -40,12 +39,10 @@
     "@tippyjs/react": "^4.2.6",
     "clsx": "^2.1.1",
     "formik": "^2.4.9",
-    "i18next": "^25.7.3",
     "idb": "^8.0.3",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react-data-grid": "^7.0.0-beta.59",
-    "react-i18next": "^16.5.0",
     "react-icons": "^5.5.0",
     "react-select": "^5.10.2",
     "tailwind-merge": "^3.4.0",