@mkt-loitd/react-table-grid-custom 1.2.5 → 1.2.7

package/README.md

@@ -1,54 +1,42 @@
-@mkt-loitd/react-table-grid-custom
+# @mkt-loitd/react-table-grid-custom
 
-A flexible and customizable React Table Grid component built with TypeScript, designed for displaying tabular data with custom columns, layouts, and rendering logic.
+[![npm version](https://img.shields.io/npm/v/@mkt-loitd/react-table-grid-custom)](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
+[![Downloads](https://img.shields.io/npm/dm/@mkt-loitd/react-table-grid-custom)](https://www.npmjs.com/package/@mkt-loitd/react-table-grid-custom)
+[![License](https://img.shields.io/npm/l/@mkt-loitd/react-table-grid-custom)](https://opensource.org/licenses/MIT)
 
-✨ Features
+A **flexible and customizable React Table Grid component** built with **TypeScript**, designed for displaying tabular data with custom columns, layouts, and rendering logic.
 
-⚛️ Built for React
+---
 
-🧩 Fully customizable columns
+## ✨ Features
 
-📝 Support for custom cell render
+- ⚛️ Built for React  
+- 🧩 Fully customizable columns  
+- 📝 Support for custom cell render  
+- 📦 Lightweight & easy to integrate  
+- 🛠 Written in TypeScript  
+- 🔁 Supports both ESM and CJS  
 
-📦 Lightweight & easy to integrate
+---
 
-🛠 Written in TypeScript
-
-🔁 Supports both ESM and CJS
-
-📦 Installation
-
-Using npm:
+## 📦 Installation
 
+```bash
 npm install @mkt-loitd/react-table-grid-custom
-
-
-Using yarn:
-
+# or
 yarn add @mkt-loitd/react-table-grid-custom
-
-
-Using pnpm:
-
+# or
 pnpm add @mkt-loitd/react-table-grid-custom
-
 🚀 Basic Usage
+tsx
+Copy code
 import React from 'react'
 import { ReactTableGridCustom } from '@mkt-loitd/react-table-grid-custom'
 
 const columns = [
-  {
-    key: 'name',
-    title: 'Name',
-  },
-  {
-    key: 'email',
-    title: 'Email',
-  },
-  {
-    key: 'age',
-    title: 'Age',
-  },
+  { key: 'name', title: 'Name' },
+  { key: 'email', title: 'Email' },
+  { key: 'age', title: 'Age' },
 ]
 
 const data = [
@@ -57,24 +45,20 @@ const data = [
 ]
 
 export default function App() {
-  return (
-    <ReactTableGridCustom
-      columns={columns}
-      data={data}
-      rowKey="id"
-    />
-  )
+  return <ReactTableGridCustom columns={columns} data={data} rowKey="id" />
 }
-
 🧱 Column Definition
+ts
+Copy code
 interface Column {
-  key: string
-  title: string
-  width?: number | string
-  render?: (value: any, row: any, rowIndex: number) => React.ReactNode
+  key: string                       // Column key (unique)
+  title: string                     // Column header title
+  width?: number | string           // Optional column width
+  render?: (value: any, row: any, rowIndex: number) => React.ReactNode // Custom cell render
 }
-
-Example with custom render:
+Example with custom render
+ts
+Copy code
 const columns = [
   {
     key: 'name',
@@ -89,7 +73,6 @@ const columns = [
     ),
   },
 ]
-
 📌 Props
 Prop	Type	Required	Description
 columns	Column[]	✅	Table column configuration
@@ -97,10 +80,11 @@ data	any[]	✅	Data source
 rowKey	string	✅	Unique key for each row
 className	string	❌	Custom CSS class
 style	CSSProperties	❌	Inline styles
-🎨 Styling
 
 You can fully customize the table using your own CSS:
 
+css
+Copy code
 .react-table-grid {
   border: 1px solid #e5e7eb;
 }
@@ -108,12 +92,9 @@ You can fully customize the table using your own CSS:
 .react-table-grid-row:hover {
   background-color: #f9fafb;
 }
-
-
 Or wrap it inside your design system (Tailwind, AntD, MUI, etc).
 
 📂 Build Output
-
 This package is built using tsup:
 
 dist/index.esm.js – ES Module
@@ -123,7 +104,6 @@ dist/index.cjs.js – CommonJS
 dist/index.d.ts – Type definitions
 
 🧪 Compatibility
-
 React >= 17
 
 React DOM >= 17
@@ -131,9 +111,9 @@ React DOM >= 17
 Node >= 16
 
 🛠 Development
+bash
+Copy code
 npm install
 npm run build
-
 📄 License
-
 MIT © mkt-loitd

package/dist/index.css

@@ -55,3 +55,100 @@ 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

@@ -1,7 +1,9 @@
-import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } 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';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
 interface IPaginationParams$1 {
@@ -11,7 +13,7 @@ interface IPaginationParams$1 {
 interface IObjectDynamic {
     [key: string]: any;
 }
-interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
+interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
 }
 interface useShowHideColumnParameter<T, SR = unknown> {
     nameLocal?: string;
@@ -49,7 +51,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     data?: T[];
     /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
-    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     /** Nếu hàm rowKeyGetter nên dùng useCallback*/
     rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
     hiddenPaginationText?: boolean;
@@ -61,7 +63,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
-    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination>>;
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
@@ -76,10 +78,139 @@ interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K
 }
 declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
 
+interface ContextMenuProps {
+    selector: string;
+    children?: ReactNode;
+    zIndex?: number;
+}
+
+interface IMainResponse<T = any> {
+    success?: boolean;
+    status?: 'success' | 'error' | 'warning';
+    data?: T;
+    payload?: {
+        data?: T;
+        [key: string]: any;
+    };
+    message?: {
+        key: string;
+        [key: string]: any;
+    };
+    error?: any;
+}
+interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
+    id?: string | number;
+    field?: F;
+    value?: V;
+    data?: T;
+    [key: string]: any;
+}
+interface Account {
+    id?: string | number;
+    username?: string;
+    password?: string;
+    email?: string;
+    status?: string;
+    [key: string]: any;
+}
+interface Post {
+    id?: string | number;
+    title?: string;
+    content?: string;
+    createdAt?: number;
+    [key: string]: any;
+}
+interface AppSettings {
+    [key: string]: any;
+}
+interface ISetConfigPagination {
+    page?: number;
+    limit?: number;
+    total?: number;
+    [key: string]: any;
+}
+type ITaskName = string;
+
+interface IActionUiUtilBy {
+    action?: string;
+    [key: string]: any;
+}
+interface IPayloadStartAction {
+    action?: string;
+    [key: string]: any;
+}
+
+interface Proxy {
+    id?: string;
+    host?: string;
+    port?: number;
+    username?: string;
+    password?: string;
+    protocol?: string;
+    provider?: string;
+    [key: string]: any;
+}
+
+interface IPayloadRemoveProxy {
+    ids: string[];
+}
+interface IPayloadService {
+    updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
+    removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
+    copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
+    actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
+    updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
+    deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
+    removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
+    startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
+    updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
+    useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
+    exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
+    setAction?: Dispatch<SetStateAction<ITaskName>>;
+}
+
+type IDispatchState<T> = Dispatch<SetStateAction<T>>;
+
+interface IExpandValue extends IPayloadService {
+    t?: TFunction<any, any>;
+    setConfigSearch?: IDispatchState<ISetConfigPagination>;
+    setSelectedRecords?: Dispatch<ReadonlySet<string>>;
+    setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
+    setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
+    setIsCopy?: Dispatch<SetStateAction<boolean>>;
+    setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
+    setIsBackup?: Dispatch<SetStateAction<boolean>>;
+}
+type configContextMenuType = {
+    Icon: (prop?: any) => ReactNode;
+    action: string;
+    onClick?: (value: string[], expandValue: IExpandValue) => void;
+    children?: configContextMenuType[];
+};
+interface RenderContextMenuProps {
+    renderData?: configContextMenuType[];
+    valueClickItem?: any;
+    expandValue?: IExpandValue;
+}
+
+interface TableStyleWapperProps {
+    children?: ReactNode;
+    contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
+        selector?: string;
+    };
+    renderContext?: RenderContextMenuProps;
+    clsTablecustom?: string;
+    idWapper?: string;
+}
+interface TableStyleContextMenuWapperComponent extends FC<TableStyleWapperProps> {
+    getIdFromOutside?: (externalId?: string) => string;
+}
+declare const TableStyleContextMenuWapper: TableStyleContextMenuWapperComponent;
+
 interface IPaginationParams {
     pageSize?: number;
     page?: number;
 }
 type Maybe<T> = T | undefined | null;
 
-export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, useShowHideColumn };
+export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } 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';
 
 type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
 interface IPaginationParams$1 {
@@ -11,7 +13,7 @@ interface IPaginationParams$1 {
 interface IObjectDynamic {
     [key: string]: any;
 }
-interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
+interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
 }
 interface useShowHideColumnParameter<T, SR = unknown> {
     nameLocal?: string;
@@ -49,7 +51,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     data?: T[];
     /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
-    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     /** Nếu hàm rowKeyGetter nên dùng useCallback*/
     rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
     hiddenPaginationText?: boolean;
@@ -61,7 +63,7 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
-    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination>>;
+    setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
@@ -76,10 +78,139 @@ interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K
 }
 declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
 
+interface ContextMenuProps {
+    selector: string;
+    children?: ReactNode;
+    zIndex?: number;
+}
+
+interface IMainResponse<T = any> {
+    success?: boolean;
+    status?: 'success' | 'error' | 'warning';
+    data?: T;
+    payload?: {
+        data?: T;
+        [key: string]: any;
+    };
+    message?: {
+        key: string;
+        [key: string]: any;
+    };
+    error?: any;
+}
+interface IFieldUpdateAndCheck<T = any, F = any, V = any> {
+    id?: string | number;
+    field?: F;
+    value?: V;
+    data?: T;
+    [key: string]: any;
+}
+interface Account {
+    id?: string | number;
+    username?: string;
+    password?: string;
+    email?: string;
+    status?: string;
+    [key: string]: any;
+}
+interface Post {
+    id?: string | number;
+    title?: string;
+    content?: string;
+    createdAt?: number;
+    [key: string]: any;
+}
+interface AppSettings {
+    [key: string]: any;
+}
+interface ISetConfigPagination {
+    page?: number;
+    limit?: number;
+    total?: number;
+    [key: string]: any;
+}
+type ITaskName = string;
+
+interface IActionUiUtilBy {
+    action?: string;
+    [key: string]: any;
+}
+interface IPayloadStartAction {
+    action?: string;
+    [key: string]: any;
+}
+
+interface Proxy {
+    id?: string;
+    host?: string;
+    port?: number;
+    username?: string;
+    password?: string;
+    protocol?: string;
+    provider?: string;
+    [key: string]: any;
+}
+
+interface IPayloadRemoveProxy {
+    ids: string[];
+}
+interface IPayloadService {
+    updateByClipboard?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, string[], keyof Account>, unknown>;
+    removeFieldBy?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Array<keyof Account>, string[]>, unknown>;
+    copyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, string, string[]>, unknown>;
+    actionBy?: UseMutateFunction<IMainResponse<string[]>, Error, IFieldUpdateAndCheck<Account, IActionUiUtilBy, string[]>, unknown>;
+    updateAccountByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Account, Partial<Account>, string[]>, unknown>;
+    deleteProxy?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadRemoveProxy, unknown>;
+    removePostByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Post, undefined, string[]>, unknown>;
+    startAction?: UseMutateFunction<IMainResponse<boolean>, Error, IPayloadStartAction, unknown>;
+    updateSettings?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<AppSettings, object, boolean>, unknown>;
+    useCopyProxyByField?: UseMutateFunction<IMainResponse<boolean>, Error, IFieldUpdateAndCheck<Proxy, string, string[]>[], unknown>;
+    exportLinkSuccess?: UseMutateFunction<IMainResponse<boolean>, Error, ITaskName, unknown>;
+    setAction?: Dispatch<SetStateAction<ITaskName>>;
+}
+
+type IDispatchState<T> = Dispatch<SetStateAction<T>>;
+
+interface IExpandValue extends IPayloadService {
+    t?: TFunction<any, any>;
+    setConfigSearch?: IDispatchState<ISetConfigPagination>;
+    setSelectedRecords?: Dispatch<ReadonlySet<string>>;
+    setIsShowEdit?: Dispatch<SetStateAction<boolean>>;
+    setIsOpenEditContent?: Dispatch<SetStateAction<boolean>>;
+    setIsCopy?: Dispatch<SetStateAction<boolean>>;
+    setIsChangeCate?: Dispatch<SetStateAction<boolean>>;
+    setIsBackup?: Dispatch<SetStateAction<boolean>>;
+}
+type configContextMenuType = {
+    Icon: (prop?: any) => ReactNode;
+    action: string;
+    onClick?: (value: string[], expandValue: IExpandValue) => void;
+    children?: configContextMenuType[];
+};
+interface RenderContextMenuProps {
+    renderData?: configContextMenuType[];
+    valueClickItem?: any;
+    expandValue?: IExpandValue;
+}
+
+interface TableStyleWapperProps {
+    children?: ReactNode;
+    contextMenuProps?: Omit<ContextMenuProps, 'selector' | 'children'> & {
+        selector?: string;
+    };
+    renderContext?: RenderContextMenuProps;
+    clsTablecustom?: string;
+    idWapper?: string;
+}
+interface TableStyleContextMenuWapperComponent extends FC<TableStyleWapperProps> {
+    getIdFromOutside?: (externalId?: string) => string;
+}
+declare const TableStyleContextMenuWapper: TableStyleContextMenuWapperComponent;
+
 interface IPaginationParams {
     pageSize?: number;
     page?: number;
 }
 type Maybe<T> = T | undefined | null;
 
-export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, useShowHideColumn };
+export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   ReactTableGridCustom: () => ReactTableGridCustom,
   ReactTableGridCustomPaginationClient: () => ReactTableGridCustomPaginationClient,
+  TableStyleContextMenuWapper: () => TableStyleContextMenuWapper,
   useShowHideColumn: () => useShowHideColumn
 });
 module.exports = __toCommonJS(index_exports);
@@ -527,9 +528,265 @@ var ReactTableGridCustomPaginationClientInner = ({
 var ReactTableGridCustomPaginationClient = (0, import_react5.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_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,
+  contextMenuProps,
+  clsTablecustom,
+  renderContext,
+  idWapper: externalId
+}) => {
+  if (!isClient) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+  }
+  const idWapper = externalId != null ? externalId : (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_runtime9.jsx)(
+          ContextMenu_default,
+          {
+            selector: `[id="wapper_menu_context-${idWapper}"] .rdg`,
+            ...contextMenuProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderContextMenu_default, { ...renderContext })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var TableStyleContextMenuWapper = (0, import_react10.memo)(
+  TableStyleContextWapper
+);
+TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
+  return `wapper_menu_context-${externalId != null ? externalId : "default-id"}`;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ReactTableGridCustom,
   ReactTableGridCustomPaginationClient,
+  TableStyleContextMenuWapper,
   useShowHideColumn
 });

package/dist/index.mjs

@@ -504,8 +504,264 @@ var ReactTableGridCustomPaginationClientInner = ({
 var ReactTableGridCustomPaginationClient = memo2(
   ReactTableGridCustomPaginationClientInner
 );
+
+// src/component/ui/Table/TableStyleContextWapper.tsx
+import { memo as memo3, useId as useId2 } 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";
+var isClient = typeof window !== "undefined";
+var TableStyleContextWapper = ({
+  children,
+  contextMenuProps,
+  clsTablecustom,
+  renderContext,
+  idWapper: externalId
+}) => {
+  if (!isClient) {
+    return /* @__PURE__ */ jsx9(Fragment3, { children });
+  }
+  const idWapper = externalId != null ? externalId : useId2();
+  return /* @__PURE__ */ jsxs4(
+    "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
+      ]
+    }
+  );
+};
+var TableStyleContextMenuWapper = memo3(
+  TableStyleContextWapper
+);
+TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
+  return `wapper_menu_context-${externalId != null ? externalId : "default-id"}`;
+};
 export {
   ReactTableGridCustom,
   ReactTableGridCustomPaginationClient,
+  TableStyleContextMenuWapper,
   useShowHideColumn
 };

package/package.json

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