es-grid-template 1.8.85 → 1.8.87

package/es/grid-component/type.d.ts

@@ -569,6 +569,7 @@ export type ContextInfo<RecordType> = {
     rowInfo: {
         rowData: RecordType | null;
     };
+    field: string | number;
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     item: ItemType;
 };

package/es/group-component/hook/utils.d.ts

@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
 }[];

package/es/group-component/table/TableWrapper.js

@@ -57,8 +57,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -109,14 +110,15 @@ const TableWrapper = props => {
       e.target.classList.remove('ui-rc-table-ping-left');
     }
   };
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
     setMenuVisible(true);

package/es/table-component/ContextMenu.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { ContextInfo, ContextMenuItem } from "./../grid-component/type";
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
-    rowData: RecordType | null;
+    rowData: any;
     contextMenuItems: ContextMenuItem[];
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     open: boolean;

package/es/table-component/ContextMenu.js

@@ -51,9 +51,10 @@ const ContextMenu = props => {
           setOpen(false);
           contextMenuClick?.({
             rowInfo: {
-              rowData
+              rowData: rowData.rowData
             },
             event: e.domEvent,
+            field: rowData.field,
             item: {
               ...findItemByKey(contextMenuItems, 'key', e.key),
               id: e.key

package/es/table-component/body/EditableCell.js

@@ -351,7 +351,6 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable ?? undefined,
-          rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
             onChange(val ?? '');

package/es/table-component/body/TableBodyRow.js

@@ -77,7 +77,12 @@ const TableBodyRow = ({
     },
     onContextMenu: e => {
       if (contextMenuItems && contextMenuItems.length) {
-        onContextMenu?.(row.original)(e);
+        const cell = e.target.closest('[data-col-key]');
+        const colKey = cell?.getAttribute('data-col-key');
+        onContextMenu?.({
+          rowData: row.original,
+          field: colKey
+        })(e);
       }
     }
   }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {

package/es/table-component/hook/utils.d.ts

@@ -40,6 +40,7 @@ export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
+export declare const flatColumnsWithoutParent: (columns: any[]) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];

package/es/table-component/hook/utils.js

@@ -275,6 +275,24 @@ export const flatColumns2 = columns => {
     }];
   }, []);
 };
+export const flatColumnsWithoutParent = columns => {
+  return columns.reduce((list, column) => {
+    const subColumns = column.children;
+    if (column.field === 'selection_column') {
+      return [...list, {
+        ...column
+      }];
+    }
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns2(subColumns).map(subColum => ({
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      ...column
+    }];
+  }, []);
+};
 export const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
   if (thousandSeparator) {
     if (decimalSeparator) {
@@ -910,9 +928,9 @@ function getSortValue(item, field) {
 }
 function compareValues(a, b, order) {
   const desc = order === "descend";
-  if (a == null && b == null) return 0;
-  if (a == null) return desc ? 1 : -1;
-  if (b == null) return desc ? -1 : 1;
+  if (a === null && b === null) return 0;
+  if (a === null) return desc ? 1 : -1;
+  if (b === null) return desc ? -1 : 1;
 
   // Nếu là số
   if (typeof a === "number" && typeof b === "number") {

package/es/table-component/style.scss

@@ -315,14 +315,19 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         // background-color: $body-color;
         background-color: inherit;
 
+        &.#{$prefix}-grid-cell-text-wrap {
+          .ui-rc_cell-content {
+             word-break: break-word;
+          }
+
+        }
+
         &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           word-break: keep-all;
 
-
-
         }
 
         &.#{$prefix}-grid-cell-index-selected {

package/es/table-component/table/TableWrapper.js

@@ -48,7 +48,7 @@ const TableWrapper = props => {
     total
   } = pagination ?? {};
   const [menuVisible, setMenuVisible] = React.useState(false);
-  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [selectedRowData, setSelectedRowData] = React.useState(undefined);
   const [position, setPosition] = React.useState({
     x: 0,
     y: 0,
@@ -59,8 +59,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -114,14 +115,15 @@ const TableWrapper = props => {
       e.target.classList.remove('ui-rc-table-ping-left');
     }
   };
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
 

package/es/table-virtuoso/body/TableBodyRow.js

@@ -60,6 +60,12 @@ const TableBodyRow = ({
     },
     onContextMenu: e => {
       if (contextMenuItems && contextMenuItems.length) {
+        const cell = e.target.closest('[data-col-key]');
+        const colKey = cell?.getAttribute('data-col-key');
+        onContextMenu?.({
+          rowData: row.original,
+          field: colKey
+        })(e);
         onContextMenu?.(row.original)(e);
       }
     }

package/es/table-virtuoso/table/TableWrapper.js

@@ -35,7 +35,7 @@ const TableWrapper = props => {
     rows
   } = table.getRowModel();
   const [menuVisible, setMenuVisible] = React.useState(false);
-  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [selectedRowData, setSelectedRowData] = React.useState(undefined);
   const [position, setPosition] = React.useState({
     x: 0,
     y: 0,
@@ -46,8 +46,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -56,14 +57,15 @@ const TableWrapper = props => {
     }
     return propContextMenuItems;
   }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
     setMenuVisible(true);

package/lib/grid-component/type.d.ts

@@ -569,6 +569,7 @@ export type ContextInfo<RecordType> = {
     rowInfo: {
         rowData: RecordType | null;
     };
+    field: string | number;
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     item: ItemType;
 };

package/lib/group-component/table/TableWrapper.js

@@ -66,8 +66,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -118,14 +119,15 @@ const TableWrapper = props => {
       e.target.classList.remove('ui-rc-table-ping-left');
     }
   };
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
     setMenuVisible(true);

package/lib/table-component/ContextMenu.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { ContextInfo, ContextMenuItem } from "./../grid-component/type";
 export declare const findItemByKey: (array: any[], key: string, value: any) => any;
 type Props<RecordType> = {
-    rowData: RecordType | null;
+    rowData: any;
     contextMenuItems: ContextMenuItem[];
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     open: boolean;

package/lib/table-component/ContextMenu.js

@@ -60,9 +60,10 @@ const ContextMenu = props => {
           setOpen(false);
           contextMenuClick?.({
             rowInfo: {
-              rowData
+              rowData: rowData.rowData
             },
             event: e.domEvent,
+            field: rowData.field,
             item: {
               ...findItemByKey(contextMenuItems, 'key', e.key),
               id: e.key

package/lib/table-component/body/EditableCell.js

@@ -359,7 +359,6 @@ const EditableCell = props => {
           options: options,
           defaultOptions: options,
           value: valueSelectTable ?? undefined,
-          rowData: record,
           autoDestroy: true,
           onChange: (val, option) => {
             onChange(val ?? '');

package/lib/table-component/body/TableBodyRow.js

@@ -84,7 +84,12 @@ const TableBodyRow = ({
     },
     onContextMenu: e => {
       if (contextMenuItems && contextMenuItems.length) {
-        onContextMenu?.(row.original)(e);
+        const cell = e.target.closest('[data-col-key]');
+        const colKey = cell?.getAttribute('data-col-key');
+        onContextMenu?.({
+          rowData: row.original,
+          field: colKey
+        })(e);
       }
     }
   }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {

package/lib/table-component/hook/utils.d.ts

@@ -40,6 +40,7 @@ export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
+export declare const flatColumnsWithoutParent: (columns: any[]) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];

package/lib/table-component/hook/utils.js

@@ -28,7 +28,7 @@ exports.filterByIds = filterByIds;
 exports.filterDataByColumns = filterDataByColumns;
 exports.findAllChildrenKeys2 = findAllChildrenKeys2;
 exports.findFirst = findFirst;
-exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
+exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumnsWithoutParent = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getAllChildren = getAllChildren;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
@@ -356,6 +356,25 @@ const flatColumns2 = columns => {
   }, []);
 };
 exports.flatColumns2 = flatColumns2;
+const flatColumnsWithoutParent = columns => {
+  return columns.reduce((list, column) => {
+    const subColumns = column.children;
+    if (column.field === 'selection_column') {
+      return [...list, {
+        ...column
+      }];
+    }
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns2(subColumns).map(subColum => ({
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      ...column
+    }];
+  }, []);
+};
+exports.flatColumnsWithoutParent = flatColumnsWithoutParent;
 const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
   if (thousandSeparator) {
     if (decimalSeparator) {
@@ -1005,9 +1024,9 @@ function getSortValue(item, field) {
 }
 function compareValues(a, b, order) {
   const desc = order === "descend";
-  if (a == null && b == null) return 0;
-  if (a == null) return desc ? 1 : -1;
-  if (b == null) return desc ? -1 : 1;
+  if (a === null && b === null) return 0;
+  if (a === null) return desc ? 1 : -1;
+  if (b === null) return desc ? -1 : 1;
 
   // Nếu là số
   if (typeof a === "number" && typeof b === "number") {

package/lib/table-component/style.scss

@@ -315,14 +315,19 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         // background-color: $body-color;
         background-color: inherit;
 
+        &.#{$prefix}-grid-cell-text-wrap {
+          .ui-rc_cell-content {
+             word-break: break-word;
+          }
+
+        }
+
         &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           word-break: keep-all;
 
-
-
         }
 
         &.#{$prefix}-grid-cell-index-selected {

package/lib/table-component/table/TableWrapper.js

@@ -57,7 +57,7 @@ const TableWrapper = props => {
     total
   } = pagination ?? {};
   const [menuVisible, setMenuVisible] = _react.default.useState(false);
-  const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
+  const [selectedRowData, setSelectedRowData] = _react.default.useState(undefined);
   const [position, setPosition] = _react.default.useState({
     x: 0,
     y: 0,
@@ -68,8 +68,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -123,14 +124,15 @@ const TableWrapper = props => {
       e.target.classList.remove('ui-rc-table-ping-left');
     }
   };
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
 

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -67,6 +67,12 @@ const TableBodyRow = ({
     },
     onContextMenu: e => {
       if (contextMenuItems && contextMenuItems.length) {
+        const cell = e.target.closest('[data-col-key]');
+        const colKey = cell?.getAttribute('data-col-key');
+        onContextMenu?.({
+          rowData: row.original,
+          field: colKey
+        })(e);
         onContextMenu?.(row.original)(e);
       }
     }

package/lib/table-virtuoso/table/TableWrapper.js

@@ -45,7 +45,7 @@ const TableWrapper = props => {
     rows
   } = table.getRowModel();
   const [menuVisible, setMenuVisible] = _react.default.useState(false);
-  const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
+  const [selectedRowData, setSelectedRowData] = _react.default.useState(undefined);
   const [position, setPosition] = _react.default.useState({
     x: 0,
     y: 0,
@@ -56,8 +56,9 @@ const TableWrapper = props => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
         rowInfo: {
-          rowData: selectedRowData
-        }
+          rowData: selectedRowData.rowData
+        },
+        field: selectedRowData.field
       });
       return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
     }
@@ -66,14 +67,15 @@ const TableWrapper = props => {
     }
     return propContextMenuItems;
   }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
-  const onContextMenu = data => event => {
+  const onContextMenu = args => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
-    setSelectedRowData(data);
+    setSelectedRowData(args);
     contextMenuOpen?.({
       rowInfo: {
-        rowData: data
+        rowData: args.rowData
       },
+      field: args.field,
       event
     });
     setMenuVisible(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.85",
+  "version": "1.8.87",
   "description": "es-grid-template",
   "keywords": [
     "react",